【Cordovaアプリ開発】プラグイン Custom-URL-scheme利用方法まとめ

Cordova アプリを作成していまして、つい最近プラグイン「Custom-URL-scheme」を利用したので備忘としてまとめておきます。

まず URL スキームとはなんなのでしょうか。

簡単に言うと、Web サイトで「アドレス://パラメータ」を指定することで、「アドレス」で指定されたアプリを起動して「パラメータ」で指定された動きをするものです。
「アドレス://パラメータ」の形で 1 番身近なものは Web サイトの「https://*****」です。

アプリを起動する URL スキームで例をあげると

  • GoogleMap「comgooglemaps://」
  • Twitter「twitter://timeline」
  • FaceBook「fb://」
    など

カスタム URL スキームとは、これから作成するアプリに上記 URL スキームを割り当てることで Web からの呼び出しやパラメータを付与して処理をすることができます。

ただカスタム URL を実装することになると、iOS と Android で個別に保持している設定ファイルなどを修正することになります。
つまりそれぞれ OS 依存の実装になる。

ただ以下プラグインをインストールして、ある関数の中に呼び出し後の処理を実装すれば、カスタム URL スキームとしてのアプリ起動や、パラメータを付与した上での処理を実装することができます。

プラグイン  Custom-URL-scheme

Custom-URL-scheme プラグインを利用することで iOS、Android 個別に実装せず、プラグインをインストールすることで呼び出し元 Web サイトから APL を起動することができます。

また、イベント処理は「handleOpenURL」に実装することで、パラメータを取得して独自実装することができます。

インストール方法

下記「schemename」に自身が決めたスキーム名を入力する。

cordova plugin add cordova-plugin-customurlscheme –variable URL_SCHEME=schemename

アプリ実装

Web 上の「アプリ起動ボタン」を押せば、該当アプリが起動されアラート画面が表示され、メッセージで「test」が表示される。

呼び出し元 HTML

内容はスキーム名「schemename」でパラメータに「test」を渡している。

<html>
  <head>
    <meta charset="utf-8" />
    <title>APPS</title>
  </head>

  <body bgcolor="black" style="background-color:white;">
    <a href="schemename://test" target="_blank">アプリ起動</a>
  </body>
</html>

handleOpenURL 関数

以下 1000 の定義は 1 秒待機という意味。

function handleOpenURL(url: String) {
  setTimeout(function () {
    var strValue = url;
    strValue = strValue.replace("schemename://", "");
    if (strValue !== "") {
      alert(strValue);
    } else {
      alert("パラメータなし");
    }
  }, 1000);
}

実行結果

cordova-apps-plugin-customurlscheme

以上

comments powered by Disqus