LoginSignup
9
5

More than 1 year has passed since last update.

Rakuten RakumaAdvent Calendar 2022Day 3rakuma
@rakuma_devrel(Rakuma)in楽天グループ株式会社 ラクマ開発チーム

Deep Link 2022

Last updated at Posted at 2022-12-02

初めに

2022年暮れに Web → アプリ送客（以下 Deep Link）を実現したいという声が高まってきたので、改めて必要な技術とその対応状況、またまだできてない部分に関してどうすればできるのか考え直してみたいと思います。

※ ある程度の前提知識をもとにしつつも、短い期間で調査したものなので説明が不正確・不十分な箇所もあるかもしれません。間違いがあれば指摘をお願いします。

技術一覧

Deep Linkとは

Deep Link とは、Web からアプリに送る（無ければDLさせる）ことの漠然とした概念です。その中に基礎技術があり、それらを組み合わせた応用技術があります。

カスタムURLスキーム とは

xxx://〜 の形式のもので、

.html
<a href='xxx://〜'>リンクテキスト</a>

と HTML 上に描画するとリンクとして表示されます。ユーザーがリンクをタップすると、アプリの特定のページを開きます。

メリット デメリット
アプリが必ずインストールされていると保証できるシーンでは一番手軽である。 アプリがインストールされていない場合はストアへ遷移させるみたいなことはできない。
自社以外のアプリでも同じ scheme で開くようにすることができてしまう。例えば、xxx://hogehoge?phone=080XXXXXXXX のようにパラメータで個人情報を渡すと、他者に窃取される危険性がある。

アプリ内の WebView でしか表示されない場合に、カスタム URLスキームで特定の画面に遷移させるところが使い所になるでしょう。

Smart App Banner (iOS) とは

このように iOS 版 Safari においてアプリインストールを促進してくれるバナーです。

例えば、アプリを開かせたいだけであれば

.html
<meta name="apple-itunes-app" content="app-id=xxxx" />

このようにHTML上に実装します。content="app-id=xxxx" は AppStore のURL末尾の ID です。

また、特定のアプリページを開かせたい場合は

.html
<meta name="apple-itunes-app" content="app-id=xxxx" app-argument="xxx://~~~"/>

このように実装します。ただし、app-argument="xxx://~~~" というオプショナルパラメータで指定した URL スキームで該当のページをアプリが開くようにするためには、事前にアプリの実装が必要です。

メリット デメリット
アプリがなければアプリインストールを促進でき、アプリがあれば特定ページを開かせることができる。 iOS のみに提供された機能である。 Anrdoid にはこの機能は提供されていない。
対応する Web 画面を開いても、自動でアプリ画面に遷移するわけではない。

iOS Chrome など Safari の他のブラウザはどうか？というと、以下のような記事もあります。Chrome や Fire Fox の皮を被っているが、実のところ中身は Safari であれば、Safari 以外のブラウザでも Smart App Banner は動作するかもしれません。

AppleはiOS上で動作するブラウザについて、たとえFirefoxやChromeであっても、ブラウザのレンダリングエンジンにはAppleが開発したWebKitを使うことを強制しています。
https://gigazine.net/news/20220628-apple-spoil-browser-engine-choice/

Universal Links (iOS) とは

Google などの Web の検索結果のラクマのページをタップすると、即座にアプリが開くものです。

検索結果である必要は特に無く、対応する URL へのリンクをタップするという動作でも（たぶん）問題ないです。また、Safari だけでなく iOS Chrome でも無事機能するそうです（未確認）。

これを実現するためには以下の URL（Web）で Universal Links 対応した JSON が返ってくるように実装する必要があります。

Example

