明日もデザインで食べていこう![23]Opera Labs Camera and Pagesを使ってみました/秋葉秀樹

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


秋葉です。こんにちは。先日、ホントに5日前とかなんですが、Operaブラウザのテストビルド(という言い方が正しいかどうかわかりませんが......)が発表されました。

Operaといえば、HTML5のフォームなど、私達デザイナーでも分かりやすいところで他のブラウザがあまり実装しない機能をいち早く実装したり、割と実験的かつ意欲的なところが好きだったりします(もちろん、何でも先行実装したらいいというわけではないのですが......)。

以前、このデジクリでもお伝えした「明日もデザインで食べていこう![20]HTML5でつくるカメラ&落書きアプリ(中国GTUGハッカソンで発表)」
< http://bn.dgcr.com/archives/20110829140300.html >
ですが、この当時はブラウザからカメラにアクセスする機能はAndroid版OperaMobileの特殊なビルドだったんですが、やはりOpera、遂にPC版に実装してきました。

ここで注意。正式版ではありません、あくまでテストビルドのようなものですが、Mac版、Win版、Linax版、Android版があります。こちらから入手できます。
< http://labs.opera.com/news/2011/10/19/ >

このブラウザの大きな目玉は2つ。


●CSSのページング機能を実装

スクロールしようとするとわかりますが、実はこのOpera、画面をフリックしてスクロールようになっています。最近ではMac OSX Lionとかで採用されたインターフェイスですが、僕のマシンはSnow Leopardですので、これを見た時には軽くビックリしました。

マウスだけでなく、指(タッチデバイス用)との両者の挙動を同じものにしようという狙いは、もう既に始まっているのです。このページング機能というのは、色々な機能がありますが、見て面白いと思った機能は以下の通りです。

・画面に収まらない情報を横スライド(フリック移動)で読むことが出来るCSSのモジュールである。
・1つの長文な<article>要素(記事)などをブラウザに収まるところで一旦区切り、次のページに自動的に配置してくれる。

つまり、自動的に長文をページに分けてくれるから、フリックスライドでページをずらして読むようなことができる、というもの。ブラウジングってものが変わっていくような気がします。

●PCに接続されたカメラで撮影

これが以前の記事内容よりさらに膨らんだ話題になります。ブラウザでカメラ撮影が出来る、これは今までAndroid版だけだったんですが、PC版でも公開ました。名前が「Opera Labs Camera and Pages」というアプリ名です。

公開されてすぐに試して、関西のHTML5コミュニティ「HTML5-WEST.jp」でも発表させてもらいました。スライドはこちらに上げています。
< http://www.slideshare.net/Hidetaro7/opera-labs-camera-and-pages >

以下のような事が可能です。

◎HTML5とJavaScriptでカメラ撮影が可能。
◎カメラ映像はvideo要素に簡単に映し出す事ができる。
◎撮影した静止画はcanvas要素に描画する事ができる。〜Android版は出来なかったが、今回は可能な点〜
◎Android版はcanvasからPNGやJPEGなど画像に書き出すtoDataURLメソッドが実装されていなかったが、PC版は可能。

これにより、カメラで撮影したイメージソースを画像ファイルとして保存することも出来そう。

●HTMLと簡単なJavaScriptだけでカメラ動画をブラウザに映す

まずは、PCにつながれたWebカメラで撮影した映像を、ブラウザに映してみましょう。
【HTML】
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script>
jQuery(function ($){
var video = $("video")[0]; // video取得 ----------------------- (1)
navigator.getUserMedia("video", function (s){
video.src = s; // カメラの取得に成功したらビデオに映像を流す ----------------------- (2)
});
});
</script>
<title>Opera Labs</title>
</head>

<body>
<video autoplay></video>
</body>
</html>

これだけです。jQueryを読み込んで使っているのは、単に楽だからです。
HTML自体はvideo要素だけです、autoplay属性を入れてください、自動的に動画を再生する機能です。
JavaScriptの内容は主に以下の流れとなります。
(1)は単にJavaScriptでvideo要素を取得する。
(2)は(1)で取得したvideo要素のソースにカメラから取得した映像を当てることによって、動画が再生された状態になる。

このHTMLファイルにして、Opera Labs Camera and Pagesで閲覧すると、カメラの映像がブラウザに映っています(もちろん、Webカメラが接続されていることは大前提です)。

●シャッターボタンを押すたびに静止画をどんどん配置する

上記のスクリプトを応用してみます。「撮影」ボタンを押すとその瞬間の静止画が溜まっていくというものです。以下のリンクのようなものを作ることができます。
< http://www.tumblr.com/photo/1280/11823553170/1/tumblr_ltj3g7uzOv1qc4z0z >

さっそくソースを見てみましょう。

【HTML】
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script>
jQuery(function ($){
var video = $("video")[0];
navigator.getUserMedia("video", function (s){
video.src = s;
$("#shutter").bind("click", function (){ // ----------------------------------------------------(1)
var canvas = $("<canvas width="+video.width+" />")[0]; // ------------(2)
var scale = video.width / video.videoWidth; // ----------------------------(3)
var ctx = canvas.getContext("2d");
ctx.setTransform(scale, 0, 0, scale, 0, 0); // -------------------------------(4)
ctx.drawImage(video, 0, 0); // --------------------------------------------------(5)
$("#shotted").append(canvas); // ---------------------------------------------(6)
});
});
});
</script>
<title>Opera Labs</title>
</head>

<body>
<p id="shutter">撮影</p>
<video autoplay width="200"></video>
<div id="shotted"></div>
</body>
</html>

HTML側では、撮影ボタンのp要素、そして、撮った画像を溜め込んでいくdiv要素が追加されました。(8)
video要素が大きいのでわざと小さく200pxの横幅にしています。

JavaScriptではp要素のクリックイベントを追加しました。(1)
クリックされると内部でcanvas要素を生成して、video要素と同じ200pxの大きさにします。(2)
(3)ですが、ちょっと注意が必要です。

videoとは、映像が持つ本来の大きさ(デフォルトは640pxでした)と、要素自体の大きさは別物です。
今回はvideo要素が200pxになっていて、canvasも200pxにしたいのですが、本来の映像は640pxだと、canvasに描画したとき元の大きさで描画されてしまいます。よって、videoの大きさを縮小しなければなりません、そこで縮小倍率を出すため、このような割り算をしています。
つまり、200px ÷ 640px = 0.3125
この倍率を、canvasに描画するときに縮小します。(4)

そのあとに、drawImageで縮小された画像をcanvasに描画するというわけです。(5)
最後に生成されたcanvas要素を<div id="shotted"></div>の中に追加していくというわけです。(6)

これも実行してみて、自分のカオとかでも映しながらボタンを押してどんどん連写してみてください。

さて、そんなわけで色々試してみると、面白いアプリがHTMLベースで作れそうですね。各ブラウザに実装されるのは、まだまだ先のようですが、こういったことも出来ると頭の中に入れておくのが大事かな? と思っています。では、次は11月、またよろしくお願いします!

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

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