|
|---|
HTMLやCSS、JavaScriptでスマートフォンアプリを開発できるフレームワーク「PhoneGap」。今回はPDFを使った簡易電子書籍ビューアーアプリを作ります。
PDFを表示するだけならiOS標準のSafariでできますが、ページ内にPDFを埋め込んで表示するにはインラインフレームを使う必要があります。インラインフレームを使ってPDFを表示すると、拡大・縮小などの操作がうまくできず、使い勝手がよくありません。そこで、今回はPhoneGapのプラグイン「ChildBrowser」を利用して、ページ内にPDFを表示します。
ChildBrowserは、PhoneGapのページとは独立してWebページを表示するプラグインです。PhoneGapが親、ChildBrowserが子の関係になり、ChildBrowserを呼び出して終了するとPhoneGapに戻ります。アプリを切り替えるのではなく、ChildBrowserがPhoneGapの画面を覆うようなイメージです。
ChildBrowserは外部のWebページを表示するためのプラグインですが、うまく利用することでPDFも表示でき、ピンチイン/ピンチアウトで拡大・縮小もできます。実際に使ってみると、かなり便利なプラグインです。
ChildBrowserはMapKitプラグインと同じパッケージに含まれているので、前回ダウンロードしている場合はすぐに利用できます。再度ダウンロードしたい場合は以下のページへアクセスし、前回の記事を参考に準備してください。
- PhoneGap Plugins
- https://github.com/purplecabbage/phonegap-plugins
![]() |
|---|
| 一括してダウンロードされる |
![]() |
|---|
| ChildBrowserは以下のフォルダに入っている |
PhoneGapプロジェクトの作成
最初にPDFではなく、外部のWebページを表示してみましょう。以下の手順に沿って、XcodeでPhoneGapプロジェクトを作成します。
![]() |
|---|
| ファイルメニューから「新規プロジェクト...」を選択 |
![]() |
|---|
| PhoneGap-based Applicationを選択し、「選択...」ボタンをクリック |
![]() |
|---|
| 作成するプロジェクト名を入力し保存 |
新規プロジェクトが作成されたら、ChildBrowserプラグインのファイルをpluginsフォルダにドラッグ&ドロップします。
![]() |
|---|
| 必要なファイル(画像も)をpluginsフォルダに入れる |
![]() |
|---|
| コピーするにチェックを入れて、「追加」ボタンをクリック |
ChildBrowserをJavaScriptから利用するためのファイルをwwwフォルダに入れます。
![]() |
|---|
| ChildBrowser.jsファイルをwwwフォルダに入れる |
ソーシャルリアクション
この連載の記事
- 第75回 CSS3でFlash並みアニメが作れるSencha Animator
- 第74回 Capture APIでiPhone用ビデオレコーダーを作ろう
- 第73回 JavaScriptで作れるiPhone用ボイスレコーダー
- 第72回 PhoneGapのMedia APIでバイブ付き音楽プレーヤー
- 第70回 PhoneGapでMapKitを使って地図アプリを開発
- 第69回 HTML5+CSS3でiPhone用動画アプリを作ろう
- 第68回 iPhone/iPad両対応!PhoneGapで作るアルバムアプリ
- 第67回 フォトアルバムアプリで学ぶPhoneGapの使い方
- 第66回 PhoneGapでiPhoneのカメラアプリを作ろう
- 第65回 HTML5でiPhoneアプリ開発!PhoneGap入門
- この連載の一覧へ
























![Microsoft Windows7 Home Premium 64bit 日本語 DSP版 + メモリ [DVD-ROM] Microsoft Windows7 Home Premium 64bit 日本語 DSP版 + メモリ [DVD-ROM]](http://ascii.jp/img/amazon_noimg70.gif)





