2011-08-29

jQueryMobileとpjaxについて分かったこと分からないこと

一部記法が JSer っぽくなく、Rubyist っぽいですが気にしないでください。HTML 5 関連の話は全然追いつけてないのでちょっと慌てました。

まとめ

beta 3 まで待つ

pjax

pjax とは History#pushState と Ajax の合わせ技のこと

と思っていいのかな。

Ajax を利用しているので伝統的な意味でのページ遷移をせず、なおかつ任意の URI や効果を作ることができるもの。

HTML 5 の History API がなぜ出てきたのかは恐らく

  • 素朴な Ajax は戻るボタンが死亡するのでどうにかして history を残す必要がある
  • location は hash 以外を書き換えるとページ遷移が発生してしまう
  • location.hash の書き換えが history に残るかどうかは実装依存

だから。たぶん。

jQueryMobileとpjax

beta 2

beta2 の段階では # を使った通常の Ajax でリンクを処理することでページ遷移時のアニメーションを実現している。つまり、

pjax は利用していない。

しかしこの方法は

referrer が必ず最初にアクセスしたページになる

という致命的な問題がある。「聞いてないよー」って感じ。最初から Ajax アプリケーションを作っているならそういう風に考えればいいだけなんだけど、jQuery Mobile を使う理由は

Ajax アプリを作りたいからじゃなくて、既存のマークアップへのルールを受け入れる代わりにスマートフォン対応サイトを手軽に用意できるから

だと思うので、この仕様はちょっと受け入れられない。この挙動は「通常の Web」とは明らかに異なる世界だから。

beta 3

2011-08-29 現在で beta 3 はまだリリースされていないけど、

beta 2 の release note にすでに beta 3 で pushState 対応するよ!と言われているので beta 3 では上のような状況とは変わってきます。

ただし対応状況は iOS 5+, Android 2.2+ になるのかな?

で、beta 2 現在どうしたか

$.mobile.ajaxEnabled = false

にしてみた。つまり

アニメーションを捨てて普通の URI を採った。

beta 2 の段階でも自前で URI の書き換えをし続けて通常の遷移のように見せることはまぁできるんだけど、beta 3 で状況が変わるのが目に見えているのでわざわざ凝ったギミックを beta 2 用に作り込むのはちょっとあり得ない判断ですよね。

beta 3 出てから考えます。

iOS 4 対応とか

github で確認したんだけど、iOS 4 では例のアニメーションしないんですね。Android 2.2 では動作するのでそういう判別をしているようです。で、なんでだろうと思ったらこんなものを見つけました。

#3: We could use History.js for cross-browser compatibility - Issues - defunkt/jquery-pjax - GitHub

要するに iOS 4 の WebKit はバグってるから知らん、て感じなのかな。History.js 噛ませばもしかしたら動くかも。試した人いるかな? 自分はまだやってみないけど。

jquery-pjax と URI

ここから先は脱線。

defunkt/jquery-pjax - GitHub

jQuery で pjax を手軽に実現するための plugin があるんだけど、これは

サーバ側は request header の内容を見て返すコンテンツを変える

というアプローチになっている。この方が jQuery 側の処理は軽いし、Rails 的には layout の調整とかだけで十分対応可能

pjaxが便利過ぎて鼻血出そうになった(railsのサンプル付き) - SELECT * FROM life;

で確かに便利そうなんだけど、

Twitter / @komasshu: でもjquery-pjaxがやってるアプローチ(X- …

とかあって、この辺は実は自分もモヤモヤしてたりする。

一つのURIに異なる表現を割り当てるのはどうなんだろう?

URI 的にも異なる表現1だということが分かった方がよくないかな。

関連しそうなもの

  1. リソース自体は同一と看做してもいいかなと思うので「表現」にしておく 

About

例によって個人のなんちゃらです