Android版のFirefox9ベータ版からどうやらHTML Media Captureによってブラウザからカメラデバイスへアクセスできるようになってます。個人的にはかなり先進的な実装だとと思っているのですが、以外に注目されていないような気がします。そこで今回のエントリーではどんな感じなのかを簡単に取り上げてみたいと思います。

カメラを起動させるには？

カメラを起動させるためにはAPIとかいろいろあって難しそう…とかそんなことはありません。HTML Media Captureによってフォームを拡張しているだけなのでブラウザ上に反映させるだけなら次のような一行で済みます。

<input id="chooser" type="file" accept="image/*">

このコードをAndroid Firefox9以上で読み込ませると「capture」というボタンが追加されます。たったこれだけでWebアプリケーションの可能性が広がっちゃうんです。

動作画面

Android4.0端末であるGalaxy Nexusで動作させてみました。

こんな感じにinput要素が拡張され、「capture」ボタンをタッチすることでカメラデバイスへアクセスします。アクセスすると画面全体がオーバーレイされ、カメラの映像が中央に反映されます。そして「OK」をタッチするとinput要素にファイルのパスが出力されます。（AndroidやiOSの仕様からかファイルのパスは反映はされません。）

現在写真のサイズは指定できずに（？）W240px ×320Hpxですが、今後に期待したいです。もうちょっと大きいサイズがいいなあ。

サンプルを作ってみた

簡単なサンプルとしてFileAPIで写真ファイルを取得して描写するプログラムを作成してみました。今回はDOMツリーに画像を追加しているだけですが、Canvasとかに描写するといろいろと面白いことができそうです。

サンプル

• 撮影した写真をページ内に表示するサンプル

ソースコード

<input type="file" accept="image/*" onchange="preview(this)">
<div id="load">
<p>ここに画像を表示します。</p>
</div>

	function preview(ele) {
		if (!ele.files.length) return;	//ファイルが未選択の場合はreturn
		var file = ele.files[0];
		if (!/^image\/(png|jpeg|gif)$/.test(file.type)) return;	//MINEタイプをチェック

		var fr = new FileReader();
		fr.readAsDataURL(file);  // 画像ファイルをDataURLスキーム変換

		fr.onload = function() {
			var photo = document.createElement("img");
			photo.src = fr.result;

			var load = document.getElementById("load");
			load.appendChild(photo);
		};
	};

FileAPIに関しては以下の記事を参照。ありがとうございます！

PHP+MySQLサイトでデータベースからデータを取り出すときに1ページに○件表示できる分割ページにしたい。PHPでギャラリーページを作っていて参考にした記事を紹介します。

「LIMIT 0 , 6」で0から6件取り出すということなので最初の値を変数にして、その中身をGETやPOSTから取得することで実装できました。ちなみにSQL文の中に変数を使う際には”（ダブルクォーテーション）で囲む必要があります。’だと意味合いが変わってエラーが発生します。

久しぶりにPHPでプログラム書いてますが勉強不足を痛感してます(TдT)

『<input type=”file”>』。サーバへファイルをアップする場合にこのような記述を行うかと思いますが、制作途中にCSSで要素のデザインを変更できないという事態に遭遇することがあるかもしれません。僕もこの問題に詰まったので対処法について備忘録として記事にしてみます。

クリックさせる偽物の要素や画像を用意して、本物は透明にして上に覆いかぶせる。そして、出力されたファイルパスはJavaScriptで<input type=”text”>の中に差し込む。参考になりました、感謝です。

さらにサクッとしてみた

僕の作っていたのは特殊なWebアプリケーションだったのでパスが出力されるフォームを省いたシンプル設計にしてみました。下の画像のように”ボタンをクリックするとファイル選択画面が立ち上がる。”これだけで良かったんですね。

ソースコード

<div id="fileinputs">
<form>
<input type="file">
<button>ファイル選択<button>
</form>
</div>

/*input*/
#fileinputs input {
    position:relative;
    opacity:0;
    z-index:2;
}

/*button*/
#fileinputs button {
    margin-top:-30px;
}

HTML5に関する記事は6月の初旬から全く書いていませんでしたので久しぶりの更新となります。さて、今回はHTML API として策定されている『HTML Media Capture』のことを書いてみたいと思います。

HTML Media Capture って？

今回取り上げるHTML Media Captureって何でしょう。W3C Working Draftの文章にはこのように書かれています。

