第19回html5とか勉強会 pjax
Download as PPTX, PDF39 likes5,852 views
pjax = pushState + ajaxのプレゼン これまでのajaxの課題を解決する、history api(pushStateなど)を使ったプラクティスです。
![ステップ3 popstate「戻る」への対応$(window).bind('popstate', function(e){ if(initState) {// $(window).load時のため、華麗にスルーinitState = false; return; }varhref=location.href.match(/[0-9]?$/)[0];pjaxGet("/"+href, false);});](https://image.slidesharecdn.com/19html5-110713012829-phpapp01/85/19-html5-pjax-46-320.jpg)
![Sinatraの場合普通のHTMLget '/:id' do @data = datas[params[:id].to_i]erb :indexendAjax用get '/data/:id' do @data = datas[params[:id].to_i]erb :index, :layout => falseend](https://image.slidesharecdn.com/19html5-110713012829-phpapp01/85/19-html5-pjax-48-320.jpg)
![使い方$('nav a').pjax('article');http://example.net/2?_pjax=true( X-PJAX:true )defpjax?env['HTTP_X_PJAX']endget '/pjax-jquery/:id' do @data = datas[params[:id].to_i]erb :index, :views => "pjax_jquery_views", :layout => !pjax?end](https://image.slidesharecdn.com/19html5-110713012829-phpapp01/85/19-html5-pjax-51-320.jpg)
第19回html5とか勉強会 pjax
- 2. 自己紹介名前： こまつけんさくHTML5とか勉強会スタッフGoogle 公認 API Expert (HTML5)Microsoft Valuable Professional (Internet Explorer)Twitter : http://twitter.com/komasshuBlog : http://blog.livedoor.jp/kotesaki/
- 5. 例えば
- 10. サンプル
- 11. 特徴速い
- 12. 安い
- 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. 検索で引っかからない
- 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 eventwindow.onhashchange = function(){ varhref = “/”+location.hash.substring(1); // ID取得 get(href); // ajax処理}See http://www.w3.org/TR/html5/history.html#hashchangeevent
- 23. 効果と課題効果「戻る」に対応
- 24. ソーシャルでもOK
- 28. Hash-bangこれ
- 30. クローラー用のURLを作成https://docs.google.com/present/view?id=dc75gmks_120cjkt2chf
- 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);}
- 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>
- 44. ステップ1 ページの切り替えを抑制$('nav a').each(function(e){// コンテキストメニュー(右クリックなど）の時は、pjax処理はしないif ( e.which > 1 || e.metaKey ) return truevarhref = $(this).attr('href'); $(this).click(function(e){e.preventDefault();pjaxGet(href, true); });});
- 45. ステップ2 history apipushstatevar 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);});
- 48. Sinatraの場合普通のHTMLget '/:id' do @data = datas[params[:id].to_i]erb :indexendAjax用get '/data/:id' do @data = datas[params[:id].to_i]erb :index, :layout => falseend
- 51. 使い方$('nav a').pjax('article');http://example.net/2?_pjax=true( X-PJAX:true )defpjax?env['HTTP_X_PJAX']endget '/pjax-jquery/:id' do @data = datas[params[:id].to_i]erb :index, :views => "pjax_jquery_views", :layout => !pjax?end
- 52. まとめ
- 54. Githubもpjax