|
|---|
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">
ソーシャルリアクション
この連載の記事
- 第77回 もうFlashは要らない!?スマホ用CSS3アニメを作ろう
- 第76回 iPhoneでも動くアニメが作れるSencha Animatorの使い方
- 第75回 CSS3でFlash並みアニメが作れるSencha Animator
- 第74回 Capture APIでiPhone用ビデオレコーダーを作ろう
- 第73回 JavaScriptで作れるiPhone用ボイスレコーダー
- 第72回 PhoneGapのMedia APIでバイブ付き音楽プレーヤー
- 第71回 iPhoneがPhoneGapで簡易電子書籍リーダーに
- 第70回 PhoneGapでMapKitを使って地図アプリを開発
- 第69回 HTML5+CSS3でiPhone用動画アプリを作ろう
- 第68回 iPhone/iPad両対応！PhoneGapで作るアルバムアプリ
- この連載の一覧へ
![Microsoft Windows7 Home Premium 64bit 日本語 DSP版 + メモリ [DVD-ROM]](http://ascii.jp/img/amazon_noimg70.gif "Microsoft Windows7 Home Premium 64bit 日本語 DSP版 + メモリ [DVD-ROM]")
