PhoneGapプラグインのインストール方法 | PhoneGapで最速アプリ開発(iOS/Android両対応)

「第一章 PhoneGap基礎」では、PhoneGapアプリのプロジェクト作成とプロジェクトディレクトリの構成について説明しました。今回はアプリならではの挙動を実現するために、PhoneGap プラグインのインストールについて説明します。

今回作るアプリ要件を簡単に説明しましょう。

アプリ要件

対応OS

• iOS8以降
• Android4.4以降

画面構成＆画面遷移

機能要件

• ①アプリっぽい挙動にしたい
  • ※今回は「Material Design Lite」を使って実現します
  • ※適宜お好みのフレームワークに置き換えてください
• ②ネットワーク未接続状態の時はエラーダイアログを表示したい
• ③mBaaSからアプリにPush通知を送信したい
• ④初回起動時、好きなタイミングでプッシュ通知許諾ダイアログを表示したい
• ⑤プッシュ通知許諾ダイアログで許可・拒否どちらを選んだか取得したい
• ⑥ホーム画面を表示した際、緯度経度情報を取得したい
• ⑦アプリ上に表示されているURLをタップした際、標準ブラウザを起動して該当ページを表示したい
• ⑧カスタムURLスキームを使ってブラウザからアプリを起動したい
• ⑨アプリバージョン番号を動的に取得して表示したい

以上がアプリの要件になります。

PhoneGap Pluginを使えば、ネイティブアプリのような振る舞いをPhoneGapで実現できます。

PhoneGap上にiOS/Androidアプリのビルド環境を構築する

はじめに以下のコマンドを実行してiOS/Androidアプリをビルドする環境を作ります。

これにより「platforms 」ディレクトリ配下に「ios」「android」ディレクトリが自動生成されます。前章で説明した通り、「ios」「android」ディレクトリ配下にPhoneGapのビルド結果が出力されます。

逆に生成したディレクトリを削除することも可能です。削除したい場合は以下のコマンドを実行しましょう。

 

PhoneGap Pluginのインストール

利用するプラグイン

次に必要なプラグインをインストールします。必要なプラグインは以下のとおりです。

• １．Device
  • プラグインID：cordova-plugin-device
  • 端末情報（端末名や端末IDなど）を取得するためのプラグイン
• ２．Device Motion
  • プラグインID：cordova-plugin-device-motion
  • 端末のモーション検知 プラグイン
• ３．Device Orientation
  • プラグインID：cordova-plugin-device-orientation
  • 端末のオリエンテーション検知（方位を取得する） プラグイン
• ４．Notification
  • プラグインID：cordova-plugin-dialogs
  • ダイアログ（アラートや確認などOSが提供するダイアログ）の制御 プラグイン
• ５．Geolocation
  • プラグインID：cordova-plugin-geolocation
  • 位置情報の取得 プラグイン
  • 機能要件⑥で必要
• ６．InAppBrowser
  • プラグインID：cordova-plugin-inappbrowser
  • アプリ内ブラウザやシステムブラウザ（標準ブラウザ）を利用するためのプラグイン
  • 機能要件⑦で必要
• ７．Network Information
  • プラグインID：cordova-plugin-network-information
  • ネットワーク情報（ネットワーク接続状態など）の取得 プラグイン
  • 機能要件②で必要
• ８．Splashscreen
  • プラグインID：cordova-plugin-splashscreen
  • スプラッシュスクリーンの制御 プラグイン
  • 画面構成＆画面遷移「スプラッシュ画面」を表示するために必要
• ９．StatusBar
  • プラグインID：cordova-plugin-statusbar
  • ステータスバーの制御 プラグイン
• １０．Vibration
  • プラグインID：cordova-plugin-vibration
  • バイブレーションの制御 プラグイン
• １１．Whitelist
  • プラグインID：cordova-plugin-whitelist
  • ホワイトリストへの登録 プラグイン ( Android 専用 )
  • WebView 上のページ遷移に対して、アクセスできる URL の指定など制御できます
• １２．AppVersion
  • プラグインID：cordova-plugin-app-version
  • アプリの名前やバージョン番号を取得することができるプラグイン
  • 機能要件⑨で必要
• １３．Custom URL scheme
  • プラグインID：cordova-plugin-customurlscheme
  • 他のアプリやWebブラウザからアプリを起動できるようにするプラグイン
  • 機能要件⑧で必要
• １４．PushPlugin
  • プラグインID：phonegap-plugin-push
  • プッシュ通知を制御するプラグイン
  • 機能要件④⑤で必要
  • プラグイン1.9.0以降のバージョンを利用する場合、CocoaPods1.1.1が必要になります

１〜１１のプラグインはデフォルトで利用できるためプラグインを追加する必要はありません。１２〜１４のプラグインについては以下の手順で追加する必要があります。

※「URL_SCHEME=yourappscheme」のyourappscheme部分には、適宜利用したいスキーム名を指定してください。

利用しないプラグイン

以下のプラグインはデフォルトで利用できるようになっていますが今回作成するアプリでは利用しません。アプリのサイズをなるべく小さくするために不要なプラグインは削除しておきます。

• Battery
  • プラグインID：cordova-plugin-battery-status
  • バッテリ制御プラグイン
• Camera
  • プラグインID：cordova-plugin-camera
  • カメラ制御プラグイン
• Console
  • プラグインID：cordova-plugin-console
  • コンソール制御プラグイン
  • コンソールにメッセージ出力するためのプラグインです。デバッグしたいときは削除しなくてもかまいません。
• Contacts
  • プラグインID：cordova-plugin-contacts
  • アドレス帳制御プラグイン
• File
  • プラグインID：cordova-plugin-file
  • ファイル操作プラグイン
• File Transfer
  • プラグインID：cordova-plugin-file-transfer
  • ファイル転送（ファイルのアップロード・ダウンロード）プラグイン
• Globalization
  • プラグインID：cordova-plugin-globalization
  • 表記の国際化対応 プラグイン
  • ユーザーのロケール ( locale )、言語、タイムゾーン ( timezone ) などの情報取得＆操作
• Media
  • プラグインID：cordova-plugin-media
  • メディア（オーディオ再生・録音など）操作プラグイン
• Capture
  • プラグインID：cordova-plugin-media-capture
  • メディアキャプチャ（端末側の録音・録画）操作プラグイン

不要なプラグインは以下の手順で削除します。

※[補足]cordova-plugin-mediaを削除するとcordova-plugin-fileも同時に削除されます

さらにconfig.xmlから該当pluginの記述を削除します。

config.xml

以上でプラグインの設定は完了です。簡単ですね！

次回は、アプリの実装方法やプラグインの使い方を具体的に説明する予定です。ご期待ください！

リンク

• 第一章 PhoneGap基礎
• 第二章 PhoneGapプラグインのインストール方法
• 第三章 アプリのコードの書き方（近日公開予定）
• 第四章 ビルド～ストア提出（近日公開予定）