明日もデザインで食べていこう![20]HTML5でつくるカメラ&落書きアプリ(中国GTUGハッカソンで発表)/秋葉秀樹

投稿:  著者:  読了時間:9分(本文:約4,100文字)


先日、東京ではGoogleとHTML5 Developer's JPのイベントがあり、大阪でもこの中継を見ようと何十人かで集まって見たあと、僕らで大阪のセッションをしました。

「HTML5が盛り上がってます」と世間では言われてますが、それらに惑わされることなく大阪ではかなりぶっちゃけトークが行われ、スピーカーとして参加させてもらった僕も、現場サイドの意見をぶちまける結果となりました。現場で働くWeb制作者の方は興味深く耳を傾けていました。

USTREAMで配信していますのでよかったらご覧ください。
< http://www.ustream.tv/recorded/16788143 >

さてさて、お盆に岡山で開催された中国GTUGのハッカソンイベントに参加して、優勝してしまいました! デザインは奥さん、フロントが僕の2人で頑張ってみました。ちなみにGTUGというのは、『Google Technology User Groups』の頭文字で「ジータグ」と読むそうです。知り合いの方がいらっしゃるということが参加のキッカケでした。

この日のテーマは「HTML5」であることが条件。作ったのはHTML5で作るカメラアプリ。動画に撮ってみました。すみません! 横です!!
< >

WHAT WGが策定しているgetUserMediaというメソッドを使って、ブラウザから、カメラやマイクにアクセスするというもの。現在は、Android用Opera Mobileの中でもちょっと特殊な(?)Operaだけが、このgetUserMediaをサポートしています。これが実用化されたら、僕らデザイナーでもカメラ系のアプリがHTML5ベースで作れるようになるんじゃ? と思ったりしました。



ちなみにこういった技術を知ったキッカケはこのサイトです。
< http://my.opera.com/core/blog/2011/03/23/webcam-orientation-preview >

Androidスマートフォンを持っている人はブラウザでアクセスして、この試験中とも思えるOpera Mobileをダウンロードしてください。
< http://akibahideki.com/blog/2011/08/20/download_operamobile_lab.jpg >

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

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

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

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

【HTML】
<video autoplay>

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

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

●撮った静止画をcanvas要素に描画する
< http://akibahideki.com/blog/2011/08/19/opera_camera_elem.png >

で、これを「カシャッ」と撮りたいので、ここで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タップしてみてください
< http://www.akibahideki.com/blog/2011/08/20/shutter_test.html >

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というだけのキーワードなのか?

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

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

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

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

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