フロントエンドのグラフィック技術HTML5関連の新技術は、これまでになかった豊かなグラフィック表現を可能にします。はじめにフロントエンド技術で扱えるようになってきたグラフィック関連技術を概観してみましょう。晃浩フロントエンド・エンジニア次回このシリーズの記事一覧をみる基本的な考え方は変わりませんが、一部書式が変更されています。古いライブラリバージョンは、現在最新のブラウザで再生できない機能が含まれています。新しい技術の特徴フロントエンドエンジニアのもう一つの道HTML5はグラフィックのための技術HTML5やそれに関連する技術は、WebページやWebアプリケーションを作るための技術として注目されていますが、同時にグラフィックスのための技術でもあります。HTML5では動画を埋め込めるvideo要素や、audio要素があります。CSS3では、アニメーションを可能にするtransitionやanimation関連のプロパティ、また要素の変形を行うtransformなどの新しいプロパティが加わります*。*注:CSS3アニメーションCSS3アニメーションに関しては以下のシリーズが配信されています。「根っこから学ぶCSS3アニメーション」また、タイポグラフィーを豊かにする@font規則(WebFonts)など、フォントやテキストに関するプロパティも強化されます。HTML5のcanvas要素はスクリプトで処理した画像を表示することができます。これはこれまでFlashで表現することが多かったパーティクルのような効果が可能です。出力だけでなく、画像の入力も可能です。画像を入力し、プログラムで処理後に出力といったことが可能ですので、例えば次のデモのように、クロマキー合成(特定の色成分を透明にしそこに別画像を合成する)ことも可能です。canvas要素を使った画像解析(音がでます)ここではJavaScriptでvideo要素の1コマ1コマをcanvas内に取得し、白色に近いピクセルを透明にして出力しています。これは、canvas内の全ピクセルの色成分を取得することができるために可能なのです。これは以下のようなJavaScriptにより実現されています。0);こういった画像を解析する仕組みを応用することで、canvas要素で「写真内の顔認識」やHTML5の技術のみでARの実現も可能です。Coreと呼ばれるHTML5そのものの仕様のほかに、周辺技術も含まれる場合があります。それらの周辺技術の中では、SVGやWebGLといったグラフィック表現に関する技術も含まれます。SVGの利用HTML5の周辺技術には、例えばSVGがあります。Explorerが対応していないなど、なかなか利用しづらい状態にありました。Explorerはバージョン9からSVGをサポートしており、最近になって実務レベルで利用しやすい状況になりつつあります。従来、Webでの表現といえば、縦と横だけの矩形(四角)の世界でした。SVGを使えば、斜めや、曲線などをの表現を取り入れることができます。以下の地図はSVGで描画されています。SVGで描画された地図AjaxでSVGを取ってきて表示させています。上部のボタンを押すと、その場所からの道のりが表示され、見やすいようにズームがかかります。このデモでは、さまざまなブラウザからのアクセスにもコンテンツの意味を損なわないように、Ajax時に以下のような場合分けをしています。「インラインSVG」をレンダリングできますが、古いiOSなどは、インラインSVGは使えません。XHTMLであればSVGが使えます。実行されることになります。WebGLの利用WebGLはOSネイティブのアプリケーションなどで使われているOpenGLのWeb版ともいえる技術で、3Dの表現をブラウザ上で可能にします。OpenGLのJavaScript版といってよいでしょう。WebGLは、GLSL(シェーダープログラミング言語)と呼ばれるC言語に近い言語をJavaScript内で併用し、その設定のために冗長な処理も必要です。JavaScriptのプログラムを手がけるWebのフロントエンドエンジニアには若干敷居の高い技術かもしれません。WebGLによるレンダリング(表示)を扱うためのTHREE.jsというライブラリがあり、これを使えば複雑なGLSLやその他の処理を単純な記述にラップすることができ、実装がしやすいでしょう。以下はTHREE.jsのAPIからWebGLを利用したサンプルです。2012とChrome20の組み合わせでは、WebGLが一時的に無効になっています。WebGLのデモが表示されない場合には、Firefoxなど別のブラウザで表示してみてください。Chromeのアドレスバーにabout:gpuと入力すると、現在の設定が分かります。Status」の欄で赤く示されている機能は、一時的に使用できません。Releases」を参照してください。Googleによれば後続のバージョンで修正される予定とのことです。THREE.jsを用いたWebGLのデモキー操作で前後左右、立ったりしゃがんたりすることができます。マウスドラッグで視点が変えられます。新しい技術の特徴これらの技術にはいくつかの共通点があります。Playerが必要でしたし、3Dの表現なども専用のビューアをインストールする必要がありました。上記の技術はすべてブラウザが対応している(もしくは今後対応するであろう)技術ですので、特別なプラグインが必要ありません。JavaScriptとの親和性が高い用意されたAPIやDOM操作によって、JavaScriptからさまざまな操作をすることが可能です。これは周辺技術のSVGやWebGLも同様です。ライブラリもそろいつつあるライブラリ類もそろいつつあります。jQueryのような誰もが使う定番ライブラリはまだありませんが、次回以降で紹介するTHREE.jsというライブラリは、WebGLをより簡単に実装するためのJavaScriptライブラリです。その他にもRaphael.jsやbox2d.js、ammo.jsなどさまざまな安定したライブラリがすでに存在しています。フロントエンドエンジニアのもう一つの道このようにHTML5とそれを取り巻く技術には、さまざまなグラフィックスに関連する豊富な技術、APIが存在しています。これらの技術を習得したフロントエンドエンジニアはWebグラフィックスデベロッパーであるともいえるのです。次回からはWebグラフィックの新しい技術のなかでも、もっとも派手であるWebGLにフォーカスし、実装方法などを詳しく解説していきます。晃浩フロントエンド・エンジニア2006年よりWeb制作会社にてUI実装や運用業務を経験した後、2010年よりフロントエンド・エンジニアとして株式会社ピクセルグリッドに入社。これまでの経験の大半は大規模Webサイトの壊れにくいHTML/CSS設計、及び実装。WebGLの扱いも得意としている。外部に向けたアウトプットも積極的に行っており、カンファレンスでの講演などを多数こなしている。Meetupの主催者。プロフェッショナルガイド』(共著:毎日コミュニケーションズ、2011年5月28日)』などがある。特定商取引法に基づく。