![[日本語Alexa] はじめてのAPL](https://devio2023-media.developers.io/wp-content/uploads/2018/12/alexa-eyecatch.jpg)
[日本語Alexa] はじめてのAPL
2019.07.07
この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。
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"
}
]
}
}
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"
]
}
}
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の利用方法で恐縮ですが、極力簡単に、最低限必要な作業のみを纏めてみました。
それほど、手間がかかるものでも無いので、面倒がらずに、積極的に対応していきたいと思います。
