開発者コンソール

手順2: マルチモーダルデバイスでビデオスキルを有効化してテストする


手順2: マルチモーダルデバイスでビデオスキルを有効化してテストする

ビデオスキルを作成したら、マルチモーダルデバイスに接続します。Fire TV対応アプリでは、Fire TVデバイスでアプリを実行し、adb経由で接続しました。しかし、マルチモーダルデバイスではアプリを使用せず、adb経由で接続することもできません。代わりに、ウェブプレーヤーを公開し、ビデオスキルにウェブプレーヤーのURIを指定し、スキルとマルチモーダルデバイスを関連付けることでビデオスキルを実行します。マルチモーダルデバイスでは、ウェブプレーヤーを(サーバーから)呼び出して、リクエストされたメディアを表示します。

手順2.1: サンプルウェブプレーヤーをセットアップする

ウェブプレーヤーは、統合プロセスの後半(手順5: ウェブプレーヤーを作成する)で作成します。ここでは、サンプルのウェブプレーヤープロジェクトをダウンロードして作業を進め、Lambdaに送信されるAlexaディレクティブを確認します。サンプルウェブプレーヤーでは、ビデオコンテンツの開始、基本的な再生制御、Alexa Video JavaScriptライブラリとの連携を行うことができます。

次のボタンをクリックすると、サンプルウェブプレーヤーをダウンロードできます。

サンプルウェブプレーヤーをセットアップするには、次の手順を実行します。

  1. sample_web_player.zipをダウンロードし、展開します。
  2. Node.jsnpmがシステムにインストールされていない場合は、インストールします。
  3. コマンドラインで、サンプルウェブプレーヤーのディレクトリに移動します。
  4. 次のコマンドを実行します。

    npm install -g gulp http-server
    
  5. さらに次のコマンドを実行します。

    npm install
    gulp
    
  6. ウェブプレーヤーをウェブサーバーにアップロードします。

    このサンプルのセットアップでは、ウェブプレーヤーのURLとしてhttps://devportal-reference-docs.s3-us-west-1.amazonaws.com/video-skills-kit/sample-web-player/sample_web_player/index.htmlを使用することもできます。このURLでは、静的ウェブサイトとして構成された、S3バケット内のデフォルトのウェブプレーヤーコードを指定しているだけです。

    必要に応じて、手順1の手順1.4: ビデオスキルのセットアップを完了させるでビデオスキルの構成時に指定したウェブプレーヤーのURIを更新してください。

手順2.2: マルチモーダルデバイスでビデオスキルを有効にする

ビデオスキルとLambda関数のセットアップが完了したので、今度はスキルのテストを実行して、AlexaからLambda関数に送信されるディレクティブを確認します。このテストには、Echo Showなど、実際のマルチモーダルデバイスが必要になります。

手順2.3: Alexaデバイスでスキルを有効にする

Alexa搭載デバイスでスキルをテストするには、次の手順を実行します。

  1. ビデオスキルの作成に使用した開発者アカウントを使用して、マルチモーダルデバイスをセットアップして登録します。次の点に注意してください。

    • 使用するデバイスが既に別のユーザーに登録されている場合は、工場出荷時の設定にリセットしてから開発者アカウントを登録します(amazon.comでデバイスの登録を解除する方法については、端末の登録を解除するを参照してください)。
    • デバイスのセットアップを完了するには、Alexaスマートフォンアプリが必要になります。このアプリをまだインストールしていない場合は、ダウンロードして開発者アカウントでログインしてください。
    • 開発者アカウントを使用してマルチモーダルデバイス(Echo Showなど)をセットアップします。詳細については、Echo Showをセットアップするを参照してください。
    • AlexaスマートフォンアプリとEcho Showデバイスの両方が、同じWi-Fiネットワークに接続していることを確認してください。
  2. スマートフォンでAlexaスマートフォンアプリを開き、同じ開発者アカウントでログインします。
  3. 下部のナビゲーションバーの [デバイス] Alexaアプリのデバイスボタンをタップし、[すべてのデバイス] を選択します。アプリ画面にEchoデバイスが表示されていることを確認します。

    Alexaスマートフォンアプリに登録しているデバイスのリスト
    Alexaスマートフォンアプリに登録しているデバイスのリスト

    スマートフォンアプリでは少し時間がかかる場合があります。ボタンをタップしてもすぐにアプリの応答がない場合は、しばらく待ってください。この時間がかかる問題は、今後のリリースで解消される予定です。

  4. アプリのホーム画面のメニューボタン(左上隅)Alexaアプリのメニューボタン > [設定] > [TV・ビデオ] の順にタップします。リストを下にスクロールし、下部に「有効」と表示されているスキルを探します。「有効」と表示されているスキルがあればクリックし、[スキルを無効にする] をクリックして、TV・ビデオのスキルをすべて無効にします(無効にしない場合、テストの際にほかのスキルの干渉を受ける可能性があります)。

    ビデオスキルを無効にする
    ビデオスキルを無効にする

    次に、上部の戻る矢印をクリックして、[TV・ビデオ] のスキルリストに戻ります。

  5. リストを下にスクロールして、前の手順で作成したビデオスキルを探します。これは一番下に表示されます。スキルの横にあるプラス記号ボタンをクリックします。

    Alexaアプリのビデオスキル
  6. スキルをクリックして詳細が表示されたら、[Alexaデバイスをリンク] をクリックします。

    ブラウザで新しいページが開き、スキルがリンクされたことが示されます。

    スキルが正常にリンクされた状態
    スキルが正常にリンクされた状態
  7. アプリの左上隅にある [X] をクリックして、通知ウィンドウを閉じます。このウィンドウを閉じると、デバイスにリンクされているスキルがAlexaアプリに表示されます。

    リンクされたデバイスのリスト
    リンクされたデバイスのリスト

    (必要に応じて [保存] をクリックします。ただし、これは必須ではありません。) 戻るボタンをタップして [TV・ビデオ] のスキルリストに戻ると、作成したスキルの下に「有効」と表示されます。

    有効になったスキル
    有効になったスキル。ここでは「Hawaii Echo」という名前のスキルが有効になっています。

    これでAlexaスマートフォンアプリでの設定は完了です。ホームボタンをクリックするか、アプリを閉じます。

