【レポート】SwapSkillsDoubbble(6)「スマホアプリ、ゲームに必須技術! 今、求められている! HTML5,CSS3,JavaScript,Canvas, WebGL,オフラインでクリエイティブコンテンツを実現」に参加しました。

2012年7月14日に開催されたSwapSkillsDoubbble(6)「スマホアプリ、ゲームに必須技術! 今、求められている! HTML5,CSS3,JavaScript,Canvas, WebGL,オフラインでクリエイティブコンテンツを実現」に参加してきました。そのレポートです。

参加にあたっては、前回のSwapSkillsDoubbble(5)で今回の無料招待枠が当選したので、タダで参加することができました。当選くださいまして本当にありがとうございました。 無料招待性が新設【謎】されてからの第一号なので、これもなにかの縁かしらと思ったり、思わなかったり。(おい!)

さて、話を今回のイベントに戻すと、セッションは下記のようになっていました。

  1. CSS3で作成するインタラクティブアニメーション 菊池崇
  2. WebGLを使った画像処理と3Dグラフィックス 松井 健
  3. Webアプリケーションのオフライン対応 吉川徹
  4. DESIGN IT AND BUILD IT デザインしろ、コーディングをしろ Seb Lee Delisle(セブ・リー・デリスル)

CSS3で作成するインタラクティブアニメーション 菊池崇

菊池さんの話は、Web Directions South 2008のオープニング・ムービーを題材にした話からスタートしました。

そのムービーは、JavaScriptを使わずにCSS3で作られているので、CSSだけでここまでできるというひとつの例として挙げていました。(そのムービーを探したのだけれど見つけれず、 どなたかリンク先を知っていたら教ありmていただけると幸いです。)

他に、ボックスモデルでのbackground-clipプロパティの使い方やChromeのみ実装されているという Filter Effectsの例を紹介くださいました。Filter Effectsの例は、 このサイトが分かり易いので、ご参考ください。

WebGLを使った画像処理と3Dグラフィックス 松井 健

WebGLはひそかに勉強中でして、私が最も興味のある技術のひとつです。その話を聞けるということで楽しみにしていました。楽しみにしていたわりに、 松井さんの囁くような声のおかげで眠るという失態を犯したことは内緒である。

セッションの内容的には、WebGLの概要から、どのように処理されるのかという話が前半でした。

後半は、実装例とサンプルの紹介でしたが、実装に関しては、THREE.jsを使っての例でした。 なんとなくこのWebGLのサイトにあるドキュメントを見ながらより、 THREE.jsのドキュメントのほうが分かり易いので、THREE.jsありきの実装のほうが開発しやすいという印象です。

セッション中に紹介のあったWebGLの例のサイトが下記です。

Webアプリケーションのオフライン対応 吉川徹

このセッションは、Web StorageとApplication Cacheの話でした。だいたい知っている内容だったので、自分にとっては、特に新しい発見はありませんでしたが、某AndroidでCookieの挙動に悩みに悩んだことがあるので(このエントリーを参照)、スマホサイトでは、Web Storageを考えておいたほうがいいなぁと感じました。 また、セッション中に紹介のあったApplication Cacheを作成するブックマークレットManifestoが便利そうです。使います。

DESIGN IT AND BUILD IT デザインしろ、コーディングをしろ Seb Lee Delisle(セブ・リー・デリスル)

本イベントの最後が、有名エンジニアのセブ・リー・デリスルさんですが、本セッション中のライブコーディングが凄すぎて見いてしまいました。

そのライブコーディングが始まる前には、コーダーは、デザインのことを分かっていたほうがよい、また、デザイナーは、実装のことを分かっていたほうがよい、 つまり、デザインも実装もできるハイブリッドであるべきだと主張されていました。 これは、コミュニケーションにおいて、そうあるべきだと言っていましたが、小さい会社だと分業でもそこまでコミュニケーション不足になることはないだろうということで問題ないが、 大きめの会社だと、コミュニケーション不足が起こりやすいということから、よりハイブリッドであるべきと言っていました。 これは分業をなくすべきだという主張だったのかどうか分かりませんが(質問すればよかったと深く後悔している)、 確かに、コミュニケーション不足になりがちな面はあるし、デザインをする人も実装のこと(HTMLだけでも)は、分かっておくべきだと思いますが、 それは実装側からの視点であって、恐らくデザイナーから見たら、実装者もデザインのことを知っておいたほうがよいと思っているに違いないと感じさせられました。 私は、以前はデザインもしていたので、基本的なところは分かっていると思うのですば(そうであってほしい)、もうちょっとデザイン面においても勉強しようと感じました。

さて、そのライブコーディングですが、これまでいろんなライブコーディングを見たことがありますが、あれほどスラスラやってしまうライブコーディングは見た事がありません。 内容的には、下記の動画がそれになります。

CreativeJS for non-coders from Seb Lee-Delisle on Vimeo.

あれを見せられると何かJSで作りたくなりました。なんかそうさせてくれるセッションでした。(クリエイティブなアイデア脳が必要ですね.......。はい、頑張ります。)

最後に

今回も得れることが多く、充実したイベント(居眠りしたことは内緒である【しつこい】)でした。スピーカーのみなさんありがとうございました。 また、スタッフのみなさん(なんかCAの人が2名ほどいましたが...)も運営おつかれさまでした。また次回も宜しくお願いします。