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、
土日祝日、弊社指定休業日を除きます)