HTMLやCSS、JavaScriptといったWeb技術でスマートフォンアプリを開発できるフレームワーク「PhoneGap」。今回は、PhoneGapでiPhoneのカメラ機能を使う方法を紹介します。
PhoneGapのカメラ機能は非常にシンプルで、背面のメインカメラで撮影するだけですが(カメラの切り替えはできない)、撮影した画像データはJavaScriptで自由に処理できます。画像をCanvasに描画して特殊効果(エフェクト)を施せば、ちょっとした加工機能付きのカメラアプリも作れます。
今回は、撮影した写真をページ内に次々と追加するアプリを作成してみましょう。今回のサンプルはカメラ機能を使うので、iOSシミュレータでは動作しません。また、カメラ機能がない初代iPadではエラーになり、動作しません。
Capture APIとCamera API
最近のPhoneGapでは、W3Cで仕様策定中のCapture APIも利用できるようになりました。バージョン0.9.6時点ではビデオ再生時に一部不具合がありますが、「ビデオ」「オーディオ」「カメラ」のいずれもCapture APIを利用して撮影/録音/録画できます。また、カメラ撮影では背面と前面どちらのカメラでも撮影できます。
本記事では、PhoneGapに以前から標準で用意されているCamera APIを使います。Camera APIはCapture APIに比べて高機能です。
補足情報:
本連載では執筆時点の最新版であるPhoneGap 0.9.5.1を使用していますが、2011年8月2日現在、PhoneGapは正式版(1.0.0)にバージョンアップしています。本連載のサンプルは以下のようにscriptタグ部分を書き換えることで、そのまま1.0.0でも動作します。
<script type="text/javascript" charset="utf-8" src="phonegap.0.9.5.1.min.js">
↓
<script type="text/javascript" charset="utf-8" src="phonegap-1.0.0.js">