注目される「WebGL」--プロが示すHTML5でのフロントエンド演出の勘所

高まるWebGLへの期待

　「高級ペライチ」のページ作りにせよ、「面白コーポレート」のサイト作りにせよ、ウェブ広告系の制作に究極的に求められるのは、表現力の高さや豊かさであると中農氏は指摘する。そうしたリッチなコンテンツをHTML5で実装する際にカギとなるのが、ビットマップデータを扱うためのHTML5仕様「Canvas」やXMLベースのベクター画像用画像形式である「SVG（Scalable Vector Graphics）」、そしてWebGLであるという。

　このうちSVGは、HTML5のAPIではないものの、HTML5に直接埋め込むことが可能であり、「拡大縮小時にイメージが劣化しないグラフィックスを実装できる」「Adobe Illustratorでデータを作成できる」「単体でグラフィックスアニメーションを作れる」「クリックイベントに対応する」といった特徴を備え、今後、普及が予想されると中農氏は語る。

　中農氏がSVG以上に注目し、活用に力を注いでいるのがWebGLであるようだ。「WebGLならば、3Dゲームを開発したり、360度回転させられる商品イメージを表示させたり、シェーダーで3Dオブジェクトの質感をさまざまに切り替えたりと、多彩な表現・演出をウェブ上で展開することが可能です。しかも、iOS（8以降）やAndroid（4.1以降）もWebGLへの対応を済ませています。フロントエンドの表現力を高める技術として、WebGLには大きな期待がかかるのです」（中農氏）

　とはいえ、WebGLには、実際のコーディングに手間がかるというネックもあるという。「何しろ、WebGLの場合、1つの三角形を描くだけで200行ものコードを記述しなければなりません。また、WebGLの実装を省力化する定番ライブラリ（three.js）は存在するものの、それを実案件で使うとなると、足りないメソッドも少なくなく、多くの部分を自前で実装する必要に迫られるのです」と中農氏は指摘する。

　そんな中、WebGLを巡り、興味深い動きも見られているという。具体的には、前出のUnityが次期バージョン（Unity 5）からWebGLコードの書き出しを正式にサポートする予定なのだ。

　このプロジェクトは、Unityの開発元であるUnity TechnologiesとFirefoxのMozillaとの協業で進められているもので、JavaScriptのサブセット言語仕様「asm.js」が、その基盤を成している。asm.jsは、高速JavaScriptを実現するための言語仕様で、MozillaとUnity Technologiesはすでに、Unityで開発したゲームをウェブ上に公開するためのツールをWebGLとasm.jsをベースに開発、提供している。

　このツールは、UnityのゲームエンジンのWebGLとasm.js対応を実現するものでもあり、その働きによってUnityで開発されたコンテンツが、WebGLをサポートするブラウザ上で動作するようになるという。asm.jsが実装されたFirefox上では、Unityのゲームコンテンツがネイティブコードと遜色のないスピードで動作するとされている。

マルチブラウザ時代に最適なHTML5

　中農氏は講演のまとめとしてHTML5を利用するメリットに改めて言及している。同氏は言う。

　「HTML5ベースのコンテンツなら、ユーザーに何もインストールさせずにさまざまな体験を提供でき、あらゆるユーザーに訴求すべきことをスピーディに伝えることが可能です。これは、ネイティブアプリケーションではなし得ない世界です」

　さらにこうも語り、講演を締めくくる。

　「HTML5は、スマートフォンやタブレットでも標準的にサポートされており、稼働環境の幅が非常に広い言語です。周知の通り、今日は1人が複数のブラウザを持ち歩く時代です。HTML5は、そんな時代に最適なソリューションと言えるのです」