jquery mobile管理化に別のjavascriptを

2012/6/5 [22:15:07] (火)

jquery mobileは、一度ページを読み込んだらいつまでどこまでDOMを保持管理してるのかが、複雑に入り組んでいる。サイトに着地して、ページのヘッダまでを読み込んだら、あとはbody部分のDOMの書き換えでページ表示している。リンク、というか、ページの取得は ajax が基本。そのために、id属性などは、ページに一意ではなくて、サイトで一意にしておいて、DOMまわりのトラブルを避けることが推奨されている。ajaxとidなどのプロパティは密接だからねえ。
このあたり「jquery mobile ポケットリファレンス」の Chapter20 ページイベントに図があって、ちょっとわかりやすい、かも。

やろうとしたことを具体的に。

PCサイトでは。
・本の詳細ページを開くと、そこには立ち読みテキストを読み込んで表示するコンテナがある。
・このコンテナにページャーがあって、ページリンククリックで ajax を走らせて、立ち読みテキストの次ページを取得して、コンテナ内を書き換えている。

上記したように、jquery mobileのDOM管理下だ。自作Javascriptで、$.ajaxを使ってページを取得する…スキルはわたしにはない。該当ページだけ ajaxではなくて、サイト外リンクを読むのと同様、ページ遷移するやりかたも用意されているが、それは jquery mobileの作法流儀じゃない。該当ページは、perlで動的に作ってるので、ページの中にJSONのデータを埋め込んで、evalでオブジェクトに読み込んでおくことにした。

というのが昨日までのあらすじ。

あとは、読み込んだオブジェクトを該当コンテナに $(#id).html(obj) とやれば楽勝、のはずだったのが、表示されるのは初めてページを読み込んだ時だけ。次にjquery mobile がajaxで遷移するとなにも表示されない。
alert(obj)では表示される。コンテナに直接 document.write(obj) とやると、エラー。とりあえず、pageshow とか pagecreate とか pagebeforecreate とか、それっぽいところにalertを入れまくって何が起こってるのかみた。
$(document).bind(pagebeforeload, function(e,d){ alert(obj) }); $(document).bind(pageshow, function(e,d){ alert(obj) });
見てると。一度、オブジェクトに読み込んだら、いつまでも保持してる、っぽい。てことは、#id も掴んでまわしてる様子。そんなところに $(#id).html(obj) とやっても、受け付けてくれない、ということ、かな。
なので、pagebeforeload ページを読み込む前のところで、無理やり $(#id).remove() と初期化（？）したら、意図通り立ち読みテキストを該当コンテナに流し込むことができた。

iphoneで見る創作文芸見本誌会場HappyReading
【象印社「ソラ」著者：永瀬月臣・鳥久保咲人・くまっこイラスト：あめ】
ヒラギノ明朝の縦書きはバランスもよくて、ほれぼれする美しさ。フォントは大事。小説に縦書きは大事、というのがよくわかるスクリーンショット。

これで公開だ、と思って、ヨメのAndroidで確認して愕然。というか慄然。縦書きになってない。
Androidもiphoneと同じwebkitのはずなのに、AndroidのブラウザはまだCSS3のwriting-modeに対応してないのだ。なんじゃそりゃ、と思って検索してみたら、Androidは個々ばらばらで、怨嗟呪いの声があちこちからあがっていた。

てことで、今まで公開していたスマホサイトも android用に残しておくことに。
iphone のヒラギノ明朝がきれいな、新スマホサイト
android のために残した今までのスマホサイト

うーん。スマホになったらブラウザの対応は簡単だと思ったのに。