DNET_CordovaPlugin

Cordova - Plugin

戻る

概要

Cordova - Pluginの利用と開発

利用

Cordovaフレームワーク（Cordova (PhoneGap)の該当節を参照）に組み込まれていたネイティブ機能も含め、
Cordova3.0からは、ネイティブ機能を提供するものはすべてプラグインとして管理されるようになっている。

プラグインのパッケージ

プラグインに関する情報
JavaScriptインターフェイス
各プラットフォーム向けのネイティブコード
- Android:Java
- iOS:Objective-C
依存関係

公式で提供されているプラグイン

#	プラグイン名	概要	リポジトリのURL
1	Accelerometer	加速度センサ	https://git-wip-us.apache.org/repos/asf/cordova-plugin-device-motion.git
2	Camera	カメラ	https://git-wip-us.apache.org/repos/asf/cordova-plugin-camera.git
3	Capture	カメラ・録音	https://git-wip-us.apache.org/repos/asf/cordova-plugin-media-capture.git
4	Compass	コンパス	https://git-wip-us.apache.org/repos/asf/cordova-plugin-device-orientation.git
5	Connection	ネットワーク接続	https://git-wip-us.apache.org/repos/asf/cordova-plugin-network-information.git
6	Contacts	コンタクト	https://git-wip-us.apache.org/repos/asf/cordova-plugin-contacts.git
7	Device	デバイス情報	https://git-wip-us.apache.org/repos/asf/cordova-plugin-device.git
8	Events	イベント	https://git-wip-us.apache.org/repos/asf/cordova-plugin-battery-status.git
9	File	ファイルストレージ	https://git-wip-us.apache.org/repos/asf/cordova-plugin-file.git
10	〃	ファイルトランスファー	https://git-wip-us.apache.org/repos/asf/cordova-plugin-file-transfer.git
11	Geolocation	位置情報	https://git-wip-us.apache.org/repos/asf/cordova-plugin-geolocation.git
12	Globalization	国際化	https://git-wip-us.apache.org/repos/asf/cordova-plugin-globalization.git
13	InAppBrowser	アプリ内ブラウザ	https://git-wip-us.apache.org/repos/asf/cordova-plugin-inappbrowser.git
14	Media	音声・動画	https://git-wip-us.apache.org/repos/asf/cordova-plugin-media.git
15	Notification	アラート・ダイアログ	https://git-wip-us.apache.org/repos/asf/cordova-plugin-dialogs.git
16	〃	バイブレーション	https://git-wip-us.apache.org/repos/asf/cordova-plugin-vibration.git
17	Splashscreen	スプラッシュスクリーン	https://git-wip-us.apache.org/repos/asf/cordova-plugin-splashscreen.git

cordova pluginコマンドで管理

結果は、config.xmlに反映される。

一覧

cordova plugin ls

追加

cordova plugin add リポジトリのURL

削除

cordova plugin rm org.apache.cordova.core.camera（プラグインの識別子）

反映

config.xmlからPrepareコマンド（Cordova (PhoneGap)の該当節を参照）で
必要なファイルを（指定）プラットフォームにコピーする。

cordova prepare -d

この動作はカナリ複雑で、

Androidプロジェクト、Xcodeプロジェクトの設定や、
プラグインのネイティブコード、JavaScriptが、

platformsフォルダ（Cordova (PhoneGap)の該当節を参照）に出力される。

開発

プロジェクトを作成する。

Androidの場合、（プロジェクト作成）

platforms/android

iOSの場合、（プロジェクト作成）

platforms/iOS

ネィティブ側を実装

Androidの場合、（ネイティブ側）

Java
CordovaPluginクラスを継承し、executeメソッドに実装

iOSの場合、（ネイティブ側）

Objective-C

JavaScript側を実装

HTML5側に公開するインターフェイスを実装。
cordova.execメソッドを呼び出すと、
Cordovaフレームワーク（Cordova (PhoneGap)の該当節を参照）に実装されるブリッジ機構によりプラグインを呼び出される。
```
cordova.exec(<successFunction>, <failFunction>, <service>, <action>, [<args>]);
```

#	名前	概要
1	<successFunction>	呼び出し成功時に実行される関数
2	<failFunction>	呼び出し失敗時に実行される関数
3	<service>	config.xmlに追加したプラグイン名
4	<action>	呼び出すプラグインのアクション名
5	<args>	ネイティブ側に引数として渡す配列。JSON化できるもののみを渡す

Androidの場合、（JavaScript側）

CordovaPlugin.executeメソッド（のOverrideメソッド）が呼び出される。

iOSの場合、（JavaScript側）

・・・

ネイティブ・アクセス部分

Cordovaフレームワーク（Cordova (PhoneGap)の該当節を参照）に実装されるブリッジ機構を使用する。
詳細は「WebView - ハイブリッド開発」（WebViewの該当節を参照）。

プラグインの種類

標準的プラグイン

既定で有効（標準的プラグイン）

cordova-plugin-whitelist

各種プラグインの追加（標準的プラグイン）

cordova-plugin-inappbrowser
cordova-plugin-customurlscheme
cordova-universal-links-plugin

