React Native アプリのディープリンク: 知っておくべきことすべて!
公開: 2023-03-13ディープ リンクは、今日の相互接続された世界において不可欠な要素となっています。 「ディープ リンキング」という用語は、多くの人にとってはなじみのないものに聞こえるかもしれません。 しかし、ほとんどの人は何らかの形でディープ リンクの概念を使用したことがあるはずです。
リンクをクリックすると、デバイスにインストールされているアプリの特定の画面が直接開かれたことを覚えていますか。 アプリを手動でナビゲートする必要はありませんか? または、たとえば、友人に記事を読んでもらい、その記事の URL を共有したいとします。 あなたの友人はリンクをクリックすると、最初にホームページを起動してから記事を検索する代わりに、一度に目的のコンテンツに移動しました。
これがどのように起こるのか疑問に思ったことはありませんか?
さて、これがディープリンクの機能です。 ユーザーがリンクをクリックすると、モバイル アプリまたは Web サイトの特定の場所にリダイレクトされます。メイン画面で時間を無駄にする必要はありません。 他の例としては、YouTube ビデオまたは Amazon 製品のリンクを友人と共有する、ブランドからのプロモーション リンクを開いて特定の製品ページに移動する、などがあります。 このようなシナリオでは、ネイティブのモバイル アプリケーションでは通常の Web リンクが効果的に機能しないため、ディープ リンクが不可欠です。
この投稿では、ディープ リンクの概念がどのように機能するかを理解し、その利点について学びます。 また、Android および iOS オペレーティング システム用の React Native モバイル アプリにディープ リンクを実装する方法に関する主要な手順についても説明します。 最近のモバイルアプリ開発で最も人気のある React Native フレームワークを選択しました。
ディープリンクとは?
ディープリンクは、モバイルアプリケーション内の特定のコンテンツまたは画面を、別のアプリケーションや Web サイトなどの外部ソースからリンクできるようにする技術です。 ディープ リンクはクリック可能なリンクで、オンライン ストアや Web リンクではなく、モバイル アプリ内の特定の場所にユーザーを直接誘導します。 このアプリ内の場所は、ペイウォール、記事、製品、またはログイン画面の背後にある安全なコンテンツのようなものです。 ユーザーは、ページ自体を検索する必要なく、URL またはリソースをクリックするだけで、目的のアプリ内の場所にアクセスできます。
ディープリンクの概念はどのように機能しますか?
ディープ リンクは、ユニバーサル リンク (iOS デバイス用) やインテント URL (Android デバイス用) などのカスタマイズされた URL スキームを指定します。 ユーザーがディープ リンクをクリックすると、OS がリンクを傍受し、関連するアプリケーションがユーザーのデバイスにインストールされている場合は、そのアプリケーションを開きます。 ディープリンクに存在する情報は、目的のコンテンツまたは画面に移動するためにアプリケーションによって使用されます。
遅延ディープリンク?
ユーザーがアプリケーションにディープリンクされているにもかかわらず、アプリケーションがデバイスにインストールされていない場合はどうなりますか? ここで、ディファード ディープ リンクが登場します。 ユーザーがリンクをクリックしても、リンクが属するアプリがダウンロードされない場合。 ユーザーは代わりに App Store に誘導されます。 ここで、ユーザーは目的のアプリをワンクリックでインストールできる App Store の正確な場所に誘導されます。 そして、アプリがインストールされると、特定の画面がすぐに開きます。
ディープリンクの利点は何ですか?
ディープ リンクはユーザーの時間を節約し、ユーザー エクスペリエンスを大幅に向上させます。
ディープ リンクは、ビジネス ブランドがユーザー維持率とコンバージョン率を高めるための優れたツールです。 ブランドは、プロモーション キャンペーンやインセンティブをディープ リンクに関連付けることができます。 ワンクリックでユーザーを製品ページにリダイレクトします。 このようにして、ブランドはユーザーに新しい製品やサービスを試すよう簡単に説得できます。 たとえば、音楽アプリの所有者が新しい音楽アルバムを宣伝したいとします。 そこで、オーナーは広告に投資し、有名なウェブサイトと提携します。 ディープ リンク付きの音楽アルバム カバーが、広告キャンペーンとしてその Web サイトに表示されます。 Web サイトのユーザーがディープ リンクをクリックすると、音楽アプリの特定のページにリダイレクトされ、アルバムを聴くことができます。
さらに、ディープリンク キャンペーンを追跡し、キャンペーンのパフォーマンスを確認できます。 また、ディープ リンクは SEO ランキングを向上させ、アプリケーションのチャーンを最小限に抑えます。
React Native アプリでディープリンクを実装するにはどうすればよいですか?
react-navigation ライブラリは、React Native アプリをディープリンクするための Linking モジュールを提供します。 これは、React Native 開発者にとって便利です。
特定の URL を関連するアプリ画面にマップするディープ リンク スキーマをアプリケーションで定義する必要があります。 react-navigation は、Linking モジュールや NavigationContainer などのコンポーネントを提供して、スキーマを定義します。 スキーマを定義したら、受信ディープ リンクの処理に使用できます。 着信ディープ リンクを処理するために、Linking モジュールによって提供される addEventListner メソッドを使用して、コールバック関数を登録する必要があります。 アプリがディープ リンク経由で起動されると、コールバック関数が呼び出されます。 このコールバック関数は、アプリケーションで目的の画面をナビゲートするために使用できます。
iOS および Android でのディープ リンクの設定
URL スキーム (一意の URL) を使用してモバイル アプリを構成する必要があります。 この URL スキームは、ユーザーのスマートフォン デバイスにインストールされているアプリを見つけて起動する役割を果たします。 アプリを画面に移動させるには、アプリが構成された URL スキームに一致するプレフィックスを設定する必要があります。 次に、画面をアプリ内でそれぞれのパスにマップする必要があります。 パスが URL に関連付けられると、アプリは特定の画面に直接移動できます。
ディープ リンクの構成は、iOS および Android オペレーティング システムでは少し異なります。 プロの React Native 開発者が Android と iOS のディープリンクを実装する方法を見てみましょう!
React Native Android アプリでのディープ リンクの構成
Step#1 ディープリンクの定義
マニフェスト ファイルを開き、アプリで使用する予定のディープ リンクを定義して、ユーザーがアプリ内の特定のページに直接移動できるようにします。 ここでは、その特定のページのディープ リンクを定義する必要があります。 AndroidManifest.xml ファイルでディープ リンクを定義する方法は次のとおりです。
<アクティビティ
android:name=".ProductActivity"
android:label=”商品”>
<インテントフィルター>
<action android:name="android.intent.action.VIEW" />
<category android:name="android.intent.category.DEFAULT" />
<category android:name="android.intent.category.BROWSABLE" />
<データ
android:host="example.com"
android:pathPrefix="/products"
android:scheme="http" />
<データ
android:host="example.com"
android:pathPrefix="/products"
android:scheme="https" />
</インテントフィルター>
</アクティビティ>
Step#2 インテント フィルタの設定
android/app/src/main に移動し、そこから AndroidManifest.xml という名前のファイルを開きます。 ここで、ディープ リンクごとにインテント フィルタを構成する必要があります。 インテント フィルターは、アプリケーションが処理できるデータ量とアクションを指定します。
Step#3 インテント処理
アプリケーションのアクティビティでインテントを処理する必要があります。 このインテントは、ディープ リンクからアプリケーションを起動します。 インテントを処理するには、インテントからデータを抽出し、ユーザーを誘導するアプリ内の特定の場所または特定の画面を決定する必要があります。 その後、プロジェクトを Android エミュレーターで再ビルドする必要があります。
React Native IOS アプリでのディープ リンクの構成
Xcode の URL タイプで URL スキームを設定します。 「AppDelegate」ファイルを変更し、iOS エミュレーターでプロジェクトを再構築します。 これで、iOS プロジェクトが Xcode で開かれました。
Step#1 URL スキームの定義
アプリケーション用にカスタマイズされた URL スキームを定義します。 この URL スキームは、アプリを識別するための独自の方法です。 他の Web サイトやアプリは、この一意の識別子を使用してアプリケーションを起動します。
ファイル info.plist を開きます。 このファイルの先頭に新しい URL タイプを追加します。 URL スキームは、識別子および URL スキーム フィールドに入力できます。 次に、アイテム 0 (ゼロ) を展開し、URL スキームを選択して、アイテム 0 に名前を付けます。この名前は、アプリケーションがリンク可能な名前です。 たとえば、アプリの名前は「OurApp」です。 URL スキームは、「ourapp://」または「ourapp://detail?id=123」のようになります。
Step#2 コード実装の処理
ここで、ディープ リンクを処理するコードを実装する必要があります。 「AppDelegate」ファイルに移動し、スキームを処理するメソッドを追加します。 アプリが URL スキームを介して起動されるタイミング。 このメソッドが呼び出されます。 このメソッドで URL を受け取ります。 URL から必要な情報が抽出され、正しい画面がアプリに表示されます。
Step#3 テスト
ここで、ディープ リンクをテストする必要があります。 これには、ツール Safari またはディープ リンクの概念をサポートするその他のサードパーティ アプリケーションを使用できます。 たとえば、Safari を使用しているとします。 URL スキームが定義されている URL を Safari で開きます。 その後、アプリは正しい画面で起動します。
Step#4 ユニバーサル リンク処理
カスタム URL スキームを追加するだけでなく、ユニバーサル リンク (他のアプリや Web サイトで使用される標準の HTTPS リンク) をサポートするようにアプリを構成して、アプリを起動することもできます。 これは、ユニバーサル リンクを処理する必要がある方法です。 アプリケーションの資格を構成します。 次に、ユニバーサル リンク処理に関連するコードを作成し、アプリのデリゲートにコードを実装します。
これで、iOS シミュレーターでプロジェクトをリビルドできます。
最終的な考え
リンク解除の概念とその実行プロセスに精通していることを願っています。 ディープ リンクは、今日のアプリケーションに不可欠になっています。 ただし、ディープ リンクの実装プロセスは、最大限の専門知識を持って実行することが重要です。 技術的な専門知識や必要なリソースが不足している場合は、経験豊富な React Native アプリ開発会社が、ディープ リンクの作成と実行プロセスを簡単に進めることができます。