Webでカメラアプリ

HTML5 iOS

この記事は、HTML5 Advent Calendar 2012向けに書いたものです。
自分の担当は12/19となります。

スマフォの普及とともに写真を共有するサービスが沢山提供されてきました。

スマフォでカメラアプリを作る場合は、基本的にNativeアプリとして作るのが一般的だと思いますが、HTML5の対応が進むに連れてその状況は今後変わってくるのかもしれないと思い始めています。

カメラアプリの基本機能として

  1. 写真を撮る
  2. 写真を加工する
  3. 写真を投稿する
  4. 写真を閲覧する
  5. コメントなどのやり取りをする

あたりが実装されているかと思います。
（５はソーシャル的な要素なので無くてもいいですが）

Webで作るにあたって、４，５に関しては今までも問題なく作成することができましたが、１〜３が理由でNativeで作ることを選ぶのが多いのではないかと。


しかし、iOS6の登場でSafariのHTML5対応が進んだことによって、この辺の問題が一気に解決したんじゃないかと。

HTML Media Captureに対応したことで、

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

のように書くことができることになりました。
ブラウザからカメラを利用して撮影した画像が選択できるようになったので、「１」の問題が解決し「３」も可能となりました。

次に、Filter Effects 1.0に対応したことにより、画像へのエフェクトが簡単にできるようになりました。
これによって、JavaScriptでゴリゴリ書かなくても、CSSの指定だけでフィルター効果を反映させることができます。

例えば、

img {
    -webkit-filter: sepia(100%);
}

とするだけで、セピアのエフェクトを指定できます。
これで、「２」の問題も低コストで対応できるようになります。
（実際に画像のデータを変換しているわけではないので、若干語弊があるけど。。）

実際にどんな感じになるかサンプルを作って試してみます。

サンプル
iOS6のデバイスで開いてみて下さい。
Chrome v23でも動作するのは確認できています。ただし、Chromeの場合だと撮影ではなくただのファイル選択となります。


ぼかしのフィルターを適用した状態。

フィルター効果を反映させた画像のアップロード方法はちょっと思いついていないんですが、指定された効果を画像と一緒にサーバに送って、サーバ側で加工する方法でも対応できるので、なんとかなるかなとｗｗ

以前、ブログでCoreImageを使ってObjective-cで画像のエフェクトを掛ける方法を書いたことがありますが、その時よりも少ないコードで実装できます。
しかも、htmlなのでコンパイルとかも配布も不要。
適当なエディタでコードを書いて、サーバにupしてしまえば使えます。

HTML5への対応が進むことで、どんどんできることが増えてきて、楽しいですね！


ちなみに、去年のカレンダーではWebVTTについて書きました。
この時はまだどのブラウザも対応していなかったのですが、今ではいろんなブラウザが対応しています。
デモを動かすと、自分がJavaScriptで実装したものと、ブラウザが表示するものと２種類表示されますｗ
ただ、当時と仕様も少し変わっているので、表示のされ方が違いますが。。

こんなかんじで、どんどん進化していくHTML5は、今後も目が離せないですね。