新春特別企画

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

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

ご存知の通り,HTML5はWebを進化させる技術であり,多くの場合,静的なページにおける構造の強化やさまざまなAPIsによるWebアプリケーションの構築に注目されています。しかし一方で,HTML5はグラフィックスのための技術でもあります。

本稿では,グラフィックスのための技術として,HTML5や周辺技術を見てみましょう。

HTML5とその周辺の技術要素

最近まで,Web上での高度なグラフィックス表現と言えばFlash一択でした。しかし,iPhoneの登場,Android用Flashプラグインの開発中止,Windows8のIEにおけるプラグインフリー化などの影響でFlashにおける風当たりが強まってきています。一方で,HTML5やその周辺技術の進化とブラウザー側によるそれらのサポートの向上により,これまでFlashが担っていた表現が,少しずつ標準技術だけで実現が可能になりつつあります。

HTML5に関連するWebのグラフィックスの技術といってもさまざまで,次のような技術があります。

技術役割
HTML5 media(audio, video)HTML上に音声や動画の埋め込みとAPIs
CSS3(WebFonts, Transitions, Transforms, Animationなど)HTMLの表現向上
SVGベクターグラフィクスの埋め込み,タグとしてHTMLへの混在も可能
Canvas複雑な計算が必要な2D表現
WebGL複雑な計算が必要な3D表現

もちろん,すべてHTML5を中心とする標準技術であるため,JavaScriptを通じてそれぞれを組み合わせて利用できます。

注目されるGraphicalWeb

こうした新しいWebのグラフィックス技術の拡大もあり,2012年にはThe Graphical Webというカンファレンスがスイス開催されました。

The Graphical Web2012のWebサイト

The Graphical Web2012のWebサイト

実はこのカンファレンス,2002年から10年以上も続いているカンファレンスで,2011年まではSVG Openという名前で開催されていました(ちなみに,2007年には日本で開催されました)。しかし,2012年からカンファレンス内で扱う技術はSVGのみにとどまらず,HTML5 media,CSS3 Animations,2D Canvas,WebGLなどの技術も取り上げることとなり,こうした技術の総称としてカンファレンスのタイトルを「The Graphical Web」へと変えたのです。

The Graphical Web 2012では2日間2トラックの構成で,たくさんの技術や事例を取り上げました。そしてThe Graphical Web 2013はアメリカで開催される予定です。

歴代SVG OpenのWebサイト

歴代SVG OpenのWebサイト

Adobeもまた,新しいWebのグラフィックス技術に注目しており,Web Platform Team Blogでは,エクスペリメンタルなCSSの機能などを取り上げた記事が発信されています。また,同社のコンテンツ,The Quest for The Graphical Webでは,Webグラフィックスのための技術を解説しています。

The Quest for The Graphical Web

The Quest for The Graphical Web

このように,Graphical Webのための技術は仕様とそれを利用するための環境であるブラウザーが整備されつつあり,さらにそれら技術が積極的に推進される傾向にあります。

実用されるGraphical Webな技術

こうしたGraphical Webのための技術は,既にいくつかのコンテンツで実用もされています。例を見てみましょう。

PROJECT PROMETHEUS : TRAINING CENTER

PROJECT PROMETHEUS : TRAINING CENTERは2012年に公開された映画「プロメテウス」のサイト内のコンテンツです。宇宙船に乗り込む隊員の訓練を想定したミニゲームから,「プロメテウス」の世界観を感じることができます。

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

画像

著者プロフィール

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

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

コメント

コメントの記入