前回はPhoneGapを支える各種APIの紹介と，jQuery Mobileを用いたメモ帳アプリを実際に作成するところまでを紹介しました。本連載最終回となる今回は，実機でのテストをするまでの手順と，Camera APIとHTML5 Canvas，PhoneGapプラグインを使ったカメラアプリケーションの作成方法を紹介しましょう。
ユニバーサルアプリのビルド方法，実機テスト準備，外部プラグインの導入手順
今回はPhoneGapのCamera APIを使って，簡単なカメラアプリケーションを作成してみましょう。今回実装するカメラアプリの要件は次のとおりです。
- iPhone/iPadのユニバーサルアプリケーションであること
- iPhone/iPadともに横向き（Landscape）利用を前提とする
- カメラで写真を撮るか，アルバム内の写真を選択する
- 選択した写真に対して「グレースケール」「セピア」のフィルタ処理が行えるように
- 画面数は「写真を取る/アルバムからの選択メニュー」「写真の確認/フィルタ処理/保存」の2画面
- jQuery Mobileを利用して，index.html1ファイルで完結させる
- 加工した写真はiOSのフォトアルバムに保存ができること
第1回で紹介した手順で新しいプロジェクトを作成します。プロジェクト名は「PhoneGapCamera」としました。今回は開発をはじめる前に，いくつかの準備を行います。
- ①ユニバーサルアプリケーションをビルドするには
- ②デバイスの向き（Device Orientations）とアプリのアイコン（App Icons），起動画面（Launch Images）のカスタマイズ
- ③iPhone/iPad実機でテストする手順
- ④外部プラグインの導入手順
①ユニバーサルアプリケーションをビルドするには
iPhone/iPad両デバイスに対応するユニバーサルアプリケーションをビルドするには，iOS Application Targetを変更する必要があります。Xcodeで作成したプロジェクトを選択し，Project Navigatorを表示します。画面右部に表示されるSummaryタブ内の「iOS Application Target」を，"iPhone"から"iPad"に変更します。
図1 Project Navigatorを開き，iOS Application Targetを"iPhone"から"iPad"に変更
これでユニバーサルアプリケーションをビルドする準備が整いました。アプリケーション内部ではユーザエージェントやDevice APIを用いて，処理や画面幅の調整をiPhone/iPadごとに処理を分岐させればOKです。
②デバイスの向き（Device Orientations）とアプリのアイコン（App Icons），起動画面（Launch Images）のカスタマイズ
デバイスの向きとアプリのアイコン，起動画面をカスタマイズするときも①と同様，Project Nabigatorから行います。デバイスの向きは「Supported Device Orientations」から選択します。
- Portrait: 縦向き
- Upside Down: 縦向き（逆さま）
- Landscape Left: 左横向き
- Landscape Right: 右横向き
図2 Supported Device Orientations。4種類の中から対応させるデバイスの向きを選択
Supported Device Orientationsは複数選択することが可能です。今回はLandScape Rightのみを選択しました。
アプリのアイコンは「App Icons」から変更します。通常のアイコンサイズは57x57ピクセル，Retinaディスプレイ用のアイコンサイズは114×114ピクセルとなっています。デフォルトのファイルパスは次のとおりです。
- 通常アイコン:
（PhoneGapプロジェクト名）/Resources/icons/icon.png - Retinaディスプレイアイコン：
（PhoneGapプロジェクト名）/Resources/icons/icon@2x.png
パスのアイコンファイルを直接編集するか，用意した画像ファイルをApp Iconsにドラッグ&ドロップして変更します。
図3 App Iconsを変更
起動画面は「Launch Images」から変更します。通常の画像サイズは320x480ピクセル，Retinaディスプレイ用の画像サイズは640x960ピクセルとなっています。デフォルトのファイルパスは次のとおりです。
- 通常：
（PhoneGapプロジェクト名）/Resources/splash/Default.png - Retinaディスプレイ
（PhoneGapプロジェクト名）/Resources/splash/Default@2x.png
アイコン同様，パスのファイルを直接編集するか，用意した画像ファイルをLaunch Imagesにドラッグ&ドロップして変更します。
図4 Launch Imagesを変更
