新春特別企画

Graphical Webの拡がり;HTML5とその周辺技術で実現する

この記事を読むのに必要な時間:およそ 2.5 分

The Hunger Games - Capitol Tour

The Hunger Games - Capitol Tourは2012年に公開された映画「ハンガー・ゲーム」の世界観である,富裕層が支配する近未来の世界を知ることができるコンテンツです。表現にはvideoやcanvasが活用されています。

  • 活用されている技術:video, audio, canvas

画像

LIGHTNING RETURNS : FINAL FANTASY XIII

FINAL FANTASY 13の続編,LIGHTNING RETURNSの作品紹介コンテンツLIGHTNING RETURNS : FINAL FANTASY XIIIはcanvasを中心とした表現が利用されています。コンシューマー向けゲームのWebサイトというと,Flashを採用することがほとんどでした。しかし,このコンテンツの登場にWebの新しい時代を感じることができるでしょう。

  • 活用されている技術:video, audio, canvas

画像

Contre Jour

Contre Jourはcanvasを中心に利用したゲームコンテンツで,非常になめらかに動作します。物理演算エンジンにはJavaScript版box2dが利用されています。

  • 活用されている技術:canvas

画像

The Evolution of the Web

The Evolution of the WebはSVG生み出すなめらかな曲線を活用したブラウザーの歴史年表の表示から,複雑なWebの歴史を学ぶことができます。

  • 活用されている技術:SVG, CSS3 3D transforms

画像

Zeitgeist 2012

Zeitgeist 2012は2012年によく検索された世界中のできごとを地図上に表示します。CSS 3D transformsにより,奥行きをもたせた地図のナビゲーションを実現しています。なお,CSSの3D変換はIE10からも一部対応されているため,IE9以下では平面で表示されますが問題なく操作します。高度なブラウザーでは,よりよい体験ができるというわけです。

  • 活用されている技術:CSS3 3D transforms

画像

GoogleMaps with MapGL

Google MapではWebGLが活用されています。MapsGL機能を有効にすると,地図の建築物などがその高さに応じて3Dで表示されるなど,立体的な表示になります。MapsGLを有効にして西新宿の高層ビル群周辺で地図を動かすとパースが有効な地図を体験できます。

  • 活用されている技術:WebGL

画像

adizero f50

スポーツ用品メーカーのアディダスのWebサイト内にあるadizero f50では,製品紹介としてWebGLが利用されています。スポーツシューズを上下左右好きな方向から3Dで表示することができ,さらには分解して内部構造も知ることができます。

  • 活用されている技術:WebGL

画像

このように,2012年の時点でたくさんのコンテンツにさまざまな新しい標準技術が取り入れられ,トラフィックが多いであろうWebコンテンツにも積極的に利用されはじめているという事実があります。

著者プロフィール

小山田晃浩(おやまだあきひろ)

1982年生まれ。2006年よりWeb制作会社にてUI実装や運用業務を経験した後,2010年よりフロントエンド・エンジニアとして(株)ピクセルグリッドに参加。コーポレートサイトを中心に,数々のWebサイトにおけるUI実装経験を持つ。Web関連雑誌での執筆活動や技術関連の講演も行うほか,個人のブログ「ヨモツネット」ではHTMLやXML,CSSなどに関する技術の情報を発信している。Microsoft MVP fot Internet Explorer