• 
• 
• 

サイトにアクセスして、画面をちょっと下にスクロールすると「Android Build」というリンクがすぐ見つかるはずです。
これをタップするだけでダウンロードが始まります。
ダウンロードが終わったら、上図右のようにアイコンをホームの画面にでも配置しておきましょう。
Operaのアイコンに「LAB」と書いてあるのがそれです。

その「LAB」と書いているOperaを起動して、ハッカソンで作ったやつのアドレスにアクセスしてください。
http://ecoloniq.jp/opera_de_camera/
※ハッカソンの制限時間の関係上ちょっとした不具合があります、そのときは更新をタップしてください（ちゃんと作りたいなあ...）

カメラの映像をブラウザに映す

カメラの画像をブラウザに映すのだけはとても簡単です。

<video autoplay>
// jQueryを読み込んでいます
$(function (){
 var video = $("video").get(0);
 if(navigator.getUserMedia) {
  navigator.getUserMedia('video', successCallback);
  function successCallback( stream ) {
   video.src = stream;
  }
 }
})

なんとこれだけ！これでカメラからの映像がライブストリーミングされています。びっくり。

撮った静止画をcanvas要素に描画する

で、これを「カシャっ」と撮りたいので、ここでcanvas要素の登場です。
canvasタグをまずは2枚用意して重ねました。（「枚」って変ですね）

1枚はカメラで撮影した静止画像を描画するたものもの。
もう1枚はユーザにお絵かき（落書き）してもらうための空白のもの。

つまり、仕上がりを2つのレイヤーを用意しています、position: absoluteで重ねます。

タッチイベントで画像をcanvasに描画する

最初に落書きするブラシを選択しますが、その要素はimg要素ですからcanvas要素に直接描画できます。
canvasへの描画ってimg要素かvideo要素かcanvas要素の3要素だけは、ビットマップをcanvas要素に「コピー」出来るのです。

このコードは、canvas内の描画領域（コンテキストという）に、img要素を貼付けます。
座標も指定できますので、指でタップした場所にimg要素をcanvas要素に表示することが出来るわけです。

canvas要素の描画領域.drawImage(img要素, x座標, y座標);


本当は、ブラシサイズや色まで決めたり出来たらもっと良かったのですが、なんせ僕の知識レベルなので、touchmoveしている最中にdrawImageしてブラシ画像をcanvasに配置するところで、精一杯でした。

シャッターで絞るアニメーションは、canvasで円をクリッピングマスク

↓↓↓　撮影ボタンをクリックorタップしてみてください

canvas要素内には画像をクリッピングマスクするclipメソッドがありますので。シャッターの画像をアニメーションする円でマスクしました。
もうちょっと早くしても良かったかな？

シャッター音はAudio要素

「カシャ」という音がなくって、その場では違う音を入れたんですが、音の再生はとても簡単です。
今回は、JavaScript内でAudioを生成して、鳴らしたいタイミングでplayメソッドを使ったので、実際の音関連のコードは3行くらいしか書いていません。

var audio = new Audio();
audio.src = "sound/shutter_sound.mp3";

//シャッターボタンが押されたタイミングでplayメソッドを呼ぶ
audio.play();


他にも色々やりたいことがありました。

• 消しゴムツールを用意
• 落書きした画像を保存させる
• ブラシの向きや大きさをランダムに

などなど。。

HTML5というキーワードに大した意味はなく、やれることを実感することに意味がある

ついでに、最近『HTML5』というキーワードについて思うことをちょこっと書きます...

もっと経験を積んでいるプログラマーだったらもっと高機能なものを短時間で作れると思います。
僕はユーザインターフェースのデザインの勉強をしているし、見た目を華やかにするビジュアルデザインを得意とするデザイナーですが、開発に関してはやりたいことはアタマの中にあっても実力が伴いません。。

今までHTMLとCSSでユーザが触れる側を作ることができた僕らWebデザイナーも、こういったカメラとかタップとかサウンドとかで人を楽しませるアプリケーションに拡張することが出来るんだ。ということに気づきます、HTML5の目的のひとつなんだな、と。

最近HTML5ってキーワードが盛り上がってますね、セミナーとかそれだけで人も集まりやすい。
でも、、
僕が思うのは、そんなトレンドに惑わされているだけで、本質をしっかり理解出来ていない僕達も問題だと思います。
（理解出来てない人が悪いのではなく、発信する側の責任もあると思う）

例えば、お客さんに「ウチはHTML5やCSS3を使ったコーディングが出来ます」とか言ったところで、正直それがどうした！？って感じです。
そこは誰が幸せになるの？という具体的なビジョンが見えてない人ほど、そのキーワードを使いたがっているような今が伺えます。
誰かのためになるHTML5なのか？
ただの営業トークで中身のないHTML5というだけのキーワードなのか？

僕は最近そんな業界への流行りに疑問があって、なにがトレンドなのか？その中身を理解したく、開発者のイベントには積極的にアウェーでも行きたいと思います。
自分がプログラムをまともに書ける、書けないが大事ではなく、ちゃんとデベロッパと意思疎通が出来るデザイナーでないと、良いサービスは作れないと確信してるからです。

正直この程度のアプリでは、まだまだなのは分かっているのだが。。。（エラそうなこと言ってますが勉強中の身です）
少なくともハッカソンに僕のようなデザイナーが参加させてもらってることは決して無駄なことじゃなく、ただ技術の学習でもなく、コミュニケーションの勉強であり、誰かを幸せにする何らかの手段を異業種から学ぶ勉強、ということだと思っています。

ここから先の話はかなりディープな話になるので、別のエントリーに書きたいと思います。