（詳細は各種プラグインの追加を参照）

その他のプラグイン

既定で有効（その他のプラグイン）

未記載（元 Wiki も見出しのみ）。

各種プラグインの追加（その他のプラグイン）

phonegap-plugin-push
cordova-plugin-geolocation
cordova-plugin-code-push

（詳細は各種プラグインの追加を参照）

各種プラグインの追加

リンクを外部ブラウザで開く

Whitelist

既定では、

ホワイトリストで指定したURL以外は表示できない。
httpが無いとWebView内部で開き、httpが有ると外部ブラウザで開く。

InAppBrowser

提供元不明コンテンツを読み込む場合に使用すると良い。

InAppBrowserにホワイトリストは適用されない。
新規にInAppBrowserウィンドウが開く。
標準の Web ブラウザと同じ動作をするが、
Cordova API へのアクセスはできない。

参考（リンクを外部ブラウザで開く）

PhoneGap/Cordovaでの外部サイトリンク
内部表示/アプリ内ブラウザ/標準のブラウザ - Qiita
https://qiita.com/tsunet111/items/272f3e052c332ddf9b9d
ホワイトリストガイド - Apache Cordova
https://cordova.apache.org/docs/ja/latest/guide/appdev/whitelist/
InAppBrowser プラグイン | Monaca Docs
http://docs.monaca.io/ja/reference/cordova_6.2/inappbrowser/

外部ブラウザからNativeに遷移

Private-Use URI Scheme Redirectionで外部ブラウザからNative（Hybrid）に戻れる。
Claimed Https Scheme URI Redirectionで外部ブラウザからNative（Hybrid）に戻れる。
Native（Hybrid）側から、外部ブラウザで指定したURLを取得可能。

プラグイン（外部ブラウザからNativeに遷移）

cordova-plugin-customurlscheme
- Private-Use URI Scheme Redirection のために
  「cordova-plugin-customurlscheme」というpluginが利用できるが、
- 「Private-Use URI Scheme上書き攻撃」があるので、OAuth PKCEを使用する必要がある。
cordova-universal-links-plugin
- iOS9 および Android M 以上の、Claimed Https Scheme URI Redirection を使用する。
- これには、cordova-universal-links-pluginというpluginが利用できそう。

参考（外部ブラウザからNativeに遷移）

cordova-plugin-customurlscheme
https://github.com/EddyVerbruggen/Custom-URL-scheme
- Cordova tips - Custom URL scheme に対応させよう | phiary
  http://phiary.me/cordova-tips-custom-url-scheme/
  - pluginを追加する。
```
cordova plugin add cordova-plugin-customurlscheme --variable URL_SCHEME=hoge --save
```
  - urlを受け取る。
```
function handleOpenURL(url) {
  setTimeout(function() {
    alert("received url: " + url);
  }, 0);
}
```
- Sencha Touch、iOS、Cordova で URL スキームを使用 « 株式会社ゼノフィ
  https://www.xenophy.com/sencha-blog/12234
  - Using URL Schemes with Sencha Touch, iOS, and Cordova | Sencha.com
    https://www.sencha.com/blog/using-url-schemes-with-sencha-touch-ios-and-cordova/
- EddyVerbruggen/Custom-URL-scheme:
  - Launch your Cordova/PhoneGap app by a Custom URL scheme like mycoolapp://
    https://github.com/EddyVerbruggen/Custom-URL-scheme
```
<gap:plugin name="cordova-plugin-customurlscheme" source="npm">
  <param name="URL_SCHEME" value="XXXX" />
</gap:plugin>
```
  - Plugin won't install via Visual Studio · Issue #215
    https://github.com/EddyVerbruggen/Custom-URL-scheme/issues/215
```
<vs:plugin name="cordova-plugin-customurlscheme">
  <param name="URL_SCHEME" value="XXXX" />
</vs:plugin>
```
  - 上記のvalue部に大文字を指定すると上手く動かないので要注意。
cordova-universal-links-plugin
https://github.com/nordnet/cordova-universal-links-plugin

プッシュ通知

プッシュ通知（Cordova (PhoneGap)の該当節を参照）

プラグインのインストール

メジャーなプラグインは以下。

phonegap-plugin-push
https://github.com/phonegap/phonegap-plugin-push
- プッシュ通知では、おそらく最も利用されている、古くからあるプラグイン。
- v1：2015年と、v1ではGCM(Google Cloud Messeaging)を使用していたが、
- v2：2019年4月のGCM廃止に伴い、後継のFCM(Firebase Cloud Messeaging)に対応
cordova-plugin-firebase
https://github.com/arnesson/cordova-plugin-firebase
- 利用実績は上記に及ばないものの、こちらもそこそこ人気のあるプラグイン。
- v1が2018年4月と、新しいプラグインで、FCM対応で開発されている。
- イベントトラッキング、クラッシュレポート等の分析情報をアプリに送信する機能を有する。

プッシュ通知受信処理の実装

