HTMLやCSS、JavaScriptでスマートフォンアプリを開発できるフレームワーク「PhoneGap」。今回はPhoneGapを使って、iPhone用の動画アルバムアプリを作成します。
以前紹介したフレームワーク「NimbleKit」では動画を扱うための専用のAPIが用意されていましたが、PhoneGapにはありません※1。そこで、PhoneGapではHTML5 Videoを使って動画を再生します。HTML5 Videoの仕様やiPhone/iPadの制約を受けるので、動画を扱う場合はNimbleKitのほうが手軽かもしれません。
- NimbleKitでiPhone用動画アプリを自作しよう
- http://ascii.jp/elem/000/000/616/616065/
今回は上記のNimbleKitの連載で使用した動画ファイルを流用し、サムネイルリストをタップすると動画を再生するだけのシンプルなアプリを作ります。なお、iPhone/iPadでは動画の再生方法が異なるので、iPhoneをメインに解説します。
PhoneGapには動画を再生するためのAPIはありませんが、W3Cで仕様策定中のCapture APIを利用した動画の録画ができます。今回は動画の再生処理について解説し、録画方法に関しては別の記事で解説します。
PhoneGapプロジェクトの作成
Xcodeを起動し、以下の手順でPhoneGapプロジェクトを作成します。なお、Xcode 4の場合は前回の記事を参考にしてプロジェクトを作成してください。
用意してある480×270ピクセルサイズの動画を「movie」フォルダにまとめます。
movieフォルダをPhoneGapプロジェクトフォルダ内のwwwフォルダにドラッグ&ドロップします。
Xcodeに戻ってPhoneGapプロジェクトのウィンドウを表示します。左領域のwwwフォルダの▲をクリックして展開すると、wwwフォルダ内にmovieフォルダがあり、さらにmovieフォルダ内に9つの動画ファイルがあるのを確認します。
以上で準備は完了です。