as

Settings
Sign out
Notifications
Alexa
Amazonアプリストア
AWS
ドキュメント
Support
Contact Us
My Cases
開発
設計と開発
公開
リファレンス
サポート

Vegaアプリで注目コンテンツのディープリンクを処理する方法

Vegaアプリで注目コンテンツのディープリンクを処理する方法

Fire TVには、ホーム画面にアプリの特定のコンテンツを宣伝するバナーやタイルなどのプロモーション枠が表示されます。プロモーション枠に表示されるコンテンツは、「注目コンテンツ」と呼ばれます。注目コンテンツのディープリンクによって、アプリのホームページを経由せずに、プロモーション用コンテンツに直接ユーザーを移動させることができます。ディープリンクは、アプリ内の特定の画面を起動する特別な形式のURLです。

たとえば、Fire TVのマーチャンダイジングスロットに、ACME Mediaのフットボールのプレーオフ試合が表示されているとします。このプロモーションをクリックすると、次の処理が実行されます。

  • ACMEアプリを起動します。
  • ユーザーをゲームの詳細画面または再生画面に直接誘導します。

アプリがインストールされていない場合、Fire TVはユーザーをアプリの詳細ページにリダイレクトしてダウンロードを促します。インストールして起動すると、ディープリンクはコンテキストを維持したまま、自動的に目的のコンテンツにユーザーを誘導します。

このドキュメントでは、注目コンテンツのディープリンクをVegaアプリに実装するためのガイダンスを提供します。

Vegaアプリは、Fire OSアプリと同じ注目コンテンツのディープリンクを使用します。Fire OSアプリの注目コンテンツのディープリンクは、「Fire TVのUIから注目コンテンツへのディープリンク」のコンテンツのエンコード済みディープリンクインテントの生成セクションに記載されている手順に従って生成されます。

次の例は、Fire OSアプリのエンコード済みディープリンクを示しています。このURIは、Fire TVで注目コンテンツを構成するために使用されます。

amzns://apps/android?asin=B080PZMHSN#Intent;S.intentToFwd=https%3A%2F%2Fwww.acme.com%2Fsome%2Fshow%2Frrn%3Acontent%3Ashows%3A123456789;end

ディープリンクに応答するためのURIは、ホームランチャーがディープリンクをアプリにルーティングするために使用する「ヘッダー」と、アプリが解析する必要のあるディープリンクの2つの部分で構成されています。

Vegaアプリは、S.intentToFwdの後に続くURIのデコード済みのバージョンを受け取ります。このデコード済みバージョンは、任意のオンラインツールを使用して取得できます。

https://www.acme.com/some/show/rrn:content:shows:123456789

注目コンテンツのディープリンクはOSに依存しません。ディープリンクはVegaもFire OSも同じで、AndroidインテントスタイルのURIを使用します。

ディープリンクを受信したら、インテントフラグメントのコンポーネントを適切なReact Navigationコンポーネントにマッピングする必要があります。

エンコード済みディープリンクについて詳しくは、「Fire TVのUIから注目コンテンツへのディープリンク」のAndroid Studioを使用してディープリンクインテントをエンコードする手順を参照してください。

Vegaはreact-native linkingを使用してメッセージを送受信します。次の手順は、メッセージを受信してアプリで処理する方法を示しています。

手順1: リンクライブラリをインポートする

クリップボードにコピーしました。

import {Linking} from 'react-native';

手順2: アプリが既に開いているときにメッセージを受信する

ディープリンクを受信したときに、アプリがフォアグラウンドまたはバックグラウンドで実行中である場合、アプリはurlイベントを受け取ります。イベントをリッスンするには、Linking.addEventListener()を呼び出してurlイベントをサブスクライブします。

クリップボードにコピーしました。

const subscription = Linking.addEventListener('url', ({url}) => {
      console.log('実行中にディープリンクを受信しました:', url);
        handleDeepLink(url); // カスタム関数
      }
});

