• 戻る

Cordova - Pluginの利用と開発

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

• プラグインに関する情報

• JavaScriptインターフェイス

• 各プラットフォーム向けのネイティブコード

  • Android:Java
  • iOS:Objective-C

• 依存関係

結果は、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)の該当節を参照）に出力される。

platforms/android

platforms/iOS

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

• Objective-C

• HTML5側に公開するインターフェイスを実装。

• cordova.execメソッドを呼び出すと、
  Cordovaフレームワーク（Cordova (PhoneGap)の該当節を参照）に実装されるブリッジ機構によりプラグインを呼び出される。

  cordova.exec(<successFunction>, <failFunction>, <service>, <action>, [<args>]);

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

・・・

• 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

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

既定では、

• ホワイトリストで指定したURL以外は表示できない。

• httpが無いとWebView内部で開き、httpが有ると外部ブラウザで開く。

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

• 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/

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

• 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が利用できそう。

• 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, 位置情報