入門
第1回 フロントエンドのグラフィック技術

HTML5関連の新技術は、これまでになかった豊かなグラフィック表現を可能にします。はじめにフロントエンド技術で扱えるようになってきたグラフィック関連技術を概観してみましょう。

2012年07月26日発行
基本的な考え方は変わりませんが、一部書式が変更されています。また古いライブラリバージョンは、現在最新のブラウザで再生できない機能が含まれています。(2016年9月現在)

目次

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により実現されています。

// video要素をとってきてtimeupdateイベントをバインドする(動画が再描画されるたびに発火するイベント)
document.querySelector('video').addEventListener('timeupdate', function(){
    // canvas要素取得
    var canvas = document.querySelector('canvas');
 
    // canvasのコンテキスト取得
    var ctx = canvas.getContext('2d');
    // thisとはvideoである
    var video = this;
    
    // キャンバスの幅と高さをvideoと同じに設定
    ctx.width  = video.videoWidth;
    ctx.height = video.videoHeight;
 
    // 0, 0の座標を起点に現在の動画のフレームを画像として描画
    ctx.drawImage(video, 0, 0);
 
    // 描画した動画のフレームのピクセルデータを取得
    var pxdata = ctx.getImageData(0, 0, canvas.width, canvas.height);
 
    // 白抜きする対象のピクセル数を保持する変数
    var totalpx = 0;
 
    // 現在のフレームのすべてのピクセル(縦*横)分ループで回す
    for(var i = 0; i < canvas.width * canvas.height; i++){
        // RGBを数値で取得(1番目:red、2番目:green, 3番目:blue, 4番目:透明度)
        var r = pxdata.data[i * 4 + 0];
        var g = pxdata.data[i * 4 + 1];
        var b = pxdata.data[i * 4 + 2];
 
        // 白っぽいデータのところを透明にする
        if (g > 200 && r > 200 && b > 200){
            pxdata.data[i * 4 + 3] = 0;
            totalpx += 1
        }
    }
 
    // キャンバスに再描画
    ctx.putImageData(pxdata, 0, 0);
 
    // 白抜きしたピクセル数をHTMLに表示
    document.querySelector('p').innerHTML = '対象のpx :' + totalpx + '/' + (canvas.width * canvas.height);
d}, 0);

こういった画像を解析する仕組みを応用することで、canvas要素で「写真内の顔認識」やHTML5の技術のみでARの実現も可能です。

グラフィカルな表現を可能にする周辺技術

「HTML5」という呼び方には、HTML5 Coreと呼ばれるHTML5そのものの仕様のほかに、周辺技術も含まれる場合があります。それらの周辺技術の中では、SVGやWebGLといったグラフィック表現に関する技術も含まれます。

SVGの利用

HTML5の周辺技術には、例えばSVGがあります。SVGの仕様自体は古くから存在していましたが、最近までは、大きなシェアを占めるInternet Explorerが対応していないなど、なかなか利用しづらい状態にありました。

しかしInternet Explorerはバージョン9からSVGをサポートしており、最近になって実務レベルで利用しやすい状況になりつつあります。

従来、Webでの表現といえば、縦と横だけの矩形(四角)の世界でした。しかしSVGを使えば、斜めや、曲線などをの表現を取り入れることができます。

例えば、以下の地図はSVGで描画されています。

SVGで描画された地図
AjaxでSVGを取ってきて表示させています。上部のボタンを押すと、その場所からの道のりが表示され、見やすいようにズームがかかります。

なお、このデモでは、さまざまなブラウザからのアクセスにもコンテンツの意味を損なわないように、Ajax時に以下のような場合分けをしています。

  1. インラインSVGが可能なら、innerHTMLでそのままソースを展開
  2. XHTMLとしてSVGの混在が可能なら、SVGをXMLとしてパースして展開
  3. 上記のいずれも不可の場合なら、PNG画像を表示

現在、ほとんどのブラウザが1. の「インラインSVG」をレンダリングできますが、古いiOSなどは、インラインSVGは使えません。ただし、2. XHTMLであればSVGが使えます。また、旧IE(6、7、8)やAndroid2.x系では、3. が実行されることになります。

WebGLの利用

WebGLはOSネイティブのアプリケーションなどで使われているOpenGLのWeb版ともいえる技術で、3Dの表現をブラウザ上で可能にします。OpenGLのJavaScript版といってよいでしょう。

ただ、WebGLは、GLSL(シェーダープログラミング言語)と呼ばれるC言語に近い言語をJavaScript内で併用し、その設定のために冗長な処理も必要です。

ですので、JavaScriptのプログラムを手がけるWebのフロントエンドエンジニアには若干敷居の高い技術かもしれません。しかしながら、WebGLによるレンダリング(表示)を扱うためのTHREE.jsというライブラリがあり、これを使えば複雑なGLSLやその他の処理を単純な記述にラップすることができ、実装がしやすいでしょう。

以下はTHREE.jsのAPIからWebGLを利用したサンプルです。

一時的にWebGLが使えないMacBookAir Mid 2012(2012年7月24日現在)

2012年7月24日現在、MacBookAir Mid 2012とChrome20の組み合わせでは、WebGLが一時的に無効になっています。WebGLのデモが表示されない場合には、Firefoxなど別のブラウザで表示してみてください。

Chromeのアドレスバーにabout:gpuと入力すると、現在の設定が分かります。「Graphics Feature Status」の欄で赤く示されている機能は、一時的に使用できません。

詳しくは「Google Chrome Releases」を参照してください。Googleによれば後続のバージョンで修正される予定とのことです。

THREE.jsを用いたWebGLのデモ
キー操作で前後左右、立ったりしゃがんたりすることができます。またマウスドラッグで視点が変えられます。

新しい技術の特徴

これらの技術にはいくつかの共通点があります。

プラグインなし

これまでのインタラクティブなグラフィック表現は、例えばFlashなどはFlash 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設計、及び実装。また、SVG, Canvas, WebGLの扱いも得意としている。 外部に向けたアウトプットも積極的に行っており、カンファレンスでの講演などを多数こなしている。Tokyo WebGL Meetupの主催者。2011年から2015年まで5連続でMicrosoft MVP for IEを受賞。 著書に『Webデザイナー/コーダーのための HTML5コーディング入門』(共著:エクスナレッジ、2011年3月12日)や『CSS3デザイン プロフェッショナルガイド』(共著:毎日コミュニケーションズ、2011年5月28日)』などがある。