このページの本文へ

PROGRAMMING 古籏一浩のJavaScriptラボ ― 第69回

HTML5+CSS3でiPhone用動画アプリを作ろう

2011年09月01日 13時00分更新

古籏一浩

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

 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の場合は前回の記事を参考にしてプロジェクトを作成してください。

【図】1.png
ファイルメニューから「新規プロジェクト...」を選択
【図】2.png
「PhoneGap-based Application」を選択し、「選択...」ボタンをクリック
【図】3.png

 用意してある480×270ピクセルサイズの動画を「movie」フォルダにまとめます。

【図】4.png
9種類の動画を用意する

 movieフォルダをPhoneGapプロジェクトフォルダ内のwwwフォルダにドラッグ&ドロップします。

【図】5.psd
wwwフォルダにドラッグドロップ
【図】6.png
wwwフォルダ内にmovieフォルダが入った

 Xcodeに戻ってPhoneGapプロジェクトのウィンドウを表示します。左領域のwwwフォルダの▲をクリックして展開すると、wwwフォルダ内にmovieフォルダがあり、さらにmovieフォルダ内に9つの動画ファイルがあるのを確認します。

【図】7.png
wwwフォルダ内にmovieフォルダと動画がある

 以上で準備は完了です。

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

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

HTMLリファレンス誘導バナー

CSSリファレンスサイト誘導バナー

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

ランキング