2012-03-06
PlayBay

Play2.0 + pjax

がくぞ(@gakuzzzz)

アジェンダ

自己紹介
pjaxとは
Play2.0 + pjax DEMO
質疑応答

自己紹介

なかむらまなぶ / 中村学
がくぞ / @gakuzzzz
株式会社Tech to Value
https://twitter.com/#!/gakuzzzz
http://d.hatena.ne.jp/gakuzo/

pjaxとは？

の前にちょっと歴史のお勉強

Ajax

Asynchronous JavaScript + XML
2005年2月18日命名

Ajaxのメリット

部分的な情報だけですむのでデータ転送量が小さい
したがって通信速度が上がり、描画も速くなる
インタラクティブ！

Ajaxの問題点

リンクできない
ブラウザの履歴が使えない
Crawlerがコンテンツにアクセスできない
Refererに情報が残らない
JavaScriptが動作しないブラウザでは表示できない

fragment URL
登場

fragment URL

http://example.com/index.html#anchor ←コレ
location.hash を変更してリンクと履歴を使用可能に

でも結局

この問題は解決してない

Crawlerがコンテンツにアクセスできない
Refererに情報が残らない
JavaScriptが動作しないブラウザでは表示できない

#! specs
公開

#! specs

Googleが Making AJAX Applications Crawlable を公開
GoogleBot は #! を ?_escaped_fragment_= に読替える
_escaped_fragment_ パラメータのあるアクセスに
完全なHTMLを返せば検索インデックスに登録する

#! specs

#! specs に従えば検索エンジンに対応できる
Twitter などが現在も採用している
https://twitter.com/#!/gakuzzzz

それでもまだ

この問題は解決してない

GoogleBot以外のCrawlerがアクセスできない
Refererに情報が残らない
JavaScriptが動作しないブラウザでは表示できない

HTML5
History API

HTML5 History API

履歴操作を行うAPI

pushState: 履歴に追加する機能
popState: 戻る/進むの実行時に処理を行う機能

pjax登場

pjax

pushState + Ajax = pjax
Ajax時にHistory APIを呼ぶ jQuery plugin
GitHubで使われている

用語の注意

Ajax: アーキテクチャパターン名
pjax: ライブラリ名

pjaxの仕組み

クライアント

Ajax時ヘッダに X-PJAX を付与し現在のURLを書き換え、履歴に追加する
返ってきたHTML断片でページの一部を置き換える

サーバ

ヘッダに X-PJAX があればHTML断片を返し、無ければページ全体の完全なHTMLを返す

pjaxのメリット

全てのCrawlerがコンテンツにアクセス可能
Refererに情報が残る
JavaScriptが動作しないブラウザでも表示できる

DEMO

まとめ

pjax は Ajaxの様々な問題を解決する
Play2.0は柔軟なので複雑な pjax も楽に書ける
Scala凄い

資料