hIDDEN bLOG » Google Hackathon for Chrome Extension

2010/4/25 日曜日

Google Hackathon for Chrome Extension

このエントリをはてなブックマークに追加
Filed under: IT系 — @ 1:33:59

4月24日土曜日、jig.jpの一室を借りて開催された「Google Hackathon for Chrome Extension」に参加してきた。

ここで制作したのは、トイレ在室管理Extensionである「カワヤ」。
ネタ自体は、チームラボの山本氏が開発・LTされた「アクトトイレ」をMPM。実現方法として、アクトトイレとは別のアプローチを模索してみた。

プレゼン資料はこちら

この記事では、プレゼン中でフォローしきれなかった技術サイドのあたりを解説してみる。

iPhone@トイレ

このChrome Extension「カワヤ」はトイレにiPhoneを設置しておき、iPhoneのカメラで撮影した画像からトイレ内の人の有無を検出する。
具体的には、UIImagePickerによりカメラビューを画面に表示しておき、定期的(1秒おき)にスクリーンショットを取得、その画像を10ピクセルおきにスキャンして明るさ値の平均値を求める。その明るさが一定以上か以下か、つまり明るいか暗いかを人の有無とみなし、それを特定のサーバに送信する。
iphone.PNG

サーバ@クラウド

当初GAEで組めたらと思っていたが、とりあえずPHPで。iPhoneから通知されたON/OFF情報を蓄積し、Extensionからのリクエストに答えるだけの簡単なお仕事です。
cloud.PNG

Extension@Chrome

ブラウザアクションのポップアップで実装。
setIntervalでタイマー動作させた関数内で、XMLHttpRequestによりサーバから情報を取得する。
あとはこれに基づいて画像表示を差し替えるだけの簡単な(ry

さてこれだけだとつまらないので、画像表示にトランジションを適用しよう。
ちなみに画像表示は、せっかくなのでcanvasを使ってみた。

1
2
3
4
5
6
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var img = new Image();
img.src="KAWAYA.png"
ctx.globalAlpha = 0.2;
ctx.drawImage(img, 0, 0);

ctx.globalAlphaというプロパティに0.2という値を設定しているのだが、これにより画像を半透明で表示することができる。
ある画像が表示されている上に、新しい画像をAlpha値0.2で数回上書きしてやることで、フェードのアニメーションが簡単に実現できる。
これは、アレなときに視聴いただいた綺麗な画像のスライドに使用している。下はイメージ。f_transition.jpg

さらにこの綺麗な画像は、こちらのサンプルを参考にFlickrから取得している。

また、トイレットオープンの際のアニメーションも半透明描画を適用しており、残像のエフェクトでハッタリをカマすことに成功している。
t_transition.png

最後に

運営等にご尽力いただいた@shoitoさん、@shirokuro331さん、遠方よりはるばる参加してくださった京都GTUGのお二方、快く社屋を貸してくださったjig.jpのみなさん、ハッカソンに関わったすべてのみなさん、本当にお疲れ様でした。今回もまた得るものの多い一日でした。ありがとうございました。

コメントはまだありません »

コメントはまだありません。

この投稿へのコメントの RSS フィード。 TrackBack URL

コメントする

HTML convert time: 0.866 sec. Powered by WordPress