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を用いたアニメーション処理など，各機能の詳細について講演いただきました。講演資料が公開されていますので，興味のある方は是非チェックしてみてください。