HTMLやCSS、JavaScriptでスマートフォンアプリを開発できるフレームワーク「PhoneGap」。今回は、PhoneGapに用意されているCapture APIを使って、iPhone/iPadで写真やビデオを記録してみましょう。

　PhoneGapでは、以前から独自のAPI（Media API／Camera API）によって、音声を録音したり静止画を撮影したりできました（関連記事1、関連記事2）。加えて、最近ではW3Cで仕様策定中のCapture APIにも対応し、動画の録画もできます。

PhoneGapプロジェクトの作成

　最初に、前回、Media APIで作った簡易ボイスレコーダーをCapture APIで作り直してみましょう。作成するアプリは録音ボタンとaudio要素があるだけのシンプルなものです。

　これまでと同じように、XcodeでPhoneGapプロジェクトを作成します。

ファイルメニューから「新規プロジェクト...」を選択

PhoneGap-based Applicationを選択し、「選択...」ボタンをクリック

作成するプロジェクト名を入力し保存

　新規プロジェクトが作成できたら準備完了です。今回は、追加するプラグインやサウンドファイルなどはありません。

ソーシャルリアクション

この連載の記事

• 第82回  iOS 5で使えるWeb Workersでカメラアプリ作ってみた
• 第81回  iBooks AuthorでHTML5の電子書籍作ってみた
• 第80回  iOS 5の新機能で作る「パノラマビュー」アプリ
• 第79回  CanvasとPhoneGapで作るiPhone用落書きアプリ
• 第78回  PhoneGapでiPhoneのコンパスアプリを再現
• 第77回  もうFlashは要らない!?スマホ用CSS3アニメを作ろう
• 第76回  iPhoneでも動くアニメが作れるSencha Animatorの使い方
• 第75回  CSS3でFlash並みアニメが作れるSencha Animator
• 第73回  JavaScriptで作れるiPhone用ボイスレコーダー
• 第72回  PhoneGapのMedia APIでバイブ付き音楽プレーヤー
• この連載の一覧へ

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

• 古籏一浩のJavaScriptラボ

• PhoneGapのMedia APIでバイブ付き音楽プレーヤー

• MapKitなら4行で作れるiPhone用地図アプリ

• MapKit×JavaScriptでiPhone用GPSアプリ

• PhoneGapでiPhoneのカメラアプリを作ろう

• JavaScriptでiPhoneアプリ開発！NimbleKit入門

• HTML5でiPhoneアプリ開発！PhoneGap入門

• 西畑一馬のjQuery Mobileデザイン入門

• WebSocketでスマホ用対戦ゲームを作ってみた

• iOS 5で使えるWeb Workersでカメラアプリ作ってみた

関連記事

• iOS 5で使えるWeb Workersでカメラアプリ作ってみた

• Facebook連動スマホアプリが作れるJSライブラリー

• iBooks AuthorでHTML5の電子書籍作ってみた

はてブ注目ランキング

1. 世界を変える方法は山川の教科書に書いてある274 users

2. 10分でわかる！ jQuery Mobileのキホン100 users

3. iBooks AuthorでHTML5の電子書籍作ってみた78 users

4. HTML5要素のブラウザー実装状況を調べてみた39 users

5. コンテンツを依頼するときのSEOチェックリスト1731 users

6. 40分で覚える！jQuery速習講座2225 users

7. 絶対見ておきたい有名企業のスマホサイトまとめ2144 users

8. もう配色には困らない！「Adobe Kuler」1683 users

9. 30分でできる！Webサイトを高速化する6大原則1498 users

10. Web制作会社が作った！超使えるJavaScriptライブラリ1217 users

最新記事

• 「Thunderbolt」対応のキャプチャーユニットが登場

  

• Radeon HD 7770最速のビデオカードがSAPPHIREから発売

  

• 奥行き118mmの小型ATX電源ユニット「小錻力4」が発売

  

• 編集太田のゲーム専用PCのノーガードっぷりは異常

  

• ドスパラ パーツ館「1周年記念セール」が今週からスタート！