第19回目の本勉強会は，7月13日に慶応義塾大学の日吉キャンパスをお借りして開催しました。今回のテーマは「HTML5を用いたサイト開発プラクティス」で，HTML5時代に伴ったWebサイト開発のHOW TOを中心に2つのメインセッションと3つのショートセッションの講演がありました。本稿では，本勉強会の模様をレポートします。

PJAX ～HTML5時代のAJAXサイトプラクティス～

最初にPJAXという手法について，NTTコミュニケーションズの小松さんから講演いただきました。

最近では，AJAXを使ってページの切り替えをせずにコンテンツを動的に切り替えるサイトが増えてきました。これらのサイトは，従来のような画面全体を切り替える方式に比べて通信量を減らすことができますし，何よりもユーザビリティをより良くすることができます。

しかし，AJAXを使ったサイトはいくつかの問題点を抱えています。

• ブラウザの「戻る」ボタンで戻れない
• HTMLを見ても内容がわからないため，検索エンジンにクロールされない

これらを解決するための手法はHTML5時代になる前からありました。例えば，「⁠#!」を利用するhash-bangという手法です。しかし，このhash-bangで作ったサイトは，Restfulではないという問題点を持っており，例えばtwitter等のSNSやblogなどで，このhash-bangを使ったURLが紹介されていた場合，JavaScriptオフの人がそのURLにアクセスしても目的のコンテンツが表示されないという問題があります。

そこで，今回のテーマであるPJAXです。PJAXは，pushState + AJAXという意味で，HTML5で追加されたHistory APIのpushStateとpopStateを利用したものです。

PJAXを実装する場合，Progressive Enhancementという考え方で適用します。まず最初に通常のアクセスのときにコンテンツ内容をすべて見えるように通常のHTMLを作ります。そうするとHistory APIが使えない環境でも通常のリンクとして扱われるため，コンテンツの内容を見ることができますし，検索エンジンも通常のリンクとしてクロールできます。また，JavaScriptオフの人がアクセスしても目的のコンテンツを表示することができます。そしてページ遷移を行うときは，History APIが使える環境ではリンクがクリックされたらpushStateとAJAXを使って表示を切り替えるというように対応します。また，ブラウザの「戻る」ボタンへの対応は，APIが使える場合はpopStateとAJAXを使って履歴を登録し，APIが使えない環境ではただのリンクになっているので，通常通り「戻る」ボタンで戻ることができます。

詳しくは，こちらの講演資料を参照ください。

はじめる！Box2DJS

次に，株式会社ミクシィのあんどうさんからBox2DJSについてのショートセッションを発表していただきました。

Box2DJSは，JavaScript製の物理エンジンです。物理エンジンとは，力学の計算を元に物質がどのように動くかをシミュレーションするソフトウェアです。Box2DJSは，元々Box2DFlashAS3というActionScript向けのエンジンを，あんどうさん自らRubyでJavaScript用に置換して移植したものです。

物理エンジンは物質の動きを計算するだけで，実際に描画するのはユーザに任されているため，ウェブページ内の各要素を描画対象にして動かすことができます。この講演ではデモを多く用いられていたので，ustreamを見ていただいた方が楽しめるはずです。

講演資料はこちらになります。