「[[.NET 開発基盤部会 Wiki>http://dotnetdevelopmentinfrastructure.osscons.jp]]」は、「[[Open棟梁Project>https://github.com/OpenTouryoProject/]]」,「[[OSSコンソーシアム .NET開発基盤部会>https://www.osscons.jp/dotNetDevelopmentInfrastructure/]]」によって運営されています。 -[[戻る>Cordova (PhoneGap)]] *目次 [#pe2d8b05] #contents *概要 [#wa0a5615] Cordova - Pluginの利用と開発 *利用 [#waf93704] [[Cordovaフレームワーク>Cordova (PhoneGap)#kba33b89]]に組み込まれていたネイティブ機能も含め、~ Cordova3.0からは、ネイティブ機能を提供するものはすべてプラグインとして管理されるようになっている。 **プラグインのパッケージ [#q4b1a913] -プラグインに関する情報 -JavaScriptインターフェイス -各プラットフォーム向けのネイティブコード --Android:Java --iOS:Objective-C -依存関係 **公式で提供されているプラグイン [#va7d6d63] |#|プラグイン名|概要|リポジトリのURL|h |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コマンドで管理 [#la8ad622] 結果は、[[config.xml>Cordova - config.xml]]に反映される。 ***一覧 [#p2068949] cordova plugin ls ***追加 [#s5679bc5] cordova plugin add リポジトリのURL ***削除 [#t196ed99] cordova plugin rm org.apache.cordova.core.camera(プラグインの識別子) ***反映 [#w395aa51] [[config.xml>Cordova - config.xml]]から[[Prepareコマンド>Cordova (PhoneGap)#w30149d6]]で~ 必要なファイルを(指定)プラットフォームにコピーする。 cordova prepare -d この動作はカナリ複雑で、 -Androidプロジェクト、Xcodeプロジェクトの設定や、 -プラグインのネイティブコード、JavaScriptが、 [[platformsフォルダ>Cordova (PhoneGap)#vb7e0cec]]に出力される。 *開発 [#m8e2db2c] **プロジェクトを作成する。 [#c1d0a97b] ***Androidの場合、 [#nc54b96c] platforms/android ***iOSの場合、 [#c54d4dbc] platforms/iOS **ネィティブ側を実装 [#o8d2286c] ***Androidの場合、 [#h02af3d8] -Java -CordovaPluginクラスを継承し、executeメソッドに実装 ***iOSの場合、 [#z45d9995] -Objective-C **JavaScript側を実装 [#mb17a4c1] -HTML5側に公開するインターフェイスを実装。 -cordova.execメソッドを呼び出すと、~ [[Cordovaフレームワーク>Cordova (PhoneGap)#kba33b89]]に実装されるブリッジ機構によりプラグインを呼び出される。 cordova.exec(<successFunction>, <failFunction>, <service>, <action>, [<args>]); |#|名前|概要|h |1|<successFunction>|呼び出し成功時に実行される関数| |2|<failFunction>|呼び出し失敗時に実行される関数| |3|<service>|[[config.xml>Cordova - config.xml#vd203b46]]に追加したプラグイン名| |4|<action>|呼び出すプラグインのアクション名| |5|<args>|ネイティブ側に引数として渡す配列。JSON化できるもののみを渡す| ***Androidの場合、 [#n0939b22] CordovaPlugin.executeメソッド(のOverrideメソッド)が呼び出される。 ***iOSの場合、 [#x4acba67] ・・・ **ネイティブ・アクセス部分 [#v8d9afc1] -[[Cordovaフレームワーク>Cordova (PhoneGap)#kba33b89]]に実装されるブリッジ機構を使用する。 -詳細は「[[WebView - ハイブリッド開発>WebView#jc6f5cde]]」を参照。 *プラグインの種類 [#y3e84183] **標準的プラグイン [#yb1ec323] ***既定で有効 [#a1f005be] -cordova-plugin-whitelist ***[[各種プラグインの追加>#j607d396]] [#id199b3d] -cordova-plugin-inappbrowser -cordova-plugin-customurlscheme -cordova-universal-links-plugin **その他のプラグイン [#fde779ca] ***既定で有効 [#zf90a020] ***[[各種プラグインの追加>#j607d396]] [#i6167800] -phonegap-plugin-push -cordova-plugin-geolocation -cordova-plugin-code-push *各種プラグインの追加 [#j607d396] **リンクを外部ブラウザで開く [#k90aabe3] ***Whitelist [#kfea0876] 既定では、 -ホワイトリストで指定したURL以外は表示できない。 -httpが無いとWebView内部で開き、httpが有ると外部ブラウザで開く。 ***InAppBrowser [#y4ec2ab7] 提供元不明コンテンツを読み込む場合に使用すると良い。 -InAppBrowserにホワイトリストは適用されない。 -新規にInAppBrowserウィンドウが開く。 -標準の Web ブラウザと同じ動作をするが、 -Cordova API へのアクセスはできない。 ***参考 [#if0819fc] -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に遷移 [#x3de6a6c] -[[Private-Use URI Scheme Redirection]]で外部ブラウザからNative(Hybrid)に戻れる。 -[[Claimed Https Scheme URI Redirection]]で外部ブラウザからNative(Hybrid)に戻れる。 -Native(Hybrid)側から、外部ブラウザで指定したURLを取得可能。 ***プラグイン [#o6869712] -cordova-plugin-customurlscheme --[[Private-Use URI Scheme Redirection]]のために~ 「cordova-plugin-customurlscheme」というpluginが利用できるが、 --「Private-Use URI Scheme上書き攻撃」があるので、[[OAuth PKCE>https://techinfoofmicrosofttech.osscons.jp/index.php?OAuth%20PKCE]]を使用する必要がある。 -cordova-universal-links-plugin --iOS9 および Android M 以上の、[[Claimed Https Scheme URI Redirection]]を使用する。 --これには、cordova-universal-links-pluginというpluginが利用できそう。 ***参考 [#m0bdd50b] -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)#u9b1dad8]] [#k1d61b81] ***プラグインのインストール [#saa6e1aa] メジャーなプラグインは以下。 -phonegap-plugin-push~ https://github.com/phonegap/phonegap-plugin-push --プッシュ通知では、おそらく最も利用されている、古くからあるプラグイン。 --v1:2015年と、v1ではGCM(Google Cloud Messeaging)を使用していたが、 --v2:2019年4月のGCM廃止に伴い、後継の[[FCM>Android (FCM)]](Firebase Cloud Messeaging)に対応 -cordova-plugin-firebase~ https://github.com/arnesson/cordova-plugin-firebase --利用実績は上記に及ばないものの、こちらもそこそこ人気のあるプラグイン。 --v1が2018年4月と、新しいプラグインで、[[FCM>Android (FCM)]]対応で開発されている。 --イベントトラッキング、クラッシュレポート等の分析情報をアプリに送信する機能を有する。 ***プッシュ通知受信処理の実装 [#y0b9bf34] -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 **地理位置情報 [#je588daa] 位置情報サービスと連携 -cordova-plugin-geolocation ***プラグイン [#e0c9c46a] cordova-plugin-geolocation ***参考 [#l8e3a457] -[[位置情報]] -位置情報の取得 プラグイン | Monaca Docs~ http://docs.monaca.io/ja/reference/cordova_6.2/geolocation/ **審査不要のコード差し替え [#n48b8e9e] 以下が必要。 -cordova-plugin-code-push ***プラグイン [#t75d0776] cordova-plugin-code-push ***参考 [#c8718503] -[[CodePush - マイクロソフト系技術情報 Wiki>https://techinfoofmicrosofttech.osscons.jp/index.php?CodePush]] *参考 [#mc22ab65] -Plugin Search - Apache Cordova~ https://cordova.apache.org/plugins/ -基本 Cordova プラグイン ( Cordova のコア プラグイン ) | Monaca Docs~ http://docs.monaca.io/ja/reference/cordova_6.2/