明日もデザインで食べていこう！［34］近い将来ブラウザだけで出来ること、それに向けて備えておきたいこと
── 秋葉秀樹 ──

◆カメラ機能

Webブラウザから、スマートフォンやPCのカメラを起動する方法、目的別に2通りの方法があります。

1）input要素にtype=file属性を使う
使用ブラウザ：Android3以上、標準ブラウザor Android4 Chrome
例として
<input type="file"accept="image/*;capture=camera">
とするだけで、タップしたらカメラを起動

2）JavaScriptをでストリーム（動画データ）をvideo要素に流す。
使用ブラウザ：Opera Mobile 12
デモサイト < http://akibahideki.com/getusermedia/ex01_basic/
>

【例】
<video autoplay>
<script>
var video = document.getElementsByTagName("video")[0];
navigator.getUserMedia(
"video",
function (s){ video.src = s; }, // 成功時、引数で得たデータをvideoのsrc属性に適用する
function (e){ alert("取得に失敗しました") } // 第3引数は失敗したときに行う処理
);
</script>
---

1）で注目すべきは、Androidの標準ブラウザ候補であるChrome for Androidもしくは従来の標準ブラウザ、どちらもこの方法でカメラにアクセスすることが可能です。しかも、ネイティブのカメラと同じく、ズーム機能、フォーカス、自分撮りなどの機能が使えるので、高い画質を得ることができます。

2）は将来的にWebで「リアルタイムコミュニケーション」を実現するための仕様で、簡単に言えばSkypeのようなビデオチャットまで、ブラウザで行ってしまうことが目的とされています。

1）はファイルとして扱うだけですが、2）はチャットなどの信号として使う可能性があるというもので、ふたつの目的は違うようです。

さらに2）で示したサンプルコードは将来的にもっと細かくなるとされています。PC版Chromeでも、もうこの機能は実装されていますが、実はソースコードや仕様がOperaのそれとちょっと変更されています。おそらくもっと機能を細分化することになるので、もう少しだけ仕様も変更されるでしょう。

とにかく、Android4、ICSのブラウザで写真が撮れることが当たり前になりそうです。今年の夏あたりにもそろそろ......まあ意識はしておくべきですかね。Webサイト制作の新しいアプローチが必要とされるかもしれません、もちろん、iOSは当分期待できそうにないですが。

◆音声認識

使用ブラウザ：PC版Chrome
デモサイト < http://akibahideki.com/getusermedia/another/speech/
>

PC版Chromeが実装しているSpeech Input API、使い方は非常に簡単です。
<input type="text" x-webkit-speech />

これでChromeだとマイクが表示されますので、それをクリックして話しかけます。ネットに接続されていることが条件ですが、話しかけた言葉が文字となってinput要素の中に表示されます。

私はセミナーのデモで以下のようなものを発表しました。

1）「ここ」「どこ」があると「地図を起動します」と発声してGoogle Mapを表示するデモ
2）「Chrome」「愛してるよ」があると「他のブラウザにも同じことを言ってるんでしょ？」と発声するデモ

両方とも、音声を録音しておき、Audio要素であるタイミングでPlayさせるようにしました。このAPIは「イベント」があります。つまり、話しかけた言葉が文字として帰ってきた、そのタイミングで音声を再生させるということができます。

以下のJavaScriptでそれは可能です。

input.addEventListener("webkitspeechchange",
function (e) {
// しゃべった言葉が文字となって帰ってきたタイミングで処理する、例えば音声を再生させるとか...
});

1）は、帰ってきた文字列のどこかに「ここ」と「どこ」が含まれていたら、「地図を起動します」とAudio要素で発声させて、位置情報を取得してGoogle Mapsを表示します。キーワードとなる文字列は含まれていることが条件なので、
「ここはどこですか」
「ここはどこなんだろう」
でも処理をしてくれます。

さらにiPhoneを皮肉っているわけではないのですが、Siriに向かってしゃべられた「愛してるよ」という言葉。あれをそのままChromeバージョンにしてみました。

「Chrome」「愛してるよ」の文字列が含まれていたら「他のブラウザにも同じことを言ってるんでしょ？」と発音して文字も表示します。Siriみたいに。

◆電池残量

使用ブラウザ：Firefox Aurora
デモサイト < http://akibahideki.com/getusermedia/another/batterystatus/
>

最近のWebアプリは、ユーザの気づきにくいところで常にサーバと通信をしているサイトも増えてきました。

Twitterとかもそうですね。気がついたら、最新のツイートがタイムラインに表示されています。Facebookもそうです、ページを更新しなくても「いいね」のお知らせなどが届きます。

これらのような「一定間隔でサーバに問い合わせ→情報取得」を行う技術（一般的にAjaxなどと呼ばれる）ものは電池の減りも早くなります。

例えば電池残量を10%切ったら通信を一旦止めようとか、そういったことが必要になったりするでしょう。ブラウザで電池残量を知るには、「Battery Status API」という機能を使いますが、非常に簡単です。

Firefox for Androidの最新版がすでに実装されているということですが、私の環境では機種依存が激しく、端末によっては常に残量100％しか返さないものもありました。

デモではちょっと無理だったのですが、Firefox Aurora（Firefoxのテスト版のようなもの）がこれを実装していたので、試したところ割と精度のよい残量が取れたので、これでデモをしました。

【電池残量取得の例】
var battery = navigator.mozBattery;
alert ( battery.level );

これで0〜1の小数点付きの電池残量が取得できます。CSS3のグラデーションなどを使えば、グラフィカルに残量表示ができます。

◆バイブレーション

使用ブラウザ：Firefox Aurora
デモサイト < http://akibahideki.com/getusermedia/another/vibrate/
>

読んで字のごとく振動を起こします。実際は制作者が、振動させる長さや振動の間隔などを決めることが可能です。コードは極めて簡単。

navigator.mozVibrate([1000, 500, 200, 500]);

配列表記となる場合、1000で約1秒間ほど振動して、500で0.5秒くらい休んで、200で0.2秒振動して最後に500で0.5秒ほど休む、といったもの。

つまり、振動→休みの繰り返しが自由に設定できるものです。
で、デモでは「三三七拍子」をやってみました。

navigator.mozVibrate([
300, 300, 300, 300, 900, 300,
300, 300, 300, 300, 900, 300,
300, 300, 300, 300, 300, 300, 300, 300, 300, 300, 300, 300, 900, 300
]);

◆将来にむけて

まだ策定中の仕様に関してはあくまで変更されることもある、という前提ですが、私たちのつくって提供するWebサイトが、もっとユーザにとって便利なものになるために「どんなことが私たちの身の回りで可能になるか？」を考えていく必要があります。

「まだ先の話」とタカをくくってはいけません、現にブラウザはどんどん進化してます。先ほどお伝えしたとおり、Android4（IseCream sandwitch）の標準ブラウザで写真撮影が可能となります。

技術を学習する、ということうより、「どんなサービスが必要か」を考えるチカラが今後の私たち制作者に求められることになるでしょう。

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

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