このページの本文へ

PROGRAMMING 古籏一浩のJavaScriptラボ第66回

PhoneGapでiPhoneのカメラアプリを作ろう

2011年08月03日 11時00分更新

古籏一浩

  • この記事をはてなブックマークに追加
本文印刷
js-labo

 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">
Web Professionalトップページバナー

この記事の編集者は以下の記事をオススメしています

ASCII.jp会員サービス 週刊Web Professional登録

Webディレクター江口明日香が行く