HTML5とか勉強会 第22回 に行ってきた #html5j

HTML5Study HTML5 Event


HTML5とか勉強会 第22回 に行ってきた。
会場はマイクロソフトさん。はじめて行った。今回のテーマは「グラフィック関連API」。CanvasやSVGは、ちょっと触った程度で詳しくない。だからいろいろ聴くことができて、とても勉強になった。ただ、WebGLに関しては、あまりの難しさに話を聞いただけで挫折したけど。
発表はこんな感じ。

  • Processing.jsってなんだ？ ゼロベース株式会社 田中孝太郎さん [twitter:@dotimpact]
  • SVG Overview グリー株式会社 渡辺悟史さん [twitter:@sassy_watson]
  • WebGLで箱をまわしてみよう！ にゃまだんさん [twitter:@nyamadan]
  • 知って得する(かもしれない)、Internet Explorer での Canvas と SVG の描画 マイクロソフト 物江修さん [twitter:@osamum_MS]
  • グラフィック系ライブラリの紹介 CookPad 太田さん [twitter:@os0x]

togetterはこちら。

Processing.jsってなんだ？


資料や発表者の方のエントリはこちら。

  • Processingってなんだ？
    • http://processing.org/
    • MITメディアラボ初
      • ベンフライ、ケイシーリースが開発
      • OSS
    • デザイナー、アーティストのためのグラフィックに特化したプログラミング環境
    • JavaベースのIDEがあって、そこで書いてすぐに実行できる
    • 超簡潔な文法とAPI
    • 1行ごとに書くこともできるし、関数を使うこともできる
    • Javaのライブラリを使ったりもできる
    • 海外で強力なユーザコミュニティ
    • 国内ではプログラミングの授業やホビープログラミングに
  • Processing.jsとは
    • http://processingjs.org/
    • John Resig(jQueryの作者)がプロトタイプを開発
    • Processing 2.0 でJavaのIDEもProcessing.jsに対応
      • IDEでJS版の開発もできるように
    • Parser
      • ProcessingのコードをParserがJSに変換して実行する
      • VMのようなものがあるわけじゃない
    • API
      • ProcessingのAPIを利用できる
    • 3D描画命令
      • WebGLのWrapperになっている
    • 画像、ピクセル操作
  • Processing.jsのメリット
    • Processingの既存ソースコードをそのまま動かせる
    • コミュニティの情報を参考にしやすい
    • APIのみをCanvas描画ライブラリとして使用することも可能
  • デメリット
    • 動かせないProcessingのコードが一部存在
    • 起動時のコード変換コスト
    • 変換コードのパフォーマンス

発表者の田中さんは、以前@ITでProcessingについて連載されていて、こちらの記事も参考になる。

SVG Overview


SVG overview

資料も録画もあるので、メモはいらないかなと。
資料はSVGのちょっとしたリファレンスに使えそうなくらい充実している。素晴らしい。セッションの終盤ではSVGのデモもあって、コードがどのように動くのかイメージできてよかった。

ちなみに僕もWebFontsのLTで、SVGのサンプルも作りましたよ、と。

WebGLで箱をまわしてみよう！


資料や発表者の方のエントリはこちら。

WebGL、難しい。コードにはついていけなかった。ポイント(?)だけメモも記載する。

  • 数列、ベクターの掛け算
    • 交換法則が成り立たない
    • 掛け算の順番
  • 箱を回すだけのプログラムの解説
    • 立方体を書く
    • 頂点データを渡す
      • 見かけは四角形でも、三角形の組み合わせで表現
    • 頂点シェーダのよる変換
    • ラスタライズ
      • 麺の内部となるピクセルを塗りつぶす
      • どの部分に色を塗ったらいいか計算する
    • フラグメントシェーダ
      • 光(光源)情報
      • 色を塗る

立方体を回すだけで、こんなにもコードが、処理が必要なるとは…。

知って得する(かもしれない)、Internet Explorer での Canvas と SVG の描画


知って得する (かもしれない)、Internet Explorer での Canvas と SVG の描画
View more presentations from Osamu Monoe

発表者の方のエントリはこちら。

IE10は、けっこう楽しみ。Visual Studioのインテリセンスは強力だけど、Zen-Codingも合わせて使うと便利かも。

Visual Studioのインテリセンスや、EclipseやNetbeansのコード補完は、ちょっと打ってショートカットキーで変換候補を表示して、その中から選ぶ、というプロセスになると思う。クラスやメソッドで、スペルが怪しかったり、タイプ数が多かったりすると、これが便利だと思う。
でもHTMLのタグとか短いもので、入力するものを覚えている場合は、Zen-Codingが便利かもしれない。入力→ショートカットキーで展開なので、選ぶ必要がない。もちろんケースバイケースだけど、Zen-Codingはプラグインとして利用できるので、インテリセンスとZen-Codingの両方使えたらいいと思う。

グラフィックライブラリの紹介改め HTML5な開発環境のお話


資料はこちら。

HTML5とFlashの比較は、シンプルでわかりやすかった。発表では割愛されていたけど、最後のグラフィックライブラリのリンクも参考になる。
HTML5に対応した開発環境、徐々にそろってきた気がする。VisualStudio、Eclipse(Aptana)、NetBeans、DreamWeaverなど。Flashのよいところがうまく取り込まれていくといいな。僕はFlash IDE使ったことないけど。

まとめ

Mac率自体はいつもどおりだったけど…。
Processingはちょっと試してみたいと思った。試せそうだと思ったｗ やっぱりぐりぐり動いたりすると、なんだか楽しい。
bccksは面白そうなのでユーザ登録してみた。ちょっと使ってみる。
WebGLは…、ライブラリ使おうと心に決めた。
今回もビアバッシュがあって、もちろん参加した。いろいろな方と話して楽しかった。SVGの話を聞いたり、いつも超速でtoggeterにまとめてくださる[twitter:@kimukou_26]さんとお話できたり。
あと html5j.orgのfacebookグループ や html5j.orgのGoogle グループ が最近活発で、参加していて楽しい。技術とともに、コミュニティも広がっている感じがして、とてもいいですね。
そして、この規模の勉強会を毎月開催してくださるスタッフの方々に感謝。

参加された方のエントリ

第22回HTML5とか勉強会に参加しました - Enjoy*Study
第22回 HTML5とか勉強会、のメモ - Social Top Runners by HatchUp
第22回 HTML5とか勉強会、のメモ２ - Social Top Runners by HatchUp
第22回 HTML5とか勉強会、のメモ３ - Social Top Runners by HatchUp

これまでに参加したときのエントリ