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

マルチモーダルデバイスにVSKを統合する方法

手順1：
ビデオスキルとLambda関数を作成する

→

手順2：
デバイスでビデオスキルを有効化してテストする

→

手順3：
ディレクティブとレスポンスを理解する

→

手順4：
ウェブプレーヤーと再生URLを理解する

→

手順5：
ウェブプレーヤーを作成する

→

手順6：
Alexaディレクティブに応答する

→

手順7：
アカウントリンクを実装する

→

手順8：
認定に向けたテストを行う

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

手順2.1：サンプルウェブプレーヤーをセットアップする
手順2.2：マルチモーダルデバイスでビデオスキルを有効にする
手順2.3： Alexaデバイスでスキルを有効にする
手順2.4：スキルをテストする
手順2.5： Cloudwatchに送信されたディレクティブを表示する
次のステップ

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

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

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

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

sample_web_player.zipをダウンロードし、展開します。
Node.jsとnpmがシステムにインストールされていない場合は、インストールします。
コマンドラインで、サンプルウェブプレーヤーのディレクトリに移動します。
次のコマンドを実行します。
```
npm install -g gulp http-server
```
さらに次のコマンドを実行します。
```
npm install
gulp
```
ウェブプレーヤーをウェブサーバーにアップロードします。

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

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

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

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

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

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

ビデオスキルの作成に使用した開発者アカウントを使用して、マルチモーダルデバイスをセットアップして登録します。次の点に注意してください。
- 使用するデバイスが既に別のユーザーに登録されている場合は、工場出荷時の設定にリセットしてから開発者アカウントを登録します（amazon.comでデバイスの登録を解除する方法については、端末の登録を解除するを参照してください）。
- デバイスのセットアップを完了するには、Alexaスマートフォンアプリが必要になります。このアプリをまだインストールしていない場合は、ダウンロードして開発者アカウントでログインしてください。
- 開発者アカウントを使用してマルチモーダルデバイス（Echo Showなど）をセットアップします。詳細については、Echo Showをセットアップするを参照してください。
- AlexaスマートフォンアプリとEcho Showデバイスの両方が、同じWi-Fiネットワークに接続していることを確認してください。
注：マルチモーダルデバイスのエンドユーザー向けドキュメントでは、このタイプのデバイスを「画面付きEchoデバイス」と呼んでいます。ただし、すべての画面付きEchoデバイスでビデオスキルがサポートされているわけではありません。たとえば、Echo Spotではサポートされていません。現在、Echo Showデバイス（第1世代、第2世代、Echo Show 5）では、全機種でビデオスキルがサポートされています。「マルチモーダルデバイス」とは、ビデオスキルがサポートされているEchoデバイスを指します。
スマートフォンでAlexaスマートフォンアプリを開き、同じ開発者アカウントでログインします。
下部のナビゲーションバーの [デバイス] をタップし、[すべてのデバイス] を選択します。アプリ画面にEchoデバイスが表示されていることを確認します。

ヒント： 「アレクサ、デバイスの名前を教えて」と話しかければ、Echoのデバイス名を確認できます。

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

スマートフォンアプリでは少し時間がかかる場合があります。ボタンをタップしてもすぐにアプリの応答がない場合は、しばらく待ってください。この時間がかかる問題は、今後のリリースで解消される予定です。
アプリのホーム画面のメニューボタン（左上隅） > [設定] > [TV・ビデオ] の順にタップします。リストを下にスクロールし、下部に「有効」と表示されているスキルを探します。「有効」と表示されているスキルがあればクリックし、[スキルを無効にする] をクリックして、TV・ビデオのスキルをすべて無効にします（無効にしない場合、テストの際にほかのスキルの干渉を受ける可能性があります）。

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

次に、上部の戻る矢印をクリックして、[TV・ビデオ] のスキルリストに戻ります。
リストを下にスクロールして、前の手順で作成したビデオスキルを探します。これは一番下に表示されます。スキルの横にあるプラス記号ボタンをクリックします。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

