FirebaseのDynamic Linksを導入した話

はじめに

OWNR by RENOSY Android開発のSugeunです。🤓

今回OWNR by RENOSYでDynamic Linksを導入した流れについて話したいと思います。

DeepLinkの概念について全く分からなかったので実際導入してみるとすごく効率高いなと思いましたのでBlog書きました。

今回もよろしくお願いします。🙇‍♂️

www.renosy.com

DeepLink :

Deep Linkとは

まずは一例を紹介します。あるスーパーで割引イベントが開催され、色々な商品の割引券をアプリ上でQRコードとして配布しています。

ですがQRコード配布リンクをクリックしてアプリが開いた時,商品のQRコード画面ではではなく、アプリの最初の画面に飛ぶとユーザーはもう一回アプリ上でイベントページを探し、必要な商品の割引券をクリック、QRコード画面まで行く必要があります。

ごの流れでユーザーは自分に必要な情報が見つかれなかったり、過程が面倒だったりするとアプリから脱線することになります。

このような問題を解決するのためFirebaseから提供してくれるDynamic Linksサービスを採択します。

上記の流れだとFirebaseのDynamic Linkで作られたリンクをクリックするだけでアプリが開いてクリックした商品のQRコードが表示されます。

ユーザーはクリック一回で必要な情報を手に入れることができます。

DeepLinkを導入する前に

今回DeepLinkをなる易しく使うためにFirebaseのDynamic Linksを使います。 使う前にFirebase SDKをアプリに導入する必要があるので下端の公式ドキュメントのご参考お願いします。

firebase.google.com

またFirebase Consoleにもプロジェクトを追加して連動する必要あります。

https://console.firebase.google.com/

Dynamic Linksを作ろう

Firebase Develop Pageで右タブのDynamic Linksをクリックしてください。

f:id:s_song:20200918182458p:plain
Firebase Dynamic Linksサービス

DeepLinkで使いたいドメインを作成して保存してくさい。

f:id:s_song:20200918183749p:plain
Domain作成

新しいダイナミックリンクボタンを押してリンクに渡したいパラメタとか動作を指定してください。 下端の画像だとパラメタネームtextで"helloworld"文字を渡すようにしています。

f:id:s_song:20200918183903p:plain
Dynamic Links詳細画面

次にDynamic Linksがクリックされた時の動作を指定してください。

f:id:s_song:20200918184613p:plain
動作指定

お疲れ様です。これでDynamic Linksが作られました。😄

f:id:s_song:20200918185330p:plain
Dynamic Linkリスト
ドメインリストで作られたDyanamic LinksのURLをクリックすると指定した動作を行います。

Linkを受け取るために

使用者が端末でリンクをクリックした週間、アプリではどんな処理をすればいいのでしょうか。

AndroidManifest.xmlでアプリを最初開く時に最初に表示するActivityにintent filterを追加する必要があります。

// AndroidManifest.xmlにintent filterを追加する。
// https://firebase.google.com/docs/dynamic-links/android/receive#add-an-intent-filter-for-deep-links

<intent-filter>
    <action android:name="android.intent.action.VIEW"/>
    <category android:name="android.intent.category.DEFAULT"/>
    <category android:name="android.intent.category.BROWSABLE"/>
    // FireBase Dynamic Linkのintent filterを追加してください。
    <data
        android:host="example.com"
        android:scheme="https"/>
</intent-filter>
// 受け取る場所はActivityやFragmentをお勧めします。
// Dynamic Linksで作ったURLは "https://example.com/contact?contact_id=1234"と仮定します。
Firebase.dynamicLinks
                .getDynamicLink(intent)
                .addOnSuccessListener(this) { dynamicLinksData ->
                    // Dynamic Links Dataを取得成功した場合の処理。
                    presenter.receiveDynamicLinks(this, dynamicLinksData)
                }.addOnFailureListener(this) { e ->
                    // Dynamic Links Dataを取得失敗した場合の処理。
                }
// NavigateやPresenterでdynamicLinkDataのデーターを分析します。
fun receiveDynamicLinks(context: Context, data: DeepLinksInfo?) {
            val deepLink = data?.link ?: return
            // LinksにあるPathがどんなPathなのかをジャッジします。
            when(deepLink.lastPathSegment){
                "contact" -> {
                    // Linkにあるcontact_idパラメタのValueを取得してFragmentにgetContactIdを渡す。
                    val getContactId = data?.link.getQueryParameter("contact_id") ?: 0
                    fragmentView.navigateToContactActivity(getContactId)
                }
                "notification" -> {
                    // Pathがnotificationの場合の処理を書く。
                }
            }
}

エミュレーターで楽にDeepLinkテストする方法

実際端末だとメモ帳のアプリとかで保存したリンクを押すだけでDeepLinkのテストが可能になりますが、エミュレーターの場合では備えたリンクを自分のメールに送信してエミュレータで受け取ったり、メモ帳アプリダウンロードして連動した後、メモ帳に備えたDeepLinkでテストしたりするんですがこの一連の作業がすごく面倒です。

ADB(Android Debug Bridge)を使うとTerminalでDynamicLinksを貼ることで簡単にテストができます。ご参照:https://stackoverflow.com/questions/31374085/installing-adb-on-macos

(Mac OS基準)

1.Terminalを開きます。

2.Homebrewがない場合には設置コマンドを入力してHomeBrewを設置してください。

 /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"

3.TerminalでAdbを設置します。

brew cask install android-platform-tools

4.TerminalでAdbを起動してください。

 adb devices

5.Android Studioでedit Configurationを開きます。

f:id:s_song:20200918181243p:plain
edit configurations

6.Launch optionsでLaunchをURLに変更します。URL:にはDynamicLinksを入れておきます。

f:id:s_song:20200918181047p:plain
Run/Debug Configurations

7.Terminalを開いて下記のコマンドとDynamicLinksを貼ってEnterを押してください。

// 例)FirebaseのDynamicLinksで作ってhttps://mydeeplink.page.link/ez2Gを使う場合。
adb shell am start -a android.intent.action.VIEW -c android.intent.category.BROWSABLE -d 'https://mydeeplink.page.link/ez2G'

8.アプリで指定したDynamicLinksが起動されることが確認できます。他のDeepLinkのテストを試す場合には7番のリンク先だけ修正してください。

最後に

実際使うとすごく便利なサービスだと思いました。FirebaseでDynamic Linksを設定する時、同じドメインリンクでiOSの動作も設定できるし、リンクをクリックしてからアプリがなかった場合にプレイストア を表示しれくれる動作も設定できます。

そこに自動でクリック数,リダイレクト,再起動数など表示してくれるのでGoogle Analyticsを設定する必要はございません。

Webからアプリへの遷移を検討されている方なら、ぜひDynamic Linkの導入をご検討ください。😄