明日もデザインで食べていこう！［24］Google Developer Day 2011に行ってきました
── 秋葉秀樹 ──

【次期リリース予定のChromeを使ったHTML5のデモンストレーション】

■アニメーションを実現するAPIの紹介
< https://picasaweb.google.com/lh/photo/qr6uVkA1PfJEtGGkzDi-vQ
>

今よく知られている、HTML上でアニメーションを行う手段として、
◎CSS3のtransitionsやanimationsを使う方法
◎JavaScriptでsetTimeoutやsetIntervalでタイマーを使い、その中で移動な
どを行う方法
が、あります。

CSS3のほうは、あくまでCSSでできる範囲での動きしか実現できないので、より細かい案件レベルの実装はいままでJavaScriptで行う方法が多かったんですが、これにはちょっとした問題として、環境によっては正しいFPS（1秒間に何コマ動かすという単位）が出ない問題があります。

それをなるべくパフォーマンスも考慮した実装方法として策定されているrequestAnimationFrameのデモがありました。requestAnimationFrameは、JavaScriptでアニメーションさせるための安定かつ最適なメソッドだと言われています。
< https://picasaweb.google.com/lh/photo/GBWhpUe6Mhvg7TqXjqHlyw
>

▽従来の方法
window.setTimeout( function (){
//アニメーション
}, 1000/60 );

▽新しい方法
function callback(time) {
//アニメーション
window. requestAnimationFrame(callback);
};
callback();

※おそらくしばらくはベンダープリフィックスが必要。
（webkitRequestAnimationFrameといった感じ）

〈メリット〉

・プログラム上で複数走っているアニメーションによって起こる負荷を最適化、軽減してくれる。
・ブラウザタブが後ろに回ったら処理をストップしてくれる。
・消費電力もなるべく軽減、やさしい。

■ブラウザからカメラ、マイクロフォンへのアクセス
< https://picasaweb.google.com/lh/photo/5eaNENvP_efZ4ZJqGqcQ6w
>

これは以前、私も記事を書かせてもらいましたが、目に見えて楽しい機能なのでぜひ勉強しておきたいところ。

window.getUserMedia("video", function (stream){
document.querySelector("video").src = window.URL.creatObjectURL(stream);
});

マシンに接続されたWebカメラにアクセスして、ビデオストリーム（要は動画データ）をvideo要素につなぐというもの。実は現在Operaが特殊なビルドで実装していますが、Operaの場合は上記のスクリプトではなく、

window.getUserMedia("video", function (stream){
document.querySelector("video").src = stream;
});

だけで動くことになります。現在仕様が定まっていないのでこのあたりは実装レベルではしばらくブラウザ間で違いが出るかもしれません。

■Full Screen Content
< https://picasaweb.google.com/lh/photo/gpZIx-9tJhfF_T1PpEPjCw
>

ここのサイトでデモが見られました。↓
< http://html5-demos.appspot.com/static/fullscreen.html
>

確かにFlash Videoではフルスクリーン表示が当たり前のように使えますが、video要素に対してフルスクリーンという機能はこのような形で実装されるでしょう、という解説でした。

■Web Audio Data API
< https://picasaweb.google.com/lh/photo/lTLvSU0JdIAl9uioPnHziA
>

Audio要素でしたら、MP3の音源をHTMLベースで鳴らせることで知られていますが、今回のデモでは、内部で音を生成するというもので、HTML5のAudioとはちょっと違った機能らしいです。シンセサイザーってありますよね.あれに近いものです。

音にはサイン波や矩形波といった、「音の基みたいなもの」があって、そこにフィルターを掛けていくことで、よく僕達が聞く音楽のシンセサウンドが作られるのは僕も昔やったことがあるので分かるのですが、それをHTMLベースでやることが目的なんでしょうね。

以前僕は、Audio要素を使ったリズムマシンを作ってみたんですが、遅延がひどいです。テンポを決めてもそのとおりに鳴らず、スネアドラムだけ遅れたり、シンバルが途切れたり、というちょっと残念なことがありましたが、Audio Data APIを使ったデモではとにかくスムーズにリズムを刻んでいました。

音楽をやっていたので、これはぜひ挑戦してみたいです。

〈ブース〉
< https://picasaweb.google.com/lh/photo/RjxRa_pXQQEHdF_rmQhz2g
>

html5j.orgの第0回HTML5 プログラミング&クリエイティブコンテスト最優秀賞受賞作品「100face」が面白かったです。撮った顔写真にエフェクトをかけて、集めた写真をWebGLの3D空間に飛ばしていました。近くにいたのはhtml5j.orgコミュニティではおなじみの白石さん。

〈ボランティア〉
< https://picasaweb.google.com/lh/photo/2WSq7JxZE38qouELx94SWg
>

ボランティアで会場の運営に協力してくれた方が100人以上いたらしく、さすがGoogleの魅力に惹かれた人たちが多いんだな、とエンディングは圧巻。色んなGoogleの方とも仲良くなれた気がします。

【あきば・ひでき】
hidetaro7@gmail.com
< http://www.akibahideki.com/blog/
>

テクニカルディレクター・デザイナー。DTP黎明期からグラフィックデザインを学び、東京都営団地下鉄など交通広告を多数手がける。同時に音楽活動も活発に行い、西日本半全国ツアーなどを展開、某専門学校のテーマソングを作詞作曲、編曲から楽器全てを演奏してレコーディングするなど、マルチなクリエイティブ活動も。最近では東京と大阪の教育施設などで講師業をも務める。HTML CSS JavaScript Flash ActionScript 3DCG Movie DTP GraphicDesign...多種スキルを持つ。Web標準技術だけに執着せず、全てのメディアで説得力のある表現にチカラを注ぎたい、そんな仕事をしたい。