注：ビデオホームに移動して特定のビデオスキルをタップすると、リクエストを行った場合、そのスキル内でメディアの検索が行われます（デバイスの全ビデオスキルのカタログが検索されることはありません）。これが、Alexaからほかのカタログの結果が返されないようにするしくみです。
マルチモーダルデバイスに向かって、「アレクサ、『ビッグバックバニー』を再生して」と言います。

ヒント： 「ビッグバックバニー」は少しゆっくり発音するように心がけてください。早口では、「バッグスバニー」と認識されることがあります。

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

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

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

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

注：このドキュメントでは、AlexaからLambdaに送信されるこのようなディレクティブを、より一般的に「リクエスト」とも呼んでいます。リクエストにはディレクティブが含まれます。リクエストという言葉はより広い意味を持ち、リクエストとレスポンスで構成されるウェブAPIモデルの文脈で使用されます。

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

ヒント： ビデオスキルの構成では、Alexaから送信されるディレクティブと、Alexaで想定されているLambdaからのレスポンスを理解することが重要となります。

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

Cloudwatchにアクセスするには、次の2つの方法があります。
- オプション1： AWSのLambda関数で、[モニタリング] タブをクリックします。次に、[Cloudwatchのログを表示] ボタンをクリックします。これで、表示していたLambda関数のログが表示されます。
  
  Lambda関数のCloudwatchログの表示
- オプション2： AWSの上部にあるナビゲーションで、[サービス] をクリックし、[Cloudwatch] を選択します。左側のサイドバーの [ログ] をクリックします。デフォルトでは、ログはLambda関数に基づいた名前で表示されます。目的のLambda関数を含むログを選択します。
  
  注：目的のLambda関数が表示されない場合は、AWSリージョンが正しいかどうかを確認してください。
最新のログストリームを選択します。

ヒント： ストリームは、ログをグループ化したものです。Cloudwatchでは、一定の間隔で新しいログストリームが作成されます。そのため、最新のログが表示されない場合は、1つ前の画面に戻って、新しいログストリームが作成されているかどうかを確認してください。また、ログストリームは時系列の逆順に表示されることに注意してください。最新のログが一番上に表示されます。ただし、個々のログを開くと、ログの内容は時系列で表示されます。最も古いログメッセージが一番上に表示されます。
「対話開始」というログメッセージを探します。ここから、AlexaからのリクエストとLambdaからのレスポンスを含むイベントのログが始まります。サンプルLambdaコードでは、イベントごとにこのメッセージが冒頭に出力されます。そのため、このメッセージは複数表示されます。

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

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

次に「アレクサ、『ビッグバックバニー』を再生して」と言うと、AlexaからGetPlayableItemsディレクティブが送信されます。このリクエストに含まれるpayloadのentitiesブロックに、ユーザーがリクエストしたビデオが指定されています（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の値に注意してください。この値は、streamUrlとtitleの2つのパラメーターを持つオブジェクトであり、ビデオを再生するためのURLが含まれています。このplaybackContextTokenがマルチモーダルデバイスからウェブプレーヤーに送信され、ウェブプレーヤーでビデオの再生が開始されます。

注：このサンプルのLambdaでは、メディアを再生するためのコンテンツURLはplaybackContextTokenで直接指定されています。ただし、実際の実装では、メディアを再生するためのURLをここに含める必要はありません。何らかのメディア識別子を指定するだけで構いません。どのような識別子を送信しても、その識別子は（サーバーでホストされている）ウェブプレーヤーに送信されます。ウェブプレーヤーでは、その識別子を実際のメディア再生URLに変換するロジックを実装する必要があります。この方法を使用すると、メディア再生URLがAmazonに開示されません。ただし、このサンプルのLambdaコードでは、このような高度なロジック（識別子をメディア再生URLに変換するロジック）は実装されていません。また、必ずしもこの方法に従う必要はありません。playbackContextTokenおよびウェブプレーヤーの詳細については、手順4：ウェブプレーヤーでメディア再生URLを取得する方法を理解するを参照してください。

GetPlayableItemsとGetPlayableItemsMetadataの2つの呼び出しがある理由

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

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

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

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

次のステップ

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

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