|
|---|
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の場合は前回の記事を参考にしてプロジェクトを作成してください。
ファイルメニューから「新規プロジェクト...」を選択
「PhoneGap-based Application」を選択し、「選択...」ボタンをクリック
用意してある480×270ピクセルサイズの動画を「movie」フォルダにまとめます。
9種類の動画を用意する
movieフォルダをPhoneGapプロジェクトフォルダ内のwwwフォルダにドラッグ＆ドロップします。
wwwフォルダにドラッグドロップ
wwwフォルダ内にmovieフォルダが入った
Xcodeに戻ってPhoneGapプロジェクトのウィンドウを表示します。左領域のwwwフォルダの▲をクリックして展開すると、wwwフォルダ内にmovieフォルダがあり、さらにmovieフォルダ内に9つの動画ファイルがあるのを確認します。
wwwフォルダ内にmovieフォルダと動画がある
以上で準備は完了です。