phonegap-plugin-push
PushNotification.init(初期化)＆push.on(受信)を実装。
https://docs.monaca.io/ja/tutorials/phonegap_push/#%E4%BD%BF%E3%81%84%E6%96%B9
cordova-plugin-firebase
onNotificationOpen(受信)を実装。
https://docs.monaca.io/ja/tutorials/firebase/#%E4%BD%BF%E3%81%84%E6%96%B9

地理位置情報

位置情報サービスと連携

プラグイン（地理位置情報）

cordova-plugin-geolocation

参考（地理位置情報）

位置情報
位置情報の取得プラグイン | Monaca Docs
http://docs.monaca.io/ja/reference/cordova_6.2/geolocation/

審査不要のコード差し替え

プラグイン（審査不要のコード差し替え）

cordova-plugin-code-push

参考（審査不要のコード差し替え）

CodePush - マイクロソフト系技術情報 Wiki

参考

Plugin Search - Apache Cordova
https://cordova.apache.org/plugins/
基本 Cordova プラグイン ( Cordova のコアプラグイン ) | Monaca Docs
http://docs.monaca.io/ja/reference/cordova_6.2/

補足

表中の git-wip-us.apache.org は現在は使われておらず、 Cordova の各プラグインは GitHub（https://github.com/apache/cordova-plugin-*）で管理されている。

cordova-plugin-whitelist は Cordova Android 10 以降、コア（cordova-android）に統合され、個別のプラグインとしては不要になっている。

「Messeaging」は原文ママ（正しくは Messaging）。

移行メモ

元 Wiki では見出しそのものが他ページ・同ページ内へのリンクになっていた箇所（「各種プラグインの追加」「プッシュ通知」）は、GitHub Wiki では見出しからアンカが生成されるため、見出しをプレーン・テキストとし、リンクは直下の本文に置いた。

同名の見出し（「Androidの場合、」「iOSの場合、」「既定で有効」「各種プラグインの追加」「プラグイン」「参考」）が多数あり GitHub Wiki でアンカが衝突するため、括弧で文脈を補って一意にした。

表の縦方向のセル結合（|~|）は「〃」に置き換えた。

<successFunction> などの山括弧は、そのままでは HTML タグとして解釈されるため、表内では実体参照（< / >）で記述した。

PukiWiki のページ内アンカ（#xxxxxxxx）は GitHub Wiki では再現できないため、同一ページ内のアンカは見出しから生成されるアンカに張り替え、他ページのアンカを指すリンクは「〜（ページ名 の該当節を参照）」の形に置き換えた。

マイクロソフト系技術情報 Wiki（techinfoofmicrosofttech.osscons.jp）への URL リンクは、移行済みの OAuth PKCE / CodePush に張り替えた。

元 Wiki の行頭空白によるプレフォーマット・ブロックは、フェンス付きコードブロックにした。

リンク先が未移行のページは、移行先のファイル名を `DNET_○○.md` の形で示し TODO.md に登録した。

Tags: 移行, Cordova, PhoneGap, プラグイン, InAppBrowser, Custom URL scheme, プッシュ通知, FCM, CodePush, 位置情報

このWikiは「Open棟梁Project」,「OSSコンソーシアム開発基盤部会」によって運営されています。

NetDevInfraWiki

マイクロソフト系技術情報 Wiki

Open 棟梁 Wiki

（未着手）

TOP

開発基盤部会 Wiki

TOP
サービス
- 企画
- 価値
- 技術
- 見積
- …ほか（サービス）
DX
BI / AI
Linux
- Linuxのディストリビューション
- Linuxを触ってみる。
- Docker
- CaaS (Open PaaS)
- …ほか（Linux）
Java
- Javaを書いてみる。
- Java有償化について調べてみた。
OSS
- ライセンス
- 開発方法論
- ビジネスモデル
- 導入事例
- …ほか（OSS）
開発環境
その他

移行管理: DONE ／ TODO

DNET_CordovaPlugin

Cordova - Plugin

概要

利用

プラグインのパッケージ

公式で提供されているプラグイン

cordova pluginコマンドで管理

一覧

追加

削除

反映

開発

プロジェクトを作成する。

Androidの場合、（プロジェクト作成）

iOSの場合、（プロジェクト作成）

ネィティブ側を実装

Androidの場合、（ネイティブ側）

iOSの場合、（ネイティブ側）

JavaScript側を実装

Androidの場合、（JavaScript側）

iOSの場合、（JavaScript側）

ネイティブ・アクセス部分

プラグインの種類

標準的プラグイン

既定で有効（標準的プラグイン）

各種プラグインの追加（標準的プラグイン）

その他のプラグイン

既定で有効（その他のプラグイン）

各種プラグインの追加（その他のプラグイン）

各種プラグインの追加

リンクを外部ブラウザで開く

Whitelist

InAppBrowser

参考（リンクを外部ブラウザで開く）

外部ブラウザからNativeに遷移

プラグイン（外部ブラウザからNativeに遷移）

参考（外部ブラウザからNativeに遷移）

プッシュ通知

プラグインのインストール

プッシュ通知受信処理の実装

地理位置情報

プラグイン（地理位置情報）

参考（地理位置情報）

審査不要のコード差し替え

プラグイン（審査不要のコード差し替え）

参考（審査不要のコード差し替え）

参考

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!