【ReactNative開発】DeepLinkを使ってリンク先サービスのモバイルアプリを開けるようにする（動作サンプルあり）

こんにちは。会社の夏休みも終盤ですが、今日もReact Nativeと戦っております。（まだ友達に慣れていない笑）

今日は、Deep Linkという技術に触れたので、その実装方法含めてこの記事に学んだことを整理しておこうと思います。

それでは参ります。

Deep Linkとは？

Wikipediaによると、以下のように説明がありました。

https://ja.wikipedia.org/wiki/%E3%83%87%E3%82%A3%E3%83%BC%E3%83%97%E3%83%AA%E3%83%B3%E3%82%AF

ディープリンク（Deep link）、ディープリンキング（Deep linking）は、あるウェブページから他のウェブサイトのトップページ以外の各コンテンツ（ウェブページ・画像等）に直接ハイパーリンクを張ること。他サイトの画像などを自サイト内に直接参照（「表示」など）させること（→直リンク）とは異なり、単にリンクアンカーによりポインタを示すのみの行為を指す。

Wikipediaより

が、以下のブログでの説明の方が今回の意図に近いと思います。

https://www.adjust.com/ja/blog/dive-into-deeplinking/

ディープリンクは、ユーザーがモバイル端末からWebまたはアプリ上にあるURLをクリックした際、アプリが自動的に開き、アプリ内の指定したページに遷移する技術です。ディープリンクを使うことでユーザー体験を最適化し、コンバージョン率や継続率を向上させることができます。

上記で説明のニュアンスが異なることについて、以下のサイトに解説がありました。なるほど・・！

https://wacul-ai.com/blog/site-improvement/method/deeplink/

ディープリンクとは、Webページやスマートフォンアプリからアプリの特定コンテンツへ移動するリンクのことです。

ディープリンクは元々、あるWebサイトのページから他のWebサイトのページやコンテンツに直接リンクすることを指して使われている言葉でしたが、近年になってスマートフォンやアプリの利用が増加したことに伴い、現在利用されているような意味へと再定義されました。

Deep Linkを構成する技術

Deep Linkを実現するための技術としては、ユニバーサルリンク、カスタムURLスキームなどが挙げられます。それぞれで実現できること、違いについては以下のブログに分かりやすくまとめられていました。

ReactNativeでDeeplinkを実装する

さて、本題の、React NativeでDeeplinkを実現する方法ですが、調べてみたところ利用している開発ツール・ライブラリによっても異なるようでした。

• React Native純正の機能：Linking
• React Native + Expoで開発している場合：React Native純正のLinkingは利用できず、ExpoのLinking機能（expo-linking）を利用する必要がある
• あとは、試していないですが、React NavigationでもDeepLinkに関する機能の提供があるようです。

今回私はReact Native + Expoで開発をしているため、２番目のexpo-linkingを利用した実装を試してみました。

実装は、非常に簡単でした。

例えば、モバイルアプリ上にInstagramアカウントへのリンクを持ったボタンを作ります。Deeplinkを実現するには、以下の通り、expo-linkingをimportの上、Linking.openURL(URL)と書くだけ。

非常にありがたい・・・

import * as Linking from 'expo-linking';

・・・・
<SocialIcon light button type="instagram" style={styles.icon} onPress={()=>{Linking.openURL("https://www.instagram.com/yutaro013_scenery")}}/>

こいつをクリックすると・・・

アプリをインストールしていない場合：

WebのURLが開いた。

Instagramアプリをインストールしている場合：

お、表示させるアプリを選択するポップアップが出てきた。

また、指定したアプリを”常に”開くか、”今回だけ”にするか、選択できる。

Alwaysを指定してみる。

おお、リンクをInstagramアプリで開くことができた！

先程Alwaysを選択したので、一度アプリを閉じて、再度リンクボタンをクリックした時の動作も確認しておく。こちらは、期待通り、アプリ選択のポップアップなく、Instagramアプリが開かれた！

Deeplink、実現するために裏側では複雑な仕組みがきっと動いているのだと思いますが、expo-linkingを使うと、ほんの一行のコードで実現できてしまい、大変便利だと思いました・・・！

以上、Deeplinkを使ってリンク先サービスのモバイルアプリを開けるようにする方法のご紹介でした。本記事が少しでもお役に立ちましたら、いいねをポチっていただけると励みになります！

本日も最後までご覧いただきありがとうございました！

おしまい

[番外編] ReactNativeをもっと学ぶなら・・・

React Nativeをもっとちゃんと学びたい！という方は、こちらにおすすめコンテンツをまとめましたので、ご参考にしていただければと思います・・！

土台のJavaScript/TypeScriptに不安がある方は、こちらもまとめましたので、ご参考になりましたら幸いです。