ON HTML5 FIELD 第4回（前編）
ON HTML5 FIELD 【第4回】（前編）スキルアップのための勉強法とその意味
2011年11月30日
TEXT：村岡正和
HTML5の仕様書は膨大で、簡単に覚えられる量ではない。学習する際はHTML5でコーディングされている既存のWebサイトを参考にしながら自分でHTML5 Webサイトを制作してみるのが良いだろう。特に実践的な学習方法はスマートデバイス向けWebサイトを制作することだ。
>>> 全記事目次はこちら（HTML5関連求人情報も掲載）
■まずはスマフォサイト制作からはじめてみよう
まだ草案だからとか、Webブラウザの対応状況がまちまちだからとか言って日和見を決め込んでいる場合ではない。1年後に「デキるWebクリエイター」になりたければ今からでもHTML5を学習すべきだと筆者は思う。といってもHTML5の仕様書(http://dev.w3.org/html5/spec/Overview.html)は膨大である。簡単に覚えられる量でもなく、また実際にWebサイトを制作する上では必ずしも全てが必要というわけでもない。筆者の経験としては、まずは既存のHTML5でコーディングされているWebサイトを参考にしながら自分でHTML5 Webサイトを制作してみるのが良い。習うより慣れろだ。
じゃあ、と思い立って今あるWebサイトをHTML5にしてみるのもいい。しかし、もっと実践的な方法がある。それはスマートフォンなどスマートデバイス向けWebサイトを制作してみることだ。自分のサイトをスマートフォン対応にして友達に自慢ができる！…かどうかは別として。スマートデバイスとHTML5はとても相性がいいのだ。
また、Web制作系の企業採用においてもスマートデバイス向け制作でHTML5制作者の募集が増加している現状もあり、その点を鑑みると同じHTML5でもPCよりスマートデバイス対応のノウハウを身につけておいた方が即戦力への近道となるだろう。
技術的にも着目すべき点がある。現在のスマートフォンの代表格であるiPhoneとAndroidのWebブラウザは基本的にHTML5に対応している。スマートフォンの種類によって実装に違いがあったり、細かい動作に違いがあったりするが、HTML5で新しく策定された要素を使ってのマークアップの他、関連APIを含めて共通で使える機能は多い。
例えば、Application Cacheというオフライン時のコンテンツ表示を可能にする機能は現時点でiPhone Safari、Android標準のWebブラウザのほか、Firefox for Android 、Opera Mobile for Androidなどで利用可能だ。Cookieよりも便利なクライアントサイドストレージであるWeb Storageは上記のブラウザの他、Windows Phone 7に搭載されているInternet Explorer Mobileでも利用できる。PCの場合は、古いWebブラウザを使用しているユーザーに配慮してHTML5の採用に躊躇するケースも考えられるだろう。しかしスマートデバイス向けに限定するならばその心配もない。
要するにスマートデバイスのWebブラウザはHTML5 Readyなのだ。しかし制作にあたっては前述にあるとおりWebブラウザのHTML5実装の違いには配慮する必要がある。この実装の違いをいかに把握しているかどうかが、現時点でのHTML5制作の実践力においては重要なポイントと言えるだろう。
スマートデバイスWebブラウザごとの実装状況の違いについての情報はWeb上にたくさんある。Mobile HTML5(http://mobilehtml5.org/)のWebブラウザ対照表は参考になるだろう。The HTML5 Test(http://html5test.com/)にアクセスすればそのWebブラウザでどんな機能が利用可能かをチェックすることができる。同様のチェッカーでHTML5関連APIの利用状況を日本語で知るためにはHTML5.jpのHTML5 API チェッカー(http://www.html5.jp/tutorial/apicheck/index.html) がおすすめだ。
これらを参考にしつつ各スマートデバイスの対応状況に応じた機能を選択しながらHTML5 Webサイトを制作していく。そうすればスマートデバイス向けの本格的な「クロスブラウザ HTML5 Webサイト」をつくることが可能だ。「対応状況を調べ」→「使える機能を選定し」→「制作に反映する」この中での試行錯誤が現時点でのHTML5制作では重要になる。この作業に繰り返し慣れる意味でも、HTML5 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/
■直近スケジュールとセミナー内容
CONNECTIVITY編 12月06日（火）19:00-21:00
【内容】Webアプリケーションにおけるリアルタイム通信
【詳細および申し込み】http://www.pasonatech.co.jp/event/index.jsp?mode=2&d=on&no=3237
MULTIMEDIA編 12月13日（火）19:00-21:00
【内容】音声、動画、メディアの再生と操作
【詳細および申し込み】http://www.pasonatech.co.jp/event/index.jsp?mode=2&d=on&no=3238
OFFLINE & STORAGE編 12月20日（火）19:00-21:00
【内容】Webアプリケーションにおけるデータ蓄積
【詳細および申し込み】http://www.pasonatech.co.jp/event/index.jsp?mode=2&d=on&no=3239
>>> 全記事目次はこちら（HTML5関連求人情報も掲載）