[日本語Alexa] はじめてのAPL

1 はじめに

CX事業本部の平内（SIN）です。

ちょっと今更感ありますが、Amazon AlexaでAlexa Presentation Language（APL）を使用する場合の手順を極力簡単にまとめてみました。

APLを利用するために、やらなければならない作業は、以下の5つです。

• インターフェース設定
• デバイスのサポート検出
• RenderDocumentを返す
• イベントを処理する
• リソースはCORSを有効にする(HTTPSでホスト場合のみ）

2 インターフェース設定

スキルビルダーの「インターフェース」から「Alexa Presentation Language」を有効にします。

3 デバイスのサポート検出

リクエストのsupportedInterfacesに、Alexa.Presentation.APLが含まれているかどうかを確認します。

{
    "session": {
        //...略....
    },
    "context": {
        "System": {
            "device": {
                "deviceId": "[DeviceId]",
                "supportedInterfaces": {
                    "AudioPlayer": {},
                    "Alexa.Presentation.APL": {
                        "runtime": {
                            "maxVersion": "1.0"
                        }
                    }
                }
            },
        }
    },
    "request": {
        //...略....
    }
}

Alexa SDKを利用しているなら、以下のようなコードでどうでしょう。

function isSupportsAPL(h: Alexa.HandlerInput): bool {
    const device = h.requestEnvelope.context.System.device!;
    if (device.supportedInterfaces["Alexa.Presentation.APL"]) {
        return true;
    }
    return false;
}

4 RenderDocumentを返す

responseBuilderでaddDirectiveを使用して、Alexa.Presentation.APL.RenderDocumentタイプのディレクティブを追加します。

const mainDocument = require('./apl/main.json')

return h.responseBuilder
    .speak(speech)
    .reprompt(speech)
    .addDirective({
        type: 'Alexa.Presentation.APL.RenderDocument',
        token: h.requestEnvelope.context.System.apiAccessToken,
        document: mainDocument,
        datasources: {}
    })
    .getResponse();

main.json

{
  "type": "APL",
  "version": "1.0",
  "import": [
    {
      "name": "alexa-layouts",
      "version": "1.0.0"
    }
  ],
  "mainTemplate": {
    "parameters": [
      "payload"
    ],
    "items": [
      {
        "type": "Text",
        "text": "Hello World"
      }
    ]
  }
}

参考:Node.jsスキルでのAPLの使用

5 イベントを処理する

APLのイベントのリクエストタイプは、Alexa.Presentation.APL.UserEventなので、これを処理するハンドラを準備する

const APLEventHandler = {
    canHandle(h: Alexa.HandlerInput) {
        if(h.requestEnvelope.request.type === 'Alexa.Presentation.APL.UserEvent') {
            return true;
        }
    },
    handle(h: Alexa.HandlerInput) {

リクエスの例

"request": {
        "type": "Alexa.Presentation.APL.UserEvent",
        "requestId": "[RequestId]",
        "timestamp": "2018-08-09T04:25:08Z",
        "locale": "ja-JP",
        "token": "[EventToken]",
        "event": {
            "source": {
                "type": "TouchWrapper",
                "handler": "onPress",
                "id": "myTouchWrapper",
                "value": null
            },
            "arguments": [
                "orderDrink"
            ]
        }
    }

APL UserEventスキルのリクエスト

6 CORSを有効にする

リソースをHTTPSサーバで提供する場合は、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>

7 最後に

既に、各所で纏められているAPLの利用方法で恐縮ですが、極力簡単に、最低限必要な作業のみを纏めてみました。

それほど、手間がかかるものでも無いので、面倒がらずに、積極的に対応していきたいと思います。