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