HTML5はグラフィックのための技術

HTML5やそれに関連する技術は、WebページやWebアプリケーションを作るための技術として注目されていますが、同時にグラフィックスのための技術でもあります。

たとえば、HTML5では動画を埋め込めるvideo要素や、audio要素があります。CSS3では、アニメーションを可能にするtransitionやanimation関連のプロパティ、また要素の変形を行うtransformなどの新しいプロパティが加わります*。

また、タイポグラフィーを豊かにする@font規則（WebFonts）など、フォントやテキストに関するプロパティも強化されます。

HTML5のcanvas要素はスクリプトで処理した画像を表示することができます。これはこれまでFlashで表現することが多かったパーティクルのような効果が可能です。

また、出力だけでなく、画像の入力も可能です。画像を入力し、プログラムで処理後に出力といったことが可能ですので、たとえば次のデモのように、クロマキー合成（特定の色成分を透明にしそこに別画像を合成する）ことも可能です。

これは以下のような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で描画されています。

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

• インラインSVGが可能なら、innerHTMLでそのままソースを展開
• XHTMLとしてSVGの混在が可能なら、SVGをXMLとしてパースして展開
• 上記のいずれも不可の場合なら、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を利用したサンプルです。キー操作で前後左右、立ったりしゃがんたりすることができます。またマウスドラッグで視点が変えられます。

新しい技術の特徴

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

プラグインなし

これまでのインタラクティブなグラフィック表現は、たとえば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にフォーカスし、実装方法などを詳しく解説していきます。