HTML5から最初に連想されるものといえば、リッチなユーザーインターフェース。表現力豊かなサービスがHTML5により実現されます。Webアプリケーションの進化に対し、リッチなインタフェース処理はなくてはならない機能といえるでしょう。これらの機能は、Canvas/SVG/WebGLと呼ばれる画像処理系のAPIにより実現されます。
第22回を数える今回の「HTML5とか勉強会」では、これら「グラフィック関連API」をテーマとし、10月26日（水）に開催しました。本稿では、今回のイベントの模様をレポートします。
今回、場所を提供いただいたのはマイクロソフトさん。今年2月に移転した品川オフィスの、とても綺麗な会議室をお借りしました。マイクロソフトさんは、常日頃から大変好意的で、コミュニティ活動にも積極的です。勉強会終了後のビアバッシュの会場提供含め、大変お世話になりました。厚く御礼申し上げます。
「Processing.jsってなんだ？」
まず最初にご登壇いただいたのは、ゼロベース株式会社の田中さん。平易な記述で、Canvasなどを用いた描画処理を可能とするProcessing.jsについて講演いただきました。
冒頭は、"Processing"についての紹介。MITメディアラボで開発されたプログラミング環境で、デザイナー／アーティスト向けのグラフィック操作に特化したものです。Javasをベースとした言語で、簡潔・直感的なAPIとなっており、特に海外で利用されているとのことでした。
この"Processing"をJavascriptで利用できるようにしたのが、"Processing.js"です。ProcessingをJavascriptに変換し、Canvasを用い描画処理を行うライブラリ。現在では、9割程度のProcessing APIをエミュレートしているそうです。開発されているのは、jQueryやjQuery Mobileの開発者として有名なJohn Resigさん。Processing2.0では、正式対応を予定しており、Processing.jsが本体に組み込まれるそうで、IDEを用い効率的な開発が可能になるとのことでした。
基本的な2D処理に加え、WebGLを用いた3D処理にも対応。Processingのこれまでの資産が流用可能であることも言及しました。コードの変換コストや、Canvasでプレーンに書くときに比べ非効率となるため、パフォーマンスが落ちるのが注意点とのこと。とはいえ、簡単にグラフィック処理を実現できますので、是非トライしてみてください（発表資料は、こちらで公開されています）。
「SVG Overview」
続いて登壇いただいたのは、グリー株式会社の渡辺さん。SVG（Scalable Vector Graphics）仕様の詳細について講演いただきました。
SVGは、ベクター画像を取り扱うフォーマットで、ベクトル情報から描画座標などの計算を行った後、実際の描画を行います。このため、拡大／縮小に強いのが特徴で、ラスター処理（Canvas APIで用いられている）でよく見られる大画面に拡大したときのジャギーも起こらず、綺麗な画像を得ることができます（その代わり、一般的にCanvasよりもパフォーマンスが落ちます）。
記述形式はXMLとなっており、インライン記述や、Object要素を用いた外部記述が可能です。また、svgファイルをimg要素のsrc属性に指定することもできます。さらに、foreignObjectを使うとsvgの中にHTMLを書くことも可能とのことです。rect（矩形）やcircle（円）などの基本的な描画はもちろん、Pathとして、直線やベジェ曲線を用い自由な描画処理が可能です。
image要素でpng、jpegなどのラスタ画像を扱ったり、rotateやpathとのコンビネーションによる柔軟なテキスト描画、SMIL animationを用いたアニメーション処理など、各機能の詳細について講演いただきました。講演資料が公開されていますので、興味のある方は是非チェックしてみてください。
「WebGLで箱を回してみよう」
メインセッションの最後に登壇いただいたのは、にゃまだんさん。3D描画処理を可能とする、WebGLについて講演いただきました。
WebGLは描画位置をCanvasで指定し、記述自体はOpenGL ES2.0で行います。GPUで処理されるため、パフォーマンスに優れています。似たような処理系として、FlashやUnityといったプラグインがあり、HelloRacerのサイトで、それぞれを比較することができます。
難点としては、コーディングがとにかく難解となっており、「手続きが多い」「3Dの数学（行列とベクトルとの四則演算処理など）が分からないとキツイ」といったところに言及。立体の箱を一つ描画するだけでも至難の業であることを述べていました。そんな難度の高いWebGLについて、3Dの箱を描画・回転させる場合を例に、コーディング手順が紹介されました。
頂点シェーダーやラスタライズ、フラグメントシェーダー、カメラといった、各種手順を順を追って解説が行われ、会場はさながら高校数学の授業のようでした。興味のある方は、是非講演資料を確認してみてください。なお、WebGLについては、便利なライブラリが公開されており、Three.jsを使うと簡単に利用できます。実際講演スライドは、このThree.jsを用いて作られたとのこと。WebGLに対応していないブラウザでは、Canvas 2Dでエミュレートしてくれる優れものとなっていますので、是非こちらもチェックしてみてください。
「知って得する（かもしれない）、Internet ExplorerでのCanvasとSVGの描画」
メインセッションに引き続き、2つのショートセッションの講演がありました。
1件目のプレゼンテーションは、マイクロソフトの物江さん。IE9のCanvas、SVGサポート状況について紹介いただきました。
IE9では、Canvas 2D、SVGともに、GPUアクセラレーションがサポートされており、高速な描画が可能なことを言及。SVGについては、Filters、Fonts、Animationが未サポートとなっていますが、IE10ではFiltersについてサポートされる予定であるとのことでした。
また、IE Test Centerについても紹介がありました。このサイトでは、クロスブラウザでの様々なテスト結果が一覧でき、また、実際にテストをすることも可能となっています。
さらに、Visual Studioを用いたライブコーディングも実施。こちらのサイトで公開されているアドオンをインストールすると、HTML5のコードアシストを行ってくれるとのことで、実際にその様子を披露されました。
講演資料はこちらで公開されています。
「HTML5な開発環境の話」
最後は、Google API Expert（Chrome API）で本勉強会のスタッフも務める、クックパッドの太田さん。Flashとの対比や、描画系ライブラリについて紹介いただきました。
HTML5とFlashとの比較は、よく取り上げられるトピックで、現行Flashのほうが機能面では優れています。しかしながら、機能的な差は詰められる傾向となっており、Device APIやWeb Audio APIなどのHTML5の新しいAPIがそれに該当すると述べていました。一方、Flashの利点としては、互換性や開発環境が整備されていること、パフォーマンスに優れていることを挙げていました。
後半では、描画系の各種ライブラリについて紹介があり、canvasライブラリについてはEaselJSを、SVGについてはRaphael・SVG Web・SIEを、WebGLについてはProcessing.js・three.jsを挙げていました。これらのライブラリを用いることで、直感的・簡潔に描画処理をコーディングでき、クロスブラウザへの対策が可能となることを示しました。
講演資料は、こちらのサイトで公開されています。
最後に
レポートに対する感想や、勉強会に対する希望・意見・取り上げて欲しいテーマなどありましたら、twitter（@komasshu）まで気軽につぶやいていただければと思います。
本勉強会は、毎月第3水曜日または第3木曜日に開催していますので、興味を持たれた方は是非参加ください。ただし、会場や講演者スケジュールの都合などにより、開催日程が前後することがあります。開催のアナウンスはhtml5 developers jpのMLで行われますので、登録されていない方は、是非登録ください。また、コミュニティサイト"html5j.org"も公開していますので、是非、こちらも確認してみてください。来月も開催予定です。お楽しみに。
