pjax = pushState + ajaxのプレゼン これまでのajaxの課題を解決する、history api(pushStateなど)を使ったプラクティスです。

1. pjax～HTML5時代のAjaxサイトプラクティス～ 第19回HTML5とか勉強会 こまつ けんさく

2. 自己紹介 名前： こまつけんさく HTML5とか勉強会スタッフ Google 公認 API Expert (HTML5) Microsoft Valuable Professional (Internet Explorer) Twitter : http://twitter.com/komasshu Blog : http://blog.livedoor.jp/kotesaki/

3. Main idea pjaxで、より良いAjaxサイトを!!

4. 今回の対象 Ajaxを使って、サイトのコンテンツを切り替えるタイプ いわゆる従来WebサイトのAjax対応

5. 例えば

6. 今回対象としないもの ばりばりのWebアプリ

7. Agenda Ajaxのおさらい これまでのAjaxの課題 「戻る」への対応とソーシャルに優しく サーチに対応するには？ 全ての問題を解決するpjax

8. Agenda Ajaxのおさらい これまでのAjaxの課題 「戻る」への対応とソーシャルに優しく サーチに対応するには？ 全ての問題を解決するpjax

9. Ajaxとは？ ページを切り替えずに、データを取得／切り替える仕組み Javascriptを使い動的に利用 new XMLHTTPRequest(); $.ajax() XMLには限らない json Text Html ….

10. サンプル

12. 安い

14. まずい書き方 「戻る」で戻れない http://html5-19th.heroku.com/bad_ajax.html

15. ソーシャルに優しくない

16. 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>

17. 検索で引っかからない

18. Agenda Ajaxのおさらい これまでのAjaxの課題 「戻る」への対応とソーシャルに優しく サーチに対応するには？ 全ての問題を解決するpjax

19. ハッシュの利用 http://html5-19th.heroku.com/hash_ajax.html

20. ハッシュの利用fragment identifier これ

21. 状態を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>

22. Hashchange event window.onhashchange = function(){ varhref = “/”+location.hash.substring(1); // ID取得 get(href); // ajax処理 } See http://www.w3.org/TR/html5/history.html#hashchangeevent

24. ソーシャルでもOK

27. Case1 : Hash-bang #!

28. Hash-bang これ

29. Making ajaxcrawlable http://googlewebmastercentral.blogspot.com/2009/10/proposal-for-making-ajax-crawlable.html

30. クローラー用のURLを作成 https://docs.google.com/present/view?id=dc75gmks_120cjkt2chf

31. http://twitter.com/?_escaped_fragment_=/komasshu

32. Case2 : <a>でハッシュを指定しない

33. 普通に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> <imgsrc="/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>

34. Jsでトリック $("nav a").click(function(e){ e.preventDefault(); varhref=$(this).attr("href"); location.hash=href; }); window.onhashchange = function(){ varhref=location.hash.substring(1); get(href); }

35. 参考）jquery-mobile(Automatic ajax) http://html5-19th.heroku.com/smp/

36. 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>

37. クローラーには普通のHTML /smp/0 /smp /smp/1

38. 更に。。。 JavascriptoffのユーザーもOK!!

39. 問題 /smp/#/smp/0 Javascript on Javascript off Restfulでもない。。。

40. Agenda Ajaxのおさらい これまでのAjaxの課題 「戻る」への対応とソーシャルに優しく サーチに対応するには？ 全ての問題を解決するpjax

41. Pjaxpushstate + ajax http://html5-19th.heroku.com/0

42. ! Fragment identifier

43. HTMLを最初に作るprogressive enhancement http://html5-19th.heroku.com/1 http://html5-19th.heroku.com/0

44. ステップ1 ページの切り替えを抑制 $('nav a').each(function(e){ // コンテキストメニュー(右クリックなど）の時は、pjax処理はしない if ( e.which > 1 || e.metaKey ) return true varhref = $(this).attr('href'); $(this).click(function(e){ e.preventDefault(); pjaxGet(href, true); }); });

45. ステップ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

46. ステップ3 popstate「戻る」への対応 $(window).bind('popstate', function(e){ if(initState) { // $(window).load時のため、華麗にスルー initState = false; return; } varhref=location.href.match(/[0-9]?$/)[0]; pjaxGet("/"+href, false); });

47. 専用HTML(レイアウト無し)をajaxでGET http://html5-19th.heroku.com/data/1

48. Sinatraの場合 普通のHTML get '/:id' do @data = datas[params[:id].to_i] erb :index end Ajax用 get '/data/:id' do @data = datas[params[:id].to_i] erb :index, :layout => false end

49. なので。。。 「戻る」もOK ソーシャルにも優しく クローラーへも対応 JavascriptoffのユーザもOK

50. Jquery-pjax https://github.com/defunkt/jquery-pjax

51. 使い方 $('nav a').pjax('article'); http://example.net/2?_pjax=true ( X-PJAX:true ) defpjax? 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

52. まとめ

53. 今回のソースコード https://github.com/KensakuKOMATSU/19th_techtalk_pjax

54. Githubもpjax

55. Thank you!! http://pjax.heroku.com/