手順2.4: スキルをテストする

  1. ビデオスキルとデバイスの関連付けができたら、マルチモーダルデバイスに向かって「アレクサ、ビデオホームに移動して」と言います。

    ビデオスキルのロゴ画像アセットが表示されます。

    ビデオホームに表示されるビデオスキルのロゴ
    ビデオホームに表示されるビデオスキルのロゴ
  2. ビデオスキルのロゴを指でタップします。これにより、AlexaのGetDisplayableItemsディレクティブが実行され、ビデオスキルと関連付けられたカタログから閲覧可能なアイテムが取得されます。

    Alexaは、カタログから取得した結果を返します。たとえば「hawaii_us」というカタログ(クリエイティブコモンズのアセットを含むサンプルカタログ)を使用している場合、デバイスの表示は次のようになります。

    カタログから取得したサムネイル
    カタログから取得したサムネイル

    Alexaからは、このときLambdaにディレクティブが送信されています。このやり取りはCloudwatchで確認できます。

  3. マルチモーダルデバイスに向かって、「アレクサ、『ビッグバックバニー』を再生して」と言います。

    デバイスでビデオが再生されます。このコンテンツのURLは、サンプルLambda関数内でレスポンスのplaybackContextTokenにハードコードされています。

    Echo Showで再生される「ビッグバックバニー」
    Echo Showで再生される「ビッグバックバニー」

手順2.5: Cloudwatchに送信されたディレクティブを表示する

Alexa搭載デバイスに対して発話したフレーズは、処理を経てディレクティブに変換されます。ディレクティブはJSON形式の情報ブロックであり、AlexaからLambdaに送信され、処理されます。

AlexaからLambda関数に送信されたディレクティブはCloudwatchで確認できます。Cloudwatchは、Lambda(およびその他のサービス)のモニタリングデータと運用データをログ、指標、イベントの形で収集するAWSサービスです。Cloudwatchでは、Lambda関数がAlexaから受信したディレクティブとその他のログを、受信のたびに表示できます。

