このページの本文へ

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

iPhoneがPhoneGapで簡易電子書籍リーダーに

2011年09月21日 11時00分更新

古籏一浩

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

 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プラグインと同じパッケージに含まれているので、前回ダウンロードしている場合はすぐに利用できます。再度ダウンロードしたい場合は以下のページへアクセスし、前回の記事を参考に準備してください。

【図】1.png
一括してダウンロードされる
【図】2.png
ChildBrowserは以下のフォルダに入っている

PhoneGapプロジェクトの作成

 最初にPDFではなく、外部のWebページを表示してみましょう。以下の手順に沿って、XcodeでPhoneGapプロジェクトを作成します。

【図】3.png
ファイルメニューから「新規プロジェクト...」を選択
【図】4.png
PhoneGap-based Applicationを選択し、「選択...」ボタンをクリック
【図】5.png
作成するプロジェクト名を入力し保存

 新規プロジェクトが作成されたら、ChildBrowserプラグインのファイルをpluginsフォルダにドラッグ&ドロップします。

【図】6.psd
必要なファイル(画像も)をpluginsフォルダに入れる
【図】7.png
コピーするにチェックを入れて、「追加」ボタンをクリック

 ChildBrowserをJavaScriptから利用するためのファイルをwwwフォルダに入れます。

【図】8.psd
ChildBrowser.jsファイルをwwwフォルダに入れる

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

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

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

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

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

ランキング