カオスとなったディープリンクのブランド毎の用語整理。

1. Deeplink
用語の整理

2. 3. それなのに技術が乱立しスタンダードが定まらないため分かりにくい
But there is no standard yet.
2. アプリにおけるユーザ獲得のキーファクターとなる技術
Key technology to get more users on native APPs.
1. Deeplinkはシームレスなユーザ体験実現の為に非常に重要
It’s very important to achieve seamless UX
Deeplinkの現状 ~ Current status of Deeplink

3. 乱立した技術と今後のDeeplinkスタンダードについて検証し正しい理解を深める
Learn more about variety of deeplink-related-technologies and future standard.
講義の目的 ~ The purpose of the lecture

4. Webサイトやネイティブアプリケーションにおいて、サービ
スのトップページではなく特定の記事やコンテンツに直接リ
ンクさせるようなスキームの事
※現代のインターネットメディアでは特定の記事や商品に直接リンクさせる方法が主流であり、Webの
世界ではDeeplinkがスタンダードになっています。
Deeplinkとは ~ What is Deeplink?
トップページ
Toppage
記事ページ
Article
外部サイト
Third-Party Site
not deeplink
deeplink

5. 4. AppleがUniversal LinksをGoogleがAndroid App Linksを発表
Apple announced universal links; Google announced android app links.
3. ネイティブアプリでのDeeplinkをCustom Schemeで実現
People started using deeplink in native app with Custome Scheme.
2. WebでのDeeplinkは一般的になったので特にDeeplinkと呼ばなくなった
Deeplink in web became too normal to call it so anymore.
1. 元々はWebサイトにおける用語だった
It used to be a word for web pages.
Deeplinkの歴史 ~ History of deeplink

6. Webとアプリの特性の違いから、アプリでDeeplinkを実装す
る事の問題を探る
What is the problem to achieve deeplink in Native APP?

7. WebにおけるDeeplink ~ Deeplink on Web
トップページ
Top page
http://hoge
記事ページ2
Article 2
外部サイト
Third-Party Site
deeplink
記事ページ1
Article 1
deeplink
各記事にはURLという「名前」が付いているので容易に直接リンク(Deeplink)ができる
It’s easy to do because each pages have their own URL as identifier.
http://hoge/news/2
http://hoge/news/1

8. Problem on APP アプリトップ
APP top page
article 1 article 2
外部サイト
Third-party site
Cookpad APP
Cookpadアプリを開く
Open the APP
個々の記事にURLという名前がないので直接リンク
が難しい（常にアプリトップを開いてしまう）
There is no URL for each articles. It’s hard to
open them directory.
なんとかして記事を直接開きたい
But we want to open the article page directory

9. アプリへのDeeplink方法の種類 ~ Deeplinks for APP
● Custom Scheme
● Universal Links
● Android App Links
旧方式 : Old way
新方式 : New way

10. Deeplink関連技術 ~ Related technologies
● Smart App Banners
● Native app install banner
● Facebook AppLinks
● Twitter App Cards
● Google App Index
● Shared Web Credentials
● Handoff
→いっぱいいろんな関連用語が登場してきてやる気がなくなるので、整理して行きます。
Tons of relative technologies make me sick, so I classified them here.

11. Custom Scheme Deeplink
構成: example://{path}
例: ebay://launch?itm=141292504129&_trksid=p12345
【注意】
アプリ開発時にcustom schemeを受け付ける様に予め用意しておく事が必要。
iOSでもAndroidでも対応可能。

12. Custom Scheme Deeplinkの流れ（例）~ Example
http://sample.com/hoge
Open
Web Content
App Contentmyapp://hoge
アプリ: APP
外部サイト: Third-Party
aタグにCustome Scheme
を書く事でアプリの記事に
直接リンク

