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

福田悦朋
2015-01-26 16:59:00
  • このエントリーをはてなブックマークに追加

高まる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は、そんな時代に最適なソリューションと言えるのです」

このサイトでは、利用状況の把握や広告配信などのために、Cookieなどを使用してアクセスデータを取得・利用しています。 これ以降ページを遷移した場合、Cookieなどの設定や使用に同意したことになります。
Cookieなどの設定や使用の詳細、オプトアウトについては詳細をご覧ください。
[ 閉じる ]