Chrome担当者が紹介する最先端Web技術

驚異的な勢いでシェアを伸ばしているGoogle Chrome。他のWebブラウザに先んじて短周期リリースを採用し、Web技術の進化のスピードを大きく加速させたのはご存知のとおりだ。

では、そのChrome開発に関わるエンジニアは果たしてどのような未来を描いているのか。また、最新のWeb技術を駆使するとどこまでのことができるのか。本誌は、米GoogleでChromeチームに所属するIan Ellison-Taylor氏に話を聞いたので、その模様をお伝えしよう。

最新技術を駆使したWebアプリケーション4選

Ellison-Taylor氏は、製品担当ディレクター オープンウェブプラットフォーム担当という立場から、最先端の技術を活用したWebアプリケーションの普及に取り組んでいる人物。以前はMicrosoftに所属しており、Windows 3.1からWindowsの開発に関わっていたという。

Microsoftでは、Windows 95/XPでUIチームのマネージャーを担当。その後、WPF & Silverlightチームの立ち上げに参画し、「Client Platforms and Tools」のゼネラルマネージャーを任されるなど、UI周りで広く活躍した経歴を持つ。

11月に開催された日本のGoogle Developer Dayではグーグル シニア エンジニアリング マネージャーの及川卓也氏に譲ったが、米国開催の開発者イベント、Google I/O 2011で基調講演のChrome/Web UIパートを担当したのがEllison-Taylor氏である。最新のWeb標準技術とそれを活用したアプリケーションを広く知る有識者として社内外で支持されている。

そのEllison-Taylor氏にはまず、最新のWeb技術を駆使すると、どこまでのことができるのかを伺った。すると、氏は"百聞は一見にしかず"ということで、「Chrome Experiments」から注目のWebアプリケーションをいくつかピックアップしてくれたので、そちらをご紹介しよう。

インタラクティブに視点を変えられる3Dツアー- ROME

氏が、最新技術を駆使したWebアプリケーションとして初めに選んだのが「ROME」だ。

ROMEは、Kanye West、U2、Green Dayらのミュージックビデオを手がけるディレクター/フォトグラファーのChris Milk氏とGoogleのエンジニアが共同で作成したアプリケーション。ミュージシャンのPVのような映像から始まり、徐々に3Dグラフィクスの世界へと移行する動画になっている。

3Dグラフィクスのパートでは、列車や車に乗って、ビルが立ち並ぶ都市や動物が行き交う草原などを移動していく。その際、マウスで視線を変え、後ろへ流れていく上下左右の景色をさまざまな角度から確認することができる。単なる動画ではなく、インタラクティブな操作ができる点が大きな特徴だ。

また、同アプリは「表現力の高いWebGLでどのようなことができるのかを示す、開発者向けのデモアプリとして作られている」(Ellison-Taylor氏)と言い、ソースコードや、WebGLのプログラミングを始めるうえで役立つ各種リソースへのリンクも設定されている。

マウスに合わせて滑らかに動く3D流体 - Voxels Liquid

続いて紹介したのが、同じくWebGLを活用した「Voxels Liquid」である。

アプリケーション名にある「Voxels」とは、3Dの"格子点"を表す単語で、2Dの「pixel」に相当するもの。したがって、Voxels Liquidは「3Dで描画した液体」といった意味になる。

その名のとおり、Voxels Liquidでは、マウスの動きに合わせて3Dの液体が揺れていく。動きも非常に滑らかで、「Webアプリケーションの表現力が格段に向上したことを示す良いサンプル」(Ellison-Taylor氏)になっている。

入力文字を人文字で出力 - All Is Not Lost

3つ目は、米国のバンド「OK Go」とダンサー集団「Pliobolus」による共同作品「 All Is Not Lost」だ。こちらはGoogleがChromeのプロモーションで使用していたので、ご存知の方も多いかもしれない。

同アプリケーションは、「WebGL、HTML5 Audio、HTML5 Videoなどが使って作成されている」(Ellison-Taylor氏)。トップ画面で文字を入力すると、OK Goのメンバーが音楽に合わせて動き回りながら入力文字を人文字で作りはじめる。実行に際しては、大量のウィンドウが開き、それらを横断的に使用して1つの動画を再生していくという特徴的な構成になっている。

また、このプロジェクトは日本のGoogleにあるチームを中心として制作された。文字入力は、英語のみならず、日本語(カタカナのみ)にも対応しているので英語が苦手なユーザーも気軽に試せる。

そのほか、Ellison-Taylor氏は、WebGLを駆使したアプリケーションの例として、「3DTin」や「WebGL Skin」などの名前も挙げた。いずれも非常に高度な描画技術が使われているので、WebGL対応グラフィックチップ搭載端末をお持ちの方はアクセスしてみるとよいだろう。

さりげなく便利になっている翻訳サービス - Google Translate

そしてもう1つ、Ellison-Taylor氏が取り上げたのが、HTML5に取り込まれる予定のSpeech APIに対応した「Google Translate」だ。

標準化に先行してSpeech APIに対応しているChromeを使ってGoogle Translateにアクセスし、翻訳元言語に英語を選択すると、入力テキストフィールドの左下にマイクのアイコンが表示される。それをクリックすれば、マイクを使った音声入力が行える仕組みだ。入力した音声は、テキスト表示された後に指定した言語に翻訳される。

実はこのSpeech APIの最大の魅力の1つは、非常に手軽に導入できる点にある。具体的には、「input要素の属性に『x-webkit-speech』といった指定を行うだけ (正式にHTML5に取り込まれた際には異なる指定方法になるとみられる) 」(Ellison-Taylor氏)。Google I/Oの基調講演でも、Webアプリケーションのソースコードをその場で修正して音声入力を有効にするデモが披露されていた。

なお、Google Translateの音声入力機能は、現在のところ英語のみの対応となっている。