13. Custome Schemeの問題点 ~ Problems
1. アプリをインストールしていない端末では解釈できない
Need the App installed to interpret.
2. アプリのインストール有無チェックが必要（誰がする？）
Need to check if the app is installed. Who does that?
3. アプリ内をクロールできないのでSNSでのインスタント表示が難しい
It’s hard for 3rd-party to crawl the content in the APP
4. Custome Schemeは予約できない（複数アプリ間で重複できる）
Custome Scheme is not reservable; anyone can take the same scheme.

14. Custom Scheme Deeplinkへの導線実装方法が乱立
There are tons of different architectures to lead
users to custome-schemed-app.

15. Custom Scheme Deeplinkへの導線 ~ Leads
● Twitter App Cards -> Twitter社が実装
● Facebook AppLinks -> Facebook社が実装
● Google App Index -> Google社が実装
● Smart App Banners -> Apple社がSafariの機能として実装
● Native app install banner -> Google社がChromeの機能として実装

16. Twitter App Cards
アプリの情報がTweetに表示され、クリックするとWebではな
く直接アプリ内の該当ページへリンクされる
1. Web記事ヘッダにタグを貼る
2. Twitterによりアプリ情報がクロールされアプリ表示

17. Facebook AppLinks
アプリの情報がfacebookタイムラインに表示され、クリックす
るとWebではなく直接アプリ内の該当ページへリンクされる
1. Web記事ヘッダにタグを貼る
(Webが無い場合はアプリにSDK導入)
1. facebookによりアプリ情報がクロールされアプリ表示

18. Google App Index(Android / iOS)
1. アプリ作成時にGoogleのSDKを組み込む
2. Web同一記事ヘッダにタグを貼る
3. Googleがアプリの情報もインデックス登録する
4. Google検索するとアプリの情報が表示される
アプリの情報がGoogle検索に表示され、クリックするとWebで
はなく直接アプリ内の該当ページへリンクされる

19. Smart App Banners
1. Webページヘッダにmetaタグを追加
2. Safariブラウザが自動的にアプリDLバナー表示
アプリの情報がWebページ上にバナー表示されVIEWをクリック
するとアップストアへ

20. Native app install banner
1. Web Manifest JSONファイルに記述
2. WebページヘッダにてManifestパス指定
3. Chromeブラウザが自動的にアプリDLバナー表示
アプリの情報がWebページ上にバナー表示され、INSTALLをク
リックするとインストールを開始する

21. カオス
Chaotic

22. 新しいDeeplink
New style deeplink

23. 最新方式のDeeplink ~ New style deeplink
iOS: Universal Links
Android: Android App Links
構成は一般的なURLと同じhttpsスキーム。
Webページとアプリで同じコンテンツを同じURLで共有する。
This uses https scheme as if the web URL does. This shares the same URL
with both web and APP
【注意】
Universal LinksはiOS 9+のみ
Android App LinksはAndroid 6+のみでサポートされる。

24. 最新方式のDeeplinkの流れ ~ Flow
http://sample.com/hoge
Web
Content
App
Content
アプリが未インストールの場合
If there’s no App installed
アプリがインストール済の場合
If there’s App installed
外部サイト Third-party
http://sample.com/hoge

25. ブランド毎のサポート機能 ~ Features by brands
● Universal Links
● Smart App Banners
● Shared Web Creds
● Handoff
● Android App Links
● Native app install banner
● Smart Lock
● Facebook AppLinks
● Twitter App Cards
● Google App Index
iOS
Android
3rd Party
● Custom Scheme

26. ● Google App Index
役割別まとめ ~ Summary
● Facebook AppLinks
● Twitter App Cards
● Smart Lock
● Shared Web Creds
● Handoff
● Smart App Banners
● Native app install banner
● Universal Links
● Android App Links ● Custom Scheme
Search Engine
Browser
3rd Party App
アプリへの流入訴求: Leads
Custom Scheme（旧）
https Scheme（新）
Web/App間UX改善: UX optimization

27. 結論 ~ Conclusion
● 今後はUniversal LinksとAndroid App Linksが主流になる。
Universal Links and Android App Links will be the standard.
● 旧デバイスではCustome Schemeが暫く残る
But custome scheme will remain in old devices for several years.

28. 終わり