【デブサミ2012】16-C-4 レポート
HTML5で何がどう変わるのか。HTML5の可能性とWeb開発者に求められることを探る

　本稿では、「Developers Summit 2012」（デブサミ2012）において、2月16日に行われた氏によるセッション「次期Internet Explorer、IE10とHTML5 API」の内容を紹介する。 　現在、「Internet Explorer Test Drive」というサイトでプレビュー版（PP）が公開されている、マイクロソフトの次期ブラウザ「Internet Explorer（IE）10」。IE10はIE9では見送ったAPIを実装するなど、大幅にHTML5対応を強化している。なぜHTML5に注目が集まっているのか。HTML5対応を強化したIE10に実装予定のAPIを使うと、どんなサービスが実現できるのか。デモを交えて日本マイクロソフトの春日井良隆氏が解説した。

日本マイクロソフト株式会社 デベロッパー＆プラットフォーム統括本部
Webプラットフォーム推進部 春日井良隆氏

HTML5が持つ意味は“Semantic”と“Webアプリケーション”

　次世代のHTMLとして、W3Cで策定が進んでいるHTML5。Web系技術者の間で今、最も注目を集めている技術の一つだ。なぜ注目を集めるのか。春日井氏は「HTML5の持つ意味は“Semantic”と“Webアプリケーション”だ」という。

　Semanticを辞書で調べると、「語義の」「意味論の」という意味が出てくる。つまりHTML5は文書構造をマークアップするというHTMLの基本をより洗練させたものなのだ。それはHTML4と文書構造と比較すると、良く分かる。図を見れば分かるように、HTML4では「ヘッダー」「グローバルメニュー」「本文」「フッター」を「div」タグで囲んでおけばよかったが、HTML5ではヘッダーは「header」タグ、グローバルメニューは「nav」、本文は「section」、フッターは「footer」というタグを使う。「HTML5ではイメージや文字が持つ意味をきちんと意味づけしてマークアップをすることを意識することが求められる」と春日井氏は説明する。

　2つ目に挙げたWebアプリケーションとは、HTMLの技術だけでWebアプリケーションが実装できるということ。「そのためにWeb SocketsやDrag&Drop、Canvasなどさまざまな関連APIの仕様策定をHTML5のワーキンググループが進めている。このAPIこそがHTML5の本質だ」と春日井氏。例えばHTML5で実装されたAPIの一つにGeolocationというAPIがある。このAPIを使えば、GPSがなくともインターネットの接続ポイントから地理情報を取得することができる。

　「今はテストサイトだが、このようなサイトができることで、例えばラーメン屋にチェックインして玉手箱を開けるとクーポン券が出てきて、それを何枚か集めると無料になるというようなサービスも展開できる。つまりGeolocationというAPIが実装されることで、いろんな付加価値サービスが生まれてくることが期待できる」と春日井氏は熱く語る。

　とはいえ「APIであるがゆえに、実際のサービスやコンテンツでどう使えばいいのかピンと来ない方も多い」と春日井氏。そこで参加者へのヒントを提供するため、春日井氏は昨年末、シーエー・モバイルのWeb先端技術フェローの白石俊平氏に「Web Sockets」「File API」「IndexedDB」というAPIを生かしたアプリケーションの制作を依頼したという。

　ここで白石氏をはじめ、実際にプログラミングに携わったシーエー・モバイルのエンジニアとデザイナーも登壇。今回、3つのHTML5のサンプルアプリを披露してくれたのだが、「制作期間は1か月ぐらいしかなく、非常に厳しかった」と白石氏は振り返る。

　最初に紹介されたのはWeb Socketsを活用した「Japanese Chalkboard」。名前からも分かるように黒板をモチーフにしたアプリで、Node.js（サーバサイドJavaScript）、Socket.IO（Web Socketsを中心とした通信のライブラリ。Web Socketsが使えない端末ではXMLHttpRequestを使い通信する）、canvas、WebフォントのWOFFという技術が使われている。同アプリのアピールポイントは「ユーザがアクセスした瞬間に、他の人が書いた状態が再現されるところ」と白石氏。参加者にもそれを体感してもらうため、春日井氏はもう一つスクリーンを用意。中央のスクリーンには白石氏がJapanese Chalkboardに文字を書く様子。もう一つのスリーンにはほぼリアルタイムで白石氏の描いた文字が春日井氏のPC上のJapanese Chalkboardに再現されていく様子が映し出されていた。

　「Web Socketsの特徴は、サーバーとクライアントが対等に双方向通信できること。Japanese Chalkboardやチャットなどマルチユーザー系のアプリにとってはこれまでにないぐらいのリアルタイムな動きが期待できる」と白石氏は力説する。

　「Web Socketsを実装するにあたって苦労したこと、開発で注意したいところについて、春日井氏が尋ねたところ、「Web Socketsを扱うことで特に苦労はなかった」と白石氏は回答。さらに「Node.jsは実行速度に加え、開発速度も速いことに改めて気づかされた。」と白石氏は振り返る。

IE10ではHTML5が実装するより多くのAPIに対応

　次に紹介されたのはIndexedDBを使った「IDB Feed Reader」というアプリ。RSSリーダーの読み込みを、IndexedDBを使うことで、スクロールすると次々と読み込んでくれるというもの。本当はオフラインでも実装できるようにする予定だったのだが、まだAPIの仕様が不安定だったので、断念せざるを得なかった」と残念そうな表情の白石氏。しかもこのAPIは非常に使いにくかったのだそう。

　実際に実装を行ったエンジニアの石川氏は次のような感想を述べた。

　「これまで携わってきたのはLAMP環境でかつフィーチャーフォン向けのプログラム。初めて非同期処理をJavaScriptで書くことになり、その複雑さに最初は困惑したが、やっていくうちにだんだん勘所がつかめ、今では楽しくコードを書いている」（石川氏）という。

　とはいえ「十分、仲良くするにはまだ時間がかかりそう」とも石川氏は言う。なぜなら、ドキュメントは英語のものしかなく、「うその情報も流れていることもあるから」だそうだ。その中で役に立ったのが「Internet Explorer（IE）ブログ日本語版だった」と石川氏。春日井氏も「IEブログでは最新の情報が手に入るので、ぜひ活用してほしい」と来場者に訴えかけた。