Alexa Presentation Language(APL)に対応するようスキルを設定する



Alexa Presentation Language(APL)に対応するようスキルを設定する

スキルでAlexa Presentation Languageを使用するには、Alexa.Presentation.APLインターフェースのサポートを追加します。

Alexa.Presentation.APLインターフェースに対応するようスキルを設定する

APLのディレクティブとリクエスト(RenderDocumentExecuteCommandsUserEvent)を使用するには、スキルがAlexa.Presentation.APLインターフェースに対応している必要があります。このインターフェースを有効にすると、スキルに送信されたリクエストがAPLに対応するデバイスから送信されたかどうかを判断できます。

スキルを更新するには、開発者コンソールかASK CLIのいずれかを使用します。

開発者コンソールでAlexa.Presentation.APLを設定する

  1. 開発者コンソールを開き、設定するスキルの編集をクリックします。
  2. ビルド>インターフェースページに移動します。
  3. Alexa Presentation Languageオプションを有効にします。
  4. インターフェースを保存モデルをビルドの順にクリックして、対話モデルを再ビルドします。
  5. スキルコードで、APLディレクティブを返す前に、ユーザーのデバイスがAPLに対応しているかどうかを判断します。

ASK CLIまたはSMAPIを使用してAlexa.Presentation.APLを設定する

ASK CLIまたはSMAPIを使用して、スキルマニフェストmanifest.apis.custom.interfaces配列を更新し、ALEXA_PRESENTATION_APLオブジェクトを含めます。このオブジェクトには、次に示すようにsupportedViewports配列も含まれています。

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

{
  "type": "ALEXA_PRESENTATION_APL",
  "supportedViewports": [
    {
      "mode": "HUB",
      "shape": "ROUND",
      "minWidth": 480,
      "maxWidth": 480,
      "minHeight": 480,
      "maxHeight": 480
    },
    {
      "mode": "HUB",
      "shape": "RECTANGLE",
      "minWidth": 1024,
      "maxWidth": 1024,
      "minHeight": 600,
      "maxHeight": 600
    },
    {
      "mode": "HUB",
      "shape": "RECTANGLE",
      "minWidth": 1280,
      "maxWidth": 1280,
      "minHeight": 800,
      "maxHeight": 800
    },
    {
      "mode": "TV",
      "shape": "RECTANGLE",
      "minWidth": 960,
      "maxWidth": 960,
      "minHeight": 540,
      "maxHeight": 540
    }
  ]
}

サポートされているviewportsの詳細については、スキルがサポートするViewportプロファイルの選択を参照してください。

  1. 次のコマンドを実行して、スキルコンポーネントをダウンロードします。
     ask api get-skill -s amzn1.ask.skill.<skillId>
    

    get-skillサブコマンドを参照してください。

  2. スキルマニフェスト(skill.jsonとしてダウンロード)を編集し、上記のALEXA_PRESENTATION_APLオブジェクトをmanifest.apis.custom.interfaces配列に追加します。

  3. 次のコマンドを実行して、変更したスキルマニフェストをデプロイします。
     ask api update-skill -s amzn1.ask.skill.<skillId> -f skill.json
    

    update-skillサブコマンドを参照してください。

  4. 更新が正しくデプロイされたことを確認するために、手順1を繰り返してスキルマニフェストをダウンロードします。エディターでskill.jsonファイルを開き、インターフェースオブジェクトにALEXA_PRESENTATION_APLオブジェクトが含まれていることを確認します。

  5. スキルコードで、APLディレクティブを返す前に、ユーザーのデバイスがAPLに対応しているかどうかを判断します。

ASK CLIの使用について詳細は、クイックスタート:Alexa Skills Kitコマンドラインインターフェースを参照してください。

ユーザーのデバイスがAPLに対応していることを確認する

スキルコードがAlexa.Presentation.APLディレクティブを送信する前に、ユーザーのデバイスがAlexa.Presentation.APLインターフェースに対応していることを確認してください。[Alexa.Presentation.APL]のすべてのリクエストに含まれるcontext.System.device.supportedInterfacesオブジェクトを確認します。

たとえば、次のLaunchRequestは、APLのバージョン1.1に対応するデバイスから送信されています(簡潔にするため、すべてのリクエストのプロパティは表示していません。スキーマ全文については、リクエスト本文の構文を参照してください。

{
  "version": "1.0",
  "session": {},
  "context": {
    "System": {
      "device": {
        "deviceId": "amzn1.ask.device.1",
        "supportedInterfaces": {
          "AudioPlayer": {},
          "Alexa.Presentation.APL": {
            "runtime": {
              "maxVersion": "1.1"
            }
          }
        }
      },
      "apiEndpoint": "https://api-amazonalexa.amazon.com",
      "apiAccessToken": ""
    },
    "Viewport": {}
  },
  "request": {
    "type": "LaunchRequest",
    "requestId": "amzn1.echo-api.request.1",
    "timestamp": "2019-06-27T15:52:19Z",
    "locale": "ja-JP",
    "shouldLinkResultBeReturned": false
  }
}

コードでAPLのディレクティブとリクエストを使用する

スキルコードで、Alexa.Presentation.APLのディレクティブとリクエストを使用します。

  • RenderDocumentディレクティブを使用して、デバイスにコンテンツを表示します。
  • ExecuteCommandsディレクティブを使用して、ドキュメントに関連するコマンドをデバイスに送信します。
  • UserEventリクエストを使用して、デバイスから送信されたユーザーのイベント(ボタンを押すなど)を処理します。

全体的なスキルフローでAPLを使用する方法の概要については、APLとスキルフローを参照してください。

APLディレクティブについて説明しているシンプルなコードのサンプルについては、「ハローワールド」のAPLスキルを作成するを参照してください。

APLディレクティブをDisplayインターフェースと組み合わせないでください。

リソースのCross-Origin Resource Sharing(CORS)を設定する

HTTPSエンドポイントでホスティングされている外部リソース(画像など)をスキルが参照している場合、このエンドポイントが以下の要件を満たすことを確認してください。

  • エンドポイントで、Amazon認定の認証局が署名したSSL証明書を提供していること。これは、多くのコンテンツホスティングサービスで提供されています。たとえば、Amazon Simple Storage Service(Amazon S3)アマゾンウェブサービスが提供)などのサービスでファイルをホストできます。
  • エンドポイントで、画像のCross-Origin Resource Sharing(CORS)を許可していること。

CORSを有効にするには、リソースサーバーで、応答にAccess-Control-Allow-Originヘッダーを設定する必要があります。リソースをAlexaのみに制限するには、取得元として*.amazon.comのみをホワイトリストに登録します。

リソースがAmazon S3バケット内にある場合は、以下のCORSコンフィギュレーションを使用してバケットを設定します。

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
</CORSRule>
</CORSConfiguration>

S3およびCORSの詳細については、Cross-Origin Resource Sharing(CORS)の有効化を参照してください。