第19回html5とか勉強会 pjax
DESCRIPTION
pjax = pushState + ajaxのプレゼン これまでのajaxの課題を解決する、history api(pushStateなど)を使ったプラクティスです。TRANSCRIPT
PJAX ～ HTML5 時代の AJAX サイトプラクティス～
第 19 回 HTML5 とか勉強会こまつ けんさく
自己紹介名前： こまつけんさく
HTML5 とか勉強会スタッフGoogle 公認 API Expert (HTML5)
Microsoft Valuable Professional (Internet Explorer)
Twitter : http://twitter.com/komasshu
Blog : http://blog.livedoor.jp/kotesaki/
MAIN IDEA
pjax で、より良いAjax サイトを !!
今回の対象
Ajax を使って、サイトのコンテンツを切り替えるタイプ
いわゆる従来 Web サイトの Ajax 対応
例えば
今回対象としないものばりばりの Web アプリ
AGENDA
Ajax のおさらい
これまでの Ajax の課題
「戻る」への対応とソーシャルに優しく
サーチに対応するには？
全ての問題を解決する pjax
AGENDA
Ajax のおさらい
これまでの Ajax の課題
「戻る」への対応とソーシャルに優しく
サーチに対応するには？
全ての問題を解決する pjax
AJAX とは？ページを切り替えずに、データを取得／切り替える仕組み
Javascript を使い動的に利用new XMLHTTPRequest();$.ajax()
XML には限らない• json• Text• Html• ….
サンプル
特徴
• 速い• 安い• かっこいい
AGENDA
Ajax のおさらい
これまでの Ajax の課題
「戻る」への対応とソーシャルに優しく
サーチに対応するには？
全ての問題を解決する pjax
まずい書き方
「戻る」で戻れない
http://html5-19th.heroku.com/bad_ajax.html
ソーシャルに優しくない
HTML を見ても分からない<header> <h1> bad ajax sample. </h1> - doesn't care about states ;-( - </header> <nav> <ul> <li><a href="/0">semantics</a></li> <li><a href="/1">offline</a></li> <li><a href="/2">device</a></li> <li><a href="/3">connectivity</a></li> </ul> </nav> <article> </article> </body>
検索で引っかからない
AGENDA
Ajax のおさらい
これまでの Ajax の課題
「戻る」への対応とソーシャルに優しく
サーチに対応するには？
全ての問題を解決する pjax
ハッシュの利用
http://html5-19th.heroku.com/hash_ajax.html
ハッシュの利用FRAGMENT IDENTIFIER
これ
状態を HASH で指定
<nav> <ul> <li><a href="#0">semantics</a></li> <li><a href="#1">offline</a></li> <li><a href="#2">device</a></li> <li><a href="#3">connectivity</a></li> </ul> </nav>
HASHCHANGE EVENT
window.onhashchange = function(){ var href = “/”+location.hash.substring(1); // ID 取得 get(href); // ajax 処理}
See http://www.w3.org/TR/html5/history.html#hashchangeevent
効果と課題効果• 「戻る」に対応
• ソーシャルでも OK
• 状態が、 fragment identifier で指定されている
課題• サーチでは引っかからない
• Javascript off だと見れない
AGENDA
Ajax のおさらい
これまでの Ajax の課題
「戻る」への対応とソーシャルに優しく
サーチに対応するには？
全ての問題を解決する pjax
CASE1 : HASH-BANG
#!
HASH-BANG
これ
MAKING AJAX CRAWLABLE
http://googlewebmastercentral.blogspot.com/2009/10/proposal-for-making-ajax-crawlable.html
クローラー用の URL を作成
https://docs.google.com/present/view?id=dc75gmks_120cjkt2chf
HTTP://TWITTER.COM/?_ESCAPED_FRAGMENT_=/KOMASSHU
CASE2 : <A> でハッシュを指定しない
普通に HTML を記述（ /0 - /3 も同様）
<nav> <ul> <li><a href="/0">semantics</a></li> <li><a href="/1">offline</a></li> <li><a href="/2">device</a></li> <li><a href="/3">connectivity</a></li> </ul> </nav> <article> <h2>semantics</h2> <hr> <img src="/images/semantics.jpg"> <br> ving meaning to structure, semantics are front and center with HTML5. A richer set of tags, along with RDFa, microdata, and microformats, are enabling a more useful, data driven web for both programs and your users. </article>
JS でトリック
$("nav a").click(function(e){ e.preventDefault(); var href=$(this).attr("href"); location.hash=href;});
window.onhashchange = function(){ var href=location.hash.substring(1); get(href);}
参考） JQUERY-MOBILE(AUTOMATIC AJAX)
http://html5-19th.heroku.com/smp/
HTML を AJAX に自動変換<ul data-role="listview" data-inset="true"> <li><a href="./0">semantics</a></li> <li><a href="./1">offline</a></li> <li><a href="./2">device</a></li> <li><a href="./3">connectivity</a></li> </ul>
<script src="/javascripts/jquery.mobile-1.0b1.min.js"></script>
＋
クローラーには普通のHTML
/smp
/smp/0
/smp/1
更に。。。
Javascript off のユーザーも OK!!
問題/smp/#/smp/0
Javascript on Javascript off
Restful でもない。。。
AGENDA
Ajax のおさらい
これまでの Ajax の課題
「戻る」への対応とソーシャルに優しく
サーチに対応するには？
全ての問題を解決する pjax
PJAXPUSHSTATE + AJAX
http://html5-19th.heroku.com/0
! FRAGMENT IDENTIFIER
HTML を最初に作るPROGRESSIVE ENHANCEMENT
http://html5-19th.heroku.com/0 http://html5-19th.heroku.com/1
ステップ 1 ページの切り替えを抑制
$('nav a').each(function(e){ // コンテキストメニュー ( 右クリックなど）の時は、 pjax 処理はしない if ( e.which > 1 || e.metaKey ) return true
var href = $(this).attr('href'); $(this).click(function(e){ e.preventDefault(); pjaxGet(href, true); });});
ステップ 2 HISTORY APIPUSHSTATE
var pjaxGet = function(file, push) { $("article").hide(); $.get("/data"+file, function(data){ $("article").html(data).fadeIn(); }); if(push) { history.pushState("", “", file); }}
See. http://www.w3.org/TR/html5/history.html#history
ステップ 3 POPSTATE「戻る」への対応
$(window).bind('popstate', function(e){ if(initState) { // $(window).load 時のため、華麗にスルー initState = false; return; } var href=location.href.match(/[0-9]?$/)[0]; pjaxGet("/"+href, false);});
専用 HTML( レイアウト無し ) を AJAX で GET
http://html5-19th.heroku.com/data/1
SINATRA の場合
get '/data/:id' do @data = datas[params[:id].to_i] erb :index, :layout => falseend
get '/:id' do @data = datas[params[:id].to_i] erb :indexend
普通の HTML
Ajax 用
なので。。。「戻る」も OK
ソーシャルにも優しく
クローラーへも対応
Javascript off のユーザも OK
JQUERY-PJAX
https://github.com/defunkt/jquery-pjax
使い方$('nav a').pjax('article');
def pjax? env['HTTP_X_PJAX']end
get '/pjax-jquery/:id' do @data = datas[params[:id].to_i] erb :index, :views => "pjax_jquery_views", :layout => !pjax?end
http://example.net/2?_pjax=true( X-PJAX:true )
まとめ何も
考えないAjax
Hash(Fragment Identifier)
Hash 改善版(HASH-BANG な
ど）pjax
Ajax 動作 ○ ○ ○ ○
「戻る」への対応
× ○ ○ ○
ソーシャルへの対応 (js on)
× ○ ○ ○
クローラーへの対応
× × ○ ○
ソーシャルへの対応（ js off)
× × × ○
HTML5 的要素 N/A hashchange hashchange History API(pushState etc.)
ブラウザサポート ○
IE(> 8), FF4, Chrome10,
Safari5, Opera11.5
IE(> 8), FF4, Chrome10, Safari5,
Opera11.5
FF4, Chrome10,
Safari5,Opera11.5
pollyfill - $.hashchange() $.hashchange() -
今回のソースコード
https://github.com/KensakuKOMATSU/19th_techtalk_pjax
GITHUB も PJAX
THANK YOU!!
http://pjax.heroku.com/