Your SlideShare is downloading. ×
第19回html5とか勉強会 pjax
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

第19回html5とか勉強会 pjax

20,604
views

Published on

pjax = pushState + ajaxのプレゼン …

pjax = pushState + ajaxのプレゼン

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

Published in: Technology

0 Comments
38 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
20,604
On Slideshare
0
From Embeds
0
Number of Embeds
9
Actions
Shares
0
Downloads
120
Comments
0
Likes
38
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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. サンプル
  • 11. 特徴
  • Agenda
    Ajaxのおさらい
    これまでのAjaxの課題
    「戻る」への対応とソーシャルに優しく
    サーチに対応するには?
    全ての問題を解決するpjax
  • 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
  • 23. 効果と課題
    効果
    • 「戻る」に対応
    • 24. ソーシャルでもOK
    • 25. 状態が、fragment identifierで指定されている
    課題
    • サーチでは引っかからない
    • 26. Javascriptoffだと見れない
  • Agenda
    Ajaxのおさらい
    これまでのAjaxの課題
    「戻る」への対応とソーシャルに優しく
    サーチに対応するには?
    全ての問題を解決するpjax
  • 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/

×