第19回html5とか勉強会 pjax

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

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

サンプル

特徴
速い
安い
かっこいい

Agenda
Ajaxのおさらい

まずい書き方
「戻る」で戻れない
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のおさらい

ハッシュの利用
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(){
　　　　varhref = “/”+location.hash.substring(1); // ID取得
get(href); // ajax処理
}
See http://www.w3.org/TR/html5/history.html#hashchangeevent

効果と課題
効果
「戻る」に対応
ソーシャルでもOK
状態が、fragment identifierで指定されている
課題
サーチでは引っかからない
Javascriptoffだと見れない

Agenda
Ajaxのおさらい

Case1 : Hash-bang
#!

Hash-bang
これ

Making ajaxcrawlable
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>
<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>

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);
}

参考）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/0
/smp
/smp/1

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

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

Agenda
Ajaxのおさらい

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

! Fragment identifier

HTMLを最初に作るprogressive enhancement

ステップ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);
});
});

ステップ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;
}
varhref=location.href.match(/[0-9]?$/)[0];
pjaxGet("/"+href, false);
});

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

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

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

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

使い方
$('nav a').pjax('article');
http://example.net/2?_pjax=true
( X-PJAX:true )
defpjax?
env['HTTP_X_PJAX']
end
get '/pjax-jquery/:id' do
erb :index, :views => "pjax_jquery_views", :layout => !pjax?
end

まとめ

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

Githubもpjax

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

http://blog.livedoor.jp	2125
http://d.hatena.ne.jp	437
http://temping-amagramer.blogspot.com	232
http://temping-amagramer.blogspot.jp	31
http://webcache.googleusercontent.com	14
http://twitter.com	10
https://twitter.com	5
http://a0.twimg.com	3
http://s.deeeki.com	2
http://localhost	2
http://paper.li	1
http://b.hatena.ne.jp	1

第19回html5とか勉強会 pjax

by Kensaku Komatsu on Jul 13, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

12 Embeds 2,863

Statistics

第19回html5とか勉強会 pjax — Presentation Transcript