This specification defines HTML form enhancements that provide access to the audio, image and video capture capabilities of the device. （音声、画像、ビデオをキャプチャするデバイスへのアクセスをHTMLフォームを拡張して可能にします。）

つまりHTML Media CaptureとはWebブラウザからPCやスマートフォンなどの端末のデバイスにアクセスできるようにする仕様です。APIとしてはMedia Capture APIになるのかな？Flashのようにプラグインに依存しない、Web標準技術でブラウザからデバイスを立ち上げることが可能になっちゃうんです。

ほとんどのスマートフォンってカメラとマイクがついてますから主にスマートフォンで威力を発揮するんじゃないかなっていう仕様です。

どうやるの？

『HTMLフォームを拡張』したのだからフォームにひと手間加えるだけで手軽に利用できます。単にカメラを起動させるならフォームを構成するinput要素にプロパティをちょっと書き足します。

<input type="file" accept="image/*" capture="camera" id="capture">

カメラ(image/*)以外にもaccept属性に以下の値を指定すれば他のデバイスも起動させることができます。ちなみにcapture属性に関しては勉強不足で説明できません(TдT) とりあえず属性自体を記述しなくても動作はしてました。

• audio/* – マイクデバイス
• video/* – ビデオ撮影デバイス

2011年12月21日修正

対応しているブラウザ（Android3.0以上）ではinput要素に対してtype=”file”を指定（<input type=”file”>）することで下のDemoのようなファイル選択方法の画面が表示されます。

なおAndroid3.0以上のブラウザで直接カメラを起動させるには以下のコードを記述します。（参考：141 WebLog: Android で HTML5 / Media Capture API を試す）

<input type="file" accept="image/*;capture=camera">

この記述により、ファイル選択画面を省略して直接カメラが起動します。

Demo

2011年の10月時点ではMedia Capture APIに対応しているブラウザはAndroid 3.0以上のブラウザしかありません。動作環境が限られるということで画面のキャプチャを貼ってみます。エミュレータでAndroid4.0を起動させてみました。

ブラウザレンダリング

英語表記ですがファイル選択のフォーム。

ファイルinput方法選択

「Choose file」をタッチするとファイルをinputするのにカメラで撮影するか、ギャラリーから撮影するかを選択できます。

2011年12月21日追記

この画面は<input type=”file”>により表示されるようになります。<input type=”file” accept=”image/*;capture=camera”>ではこの画面をスルーしてすぐにカメラが起動します。

カメラデバイスへのアクセス

選択画面でカメラを選択すると内蔵されているカメラが起動します。エミュレータなのでこんな画面なのはご愛嬌です(〃ω〃)

ファイルのinput

写真の撮影が終了するとブラウザの画面へと戻り、ファイル（パス）がinputされます。

ちなみにスマートフォンに関して言えばHTML5ベースのネイティブアプリを開発するためのPhoneGapもMedia Capture APIに対応しているみたいです。

まとめ。

フォームの拡張のため、サーバにファイルをアップしたりするのが超スムーズにできちゃうHTML Media Capture。ブラウザからデバイスへのアクセスができるようになるとWebアプリケーションへの応用のアイデアがどんどん浮かんできますね。将来的にはどのような方向に行くのか分からない部分もありますけど、今後の展開に期待してます。

あと最近はWebAPIってのもあるみたいです。名前がややこしいけどMozillaのプロジェクトで、現在は独自にスマートフォン端末のデバイスへアクセスするようなAPIを策定中みたいです。こちらも動向が気になります。

今年の夏に撮影した写真をアップしていきまーす！何か食べ物の写真が多くなってしまってる…。まあ、いっかｗ

ツーリング

8月の前半に富山県のバイク用品店を目指して4台でツーリング！暑い日でものすごく日焼けしましたが、往復150kmぐらいの走行は楽しかったー。また行きたいなあ。

大学の駐輪場にて。僕のバイクは左から2番目のシルバーボルティ。みんなカッコよい。

僕の地元の名物！高岡工芸高校の近くにある”まじま”のソフトクリーム。暑い日だったのでソフトクリームが溶けて食べるのが大変だったw（食べログ：ショップ まじま）

そしてその隣にあるたこ焼き”はちはち”。地元の友達の間でもおいしいのは結構有名。アニメ、true tearsにこのお店をモチーフにした店が登場しているらしい。（食べログ：たこ焼きはちはち）

目的地の南海部品 富山店。ヘルメットやアクセサリも豊富で何度か来たことがあります。こんなお店は見てるだけで楽しいｗ

誕生日

22歳になりましたぜ。

誕生日が近い友達と一緒に祝ってもらいました。僕のHN（氷水）が入っていたｗ

香川県

大学のプロジェクト研修で香川県に行ってきました。商店街の取り組みに関する講演を聞いてきた(・∀・) 長期的な計画を考えることって難しいねぇ。

瀬戸内海を横断。海の上をバスで走っているよ。すげー！

高松市ってすごく町並みがキレイ。

うどん！”根っこ”で大きい磯辺揚げといっしょに。　（食べログ 根っこ）

”さぬき麺業”で昼食のぶっかけうどん！ぶっかけうどん、美味しすぎて困る。麺のコシはこの店が一番強かったかな。（食べログ：さぬき麺業）

夕食の”はなまるうどん”。安定でした(´∀｀*)

道の駅メルヘン おやべ

Twitterで友人におんたまソフトらしきものが富山県に存在するということを聞いて行ってきました。実家への帰り道にある道の駅にて400円で販売してます。（道の駅メルヘン おやべ）

どーん。温泉たまごと少し甘い醤油。（醤油は任意）一回食べたらもう良いですってなる濃ゆい。しっかりと混ぜて食べるのが良いらしいです。万人受けするモノではないですね。

学会

主に学生が発表する学会に参加してきました。HTML5 APIを利用したWebアプリケーションについて発表してきましたよ(´∀｀*)

福井県と言えばやっぱりソースカツ丼を食べないと！ヨーロッパ軒のソースカツ丼。肉が柔らかくて美味しかった。（食べログ：ソースカツ丼）

7月23日（土）にセミナーイベント「kanazawa.js v1.5 – Hello Titanium Mobile! -」が開催されました。JavaScriptでスマートフォンアプリを開発できる”Titanium Mobile”を知ることができる！ということで参加してきましたー。講師の方は今回のメインであるTitanium Mobileを開発しているAppceleratorの増井 雄一郎さん、はてなの倉井 龍太郎さんのお二人！

内容

• Titanium Mobileってなに？
• TitaniumでAndroidアプリをリリースまでやってみた
• 私が Appcelerator, Inc. に入ったワケ

軽くですが、内容をアウトプットしてみようと思います。

Titanium Mobileってなに？

増井さんの講演。Titanium Mobileにほとんど触れたことが無い、JavaScriptも修行中である僕に大助かりなセッションでした。

Titaniumでアプリ開発を行うメリットはiOSあるいはAndroidのネイティブユーザインターフェース（Native UI）が使えること。HTML5+CSS3ベースのコンテンツをアプリ化することはできるが、UIは制作者が用意した画像あるいはコードを使うことになるため十分なユーザ体験が得るのが大変。ちなみに「AKB48前田敦子 Maeda-1グランプリ」「ココログ」「Mog Snap」などもTitaniumで作られているらしいです。

あと、OSの環境に合わせてObjectiveCあるいはJavaでモジュールを作成することができる。JavaScriptの性質上、画像処理やリアルタイム性が高い処理は難しい。餅は餅屋。

TitaniumでAndroidアプリをリリースまでやってみた

倉井さんの講演。実際にAndroidアプリを開発〜リリースするまでの体験談を面白く話してくれました。僕Android端末無いけど、えっちぃアプリ教えてほしいですw

まだ開発してない僕には事例解説をあんまり理解することはできませんでしたが、倉井さんの体験からのベストプラックティスは参考になると思いました。技術的なお話はうまく伝える自信がないので割愛します。。。

Titaniumで作ったiPhone向けアプリをAndroidに移植するときに詰まった点や、iOSは同期処理でAndroidの場合は再帰処理だとか知らないと行き詰まりそうなことをたくさん教えてくれました。

私が Appcelerator, Inc. に入ったワケ

再び増井さんの講演。

TitaniumのAppceleratorはアメリカの企業ですが、なぜ増井さんがこの会社に入ったのかを語ってくれました。行動力がすごいっす！「日本なんか興味ねえ、シリコンバレーで働きたいだ」って思う人は今回の講演は貴重なヒントになるんじゃないでしょうかね。僕も情熱を持ってWeb業界でご飯を食べていきたいです。

Thank you.

受付でお姉さんにおいしい飴をもらい、ギークなお姉さんに出会い、さらに無料で自分の視野を広げてくれる講演を…。良い刺激を受けることができました。ありがとうございました！