レポート

「第22回 HTML5とか勉強会」活動報告

この記事を読むのに必要な時間:およそ 2 分

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

著者プロフィール

小松健作(こまつけんさく)

NTTコミュニケーションズ 先端IPアーキテクチャセンタ リサーチエンジニア。家系をこよなく愛するラーメン好き。元々はネットワークエンジニアだったが,Ajaxの登場以来,今後のサービスはWeb(Javascript)を中心に回ると確信。その魅力にとりつかれる。WebSocketに衝撃を受け,リアルタイムWebの到来を信じ,html5の世界に足を踏み出した。Google公認 API Expert(HTML5)。Microsoft Valuable Professional(IE)。好きな言語は,JavascriptとRuby。

Blog:http://blog.livedoor.jp/kotesaki/

Twitter:@komasshu

コメント

コメントの記入