.json
{
  "applinks": {
    "apps": [],
    "details": [
      {
        "appID": "xxxx",
        "paths": []
      },
      {
        "appID": "yyyy",
        "paths": []
      }
    ]
  }
}
メリット デメリット
アプリがあれば即座にアプリが開くので、エンゲージメントの高いプラットフォームに誘導しやすい。 「Webで見たい」という場合にひと手間必要（アドレスバーにURLをペーストし直すなど）。
ドメインをやめる必要があれば、その手間がかかる。

（非推奨） App Indexing (Android) とは

iOS の Universal Links と同様、Android でも Google などの Web の検索結果でこのように表示され、タップすると即座に対応するアプリページが開きます。

App Indexing

これを実現するためには、

.html
<link rel="alternate" href="android-app://~~~"></link>

このように実装します。

現在 App Index のページには以下のように記載されています。

Firebase App Indexingは、Google Search Appで提案された結果として表示するために、コンテンツにインデックスを付けるための 推奨される方法ではなくなりました 。このページは、他の便利なGoogleデベロッパー製品を示しています。
https://firebase.google.com/docs/app-indexing?hl=ja

メリット デメリット
アプリがあれば即座にアプリが開くので、エンゲージメントの高いプラットフォームに誘導しやすい。 「Webで見たい」という場合にひと手間必要（アドレスバーにURLをペーストし直すなど）。
非推奨になっているため、SEOにも悪影響を及ぼしていないか？

（余談）AMPページとの関連

Google の検索結果から App Indexing 対応したページを探していましたが、AMP ページばかりヒットしておりなかなか探すのが難しかったです。AMP も App Indexing ももはや推奨されていない技術のため、SEO にも悪影響になっているような気がしました。

App Link (Android) とは

App Indexing に代わり、App Link が推奨されているようです。

設定内容を理解しきれていませんが、Web 側の URL とアプリ側の URL スキームを対応付けしているようです。

SEO 対応を行うにあたり App Link も実施していくのが理想ですが、前身である App Indexing よりも Universal Links に近い設計になっているため、Universal Links と同様に、ドメイン間の移動で App Link が暴発しないか要注意です。

要素技術の応用

カスタムURLスキーム、Smart App Banner、Universal Links、App Link などの要素技術を組み合わせて、Adjust、Firebase、Facebook、Twitter などが便利な機能を提供してくれています。

例えば Adjust や Firebase Dynamic Links では、以下のような動作を実現してくれます。

  • アプリがインストール済みならアプリのページを表示する
  • 未インストールであればストアを開く or もしくはWebにフォールバックする
  • 特定の紐付いたリンクからインストールした場合、インストール後に指定したアプリページを開く

などです。

Adjust との連携

Adjust といえばあの手この手で獲得経路をトラッキングすることでユーザーのエンゲージメントを高めるためのデータを提供してくれるツールですが、その経路の一つとして Deeplink のサポートもあります。

Adjust は Karte とも連動しており、App Store でのアプリインストールや SNS からの流入を可能な限りトラッキングし、経路別に訴求セグメントを切るといったマーケティングに強力な力を発揮します。

adjust

Firebase Dynamic Links との違いは、特定の経路（例：あるキャンペーン専用の Adjust URL）を辿ってアプリがインストールされた場合には、その後自社サーバーや Karte にコールバックリクエストを送信し、効果計測や訴求のターゲティングを容易にするといったマーケティング機能を備えている点です。

Example

karte

この機能を活用するためには、アプリで設定が必要な場合があります。

また、https://xxx.adj.st のような専用の Adjust ドメインを発行することができ、このドメインに Universal Links や App Link を対応させると、Adjust から Deeplink が簡単に行えるようになります。

Firebase との連携

Google の Firebase による Deep Link のかゆいところに対応した「Dynamic Links」というサービスがあります。

Universal Links や App Link を使ってアプリとストアの出し分けを行ったり（ディファードディープリンク）、リンクを SNS でシェアした際にリッチプレビューを行ってくれたり、リンクが機能しているかデバッグを行ってくれたり、クリックをトラッキングしてくれたりします。かなりの高機能で便利なため、研究記事が他にもたくさんありました。

