Slide 1

Slide 1 text

Firebase Dynamic Links で既存の ユーザーだけでなく、潜在的ユーザー にも体験を提供したい! iOSDC Japan 2020 Sansan株式会社 Sansan事業部 プロダクト開発部 中川 泰夫 1 1

Slide 2

Slide 2 text

⾃⼰紹介 iOS Engineer@Sansan bat43 / yosino58 After iOSDC Japan 2020 2 2

Slide 3

Slide 3 text

アジェンダ . Firebase Dynamic Links で実現できること . 類似技術との⽐較 . Firebase Dynamic Links の導⼊⽅法 . 事例紹介 . まとめ 3 3

Slide 4

Slide 4 text

Firebase Dynamic Links で 実現できること 4 4

Slide 5

Slide 5 text

Firebase Dynamic Links で実現できること Firebase Dynamic Links は、 アプリのインストールの有無に かかわらず、複数のプラット フォームで機能するリンクです。 5 5

Slide 6

Slide 6 text

類似技術との⽐較 6 6

Slide 7

Slide 7 text

Custom URL Scheme Universal Links Availability iOS 2.0+ iOS 9.0+ Vulnerability Hijacking Safety Limitation - 同⼀ドメイン上での URL 遷移 の場合、アプリを開け ない 7 7

Slide 8

Slide 8 text

Firebase Dynamic Links Availability iOS 8.0+ Vulnerability Open-Redirect (ホワイトリスト機能で防御 可能) Limitation - ※ どの技術でも利⽤可能なアクションはユーザーのデータを 危険にさらすことのないものに制限しましょう 8 8

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

⼀つのリンクで 複数プラットフォームの 動作を定義できる 11 11

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

アプリがインストール されていないときの 動作を定義できる アプリの App Store ページに ⾶ばす 代替の Web ページへ⾶ばす 13 13

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

ディープリンクに関する 統計情報を確認できる イベント数 トリガーしたユーザー数 ユーザーあたりのイベント数 etc 15 15

Slide 16

Slide 16 text

Firebase Dynamic Links の 導⼊⽅法 16 16

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

Firebase コンソールで設 定する Firebase コンソールで Dynamic Links セクション を開きます。 19 19

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

Firebase コンソールで設 定する URL 接頭辞を追加します ※ 画像では Google 提供の ドメインを利⽤しています ブランディングのために⽤意 したドメインを使⽤すること も可能です 21 21

Slide 22

Slide 22 text

Firebase コンソールで設 定する 問題なければ、画像のような 画⾯が表⽰されるので、 終了 をクリック 22 22

Slide 23

Slide 23 text

Firebase コンソールで設 定する 推奨: ディープリンクや フォールバックリンクで 許可する URL パターンを 指定する メニューを開いて、 URL パ ターンをホワイトリストに登 録 をクリック 23 23

Slide 24

Slide 24 text

Firebase コンソールで設 定する 不正なユーザーが管理している ドメインからフィッシングサイ トへリダイレクトするようなダ イナミックリンクを作成できな いようにしましょう 24 24

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

Firebase コンソールで設 定する App Store ID とチーム ID を 設定する 29 29

Slide 30

Slide 30 text

Firebase コンソールで設 定する App Store ID は App Store Connect の App情報の Apple ID 30 30

Slide 31

Slide 31 text

Firebase コンソールで設 定する チーム ID は Apple Developer の Certificates, Identifiers & Profiles の Identifires のアプリのページに表⽰される App ID Prefix 31 31

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

アプリに Firebase を追加する Podfile で次の Pod をインクルードします ※ 事前に CocoaPods の導⼊を済ませておいてください pod 'Firebase/Analytics' pod 'Firebase/DynamicLinks' pod install を実⾏し、 .xcworkspace ファイルを 開きます 33 33

Slide 34

Slide 34 text

アプリに Firebase を追加する Firebase モジュールを UIApplicationDelegate に インポート import Firebase 34 34

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

ダイナミックリンクを 作成する ダイナミックリンクの設定を する ※ ディープリンク URL へ PC でアクセスした場合、 ディープリンク URL へ移動 します 40 40

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

ダイナミックリンクを 作成する iOS ⽤のリンク動作の定義を する ディープリンクを iOS アプリ で開くを選択した場合、開く アプリを選択します 42 42

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

ダイナミックリンクを 作成する iOS ⽤のリンク動作の定義を する iPad アプリがある場合は iPad アプリを開いたり デフォルトの カスタム URL スキームを オーバーライドしたり 44 44

Slide 45

Slide 45 text

ダイナミックリンクを 作成する Android ⽤のリンク動作の定義 をする Android アプリがある場合、 iOS ⽤のリンクと同じように 設定を⾏うことが出来ます 45 45

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

ダイナミックリンクを 作成する 完成 47 47

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

アプリでダイナミック リンクを開く Identifier フィールドに⼀意 の値を設定し、 URL scheme フィールドにはバンドル ID を 設定 バンドル ID は、ダイナミック リンクにより使⽤される デフォルトの URL スキームに なる 50 50

Slide 51

Slide 51 text

アプリでダイナミック リンクを開く アプリの Xcode プロジェクト の Signing & Capabilities タブで Associated Domains を追加し、 Domains リストに ダイナミックリンクの ドメインを追加 applinks:your_dynamic_links_domain 51 51

Slide 52

Slide 52 text

アプリでダイナミックリンクを開く 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

Slide 53

Slide 53 text

アプリでダイナミックリンクを開く 最後に、 application:openURL:sourceApplicatio n:annotation: メソッド(iOS 8 以前)と applicatio n:openURL:options: メソッド(iOS 9 以降)で、アプ リのカスタム URL スキームを通して受信したリンクを処理 します。 53 53

Slide 54

Slide 54 text

アプリでダイナミックリンクを開く @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

Slide 55

Slide 55 text

事例紹介 55 55

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

フローチャート 58 58

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

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

Slide 62

Slide 62 text

アプリでのハンドリング 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

Slide 63

Slide 63 text

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

Slide 64

Slide 64 text

アプリでのハンドリング 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

Slide 65

Slide 65 text

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

Slide 66

Slide 66 text

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

Slide 67

Slide 67 text

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

Slide 68

Slide 68 text

フローチャート 68 68

Slide 69

Slide 69 text

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

Slide 70

Slide 70 text

利⽤したパラメータ 名前 説明 ibi リンクを開くために使う iOS アプリのバンドル ID ifl アプリがインストールされていない場合に開くリンク imv リンクを開くことが出来るアプリの最⼩バージョン efr 「1」の場合、プレビューページをスキップ 70 70

Slide 71

Slide 71 text

アプリでのハンドリング 事例1で説明したものと同等で 71 71

Slide 72

Slide 72 text

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

Slide 73

Slide 73 text

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

Slide 74

Slide 74 text

まとめ 74 74

Slide 75

Slide 75 text

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