With Firebase Dynamic Links, we want to provide an experience for our existing users as well as potential users!

13d936e697fe0f4fa96f926d0a712f6c?s=47 Sansan
September 20, 2020

With Firebase Dynamic Links, we want to provide an experience for our existing users as well as potential users!

■イベント
iOSDC Japan 2020
https://iosdc.jp/2020/

■登壇概要
タイトル:Firebase Dynamic Links で既存のユーザーだけでなく、潜在的ユーザーにも体験を提供したい!
登壇者:Sansan事業部 プロダクト開発部 中川泰夫

※アニメーション付きは以下にてご覧いただけます。
https://ynakagawa33.github.io/iOSDC_Japan_2020/Slide.html

▼Sansan Builders Blog
https://buildersbox.corp-sansan.com/

13d936e697fe0f4fa96f926d0a712f6c?s=128

Sansan

September 20, 2020
Tweet

Transcript

  1. Firebase Dynamic Links で既存の ユーザーだけでなく、潜在的ユーザー にも体験を提供したい! iOSDC Japan 2020 Sansan株式会社

    Sansan事業部 プロダクト開発部 中川 泰夫 1 1
  2. ⾃⼰紹介 iOS Engineer@Sansan bat43 / yosino58 After iOSDC Japan 2020

    2 2
  3. アジェンダ . Firebase Dynamic Links で実現できること . 類似技術との⽐較 . Firebase

    Dynamic Links の導⼊⽅法 . 事例紹介 . まとめ 3 3
  4. Firebase Dynamic Links で 実現できること 4 4

  5. Firebase Dynamic Links で実現できること Firebase Dynamic Links は、 アプリのインストールの有無に かかわらず、複数のプラット

    フォームで機能するリンクです。 5 5
  6. 類似技術との⽐較 6 6

  7. Custom URL Scheme Universal Links Availability iOS 2.0+ iOS 9.0+

    Vulnerability Hijacking Safety Limitation - 同⼀ドメイン上での URL 遷移 の場合、アプリを開け ない 7 7
  8. Firebase Dynamic Links Availability iOS 8.0+ Vulnerability Open-Redirect (ホワイトリスト機能で防御 可能)

    Limitation - ※ どの技術でも利⽤可能なアクションはユーザーのデータを 危険にさらすことのないものに制限しましょう 8 8
  9. 類似技術 (Universal Links / Custom URL Scheme) と⽐べた際のメリット . ⼀つのリンクで複数プラットフォームの動作を定義できる

    . アプリがインストールされていないときの動作を定義できる . ディープリンクに関する統計情報を確認できる 9 9
  10. 類似技術 (Universal Links / Custom URL Scheme) と⽐べた際のメリット . ⼀つのリンクで複数プラットフォームの動作を定義できる

    . アプリがインストールされていないときの動作を定義できる . ディープリンクに関する統計情報を確認できる 10 10
  11. ⼀つのリンクで 複数プラットフォームの 動作を定義できる 11 11

  12. 類似技術 (Universal Links / Custom URL Scheme) と⽐べた際のメリット . ⼀つのリンクで複数プラットフォームの動作を定義できる

    . アプリがインストールされていないときの動作を定義できる . ディープリンクに関する統計情報を確認できる 12 12
  13. アプリがインストール されていないときの 動作を定義できる アプリの App Store ページに ⾶ばす 代替の Web

    ページへ⾶ばす 13 13
  14. 類似技術 (Universal Links / Custom URL Scheme) と⽐べた際のメリット . ⼀つのリンクで複数プラットフォームの動作を定義できる

    . アプリがインストールされていないときの動作を定義できる . ディープリンクに関する統計情報を確認できる 14 14
  15. ディープリンクに関する 統計情報を確認できる イベント数 トリガーしたユーザー数 ユーザーあたりのイベント数 etc 15 15

  16. Firebase Dynamic Links の 導⼊⽅法 16 16

  17. Firebase Dynamic Links の 導⼊⽅法 . Firebase コンソールで設定する . アプリに

    Firebase を追加する . ダイナミックリンクを作成する . アプリでダイナミックリンクを開く 17 17
  18. Firebase Dynamic Links の 導⼊⽅法 . Firebase コンソールで設定する . アプリに

    Firebase を追加する . ダイナミックリンクを作成する . アプリでダイナミックリンクを開く 18 18
  19. Firebase コンソールで設 定する Firebase コンソールで Dynamic Links セクション を開きます。 19

    19
  20. Firebase コンソールで設 定する 始める をクリック 20 20

  21. Firebase コンソールで設 定する URL 接頭辞を追加します ※ 画像では Google 提供の ドメインを利⽤しています

    ブランディングのために⽤意 したドメインを使⽤すること も可能です 21 21
  22. Firebase コンソールで設 定する 問題なければ、画像のような 画⾯が表⽰されるので、 終了 をクリック 22 22

  23. Firebase コンソールで設 定する 推奨: ディープリンクや フォールバックリンクで 許可する URL パターンを 指定する

    メニューを開いて、 URL パ ターンをホワイトリストに登 録 をクリック 23 23
  24. Firebase コンソールで設 定する 不正なユーザーが管理している ドメインからフィッシングサイ トへリダイレクトするようなダ イナミックリンクを作成できな いようにしましょう 24 24

  25. Firebase コンソールで設 定する 最初のパターンは公開している Android アプリのパッケージ名 が iosdcjapan2020sample だった場合のパターン 25

    25
  26. Firebase コンソールで設 定する ⼆番⽬のパターンは公開してい る iOS アプリの ID が id123456

    だった場合の パターン 26 26
  27. Firebase コンソールで設 定する 最後のパターンはディープリン クやフォールバックリンクで 利⽤する URL が https://iosdcjapan2020s ample.com/

    だった場合の パターン 27 27
  28. Firebase コンソールで設 定する アプリの App Store ID と チーム ID

    がアプリの設定で指定 されていることを確認します Firebase の 設定 ページへ 移動します 28 28
  29. Firebase コンソールで設 定する App Store ID とチーム ID を 設定する

    29 29
  30. Firebase コンソールで設 定する App Store ID は App Store Connect

    の App情報の Apple ID 30 30
  31. Firebase コンソールで設 定する チーム ID は Apple Developer の Certificates,

    Identifiers & Profiles の Identifires のアプリのページに表⽰される App ID Prefix 31 31
  32. Firebase Dynamic Links の 導⼊⽅法 . Firebase コンソールで設定する . アプリに

    Firebase を追加する . ダイナミックリンクを作成する . アプリでダイナミックリンクを開く 32 32
  33. アプリに Firebase を追加する Podfile で次の Pod をインクルードします ※ 事前に CocoaPods

    の導⼊を済ませておいてください pod 'Firebase/Analytics' pod 'Firebase/DynamicLinks' pod install を実⾏し、 .xcworkspace ファイルを 開きます 33 33
  34. アプリに Firebase を追加する Firebase モジュールを UIApplicationDelegate に インポート import Firebase

    34 34
  35. アプリに Firebase を追加する FirebaseApp 共有インスタンスを構成 通常はアプリの application:didFinishLaunchingWithOptions: メソッド // Use

    Firebase library to configure APIs FirebaseApp.configure() 35 35
  36. Firebase Dynamic Links の 導⼊⽅法 . Firebase コンソールで設定する . アプリに

    Firebase を追加する . ダイナミックリンクを作成する . アプリでダイナミックリンクを開く 36 36
  37. ダイナミックリンクを 作成する Firebase コンソールで Dynamic Links セクション を開きます。 37 37

  38. ダイナミックリンクを 作成する 新しいダイナミックリンク を クリック 38 38

  39. ダイナミックリンクを 作成する 短縮 URL のリンク設定をする ※ 画像では⾃動⽣成された ⽂字列を使⽤します 分かりやすい URL

    に変える ことも出来ます 39 39
  40. ダイナミックリンクを 作成する ダイナミックリンクの設定を する ※ ディープリンク URL へ PC でアクセスした場合、

    ディープリンク URL へ移動 します 40 40
  41. ダイナミックリンクを 作成する iOS ⽤のリンク動作の定義を する このとき、もし、 iOS アプリ を⽤意できてなかった場合は ブラウザでディープリンクの

    URL を開くにしておくと、 Web へ誘導できます 41 41
  42. ダイナミックリンクを 作成する iOS ⽤のリンク動作の定義を する ディープリンクを iOS アプリ で開くを選択した場合、開く アプリを選択します

    42 42
  43. ダイナミックリンクを 作成する iOS ⽤のリンク動作の定義を する アプリがインストールされて いない場合のユーザーの移動 先を選択します 43 43

  44. ダイナミックリンクを 作成する iOS ⽤のリンク動作の定義を する iPad アプリがある場合は iPad アプリを開いたり デフォルトの

    カスタム URL スキームを オーバーライドしたり 44 44
  45. ダイナミックリンクを 作成する Android ⽤のリンク動作の定義 をする Android アプリがある場合、 iOS ⽤のリンクと同じように 設定を⾏うことが出来ます

    45 45
  46. ダイナミックリンクを 作成する その他オプションの設定を ⾏い、 作成 ボタンを クリックする ソーシャルメタタグを追加 したり、キャンペーン トラッキング⽤の情報を付与

    したり… 46 46
  47. ダイナミックリンクを 作成する 完成 47 47

  48. Firebase Dynamic Links の 導⼊⽅法 . Firebase コンソールで設定する . アプリに

    Firebase を追加する . ダイナミックリンクを作成する . アプリでダイナミックリンクを開く 48 48
  49. アプリでダイナミック リンクを開く アプリのターゲットの Info タブでダイナミックリンクに使 ⽤する新しい URL タイプを作成する 49 49

  50. アプリでダイナミック リンクを開く Identifier フィールドに⼀意 の値を設定し、 URL scheme フィールドにはバンドル ID を

    設定 バンドル ID は、ダイナミック リンクにより使⽤される デフォルトの URL スキームに なる 50 50
  51. アプリでダイナミック リンクを開く アプリの Xcode プロジェクト の Signing & Capabilities タブで

    Associated Domains を追加し、 Domains リストに ダイナミックリンクの ドメインを追加 applinks:your_dynamic_links_domain 51 51
  52. アプリでダイナミックリンクを開く application:continueUserActivity:restorationH andler: メソッドを使⽤して、アプリがインストールされ ている場合にユニバーサルリンクとして受信されるリンクを 処理します (iOS 9 以降) func

    application(_ application: UIApplication, continue userActivity: NSUserActivity, restorationHandler: @escaping ([UIUserActivityRestoring]?) -> Void) -> Bool { let handled = DynamicLinks.dynamicLinks() .handleUniversalLink(userActivity.webpageURL!) { dynamiclink, error in // 特定画⾯への遷移処理 etc... } return handled } 52 52
  53. アプリでダイナミックリンクを開く 最後に、 application:openURL:sourceApplicatio n:annotation: メソッド(iOS 8 以前)と applicatio n:openURL:options: メソッド(iOS

    9 以降)で、アプ リのカスタム URL スキームを通して受信したリンクを処理 します。 53 53
  54. アプリでダイナミックリンクを開く @available(iOS 9.0, *) func application(_ app: UIApplication, open url:

    URL, options: [UIApplication.OpenURLOptionsKey : Any]) -> Bool { return application( app, open: url, sourceApplication: options[UIApplication.OpenURLOptionsKey.sourceApplication] as? String, annotation: "" ) } func application(_ application: UIApplication, open url: URL, sourceApplication: String?, annotation: Any) -> Bool { if let dynamicLink = DynamicLinks.dynamicLinks().dynamicLink(fromCustomSchemeURL: url) { // Handle the deep link. For example, show the deep-linked content or // apply a promotional offer to the user's account. // ... return true } return false } 54 54
  55. 事例紹介 55 55

  56. 事例紹介 . QR コードから「新機能を含んだアプリがインストール済み だったら、アプリを起動して、未インストールだったら、ス トアのインストールページへ画⾯遷移」させる . Web サイトのリンクから「新機能を含んだアプリがインスト ール済みだったら、アプリを起動して、未インストールだっ

    たら、特定の Web サイトを開く」 56 56
  57. 事例紹介 . QR コードから「新機能を含んだアプリがインストール済み だったら、アプリを起動して、未インストールだったら、ス トアのインストールページへ画⾯遷移」させる . Web サイトのリンクから「新機能を含んだアプリがインスト ール済みだったら、アプリを起動して、未インストールだっ

    たら、特定の Web サイトを開く」 57 57
  58. フローチャート 58 58

  59. ダイナミックリンクの 設定 アプリ⾃体がインストールされ ていないケースは設定するだけ で 59 59

  60. アプリでのハンドリング 新機能が含んでいるかどうか は そのダイナミックリンクを ハンドリングできるかどうか に⾔い換えられます application:continueUserActivity:restorationH andler: メソッドに処理を追加します 60

    60
  61. アプリでの ハンドリング 実コードを使って 解説します 前提: Sansan では VIPER を採⽤しています 61

    61
  62. アプリでのハンドリング guard let webPageUrl = userActivity.webpageURL else { return true

    } DynamicLinks.dynamicLinks().handleUniversalLink(webPageUrl, completion: { [weak self] dynamicLink, error in guard error == nil else { return } self?.dynamicLinkPresenter?.dynamicLinkDidReceive(dynamicLink) }) DynamicLink を⽣成したあとは Presenter へ処理を 移してます 62 62
  63. アプリでのハンドリング func dynamicLinkDidReceive(_ dynamicLink: DynamicLink?) { // ( 中略) if

    interactor.isSatisfiedAppVersionFrom( dynamicLinkMinimumAppVersion: dynamicLink.minimumAppVersion) { // ( 中略: 次のスライドで説明します) } else { router.navigate(to: .appStore) } } アプリバージョンがダイナミックリンクが要求する 最低バージョンを満たせてない場合、ストアへ遷移させる 63 63
  64. アプリでのハンドリング if interactor.isSatisfiedAppVersionFrom( dynamicLinkMinimumAppVersion: dynamicLink.minimumAppVersion) { guard let destination =

    interactor.classify(from: dynamicLink.url) else { let error = DynamicLinkClassifyError(dynamicLink) CrashlyticsErrorRecorder().record(error: error) return } router.navigate(to: destination) } アプリバージョンがダイナミックリンクが要求する 最低バージョンを満たしている場合、 URL を判別して、 適切な遷移先へ遷移させる もし、判別に失敗したら、気付けるように Crashlytics へ Non Fatal Issue で送出する 64 64
  65. アプリでの体験 アプリがインストール済みの 場合 65 65

  66. アプリでの体験 アプリが未インストール、 または、必要なバージョンを 満たしていない場合 66 66

  67. 事例紹介 . QR コードから「新機能を含んだアプリがインストール済み だったら、アプリを起動して、未インストールだったら、ス トアのインストールページへ画⾯遷移」させる . Web サイトのリンクから「新機能を含んだアプリがインスト ール済みだったら、アプリを起動して、未インストールだっ

    たら、特定の Web サイトを開く」 67 67
  68. フローチャート 68 68

  69. ダイナミックリンクの設定 動的パラメータを含んでいるため、 Web 側で動的に ダイナミックリンクを⽣成してもらっています Firebase コンソールで設定したドメインに 以下のようなフォーマットで渡すと ダイナミックリンクとして機能します https://your_subdomain.page.link/?

    link=your_deep_link&ibi=bundle_id[&imv=minimum_ version][&ifl=fallback_link][&efr=1] 69 69
  70. 利⽤したパラメータ 名前 説明 ibi リンクを開くために使う iOS アプリのバンドル ID ifl アプリがインストールされていない場合に開くリンク

    imv リンクを開くことが出来るアプリの最⼩バージョン efr 「1」の場合、プレビューページをスキップ 70 70
  71. アプリでのハンドリング 事例1で説明したものと同等で 71 71

  72. アプリでの体験 アプリがインストール済みの 場合 72 72

  73. アプリでの体験 アプリが未インストール、 または、必要なバージョンを 満たしていない場合 73 73

  74. まとめ 74 74

  75. まとめ 最⼩限の変更で多くのことが実現できた 複数プラットフォームでの同⼀の体験の提供 アプリがインストールされていないときの体験の提供 ディープリンクに関する分析 75 75