pjax~HTML5時代のAjaxサイトプラクティス~<br />第19回HTML5とか勉強会<br />こまつ けんさく<br />
自己紹介<br />名前: こまつけんさく<br />HTML5とか勉強会スタッフ<br />Google 公認 API Expert (HTML5)<br />Microsoft Valuable Professional (Internet...
Main idea<br />pjaxで、より良いAjaxサイトを!!<br />
今回の対象<br />Ajaxを使って、サイトのコンテンツを切り替えるタイプ<br />いわゆる従来WebサイトのAjax対応<br />
例えば<br />
今回対象としないもの<br />ばりばりのWebアプリ<br />
Agenda<br />Ajaxのおさらい<br />これまでのAjaxの課題<br />「戻る」への対応とソーシャルに優しく<br />サーチに対応するには?<br />全ての問題を解決するpjax<br />
Agenda<br />Ajaxのおさらい<br />これまでのAjaxの課題<br />「戻る」への対応とソーシャルに優しく<br />サーチに対応するには?<br />全ての問題を解決するpjax<br />
Ajaxとは?<br />ページを切り替えずに、データを取得/切り替える仕組み<br />Javascriptを使い動的に利用<br />new XMLHTTPRequest();<br />$.ajax()<br />XMLには限らない<br...
サンプル<br />
特徴<br /><ul><li>速い
安い
かっこいい</li></li></ul><li>Agenda<br />Ajaxのおさらい<br />これまでのAjaxの課題<br />「戻る」への対応とソーシャルに優しく<br />サーチに対応するには?<br />全ての問題を解決するpj...
まずい書き方<br />「戻る」で戻れない<br />http://html5-19th.heroku.com/bad_ajax.html<br />
ソーシャルに優しくない<br />
Htmlを見ても分からない<br /><header> <br />    <h1> <br />      bad ajax sample.<br />    </h1> <br />    - doesn't care about stat...
検索で引っかからない<br />
Agenda<br />Ajaxのおさらい<br />これまでのAjaxの課題<br />「戻る」への対応とソーシャルに優しく<br />サーチに対応するには?<br />全ての問題を解決するpjax<br />
ハッシュの利用<br />http://html5-19th.heroku.com/hash_ajax.html<br />
ハッシュの利用fragment identifier<br />これ<br />
状態をhashで指定<br /><nav> <br />    <ul> <br />      <li><a href="#0">semantics</a></li> <br />      <li><a href="#1">offline<...
Hashchange event<br />window.onhashchange = function(){<br />    varhref = “/”+location.hash.substring(1); // ID取得<br />  ...
効果と課題<br />効果<br /><ul><li>「戻る」に対応
ソーシャルでもOK
状態が、fragment identifierで指定されている</li></ul>課題<br /><ul><li>サーチでは引っかからない
Javascriptoffだと見れない</li></li></ul><li>Agenda<br />Ajaxのおさらい<br />これまでのAjaxの課題<br />「戻る」への対応とソーシャルに優しく<br />サーチに対応するには?<br ...
Case1 : Hash-bang<br />#!<br />
Hash-bang<br />これ<br />
Making ajaxcrawlable<br />http://googlewebmastercentral.blogspot.com/2009/10/proposal-for-making-ajax-crawlable.html<br />
クローラー用のURLを作成<br />https://docs.google.com/present/view?id=dc75gmks_120cjkt2chf<br />
http://twitter.com/?_escaped_fragment_=/komasshu<br />
Case2 : <a>でハッシュを指定しない<br />
普通にHTMLを記述(/0 - /3も同様)<br /><nav><br />    <ul><br />      <li><a href="/0">semantics</a></li><br />      <li><a href="/1"...
Jsでトリック<br />$("nav a").click(function(e){<br />e.preventDefault();<br />varhref=$(this).attr("href");<br />location.hash=...
参考)jquery-mobile(Automatic ajax)<br />http://html5-19th.heroku.com/smp/<br />
HTMLをajaxに自動変換<br /><ul data-role="listview" data-inset="true"><br />    <li><a href="./0">semantics</a></li><br />    <li...
クローラーには普通のHTML<br />/smp/0<br />/smp<br />/smp/1<br />
更に。。。<br />JavascriptoffのユーザーもOK!!<br />
問題<br />/smp/#/smp/0<br />Javascript on<br />Javascript off<br />Restfulでもない。。。<br />
Agenda<br />Ajaxのおさらい<br />これまでのAjaxの課題<br />「戻る」への対応とソーシャルに優しく<br />サーチに対応するには?<br />全ての問題を解決するpjax<br />
Pjaxpushstate + ajax<br />http://html5-19th.heroku.com/0<br />
! Fragment identifier<br />
HTMLを最初に作るprogressive enhancement<br />http://html5-19th.heroku.com/1<br />http://html5-19th.heroku.com/0<br />
ステップ1 ページの切り替えを抑制<br />$('nav a').each(function(e){<br />// コンテキストメニュー(右クリックなど)の時は、pjax処理はしない<br />if ( e.which > 1 || e.m...
ステップ2 history apipushstate<br />var pjaxGet = function(file, push) {<br />    $("article").hide();<br />$.get("/data"+file...
ステップ3 popstate「戻る」への対応<br />$(window).bind('popstate', function(e){<br />        if(initState) {<br />// $(window).load時のた...
専用HTML(レイアウト無し)をajaxでGET<br />http://html5-19th.heroku.com/data/1<br />
Sinatraの場合<br />普通のHTML<br />get '/:id' do<br />  @data = datas[params[:id].to_i]<br />erb :index<br />end<br />Ajax用<br /...
なので。。。<br />「戻る」もOK<br />ソーシャルにも優しく<br />クローラーへも対応<br />JavascriptoffのユーザもOK<br />
Jquery-pjax<br />https://github.com/defunkt/jquery-pjax<br />
使い方<br />$('nav a').pjax('article');<br />http://example.net/2?_pjax=true<br />( X-PJAX:true )<br />defpjax?<br />env['HTT...
まとめ<br />
Upcoming SlideShare
Loading in …5
×

第19回html5とか勉強会 pjax

21,889 views

Published on

pjax = pushState + ajaxのプレゼン

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

Published in: Technology
0 Comments
39 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
21,889
On SlideShare
0
From Embeds
0
Number of Embeds
4,608
Actions
Shares
0
Downloads
123
Comments
0
Likes
39
Embeds 0
No embeds

No notes for slide

第19回html5とか勉強会 pjax

  1. 1. pjax~HTML5時代のAjaxサイトプラクティス~<br />第19回HTML5とか勉強会<br />こまつ けんさく<br />
  2. 2. 自己紹介<br />名前: こまつけんさく<br />HTML5とか勉強会スタッフ<br />Google 公認 API Expert (HTML5)<br />Microsoft Valuable Professional (Internet Explorer)<br />Twitter : http://twitter.com/komasshu<br />Blog : http://blog.livedoor.jp/kotesaki/<br />
  3. 3. Main idea<br />pjaxで、より良いAjaxサイトを!!<br />
  4. 4. 今回の対象<br />Ajaxを使って、サイトのコンテンツを切り替えるタイプ<br />いわゆる従来WebサイトのAjax対応<br />
  5. 5. 例えば<br />
  6. 6. 今回対象としないもの<br />ばりばりのWebアプリ<br />
  7. 7. Agenda<br />Ajaxのおさらい<br />これまでのAjaxの課題<br />「戻る」への対応とソーシャルに優しく<br />サーチに対応するには?<br />全ての問題を解決するpjax<br />
  8. 8. Agenda<br />Ajaxのおさらい<br />これまでのAjaxの課題<br />「戻る」への対応とソーシャルに優しく<br />サーチに対応するには?<br />全ての問題を解決するpjax<br />
  9. 9. Ajaxとは?<br />ページを切り替えずに、データを取得/切り替える仕組み<br />Javascriptを使い動的に利用<br />new XMLHTTPRequest();<br />$.ajax()<br />XMLには限らない<br />json<br />Text<br />Html<br />….<br />
  10. 10. サンプル<br />
  11. 11. 特徴<br /><ul><li>速い
  12. 12. 安い
  13. 13. かっこいい</li></li></ul><li>Agenda<br />Ajaxのおさらい<br />これまでのAjaxの課題<br />「戻る」への対応とソーシャルに優しく<br />サーチに対応するには?<br />全ての問題を解決するpjax<br />
  14. 14. まずい書き方<br />「戻る」で戻れない<br />http://html5-19th.heroku.com/bad_ajax.html<br />
  15. 15. ソーシャルに優しくない<br />
  16. 16. Htmlを見ても分からない<br /><header> <br /> <h1> <br /> bad ajax sample.<br /> </h1> <br /> - doesn't care about states ;-( -<br /> </header> <br /> <nav> <br /> <ul> <br /> <li><a href="/0">semantics</a></li> <br /> <li><a href="/1">offline</a></li> <br /> <li><a href="/2">device</a></li> <br /> <li><a href="/3">connectivity</a></li> <br /> </ul> <br /> </nav> <br /> <article> <br /> </article> <br /> </body> <br />
  17. 17. 検索で引っかからない<br />
  18. 18. Agenda<br />Ajaxのおさらい<br />これまでのAjaxの課題<br />「戻る」への対応とソーシャルに優しく<br />サーチに対応するには?<br />全ての問題を解決するpjax<br />
  19. 19. ハッシュの利用<br />http://html5-19th.heroku.com/hash_ajax.html<br />
  20. 20. ハッシュの利用fragment identifier<br />これ<br />
  21. 21. 状態をhashで指定<br /><nav> <br /> <ul> <br /> <li><a href="#0">semantics</a></li> <br /> <li><a href="#1">offline</a></li> <br /> <li><a href="#2">device</a></li> <br /> <li><a href="#3">connectivity</a></li> <br /> </ul> <br /></nav><br />
  22. 22. Hashchange event<br />window.onhashchange = function(){<br />    varhref = “/”+location.hash.substring(1); // ID取得<br /> get(href); // ajax処理<br />}<br />See http://www.w3.org/TR/html5/history.html#hashchangeevent<br />
  23. 23. 効果と課題<br />効果<br /><ul><li>「戻る」に対応
  24. 24. ソーシャルでもOK
  25. 25. 状態が、fragment identifierで指定されている</li></ul>課題<br /><ul><li>サーチでは引っかからない
  26. 26. Javascriptoffだと見れない</li></li></ul><li>Agenda<br />Ajaxのおさらい<br />これまでのAjaxの課題<br />「戻る」への対応とソーシャルに優しく<br />サーチに対応するには?<br />全ての問題を解決するpjax<br />
  27. 27. Case1 : Hash-bang<br />#!<br />
  28. 28. Hash-bang<br />これ<br />
  29. 29. Making ajaxcrawlable<br />http://googlewebmastercentral.blogspot.com/2009/10/proposal-for-making-ajax-crawlable.html<br />
  30. 30. クローラー用のURLを作成<br />https://docs.google.com/present/view?id=dc75gmks_120cjkt2chf<br />
  31. 31. http://twitter.com/?_escaped_fragment_=/komasshu<br />
  32. 32. Case2 : <a>でハッシュを指定しない<br />
  33. 33. 普通にHTMLを記述(/0 - /3も同様)<br /><nav><br /> <ul><br /> <li><a href="/0">semantics</a></li><br /> <li><a href="/1">offline</a></li><br /> <li><a href="/2">device</a></li><br /> <li><a href="/3">connectivity</a></li><br /> </ul><br /> </nav><br /> <article><br /><h2>semantics</h2><br /> <hr><br /> <imgsrc="/images/semantics.jpg"><br /> <br><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.<br /> </article><br />
  34. 34. Jsでトリック<br />$("nav a").click(function(e){<br />e.preventDefault();<br />varhref=$(this).attr("href");<br />location.hash=href;<br />});<br />window.onhashchange = function(){<br />varhref=location.hash.substring(1);<br /> get(href);<br />}<br />
  35. 35. 参考)jquery-mobile(Automatic ajax)<br />http://html5-19th.heroku.com/smp/<br />
  36. 36. HTMLをajaxに自動変換<br /><ul data-role="listview" data-inset="true"><br /> <li><a href="./0">semantics</a></li><br /> <li><a href="./1">offline</a></li><br /> <li><a href="./2">device</a></li><br /> <li><a href="./3">connectivity</a></li><br /> </ul><br />+<br /><script src="/javascripts/jquery.mobile-1.0b1.min.js"></script><br />
  37. 37. クローラーには普通のHTML<br />/smp/0<br />/smp<br />/smp/1<br />
  38. 38. 更に。。。<br />JavascriptoffのユーザーもOK!!<br />
  39. 39. 問題<br />/smp/#/smp/0<br />Javascript on<br />Javascript off<br />Restfulでもない。。。<br />
  40. 40. Agenda<br />Ajaxのおさらい<br />これまでのAjaxの課題<br />「戻る」への対応とソーシャルに優しく<br />サーチに対応するには?<br />全ての問題を解決するpjax<br />
  41. 41. Pjaxpushstate + ajax<br />http://html5-19th.heroku.com/0<br />
  42. 42. ! Fragment identifier<br />
  43. 43. HTMLを最初に作るprogressive enhancement<br />http://html5-19th.heroku.com/1<br />http://html5-19th.heroku.com/0<br />
  44. 44. ステップ1 ページの切り替えを抑制<br />$('nav a').each(function(e){<br />// コンテキストメニュー(右クリックなど)の時は、pjax処理はしない<br />if ( e.which > 1 || e.metaKey )<br /> return true<br />varhref = $(this).attr('href');<br /> $(this).click(function(e){<br />e.preventDefault();<br />pjaxGet(href, true);<br /> });<br />});<br />
  45. 45. ステップ2 history apipushstate<br />var pjaxGet = function(file, push) {<br /> $("article").hide();<br />$.get("/data"+file, function(data){<br /> $("article").html(data).fadeIn();<br /> });<br />if(push) {<br />history.pushState("", “", file);<br /> }<br />}<br />See. http://www.w3.org/TR/html5/history.html#history<br />
  46. 46. ステップ3 popstate「戻る」への対応<br />$(window).bind('popstate', function(e){<br /> if(initState) {<br />// $(window).load時のため、華麗にスルー<br />initState = false;<br /> return;<br /> }<br />varhref=location.href.match(/[0-9]?$/)[0];<br />pjaxGet("/"+href, false);<br />});<br />
  47. 47. 専用HTML(レイアウト無し)をajaxでGET<br />http://html5-19th.heroku.com/data/1<br />
  48. 48. Sinatraの場合<br />普通のHTML<br />get '/:id' do<br /> @data = datas[params[:id].to_i]<br />erb :index<br />end<br />Ajax用<br />get '/data/:id' do<br /> @data = datas[params[:id].to_i]<br />erb :index, :layout => false<br />end<br />
  49. 49. なので。。。<br />「戻る」もOK<br />ソーシャルにも優しく<br />クローラーへも対応<br />JavascriptoffのユーザもOK<br />
  50. 50. Jquery-pjax<br />https://github.com/defunkt/jquery-pjax<br />
  51. 51. 使い方<br />$('nav a').pjax('article');<br />http://example.net/2?_pjax=true<br />( X-PJAX:true )<br />defpjax?<br />env['HTTP_X_PJAX']<br />end<br />get '/pjax-jquery/:id' do<br /> @data = datas[params[:id].to_i]<br />erb :index, :views => "pjax_jquery_views", :layout => !pjax?<br />end<br />
  52. 52. まとめ<br />
  53. 53. 今回のソースコード<br />https://github.com/KensakuKOMATSU/19th_techtalk_pjax<br />
  54. 54. Githubもpjax<br />
  55. 55. Thank you!!<br />http://pjax.heroku.com/<br />

×