スマートフォンのセンサーやカメラ機能を利用するプログラミングをする。そんなことを聞くと難しいプログラムが必要だと感じる方も多いと思います。

ゼロからその様な記述をするとなると一般人には不可能に思いますが、HTML5で策定されたJavaScript APIを利用することで、比較的簡単に行えるようになりました。

今回はFile APIと呼ばれる技術を利用してスマホ(iPhone)のカメラを起動させて写真にフィルターをかけるアプリを試しに作ってみました。


俺スタグラム

1

相変わらずどこかで聞いたような名前のものですが、ブラウザで利用できる写真加工アプリです。一応使い方の解説を。


2

「ファイルを選択」ボタンをタップ(クリック)するとローカルのフォルダに接続されます。

「フォトライブラリ」内の写真を選択しても良いのですが、ここでは「写真またはビデオを撮る」を選択します。


3

カメラが起動したら通常通り撮影します。正方形にトリミングされないので、画面の収まりが良い横撮りがオススメです。

撮影し終えたら「写真を使用」をタップ(クリック)します。


4

フィルタはカルーセルで色々あるのでお好みで選んで下さい。

フィルターのサムネイルをタップ(クリック)すると選択した写真にフィルターが掛かります。

ローカル保存やシェアとかは出来ません(理由は後述)。硬派に「俺」だけでお楽しみ下さい。


制作のポイントは以下の3点です。

  1. JavaScript API(File API)を使う。
  2. CSSライブラリ(filter.css)を使う。
  3. jQueryライブラリ(slick.js)を使う。

なんか「〜を使う」ばっかりですが、実際自分で記述する部分はほとんどなく、既存のAPI・ライブラリを利用して制作してみました。

何かの参考になればと思いまとめてみます。


File API

Mozillaの解説(Web アプリケーションからファイルを扱う|MDN )に詳しく書かれています。ただいまひとつ分かりづらかったので検索してみたところこちらの記事に詳しくまとめてありましたので参照させていただきました。

input要素のtype属性にfileを指定することでローカルファイルからデータを取得することが出来ます。


<input id="hogehoge" type="file">
	

ここまでは分かったのですが、取得した画像データをWeb上に表示する方法に迷いました。

これは返ってきたデータの.resultを呼び戻すことで表示されるとのことです。

返り値はdata URI scheme化されたbase64で取得できます。

こんなやつですね。サンプル画像のbase64データはこんなやつです。


data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEASABIAAD/4QPMRXhpZgAATU0AKgAAAAgACwEPAAIAAAASAAAAkgEQAAIAAAALAAAApAESAAMAAAABAAEAAAEaAAUAAAABAAAAsAEbAAUAAAABAAAAuAEoAAMAAAABAAIAAAExAAIAAAAKAAAAwAEyAAIAAAAUAAAAygE7AAIAAAAlAAAA3oKYAAIAAAA3AAABBIdpAAQAAAABAAABPAAAAABOSUtPTiBDT1JQT1JBVElPTgBOSUtPTiBENjEwAAAAAAEsAAAAAQAAASwAAAABVmVyLjEuMDAgADIwMTQ6MDU6MTcgMjM6MTU6MzgAICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgAAAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAAAAAngpoABQAAAAEAAAMWgp0ABQAAAAEAAAMeiCIAAwAAAAEAAwAAiCcAAwAAAAEBkAAAiDAAAwAAAAEAAgAAkAAABwAAAAQwMjMwkAMAAgAAABQAAAMmkAQAAgAAABQAAAM6kQEABwAAAAQBAgMAkQIABQAAAAEAAANOkgQACgAAAAEAAANWkgUABQAAAAEAAANekgcAAwAAAAEAAwAAkggAAwAAAAEAAAAAkgkAAwAAAAEAEAAAkgoABQAAAAEAAANmkoYABwAAACwAAANukpAAAgAAAAMyMAAAkpEAAgAAAAMyMAAAkpIAAgAAAAMyMAAAoAAABwAAAAQwMTAwoAEAAwAAAAEAAQAAoAIABAAAAAEAAAUAoAMABAAAAAEAAANVohcAAwAAAAEAAgAAowAABwAAAAEDAAAAowEABwAAAAEBAAAApAEAAwAAAAEAAAAApAIAAwAAAAEAAAAApAMAAwAAAAEAAAAApAQABQAAAAEAAAOapAUAAwAAAAEBkAAApAYAAwAAAAEAAQAApAcAAwAAAAEAAQAApAgAAwAAAAEAAAAApAkAAwAAAAEAAAAApAoAAwAAAAEAAAAApAwAAwAAAAEAAAAApCAAAgAAACEAAAOiAAAAAAAAAAEAAAZAAAAAHAAAAAUyMDE0OjA1OjE3IDE0OjE5OjQzADIwMTQ6MDU6MTcgMTQ6MTk6NDMAAAAABAAAAAH/////(以下略)"	
	

実際はこんなデータがあと4万文字位続くのですが、まあ長いので省略します。

これをimgタグのsrc属性として指定してあげれば画像として表示される。という訳です。上記記事のコードを利用させてもらい試してみました。


これを試してみて気づいたのですが、Mobile Safariでファイルにアクセスすると、カメラの撮影機能も同時に利用することが分かりました。(iOS6のSafariでサポートされるHTML5の機能| Developers.IO )iOS6から利用できたみたいです。

比較的簡単な記述でカメラで撮影したデータが取得できて驚きました。


filter.css

5

そもそもこのアプリを作ってみようと思ったきっかけは、こちらのCSSライブラリを見かけてからでした。

CSS3の-webkit-filterプロパティを利用することで、画像を様々に加工することができます。

フィルタはそのまま利用させていただきましたが、Firefoxの最新版でfilterプロパティが有効になった様なので、(Firefox 35 が正式リリース、CSS Filter がデフォルトで有効に|WWW Watch )さっそくこのfilterプロパティを追記してみました。



こちらのフィルターを利用してサムネイルをタップ(クリック)した際にjQueryで切り替えが出来るようにしてみました。

さすがに全くそのままでは芸がないので、img要素をdivで囲い、擬似要素を利用してトイカメラ風のビネット加工を追加しています。


slick.js

6

サムネイルが上手くiPhoneに収まらなかったので、どうしようかと思ったのですが、写真加工アプリでよくあるようなカルーセルタイプにしてみようと思いました。

こちらのプラグインはレスポンシブに対応しているので便利に利用できます。

あとはこのブログテーマでも使っている Bootstrap で少し外観を整えて完成しました。


画像を保存、シェアするには

CSSで加工した画像をローカルファイルに保存出来ないか色々試してみたのですが、これは中々難しそうでした。

Webアプリで画像加工をする際は、Canvasというメソッドを利用して書き出す方法があります。(iPhone、Androidで使える!撮ったその場で画像編集できるHTML5アプリを作ってみよう|Developers.IO

Canvasかあ…。以前Twitterアイコンで遊べるミニゲーム(Take Me Summer )をenchant.jsで作ったのですが、Canvas画像データの装飾はCSSでは行えずにひどく迷った記憶があります。(これはJavaScriptで指定してあげなければなりません)

これらを利用すれば本格的な画像加工のWebアプリが作れるということですね。


まとめ

以前よりHTML5で策定されたAPIを利用して何か作ってみたかったのですが、ようやく試してみることが出来ました。(詳細な解説サイトのおかげです。ありがとうございました。)

よかったら「俺スタ」ってみてください。(どうでも良い話ですが、アプリのサンプル画像は私の父が撮った写真です)ではまた。