jQuery Mobile 1.0 RC1 を使って Twitter ビューワー作ってみた。
Trends や入力キーワードの検索結果を5秒ごとに更新しながら表示します。トップページの上の検索ボックスにキーワードを入力するか、Trends を選択して下さい。
細かいところはテキトーな作りです。
以下技術的な話。
jQuery Mobile を使ったページから、別サーバー (Twitter) の API を呼んでページをレンダリングする。楽勝だろうと思って作ってみたら、意外とここが jQuery Mobile の弱点っぽい感じがしたので説明したい。
まず、jQuery Mobile には page という概念があって、一つの DOM に複数の page を抱えることができる。
それぞれの page には、hash が割り当てられ、hash を指定した a タグのタップか、changePage によって遷移する。
上記ビューワーでも、ページ遷移で url バーの # 以降が変わることが分かると思う。
page から page への遷移は、DOM に遷移先の page が読み込まれていれば url の hash を変更してすぐにトランジションする。読み込まれていなかったら、 Ajax リクエストで page を取得する。（この間、ローディングアイコンが出る）
一枚の HTML ファイルに複数の page がある構成を、 Multi-page という。
さて、ここで二つ問題があって、
何かの Web API が返す JSON を元にページをレンダリングしたい
かつ、
Multi-page 構成にしたい
場合はどうすればいいだろう？
REST API で取得した一覧を元にレンダリングして、リストアイテムの ID を元に別の REST API を呼ぶというのは、一般的によくあるケースだ。
しかし、Multi-page では hash でページ遷移するのに、パラメータはどうすればいいのだろう？
この問題について、本家ドキュメントには hash からパラメータ部分を取り出して preventDefault する例がある。
jQuery Mobile and Dynamic Page Generation
この説明の中で出てくる、
.../index.html#item.html?id=1898432というのは uri として valid なの？というあたりが気になる。後述するが実はこれはブラウザの history に入らないため問題ない。
本家フォーラムでも議論になっているものの、sessionStorage や localStorage を使うと言う話まで出ている。
Passing Parameters Between Pages
どうせHTML1枚の中で閉じた話だし、ここを真面目にやっても、という感じもするので、シンプルに hidden の input に値をセットしてから遷移するという手もありそうだ。
(追記 10/22) すいませんやっぱこれだめでした。page enhancement が終わっていないとselectorで選択できない。 <input type="search" name="foo" /> を $(input[name="foo"]) とやっても取れないから。
長々と書いてあるが、公式ドキュメントの例でキーになるのは、
- toPage がまだ文字列の時点でトラップする
- パラメータを含む hash から、除去した hash に書き換える
- 直接 $.page() を呼んで page enhancement をやってしまう
- page を移動する前にコンテンツ生成を完了する
というあたりだ。
特に、パラメータを含む hash はイベントの中で解釈されて URL バーには入らない。
サンプルでは別の関数でコンテンツ生成して changePage しているが、個人的に $.widget が大好きなのでこちらがオススメ。 $.widget についてはそのうち書く。
ソースコードは github 参照。
fpt/jqmtwi
触ってみると気付くと思うが、トランジションのアニメーションの後に内容が表示されるので少し違和感が残る。
いずれにせよ、やっぱりurlにIDが入った方がいいと思うし、個人的にこんなことするくらいなら Multi-page を使わないで複数ページにして、サーバーサイドで API を呼んだ方が jQuery Mobile の正しい使い方だろう。
jQuery Mobile で HTML5 な Web アプリと言っても、HTML 1枚で JS で動けば OK なんてことはなくて、むしろ逆に hash や DOM キャッシュを考慮したサイト設計が必要になってくるのではないだろうか。
もよろしく
コメントする