Cordova - Plugin のバックアップ(No.3)

[ トップ ]   [ 新規 | 一覧 | 単語検索 | 最終更新 | ヘルプ ]

• バックアップ一覧
• 差分 を表示
• 現在との差分 を表示
• ソース を表示
• Cordova - Plugin へ行く。
  • 1 (2018-03-27 (火) 09:28:54)
  • 2 (2018-03-27 (火) 10:54:53)
  • 3 (2018-03-27 (火) 14:59:06)
  • 4 (2018-12-21 (金) 15:22:42)
  • 5 (2020-02-25 (火) 16:27:42)

---

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

• 戻る

目次 †

概要 †

Cordova - Pluginの利用と開発

利用 †

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

プラグインのパッケージ †

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

• 依存関係

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

cordova pluginコマンドで管理 †

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

一覧 †

cordova plugin ls

追加 †

cordova plugin add リポジトリのURL

削除 †

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

反映 †

config.xmlからPrepareコマンドで
必要なファイルを（指定）プラットフォームにコピーする。

cordova prepare -d

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

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

platformsフォルダに出力される。

開発 †

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

Androidの場合、 †

platforms/android

iOSの場合、 †

platforms/iOS

ネィティブ側を実装 †

Androidの場合、 †

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

iOSの場合、 †

• Objective-C

JavaScript側を実装 †

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

• cordova.execメソッドを呼び出すと、
  Cordovaフレームワークに実装されるブリッジ機構によりプラグインを呼び出される。

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

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

Androidの場合、 †

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

iOSの場合、 †

・・・

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

• Cordovaフレームワークに実装されるブリッジ機構を使用する。
• 詳細は「WebView - ハイブリッド開発」を参照。

プラグインの種類 †

標準的プラグイン †

既定で有効 †

• cordova-plugin-whitelist

各種プラグインの追加 †

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

その他のプラグイン †

既定で有効 †

各種プラグインの追加 †

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

各種プラグインの追加 †

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

既定では、

• ホワイトリストで指定した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を取得可能。

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

プッシュ通知 †

プッシュ通知サービスと連携

• phonegap-plugin-push

参考 †

• プッシュ通知

地理位置情報 †

GPSサービスと連携

• cordova-plugin-geolocation

参考 †

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

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

以下が必要。

• cordova-plugin-code-push
• Microsoft AppCenter?

参考 †

• ハイブリッドアプリをリアルタイム更新できる「CodePush?」の使い方 - WPJ
  https://www.webprofessional.jp/push-code-updates-to-apps-instantly-with-codepush/

参考 †

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

     

Site admin: TechInfoOfMicrosoftTech

PukiWiki 1.4.7 Copyright © 2001-2006 PukiWiki Developers Team. License is GPL.
Based on "PukiWiki" 1.3 by yu-ji. Powered by PHP 5.3.3. HTML convert time: 0.040 sec.