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

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

Recent Posts

Categories

Tool 日々 Web Biz Net Apple MS ことば News Unix howto Food PHP Movie Edu Community Book Security Text TV Perl Ruby Music Pdoc 生き方 RDoc ViewCVS CVS Rsync Disk Mail FreeBSD Cygwin PDF Photo Zebedee Debian OSX Comic Cron Sysadmin Font Analog iCal Sunbird DNS Linux Wiki Emacs Thunderbird Sitecopy Terminal Drawing tDiary AppleScript Life Money Omni PukiWiki Xen XREA Zsh Screen CASL Firefox Fink zsh haXe Ecmascript PATH_INFO SQLite PEAR Lighttpd FastCGI Subversion au prototype.js jsUnit Apache Trac Template Java Rhino Mochikit Feed Bloglines CSS del.icio.us SBS qwikWeb gettext Ajax JSDoc Rails HTML CHM EPWING NDTP EB IE CLI ck ThinkPad Toy WSH RFC readline rlwrap ImageMagick epeg Frenzy sysprep Ubuntu MeCab DTP ERD DBMS eclipse Eclipse Awk RD Diigo XAMPP RubyGems PHPDoc iCab DOM YAML Camino Geekmonkey w3m Scheme Gauche Lisp JSAN Google VMware DSL SLAX Safari Markdown Textile IRC Jabber Fastladder MacPorts LLSpirit CPAN Mozilla Twitter OpenFL Rswatch ITS NTP GUI Pragger Yapra XML Mobile Git Study JSON VirtualBox Samba Pear Growl Mercurial Rack Capistrano Rake Win RSS Mechanize Sitemaps Android JavaScript Python RTM OOo iPod Yahoo Unicode Github iTunes God SBM friendfeed Friendfeed HokuUn Sinatra TDD Test Project Evernote iPad Geohash Location Map Search Simplenote Image WebKit RSpec Phone CSV WiMAX USB Chrome RubyKaigi RubyKaigi2011 Space CoffeeScript Nokogiri Hpricot Rubygems jQuery Node GTD CI UX Design VCS Kanazawa.rb Kindle Amazon Agile Vagrant Chef Windows Composer Dotenv PaaS Itamae SaaS Docker Swagger Grape WebAPI Microservices OmniAuth HTTP 分析基盤 CDN Terraform IaaS HCL Webpack Vue.js BigQuery Middleman CMS AWS PNG Laravel Selenium OAuth OpenAPI GitHub UML GCP TypeScript SQL Hanami Document SVG AsciiDoc Pandoc DocBook Develop Jekyll macOS Node.js Vite Heroku Transformer AI Data Cloud Wasm