レポート

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

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

「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についてはRaphaelSVG WebSIEを,WebGLについてはProcessing.jsthree.jsを挙げていました。これらのライブラリを用いることで,直感的・簡潔に描画処理をコーディングでき,クロスブラウザへの対策が可能となることを示しました。

講演資料は,こちらのサイトで公開されています。

最後に

レポートに対する感想や,勉強会に対する希望・意見・取り上げて欲しいテーマなどありましたら,twitter(@komasshu)まで気軽につぶやいていただければと思います。

本勉強会は,毎月第3水曜日または第3木曜日に開催していますので,興味を持たれた方は是非参加ください。ただし,会場や講演者スケジュールの都合などにより,開催日程が前後することがあります。開催のアナウンスはhtml5 developers jpのMLで行われますので,登録されていない方は,是非登録ください。また,コミュニティサイト"html5j.org"も公開していますので,是非,こちらも確認してみてください。来月も開催予定です。お楽しみに。

著者プロフィール

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

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