5
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

【Web2App】ウェブページからアプリで開くをFirebase Dynamic Linksを使って簡単に実装する方法

Last updated at Posted at 2020-05-14

概要

WEBからAPPに誘導する所謂Web2AppをFirebase Dynamic Linksを利用して
インストールしている・していないに関わらず一つのリンクで挙動を変えて
インストールされていない場合はストアに、されている場合は特定のページに遷移させる流れをざっくり書いておきます。

詳しいことは公式ドキュメントに書いてあるのでこちらを見てください。
Firebase Dynamic Links

page.linkの作り方

  1. FirebaseコンソールのレフトメニューからDynamicLinkに遷移
  2. 使いたいドメインを入力(小文字と数字のみを含む 3~100 文字で****.page.linnkの形で入力)

※適当にやっちゃうと、消したあとそのドメインは1ヶ月間使えないので慎重に

独自ドメインを使った方法もあるので使いたい方は公式ドキュメントを見てください
Dynamic Links のカスタム ドメインを設定する - Firebaseの公式ドキュメント

リンクの作成

4つの方法がありますが、今回の要件ではWEB2APPでアプリを開くだけでいいので
URLを短くする必要もないため手動で作成します。

ダイナミックリンクの作成 - Firebaseの公式ドキュメント
ダイナミックリンクURLを手動で構築する - Firebaseの公式ドキュメント

iOS

キー 説明
link 開きたいWEBのURL
isi アプリストアのID                  
ius     アプリのスキーム(バンドルIDと同じ場合は省略可能、hoge://move?のようなものではなくhogeのみ)
ibi    アプリのバンドルID(Firebase コンソールの [概要] ページで、アプリとプロジェクトが接続されている必要がある)    

用途
アプリで開きたい画面に対応したURL https://example.com/contents/9999
開きたいアプリのバンドルID com.example.app
開きたいアプリのストアのID 999999999
https://example.page.link/?link=https://example.com/contents/9999&ibi=com.example.app&isi=999999999

ストアではなくLPなどWEBページを開きたい場合に使うオプションや
ipadで挙動を分けるオプションや
プレビューページを挟まないオプションなど詳しくは公式ドキュメントを見てください

ダイナミックリンクURLを手動で構築する - Firebaseの公式ドキュメント

Android

キー 説明
link 開きたいWEBのURL
apn Androidアプリのパッケージ名

用途
アプリで開きたい画面に対応したURL https://example.com/contents/9999
開きたいアプリのパッケージ名 com.example.app
https://example.page.link/?link=https://example.com/contents/9999&apn=com.example.app

合体

実際に利用する際はiOSとAndroidどちらでも動くようにしたいので、混ぜます。

https://example.page.link/?link=https://example.com/contents/9999&ibi=com.example.app&isi=999999999&apn=com.example.app

キャンペーンコードなどの利用も出来るので詳しくは公式ドキュメントを見てください。
ダイナミックリンクURLを手動で構築する - Firebaseの公式ドキュメント

アプリ側の処理

iOS

  1. PodでFirebaseDynamicLinkをインストール
  2. Associated Domains に 上記で作ったドメインを追加。今回だと applinks:example.page.link
  3. application:continueUserActivity:restorationHandler: に処理を追加
  4. application:openURL:options: に処理を追加

詳しくは公式ドキュメントに書いてあるのでそちらを見てください。
iOSでダイナミックリンクを受信する - Firebaseの公式ドキュメント

Android

  1. GradleでFirebaseDynamicLinkをインストール
  2. AndroidManifestの開きたいActivityにintent-filterを追加
  3. 開きたいActivityに処理を追加

詳しくは公式ドキュメントに書いてあるのでそちらを見てください。
Androidでダイナミックリンクを受信する - Firebaseの公式ドキュメント

検証方法

  1. 該当アプリをアンインストールしておく
  2. 作成したリンクをタップ
  3. ストアに遷移(ここではインストールしない)
  4. 実機にインストールしたりFirebaseAppDistributionなどでインストール
  5. 該当ページに遷移
  6. アプリのプロセスを落とすなどして最初の画面に戻す
  7. 作成したリンクをタップ
  8. 該当ページに遷移

以上です。

5
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?