仕事で「iPhone/iPad端末にアプリがインストールされてたら起動するリンク」（URL Scheme）を実装したのでメモ
バージョン情報
iOSアプリの作成にはクロスプラットフォームフレームワークのIonicを使用しました
- angular@5.0.1
- ionic-angular@3.9.5
- ionic-plugin-deeplinks@1.0.20
- ionic-native/deeplinks@4.20.0
実装した要件
- Webサイトのボタンをクリックした時に端末にアプリがインストールされていれば、アプリを開く
- Webサイトのボタンをクリックした時に端末にアプリがなければ、AppStoreに遷移する
上記の要件をURL Schemeを使用することで実装していきます。
なお、要件2については、Webサーバ上にapple-app-site-associationファイルを置けない制約があったため、実装できていません。
実装
URL Schemeを実装するためには、主にライブラリのインストールとAppComponentクラスの改修が必要になります。
ライブラリのインストール
Deeplinks - Ionic Documentation
IonicのプラグインDeeplinksを使用して、URL Scheme機能を実装していきます。
URL Schemeで開きたいアプリのプロジェクト配下に移動して、下記のコマンドを実行してインストールを行います。
なお、今回の例ではURL Schemeを以下の条件で設定します
- URL_SCHEME:
sample - DEEPLINK_SCHEME:
https - DEEPLINK_HOST:
sample.com
コマンドのオプション引数はURL Schemeの設定で変わるので注意。
$ ionic cordova plugin add ionic-plugin-deeplinks --variable URL_SCHEME='sample' --variable DEEPLINK_SCHEME=https --variable DEEPLINK_HOST='sample.com'
上記のコマンドを実行すると、プラグインがインストールされ、package.jsonに以下の設定が入ります。
"ionic-plugin-deeplinks": { "URL_SCHEME": "sample", "DEEPLINK_SCHEME": "https", "DEEPLINK_HOST": "sample" }
続いて、ionic-nativeプラグインをインストールします。
npm install @ionic-native/deeplinks
これでライブラリのインストールは完了です。
AppComponentの改修
アプリのAppComponentを改修することによって、URL Schemeをクリックした時にアプリのどの画面に遷移するかを設定することができます。
Webサイト側の設定
今まではアプリの設定だけをしていましたが、これからは、URL Schemeを表示するWebサイトの設定に入ります。
といってもWebサイト側では、URL Schemeに遷移する処理を書くだけでOKです。他の設定は必要がありません。
本記事の設定だと、URL Schemeは下記のようになります。
sample://
上記のURL Schemeにアクセスするだけで、iOS端末にアプリがインストールされている場合はアプリを開き、アプリがインストールされていなければ、ダイアログでアプリを開けない旨を知らせてくれます。
これでURL Schemeの実装は完了です。
今回は、業務上の制約により『アプリがインストールされていなければ、AppStoreを開く」といった処理を実施しないため、Associated Domainsの設定もapple-app-site-associationファイルの設定も実施する必要はありません。