参考1 参考2 参考3 参考4
ca_1.png ca_2.png ca_3.png ca_4.png

「インストールされているかどうか」のあたりが、Universal Links(iOS) や App Link(Android) を使っていて、Deep Link ソリューションの肝となっている箇所だと思われますが、残念ながら Web でネイティブ側のインストール状況をどうやって検知するのか技術的な方法については見当がつきませんでした。

ただ、Universal Links に対応していないと Firebase Dynamic Links の魅力は十分に引き出せないでしょう。

Adjust にも類似ソリューションが存在し、マーケティング機能が充実していることは先に述べましたが、Firebase Dynamic Links にどの程度同様のマーケティング機能が備わっているかは探りきれていません。両者はメリット・デメリットを見極めて使い分けると良いでしょう。

Facebook App Links との連携

App LinksはFacebookが提供するオープンソースのアプリ連携サービスです。実装することで、Facebookから別のアプリの詳細画面に直接遷移することができます。Facebookの本体アプリとMessanger間の連携などで利用します。
https://repro.io/contents/deeplink/

iOS/Android に SDK を組み込むと、Facebook から直接アプリを開いてくれるようです。

Twitter Card との連携

ツイートにApp StoreやGoogle Playに書いてあるアプリの情報を表示できる機能です。アプリをインストールしていないユーザーにはインストールの誘導が、すでにアプリをインストールしているユーザーにはアプリ内の詳細コンテンツに遷移させることができます。
https://repro.io/contents/deeplink/

HTML上に

.html
<meta name="twitter:XXXX">

というタグを追加すれば、Twitter 上で URL が展開された際に、最近では画像や説明だけでなくストア情報を表示してくれるようです。

まとめ

Deep Link とは、Web からアプリに送る（無ければDLさせる）ことの漠然とした概念でした。

その中に基礎技術があり、それらを組み合わせた応用技術がありました。

  • 基礎技術
    • カスタムURLスキーム
    • Universal Links (iOS)
    • App Indexing (Android: 非推奨)
    • App Link (Android)
    • Smart App Banner(iOS)
  • 応用技術
    • Adjust Deep Link
    • Facebook Dynamic Links
    • Facebook App Links
    • Twitter Card

良いDeep Linkに向けて

要件の実現にかかるコストを把握するためには、以下のステップを踏むと良いでしょう。

1.実現したい機能要件を明確化する

「なんとなく対応したい！」では調査工数が最大になってしまうので「〇〇というシーンで〇〇のような経路を辿らせたい」のように明確化すると良いでしょう。この記事が、ある程度の技術要件を概念レベルでも良いので把握できるきっかけになれば幸いです。

最初は「なんとなく対応したい！」から始まるものだと思いますが、話しているうちに「何やら大きそうな話だぞ？」と思ったら、まずはこの記事のように実現に必要な要素に分解してみましょう。できれば、みんなで手分けして知見を一つの箇所に集めていくと良いでしょう。

2.機能要件が明確化したら、それを実現する手段を特定しましょう。

  • 要件が明確化すれば URL スキームだけでよいのか？
  • Smart App Bannerが良いのか？

みたいに、具体的な手段がわかってくるでしょう

3.各手段（基礎技術）の成立条件を洗い出す

例えば Firebase Dynamic Links で「アプリがあればアプリの特定ページを開く、なければストアを開く」を実現したい場合、Universal Links 対応や App Link の対応が iOS/Android/Web に必要になります。

4.実装〜検証〜リリースにかかる工数を積み上げる

ここまでできれば、あとは一つ一つの工数を足し合わせて走り出すだけです。

各実装工数と、Staging 環境で確認チェックする方法、QA、セキュリティ監査など協力して進め、リリースまで走り抜きましょう。

終わりに

良い Deep Link ライフを！
何かあればコメントいただけますと幸いですmm

9
5
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
Sign upLogin
9
5