L08084のブログ

技術記事の執筆は祈り

【Ionic】WebサイトからiOSアプリを開くリンク(「アプリで開く」ボタン)を実装する

f:id:l08084:20190907170235p:plain

仕事で「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

実装した要件

  1. Webサイトのボタンをクリックした時に端末にアプリがインストールされていれば、アプリを開く
  2. 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をクリックした時にアプリのどの画面に遷移するかを設定することができます。

Custom 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ファイルの設定も実施する必要はありません。

参考サイト

Deeplinking in Ionic Apps | The Ionic Blog

Ionic+Cordovaでuniversal linkの実装(ios版) - Qiita