手順3: アプリが開いていないときにメッセージを受信する

アプリの起動時に(たとえば、useEffect()内で)Linking.getInitialURL()を呼び出して、ディープリンクがアプリの起動を開始したかどうかを確認します。

クリップボードにコピーしました。

const handleInitialDeepLink = async () => {
  try {
        const initialUrl = await Linking.getInitialURL();
        console.log('初期ディープリンクURL:', initialUrl);

        if (initialUrl) {
          handleDeepLink(initialUrl); // カスタム関数
        }
      } catch (error) {
        console.error('初期ディープリンクの処理中のエラー', error);
      }
};

次の統合コードサンプルは、ディープリンクイベントを受信して処理する方法を示しています。URLを解析し、データを取得して、必要なアクションを実行するには、handleDeepLink()カスタム関数を実装する必要があることに注意してください。

クリップボードにコピーしました。

import {Linking} from 'react-native';

useEffect(() => {  
  const handleInitialDeepLink = async () => {
    try {
      const initialUrl = await Linking.getInitialURL();
      console.log('初期ディープリンクURL:', initialUrl);

      if (initialUrl) {
        handleDeepLink(initialUrl); // カスタム関数
      }
    } catch (error) {
      console.error('初期ディープリンクの処理中のエラー', error);
    }
  };

  const handleUrlEvent = ({ url }) => {
    console.log('実行中にディープリンクを受信しました:', url);
    handleDeepLink(url); // カスタム関数
  };

  const subscription = Linking.addEventListener('url', handleUrlEvent);

  handleInitialDeepLink();

  return () => {
    subscription.remove(); 
  };
}, []);

export const handleDeepLink = (
  url: string | null,
  navigationRef: NavigationContainerRef<RootStackParamList>,
): boolean => {
  try {
    if (!url) {
      return false;
    }

    // 受信したディープリンクを解析し、React Navigationを使用してアプリ内で
    // リクエストを適切にルーティングするコードを実装します。
    console.log(`deeplink-sample - received: ${url}`);
    // url = https://www.acme.com/some/show/rrn:content:shows:123456789

    return true;
  } catch (error) {
    console.error('ディープリンクの処理中のエラー', error);
    return false;
  }
};

アプリをサイドロードする場合、ディープリンクをテストするにはアプリのASINにリンクする必要があります。Fire TV対応Amazonアプリストアでは、ASINはAmazon Standard Identification Numberを意味します。ASINは、B080PZMHSNなどの10文字の英数字の文字列です。アプリのASINを取得する方法は、Amazonの担当者にお問い合わせください。

次のコマンドを使用して、ASINをリンクしてアプリをインストールします。「store-id=」の後に続くサンプルASINのB080PZMHSNを、アプリの実際のASINに置き換えてください。

クリップボードにコピーしました。

vda push "keplerdeeplinksampleapp_armv7.vpkg" /tmp
vda shell vpm install-async tmp/"keplerdeeplinksampleapp_armv7.vpkg" —store-id="B080PZMHSN"

アプリにCLIコマンドを送信することで、ディープリンクをテストできます。CLIコマンドには「amzns」の部分を含めてください

vda shell "vmsgr send '<ここにamzns URLを追加> ' "

次のディープリンクを使用して統合を検証します。ディープリンクでは、「asin=」の後にアプリのASINが含まれていることに注意してください。

クリップボードにコピーしました。

vda shell "vmsgr send 'amzns://apps/android?asin=B080PZMHSN#Intent;S.intentToFwd=https%3A%2F%2Fwww.acme.com%2Fsome%2Fshow%2Frrn%3Acontent%3Ashows%3A123456789;end'"

このサンプルコードのhandleDeepLink()関数は、次のメッセージを表示します。

deeplink-sample - received: https://www.acme.com/some/show/rrn:content:shows:123456789


Last updated: 2025年9月30日