Lambda関数で受信したディレクティブをCloudwatchで表示するには、次の手順に従います。

  1. Cloudwatchにアクセスするには、次の2つの方法があります。

    • オプション1: AWSのLambda関数で、[モニタリング] タブをクリックします。次に、[Cloudwatchのログを表示] ボタンをクリックします。これで、表示していたLambda関数のログが表示されます。

      Lambda関数のCloudwatchログの表示
      Lambda関数のCloudwatchログの表示
    • オプション2: AWSの上部にあるナビゲーションで、[サービス] をクリックし、[Cloudwatch] を選択します。左側のサイドバーの [ログ] をクリックします。デフォルトでは、ログはLambda関数に基づいた名前で表示されます。目的のLambda関数を含むログを選択します。

  2. 最新のログストリームを選択します。

  3. 対話開始」というログメッセージを探します。ここから、AlexaからのリクエストとLambdaからのレスポンスを含むイベントのログが始まります。サンプルLambdaコードでは、イベントごとにこのメッセージが冒頭に出力されます。そのため、このメッセージは複数表示されます。

    Cloudwatchのログ
    Cloudwatchのログ
  4. Alexaのリクエスト: GetPlayableItems」を含むログメッセージを展開します。

    実際には、ここからGetDisplayableItemsディレクティブや別のGetPlayableItemsディレクティブを使用して、数回のやり取りが行われます。まず、ビデオスキルのロゴを押すと、AlexaからGetDisplayableItemsディレクティブが送信されます。ただし、ここではリクエストの対象となるメディアの指定はありません。Lambdaは、マルチモーダルデバイスに表示するアイテムを返します。このアイテムは、マルチモーダルデバイスに用意されている閲覧テンプレートで表示されます。

    次に「アレクサ、『ビッグバックバニー』を再生して」と言うと、AlexaからGetPlayableItemsディレクティブが送信されます。このリクエストに含まれるpayloadentitiesブロックに、ユーザーがリクエストしたビデオが指定されています(value: ビッグバックバニー)。valueがビッグバックバニーとなっているログをCloudwatchで探してみましょう。

    Alexaのディレクティブ: GetPlayableItems

    {
        "directive": {
            "profile": null,
            "payload": {
                "minResultLimit": 1,
                "entities": [
                    {
                        "externalIds": null,
                        "type": "MediaType",
                        "value": "MOVIE",
                        "entityMetadata": null,
                        "mergedGroupId": 0
                    },
                    {
                        "externalIds": {
                            "hawaii_us": "tt1254207"
                        },
                        "type": "Video",
                        "value": "ビッグバックバニー",
                        "entityMetadata": null,
                        "mergedGroupId": 1
                    }
                ],
                "timeWindow": null,
                "locale": "ja-JP",
                "contentType": null,
                "maxResultLimit": 40
            },
            "endpoint": {
                "cookie": {},
                "endpointId": "ALEXA_VOICE_SERVICE_EXTERNAL_MEDIA_PLAYER_VIDEO_PROVIDER",
                "scope": {
                    "token": "1bdaa2eb-4aa3-d0dc-fb10-7a5513981cf8",
                    "type": "BearerToken"
                }
            },
            "header": {
                "payloadVersion": "3",
                "messageId": "8dd96f67-9b5e-4db4-803b-2f6d71a4a62e",
                "namespace": "Alexa.VideoContentProvider",
                "name": "GetPlayableItems",
                "correlationToken": null
            }
        }
    }
    

    ユーザーが映画の再生をリクエストすると、Alexaではクイック再生のシナリオとして解釈され、まずGetPlayableItemsディレクティブが送信されます。このディレクティブのpayloadには、ユーザーがリクエストしているとAlexaが解釈した値("value": "ビッグバックバニー")が含まれます。

    通常は、この時点でLambdaコードで検索またはクエリなどを実行して、ユーザーが求めているメディアを特定します。Alexaでは、ユーザーの発話を解析して、処理が可能な構造化されたペイロードに変換する作業が完了しています。ユーザーの発話が「アベンジャーズ」のようにあいまいな場合は、ユーザーが求めているのはどのアベンジャーズの映画であるかを明確にする必要があります。ユーザーが「モーツァルト・イン・ザ・ジャングル」と言った場合は、どのシーズンのどのエピソードかを明確にする必要があります。

    Lambdaからは、ユーザーのリクエストに該当するカタログ内のすべてのタイトルを含んだGetPlayableItemsResponseレスポンスがAlexaに返されます(サンプルのLambdaでは、何らかのバックエンドサービスで動的にクエリを実行するのではなく、レスポンスが事前定義されています)。 「Lambaのレスポンス: GetPlayableItemsResponse」というログメッセージ(Alexaのリクエスト: GetPlayableItemsの下にあります)を展開して、リクエストされたメディアのmediaIdentifierを確認します。

    Lambdaのレスポンス: GetPlayableItemsResponse

    {
        "event": {
            "header": {
                "correlationToken": "dFMb0z+PgpgdDmluhJ1LddFvSqZ/jCc8ptlAKulUj90jSqg==",
                "messageId": "5f0a0546-caad-416f-a617-80cf083a05cd",
                "name": "GetPlayableItemsResponse",
                "namespace": "Alexa.VideoContentProvider",
                "payloadVersion": "3"
            },
            "payload": {
                "nextToken": "fvkjbr20dvjbkwOpqStr",
                "mediaItems": [
                    {
                        "mediaIdentifier": {
                            "id": "tt1254207"
                        }
                    }
                ]
            }
        }
    }
    

    この例ではmediaIdentifierは1つだけですが、該当する複数のタイトルが返される場合もあります。この時点で、Alexaからユーザーに、再生したいタイトルを確認する場合があります。

    Alexaでは、再生すべきメディアを確認した後、Lambdaに再度リクエストを送信します。このリクエストはGetPlayableItemsMetadataディレクティブです。このディレクティブでは、LambdaのGetPlayableItemsResponseで返されたメディアのメタデータを要求します(メタデータにはランタイム、ユーザーの再生状況、その他の外部メタデータが含まれます)。

    Alexaのディレクティブ: GetPlayableItemsMetadata

    {
    "directive": {
        "profile": null,
        "payload": {
            "locale": "ja-JP",
            "mediaIdentifier": {
                "id": "tt1254207"
            }
        },
        "endpoint": {
            "endpointId": "ALEXA_VOICE_SERVICE_EXTERNAL_MEDIA_PLAYER_VIDEO_PROVIDER",
            "cookie": {},
            "scope": {
                "token": "1bdaa2eb-4aa3-d0dc-fb10-7a5513981cf8",
                "type": "BearerToken"
            }
        },
        "header": {
            "payloadVersion": "3",
            "messageId": "3b4041f4-6114-4034-b295-e3afd2df8e19",
            "namespace": "Alexa.VideoContentProvider",
            "name": "GetPlayableItemsMetadata",
            "correlationToken": null
        }
      }
    }
    

    Lambdaでは検索を実行して対象のビデオのメタデータを収集し、GetPlayableItemsMetadataResponseで情報を返します。

    Lambdaのレスポンス: GetPlayableItemsMetadataResponse

    {
        "event": {
            "header": {
                "correlationToken": "dFMb0z+PgpgdDmluhJ1LddFvSqZ/jCc8ptlAKulUj90jSqg==",
                "messageId": "38ce5b22-eeff-40b8-a84f-979446f9b27e",
                "name": "GetPlayableItemsMetadataResponse",
                "namespace": "Alexa.VideoContentProvider",
                "payloadVersion": "3"
            },
            "payload": {
                "searchResults": [
                    {
                        "name": "ビッグバックバニー",
                        "contentType": "ON_DEMAND",
                        "series": {
                            "seasonNumber": "1",
                            "episodeNumber": "1",
                            "seriesName": "ブレンダー財団ビデオ",
                            "episodeName": "パイロット"
                        },
                        "playbackContextToken": "{\"streamUrl\": \"http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4\", \"title\": \"ビッグバックバニー\"}",
                        "parentalControl": {
                            "pinControl": "REQUIRED"
                        },
                        "absoluteViewingPositionMilliseconds": 1232340
                    }
                ]
            }
        }
    }
    

    ここでは、返されたplaybackContextTokenの値に注意してください。この値は、streamUrltitleの2つのパラメーターを持つオブジェクトであり、ビデオを再生するためのURLが含まれています。このplaybackContextTokenがマルチモーダルデバイスからウェブプレーヤーに送信され、ウェブプレーヤーでビデオの再生が開始されます。

    GetPlayableItemsGetPlayableItemsMetadataの2つの呼び出しがある理由

    ユーザーがリクエストしているコンテンツを取得するためにAlexaで2つの呼び出しが使用されるのはなぜか、疑問に思うかもしれません。たとえば、ファストフード店に客が入ってきて、カウンターで店員に「ハンバーガーを1つ」と言ったとします。 店員は客がハンバーガーを求めていることはわかりますが、そのレストランのメニューには複数のハンバーガーがあります。そこで店員は、「ハンバーガーにはいくつか種類がございます。デラックスハンバーガー、ベーシックハンバーガー、デイリースペシャルハンバーガーのどれになさいますか?」とたずねます。

    すると、客から「デラックスハンバーガー」が欲しいという回答が得られます。 店員はデラックスハンバーガーの情報(価格、具材、調味料など)を返し、注文を処理します。

    通常の会話では、リクエストとレスポンスのやり取りを繰り返すことで意図を明確にします。マルチモーダルデバイスと、発話でメディアをリクエストするユーザーの間でも、リクエストとレスポンスのやり取りを複数回行って、ユーザーが実際に求めているメディアを明確化するのは合理的な方法と言えます。

    ご覧のように、マルチモーダルデバイスでのやり取りは、Fire TV対応アプリとの統合の場合とは大きく異なります。Fire TV対応アプリとの統合では、Lambda関数から簡単な成功のメッセージをAlexaに送信するだけでした。これに対して、マルチモーダルデバイスの実装では、バックエンドサービスで適切な情報を取得した後、詳細情報を含むレスポンスをAlexaに返送します。そのため、リクエストとレスポンスのやり取りは複数回行われます。

次のステップ

Lambdaにイベントを送信する最初のワークフローについてある程度確認できたので、サンプルのLambdaコードで何が行われているかについて、さらに掘り下げていきましょう。手順3: AlexaディレクティブとLambdaのレスポンスを理解するに進みます。