할 일

Alexa 헬로 APL, Alexa 스킬의 화면에 대응
할 일은 만마이 기사.

APL 저작을 사용하여 디자인을 만드는 방법

APL을 사용하도록 설정

APL 문서를 사용하여 화면을 그립니다.

당에 대해 나타낸다.

전제

ASK CLI 환경 구축

환경

APL 제작 도구 문서
APL v1.6
소지 실제 기계 Echo show 5

APL이란?

APL 문서
Alexa Presentation Language
화면의 정보를 JSON으로 Alexa에 건네주려고 하는 것.

{
  "type": "APL",
  "version": "1.6",
  "mainTemplate": {
    "item": {
      "type": "Text",
      "text": "ハローワールド"
    }
  }
}

APL 문서

화면 정보 JSON
제작 도구를 사용하여 만드는 것이 쉽습니다.

APL 저작을 이용한 디자인을 만드는 방법

우선은 제작 도구 로 빈 화면을 만든다.




우선 Echo Show 5로 해 둔다

GUI > mainTemplate을 누르면 +버튼을 누를 수 있게 된다





+ 버튼을 누르면 AddComponent의 Dialog가 나온다.
Container를 선택하면 mainTemplate의 아이에게 Container를 할 수 있다

비슷한 순서로 Text를 추가하고 오른쪽의 정보보기처럼 텍스트를 입력합니다.

문자를 중간에 표시

Container > justifyContent = center
Text > textAlign = center

문자 데이터를 레이아웃 데이터에서 놓치기

text를 ${payload.hello.text}로 변경하고,
데이터에 다음과 같이 입력

템플릿 저장

alexa hosted skill에 묶어 저장할 수 있습니다
열 때는



멀티모달 > visual 입니다.

APL 문서 다운로드

템플릿을 저장 or APL을 그대로 복사하여 레이아웃 데이터를 가져옵니다.

저장할 파일명은 자유이지만 이번에는 다음과 같이 했다.

lambda > views > hello_apl.json

APL을 사용할 수 있도록 설정

Alexa Presentation Language(APL)에 대응하도록 스킬 설정

이것은 콘솔에서하는 것이 쉽습니다.



Alexa Presentation Language를 ON으로 설정하고 저장



다음에, 이 콘솔로 설정한 내용을 로컬의 프로젝트에 온다.

설정(manifest)은 skill-package > skill.json에 있다.

정책 : 콘솔 설정을 긍정적으로 로컬 skill.json을 덮어 씁니다.

덮어쓰기이므로 반드시 미리 커밋해 두는 것.

ASK CLI get-skill-manifest을 사용합니다.

$ ask smapi get-skill-manifest [--skill-id | -s <スキルID>]
                               [--stage | -g <ステージ>]
                               [--profile | -p <プロファイル>]
                               [--debug]

스킬 ID와 스테이지가 필수.
스킬 ID는 프로젝트 .ask > ask-states.json에 있습니다.

ask/ask-states.json

{
  "askcliStatesVersion": "2020-03-31",
  "profiles": {
    "default": {
      "skillId": "amzn1.ask.skill.hogehoge..."
    }
  }
}

처음 할 때는 시험에 커맨드 라인으로 쳐 보면 좋다고 생각한다.

커맨드 두드리고 코피페라도 할 수 있지만, 번거롭기 때문에 js 썼다.

update_manifest.js

const { execSync } = require('child_process')
const fs = require('fs');

const states = JSON.parse(fs.readFileSync('.ask/ask-states.json', 'utf8'));
const skillId = states.profiles.default.skillId;
const stdout = execSync(`ask smapi get-skill-manifest --skill-id ${skillId} --stage development`);
fs.writeFileSync('./skill-package/skill.json', stdout);

이것을 프로젝트의 루트에 배치하고

$ node update_manifest.js

으로 덮어쓸 수 있다.

APL 문서를 사용하여 화면을 그립니다.

요청 핸들러의 응답으로 RenderDocument를 반환합니다.

addDirective을 사용하여 표시합니다.

index.js

const Alexa = require('ask-sdk-core');
const hello_apl = require('./views/hello_apl.json'); // (1)　ファイルから読み込む

const LaunchRequestHandler = {
    canHandle(handlerInput) {
        return Alexa.getRequestType(handlerInput.requestEnvelope) === 'LaunchRequest';
    },
    handle(handlerInput) {
        const speakOutput = 'Welcome, もう寝る時間だね。';
        return handlerInput.responseBuilder
            .speak(speakOutput)
            .addDirective({ // (2) responseBuilderにaddDirectiveで追加する
                type: 'Alexa.Presentation.APL.RenderDocument',
                version: '1.6',
                document: hello_apl.document,
                datasources: hello_apl.datasources
            })
            .getResponse();
    }
};

최단이라고 이것으로 할 수 있다.
이번에는 document와 datasources를 같은 파일로 했지만, copipe를 편하게 하기 위해서 다른 파일로 해 두는 것이 좋다고 생각한다.