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は実行速度に加え、開発速度も速いことに改めて気づかされた。」と白石氏は振り返る。
次に紹介されたのはIndexedDBを使った「IDB Feed Reader」というアプリ。RSSリーダーの読み込みを、IndexedDBを使うことで、スクロールすると次々と読み込んでくれるというもの。本当はオフラインでも実装できるようにする予定だったのだが、まだAPIの仕様が不安定だったので、断念せざるを得なかった」と残念そうな表情の白石氏。しかもこのAPIは非常に使いにくかったのだそう。
実際に実装を行ったエンジニアの石川氏は次のような感想を述べた。
「これまで携わってきたのはLAMP環境でかつフィーチャーフォン向けのプログラム。初めて非同期処理をJavaScriptで書くことになり、その複雑さに最初は困惑したが、やっていくうちにだんだん勘所がつかめ、今では楽しくコードを書いている」（石川氏）という。
とはいえ「十分、仲良くするにはまだ時間がかかりそう」とも石川氏は言う。なぜなら、ドキュメントは英語のものしかなく、「うその情報も流れていることもあるから」だそうだ。その中で役に立ったのが「Internet Explorer（IE）ブログ日本語版だった」と石川氏。春日井氏も「IEブログでは最新の情報が手に入るので、ぜひ活用してほしい」と来場者に訴えかけた。
HTML5は「Native to Windows」に
最後に紹介されたのは、「MOGUTARO eats files!」というFile APIのほか、Video、Audio、Drag&Dropなどのタグを使ったすべてアニメーション・アプリ。「さまざまなファイルを食べさせたときのエフェクトにかなりこだわった」と白石氏。
MOGUTAROに画像を食べさせるデモを実施。すると画像を表示するだけではなく、その画像に使われている色を割り出し、その色で構成された虹を表示。「音楽ファイルを食べさせると、音楽を再生したり、動画の再生もできる」（白石氏）のだという。
これが容易にできたのは「IE10がURL.createObjectURL()を実装していたから」と白石氏は語る。URL.createObjectURL()は動画を読み込み、動画に対する参照を文字列で返してくれる。そしてそのURLをvideoタグのSRC属性で指定すれば再生してくれるからである。
このアプリを開発して「気づいたことが2点ある」と白石氏は言う。1点目は今回のようなアニメーションやゲーム開発では、Canvas、SVG、DOM+JS、DOM+JS+CSS3なのか、どの技術を使えばよりよくできるか、大きな影響を伴う設計判断が最初に必要になるということ。
「MOGUTAROの場合、基本はDOM+JSで作り、虹の部分はCanvasを使った」と白石氏は明かす。春日井氏も「どの技術をどう使うか。これからのWeb開発者の力量を左右するポイントになる」と同調。
またもう一つの気づきが、デザイナーとより協調して制作にあたる必要性が増すという点。通常、デザイナーは固定サイズでデザインする。しかしMOGUTAROはフルスクリーン。ブラウザによって雲の位置がずれたりするので、静止画と印象が変わってしまうこともあったという。そこでエンジニアとコミュニケーションを取り、画像を作っていったと、MOGUTAROのデザイナーは語る。白石氏も「インタラクティブなアニメーションを作るときは、デザイナーとの密なコミュニケーションは必須。やってみなければ分からないことも多かった」と付け加えた。
「昨年3月、米国本社が開催したMIX12というイベントで『HTML5:Native to Windows』という発言があったように、HTML5はもはやIEに留まらない技術だ」と春日井氏。Windows 8ではMetroというタッチインターフェースを前提としたUIが搭載される。このMetroスタイルのアプリは、C++やXAMLといったWindowsの技術だけでなく、HTML5とJavaScriptでも開発できる。つまり、WindowsのネイティブアプリがWebの技術で開発できるようになるということなのだ。
最後に春日井氏は「IE10 PPがダウンロードできるほか、HTML5やCSS3のソースコード、パフォーマンスの確認などができるWeb制作者向けの情報を提供する『IE Test Drive』、IEを含めWindowsで動作する主要ブラウザのHTML5の各要素の実装がどんな状況にあるのかが検証ができる『IE Testing Center』、時期尚早と判断されたAPIに関する情報を提供する『HTML5 Labs』などのサイトを用意。Webの開発者はぜひこれらのサイトを活用し、情報収集に努めてほしい」と語り、セッションを締めた。
日本マイクロソフト株式会社
マイクロソフト カスタマー インフォメーション センター
TEL：0120-41-6755（9：30～12：00、13：00～19：00、
土日祝日、弊社指定休業日を除きます）
