ON HTML5 FIELD 第6回（後編）
ON HTML5 FIELD
【第6回】（後編）Webプログラマーがおさえておきたい技術ポイント2011年12月15日
TEXT：村岡正和
前編で述べた通り、HTML5制作ではクライアントサイド実装のウエイトが増す。同時にWebプログラミングのセオリーにも若干の変化が生じてきそうだ。Webプログラマーは速いサイクルで進化する開発ツールの動向をキャッチアップして、常に自分の開発環境をブラッシュアップできるよう心がけたい。
>>> 全記事目次はこちら（HTML5関連求人情報も掲載）
■開発ツールの進化にも注目
次に、Firefox11で搭載される予定の開発ツールを紹介しておこう。FirefoxといえばFirebugがおなじみだが、Firefox11では開発者向けツール「Inspect」が搭載予定である。現在はFirefox Nightly（http://nightly.mozilla.org/）で試用することが可能だ。Firefox NightlyのTools → Web Developer → Inspect で起動するとFirefoxがまるでIDEのようになる。
Firefox Nightly - Inspect
筆者もまだ詳しく試用していないが、HTMLの階層構造やCSSの確認編集が直感的に行える仕様になっている。長らくFirebugに慣れた身からすると勝手が違ってとまどうが、将来的に期待ができる機能だ。
もうひとつ、Firefoxのユニークなツールを紹介しておこう。「Tilt」と呼ばれるツールでNightlyのほかにプレビュー版であるAurora（http://mozilla.jp/firefox/preview/）にも搭載されている。起動はメニューから ツール → Web開発 → Tiltから起動できる。Tiltを起動するには、WebGLが動作する環境が必須だ。Tiltが起動すると、表示しているWebサイトの階層構造が3Dで表示される。
Aurora - Tilt
階層を構成するタグは色分けされており、タグの範囲はブロックで、入れ子の多さは高さで表現されている。
普段2Dコンテンツとして扱っているWebページを3Dでみるとなんとなく変な感じだ。筆者は最初「これは何に使うんだ？」と思っていたが、しばらく使っているとこれは便利かもしれないと気づいた。例えばdivタグの閉じ忘れなどでページの表示が崩れた場合、すぐに閉じ忘れた箇所を発見するのは難しい。そのような場合、Tiltでページ全体の階層構造を立体的に俯瞰すると素早く発見できる可能性がある。Tiltはまだ実験的なツールだろうが、こういうユニークなツールが進化して制作効率が良くなる可能性はHTML5制作においてはまだまだたくさんあると考えられる。
今回紹介した開発ツールはWebブラウザとともに進化している。つまりWebブラウザと同じくらい速いスピードで進化しているということだ。Webプログラマーとしては各ブラウザベンダーや開発ツールベンダーのニュースをチェックするなどして、自分の開発環境のブラッシュアップを常に心がけよう。
■Webプログラマーがおさえておきたい考え方
HTML5制作では、クライアントサイド実装のウエイトが増すということを前編で述べた。これにともなって、Webプログラミングのセオリーにも若干の変化が生じてきそうだ。
筆者の経験では、Webアプリのオフライン稼動を求められる開発においては、こういった変化への対応が求められていれるように感じている。そのようなWebアプリの場合、サーバーサイドにはデータストアのためのAPIが用意されているだけで、ビジネスロジックは全てHTML5でクライアントサイドに実装するという形になりやすい。これによってフォームデータをサーバーにPOSTし、サーバーサイドでビジネスロジックを処理するという旧来のWebプログラミングとは設計／開発方法が異なる可能性がある。
この変化については、新しい開発ノウハウが必要というよりは、今まで培ったノウハウが活きるのではないかと思っている。筆者はWebアプリケーション開発に携わる前はVisual BasicやC++でWindowsのネイティブアプリケーションを開発していたこともある。その頃はWebにアクセスするという要件がなかったので、全ての機能を画面に持たせるのが常だった。その頃の手法が、今また活きてきそうな気がしているのだ。画面の中に全て処理があって、データソースだけクラウドに置く。大雑把に言うとそんな感じだ。
概念的には簡単に言えるのだが、実際の開発となるとそうはいかない。JavaScriptにはサーバーサイド言語に比べてビジネスロジックを支援する機能は弱い。HTML5 APIが強力とはいっても、それらを効率よく組み合わせられる仕組みがなければ、Webアプリ開発は規模が大きくなればなるほど困難になるだろう。
解決方法を探る上で、近年急速に増えているJavaScript MVCフレームワークに注目したい。MVCフレームワークの導入によりHTML5 Webアプリケーション開発にMVC設計概念を適用できる。MVCを提供するフレームワーク/ライブラリはBackborn.js（http://documentcloud.github.com/backbone/）、Agility.js（http://agilityjs.com/）、Active.js（http://www.activejs.org/）などがある。最近はnode.js用のexpress（http://expressjs.com/）、flatiron（http://flatironjs.org/）の開発が盛んなのも見逃せない。
Webプログラマーにとっては、サーバーサイドで培ったノウハウをHTML5 Webアプリにも活用したいところだ。上記の他にもクライアントサイド開発に活かせるフレームワークやライブラリは様々ある。早めにチェックして制作に応じて使い分けられるようになっておこう。
次回はWebディレクターがおさえておくべきポイントについて考えてみたい。
［筆者プロフィール］
村岡正和（むらおかまざかず）●神戸でITシステム開発、コンサルティングを手掛けている。HTML5-WEST.jpの代表として関西でHTML5関連の話題を盛り上げる活動を行っているほか、さまざまなコミュニティ活動に関わっている。
HTML5-WEST.jp：http://www.html5-west.jp/
Twitter：http://twitter.com/#!/bathtimefish
HTML5の最新情報が学べるセミナー
「For Web Designer and Web Developer HTML5 Work Up Seminar」
主催：株式会社パソナテック 費用：無料 場所：東京都千代田区大手町2-6-4
詳細はこちら http://www.pasonatech.co.jp/ca/html5/
OFFLINE & STORAGE編 12月20日（火）19:00-21:00
【内容】Webアプリケーションにおけるデータ蓄積
【詳細および申し込み】http://www.pasonatech.co.jp/event/index.jsp?mode=2&d=on&no=3239
>>> 全記事目次はこちら（HTML5関連求人情報も掲載）
