ON HTML5 FIELD 第8回
ON HTML5 FIELD 【第8回】HTML5制作のためのおすすめツール
2012年01月11日
TEXT：村岡正和
HTML5でWebデザイン、Webプログラミングを実践していく際に役立つツールが登場してきた。今回はjQuery Moble、Modernizr、LESSといったツールを取り上げ、その特徴を紹介する。
>>> 全記事目次はこちら（HTML5関連求人情報も掲載）
■スマートフォン開発、クロスブラウザ対応など
HTML5が普及するにつれ、制作に便利なツールがたくさん公開されるようになった。今回は、HTML5制作をする上で筆者がおすすめしたいツールをいくつか紹介する。これからHTML5でWebデザイン、Webプログラミングする際の制作効率向上につながれば幸いだ。
●jQuery Moble（http://jquerymobile.com/）
まずはjQuery Moble。HTML5をベースとしたWeb Frameworkで、スマートフォン向けサイトやWebアプリケーションを制作する上で必ず知っておきたいツールだ。2011年11月16日に1.0 Finalがリリースされ、安定性の向上と多くのスマートデバイスがサポートされている。
jQuery Mobleの特長は枚挙にいとまがないが、特にWebデザイナーの方々におすすめしたい。jQuery Mobleを上手に使えば、JavaScriptを全く使うことなく高機能なスマートフォン向けHTML5 Webサイトを制作することができるからだ。jQuery MboleではHTMLタグにカスタムデータ属性を付加することによって、そのタグにスマートフォンに適したデザインや動きを与えることができる。例えば、
<a href="index.html" data-transition="fade">次のページへ</a>
とマークアップされたボタンは、ページ遷移時にフリップするようになる。
jQuery MobileサイトのフリップDemo動作の様子
このようにjQuery Mobleでは、簡単なマークアップで多くのスマートフォンで動作可能な動きのあるページを制作することができる。スマートフォンHTML5制作の効率アップを考えるなら導入を検討してみよう。
jQuery Mobileをおすすめする理由として、もうひとつThemeRollerを紹介する。Theme Roller for jQuery Mobile(http://jquerymobile.com/themeroller/)はjQuery Mobileのテーマジェネレーターだ。
ThemeRollerを使うと、jQuery Moble用のオリジナルカラーテーマを作成できる。作成したテーマは、CSSファイルとしてダウンロードすることが可能。制作したサイトのデザインに合ったカラーテーマをグラフィカルに作成できるのが便利だ。
●Modernizr（http://www.modernizr.com/）
現状のHTML5制作では、クロスブラウザ対応が以前よりシビアになっている。古いWebブラウザでの動作保証だけでなく、HTML5対応Webブラウザの中でも使える機能と使えない機能がまちまちだからだ。制作上では新しい機能が使える場合は使い、使えない場合は代替方法を提供するという判定処理が現実的になる。Modernizrはそういった処理を支援するJavaScriptライブラリである。
Modenizrを使うと、HTML5やCSS3の細かい機能について判定処理を簡単に利用できるようになる。Modenizrは判定したい機能ごとに適したチェック方法を採用しているので、このAPIが使えるかどうかを判定するために一番いい処理はなにか、と考えなくてすむのがうれしいところだ。Webアプリケーション開発時には、作業負担の軽減につながるだろう。
Modernizrをダウンロードする際は、ダウンロード画面で必要な機能だけをチェックしてダウンロードする。制作するサイトやWebアプリケーションで使う項目だけを選ぶことで、スクリプトのサイズを抑えて動作が重くならないように気をつけよう。
●LESS（http://lesscss.org/）
LESSは、CSSに様々な機能を追加した拡張言語だ。LESSでは変数、セレクタの入れ子、四則演算、ミックスインなどCSSにはない機能が利用できる。LESSで記述したファイルは、そのままブラウザに読み込ませても動作しない。LESSファイルをCSSにコンパイルして、そのCSSをブラウザに読み込ませる。この作業は少し手間だが、LESSファイルの更新を検知して自動的にコンパイルしてくれるSimpLESS(http://wearekiss.com/simpless)などのツールが公開されている。
SimpLESSはLESSファイルが入っているフォルダをドラッグアンドドロップすると、中のLESSファイルの更新を検知して自動的にCSSにコンパイルしてくれるGUIツールだ。SimpLESSを上手に使うとLESSを書きながら即Webブラウザでチェック、といった作業も可能になる。
CSSファイルが大きくなると、特にメンテナンスの効率が悪くなる。サイトの色合いを少し変更するのに、いくつものセレクタを横断的に変更していかなければならないこともある。LESSのようなプリプロセッサを使うことで、そのような作業負担を軽減することができるだろう。
■テレビ向けWebサイト、JavaScript最適化
●Opera TV Emulator（http://www.opera.com/business/tv/emulator/）
連載第3回目で、テレビ向けWebサイトについて触れた。HTML5 Webサイトは現在PCやスマートフォン上のコンテンツとして注目を浴びているが、やがてテレビにも普及していくだろうと筆者は考えている。Opera TV Emulatorは、テレビ向けWebサイト制作をいち早くの実践したいWebクリエイターにおすすめしたいツールだ。
Opera TV Emulatorを使うと、Opera TVをPC上で利用することができる。Opera TV EmulatorはVirsual Box仮想イメージとして配布されているので、事前にVirtual Boxのインストールが必要だ。Opera TV Emulatorを起動すると、Opera TV ブラウザが表示される。Opera TVは、HTML5やCSS3が使えるOperaのテレビ向けWebブラウザだ。筆者が確認したところ、Emulator上のOpera TVのHTML5実装状況はMac版Opera11.52とほぼ同等のようだ。html5test.comでGeolocation APIのみ使えないことを確認している。
Opera TV Emulatorは、制作のためのユニークな機能を持っている。まずローカルのWebブラウザから http://localhost:5555 にアクセスすると、Opera TVを操作するためのテレビリモコンアプリが使えるようになる。マウス操作でなくリモコン操作を体験しながらテレビ向けのUIを考える上で役に立つ機能だろう。また、ローカルのOpera DragonflyでEmulator上のOpera TVに表示されたWebサイトをリモートデバッグすることができる。これは特にWebアプリケーション開発で役立つ機能だろう。なおリモートデバッグ接続はMac, Linuxの場合、Opera Next(http://www.opera.com/browser/next/)からのみ有効のようだ。
●Closure Compiler（http://code.google.com/closure/compiler/）
HTML5 Webアプリケーション制作では、JavaScriptの動作速度に注意をはらう必要がある。アプリケーションが高機能になればなるほど動作は重くなる傾向にあるので、常に実行速度を意識したコーディングが必要になるが、制作現場ではそれが負担になることは間違い無いだろう。それをサポートするために、JavaScript圧縮・最適化ツールの導入をおすすめしたい。
JavaScript圧縮・最適化ツールとしてはYUI Comressor(http://developer.yahoo.com/yui/compressor/)やClosure Compiler(http://code.google.com/p/closure-compiler/)が有名だろう。筆者はClosure Compilerをよく使っている。細かい説明は省くがどちらも指定したレベルに応じてJavaScriptコードを最適化してファイルサイズを小さくし、実効速度を向上してくれる。圧縮最適化の副産物としてソースコードが難読化されるという利点も重要だ。
どちらもJava製の実行形式ファイルが配布されているが、Webサービスとしても利用できる。YUI Compressor Online(http://yui.2clics.net/)、Closure Compiler Service(http://closure-compiler.appspot.com/home)がそれだ。まずはカジュアルにWebサービスを利用し、効果を体感してから導入を検討してはどうだろうか。
最適化後のJavaScriptは必ず動作検証をしておこう。特に高いレベルで最適化を行った場合、（Closure CompilerではOptimizationをAdvancedに指定）最適化後に動作しなくなる場合がある。その場合は正常に動作するよう最適化前のコードを修正するか、最適化レベルを下げるなどする必要がある。
連載最終回の次回は、今までの話題からHTML5制作現場に求められるスキルセットについて考えてみることにしよう。
［筆者プロフィール］
村岡正和（むらおかまざかず）●神戸でITシステム開発、コンサルティングを手掛けている。HTML5-WEST.jpの代表として関西でHTML5関連の話題を盛り上げる活動を行っているほか、さまざまなコミュニティ活動に関わっている。
HTML5-WEST.jp：http://www.html5-west.jp/
Twitter：http://twitter.com/#!/bathtimefish
>>> 全記事目次はこちら（HTML5関連求人情報も掲載）