第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を見ていただいた方が楽しめるはずです。
講演資料はこちら になります。
Responsive Web Designの実践
休憩時間を挟んだ後、Web Directions Eastを運営している菊池崇さん より、Responsive Web Designについて講演いただきました。
ウェブサイトを構築する場合様々な環境があり、モダンブラウザの中でもレイアウトやJavaScriptの動作が異なることが多く、すべてに対応するのは経験とスキルが必要な状態になっています。最近では、スマートフォンの普及によりモバイル端末対応サイトの構築という案件が増えてきました。これにより、さらに対応する必要のある環境が増え、これらすべてに対応するのは相応のコストがかかります。
そこで、画面サイズに合わせてコンテンツの表示方法を柔軟に変更するResponsive Web Designという手法が紹介されました。
この手法は大きくわけて3つの手法に分かれています。
Grid Design／Liquid Layout
Fluid Image
Media Queries
Grid Designは、画面を複数のカラムとその余白を組み合わせてページデザインを行う手法です。また、講演内ではLiquid Layoutという手法が紹介されました。Liquid Layoutは、画面サイズにあわせてコンテンツのサイズが変化するように、ピクセルでの固定レイアウトではなくすべて%で作るようにするという手法です。
Fluid Imageは、画面サイズに合わせて画像サイズを変更する手法です。あらかじめ大きい画像を用意しておいて、先ほどのLiquid Designのようにimgタグに対して%でサイズが変更されるように設定します。
Media Queriesは、メディアのタイプや画面サイズなどのユーザー情報によって、特定のCSSを適応する手法です。
これらの手法を使う利点は、多くの画面サイズに個別に対応しなくても良くなる点です。同時にエミュレーターでの確認回数も減らすことができます。また、導入の手間としても制作フローを分割するだけで可能なため簡単です。結果的に、制作コストと運用コストの両方を減らすことができると言及されました。
詳しくは、こちらの講演資料 を参照ください。
スマートフォン用ページをデバッグする5つの方法
次に、本勉強会スタッフのkanasanさんから「スマートフォン用ページをデバッグする5つの方法」のショートセッションを発表していただきました。
JavaScriptのデバッグやレイアウトの微調整を行う場合、PC向けサイトであればFirefoxのFirebugやChromeのDeveloper Tools等の定番のデバッグツールを使って行うことができますが、スマートフォン向けサイトの場合そういうものがありませんでした。
そこで今回、スマートフォン向けサイト構築時に使える5つのデバッグツールが紹介されました。
この中でもweinreが特に素晴らしく、PC向けサイトのデバッグツールと遜色のないものであることが紹介されました。セッション中では、デモとあわせて紹介されています。とても素晴らしいツールですので、是非ご覧ください。
詳しくは、こちらの講演資料 を参照ください。
Developing for TV：その3
最後に、Operaのダニエルさんから「Developing for TV:その3」のショートセッションを発表していただきました。今回で3回目のテレビ向けのWebサイト構築についてのセッションですが、今回のテーマはスペーシャルナビゲーションの動作についてです。
スペーシャルナビゲーションとは、テレビのリモコンについているD-Padで操作したときのフォーカス変移のことです。これは通常だとカーソルが次にどこに動くのかわからない場合があります。
この問題の解決方法として紹介されたのは、CSS3のプロパティであるnav-*プロパティの利用です。このプロパティを指定すると、そのコンテンツから次のコンテンツへのカーソルの移動先を指定できます。また、このプロパティはレイアウトに影響しないので、自由に指定できるとのことです。
使えるプロパティは以下のものになります。
nav-left
nav-right
nav-up
nav-down
デモに使われていたページはこちら です。Operaであれば、Shift+カーソルキーでスペーシャルナビゲーションを再現することができますので、是非試してみてください。
最後に
レポートに対する感想や、勉強会に対する希望・意見・取り上げて欲しいテーマなどありましたら、Twitter（@yutaro_i） までお気軽につぶやいていただければと思います。本勉強会は、毎月第3水曜日または第3木曜日に開催していますので、興味を持たれた方は是非参加ください。ただし、会場や講演者スケジュールの都合などにより、開催日程が前後することがあります。開催のアナウンスはhtml5-developers-jp で行われますので、こちらをご確認ください。なお、Events in HTML5-jp で開催状況や、過去のアーカイブなども公開しておりますので、是非ご活用いただければ幸いです。
次回の第20回本勉強会は、8月21日にGoogleさんとの共催で1日がかりのいつもより大規模に開催します。イベントのタイトルは、「 Chrome+HTML5 Conference」です。通常のセッションだけでなくハンズオンも企画しています。近いうちにイベントへの参加方法や内容等の詳細をhtml5-developers.jp に公開予定ですので、上記のGoogleグループと合わせてご確認ください。
