新春特別企画

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

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

Graphical Webをささえるライブラリー

これらGraphical Webのための技術を支えるJavaScriptライブラリーもたくさん登場しています。というのも,特にcanvasやWebGLは低レイヤーのAPIです。そのため,実際に利用するとなるとたくさんの管理すべき項目がでてきてしまい,コードは複雑になってしまいます。そこで,描画した情報をオブジェクトとして保持できるJavaScriptライブラリーを活用するという選択があります。

ここではそれらの中でも特に注目すべきライブラリーを紹介します。きっと開発の手助けとなってくれるでしょう。

Raphael.js

Raphael.jsはSVGによる描画を管理するためのライブラリーです。SVGに対応していない,IE6, 7, 8 にはVMLというSVGによく似た機能で自動的に対応できます。

画像

D3.js

D3.jsは単なる数値の集まりなどの「データ」を視覚化するためのライブラリーです。データをグラフや木構造,分類分けなど,さまざまな視覚情報としてSVGなどに出力させることに特化しています。

画像

Paper.js

Paper.jsは2D canvasによる描画を管理するためのライブラリーです。内部的にベクター情報を持たせることもできます。

画像

CREATEJS

CREATEJSは2D canvasによる描画や,アニメーション,音声,ローディングの4つから構成されるライブラリー群です。それぞれを個別に利用することもでき,例えば,前述したPaper.jsとCREATEJSのTWEENJSを組み合わせるといったことも可能です。

画像

three.js

three.jsはWebGLによる描画を管理するためのライブラリーです。直感的に3D空間を操作することができます。

画像

まとめ

ここまで見てきた通り,HTML5時代における各種仕様とブラウザーの進化に伴い,開発に利用できる技術の幅は広がっています。そして,そこにはたくさんのグラフィックスのための技術も含まれています。Graphical Webな技術はコンテンツ表現の向上,ゲーム,アート,データの視覚化などさまざまに応用することができ,これによりユーザーの心をつかむ素晴らしいコンテンツを世に送り出すことができます。

今回注目したような表現を工夫したコンテンツは,現時点でまだまだWeb上に多数利用されているとはいえない状況です。しかし2013年,そしてその先,さらに多くのグラフィカルなコンテンツが登場しWebを華やかにしていくでしょう。

著者プロフィール

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

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