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/

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