오늘 Amazon Echo Spot이 출시되어 도착하신 분도 계시지 않겠습니까?
나는 내일 도착할 것 같습니다 ....

그래서,
Amazon Echo Spot에서 '여자 신룡'을 시도했습니다.
수정,
Amazon Echo Spot의 도착을 기다릴 수 없었기 때문에 시뮬레이터에서 "이데요 신룡"을 시도했다.

그럼,
Display 인터페이스를 사용해 봅니다.

목표

치비「알렉사, ○○를 열고」
Alexa 「(피콘)」
치비「어서 신룡!!」
Alexa 「자, 소원을 말해, 어떤 소원도 하나만 이루자」

Alexa Skills Kit에서 Display 인터페이스를 활성화하는 방법

Alexa Skills Kit의 "인터페이스"에서 Display 인터페이스를 켭니다.



빌트인 인텐트가 이렇게 늘었지만. . .
이 모든 구현이 필요한 것일까. . .

Echo Show에서 사용할 수 있는 표준 내장 의도
상기를 보면, 일부 실장하지 않으면 안되는 것일까. . . ?

우선, 이번에는 무시합니다!

ask-sdk에서 Display 인터페이스를 사용하는 방법

const ShenronIntentHandler = {
  canHandle(handlerInput: Alexa.HandlerInput) {
    return handlerInput.requestEnvelope.request.type === 'IntentRequest'
      && handlerInput.requestEnvelope.request.intent.name === 'ShenronIntent';
  },
  handle(handlerInput: Alexa.HandlerInput) {
    return handlerInput.responseBuilder
      .speak('こんにちは')
      .reprompt('こんにちは')
      .getResponse();
  },
};

평소와 같이 쓰고 있습니다 ResponseBuilder 의 addRenderTemplateDirective() 를 사용합니다.

addRenderTemplateDirective() 를 파헤쳐 봅니다.

그러면 TypeScript의 형식 정의를 따라갑니다.

위의 GitHub에 대한 링크와 마찬가지로,
인수는 1개로 interfaces.display 라는 namespace 에 있는 Template 라고 하는 형태를 요구하고 있습니다.
Template의 정의는 다음과 같습니다.
Display.RenderTemplate 지시문에 정의할 수 있는 템플릿 개체를 설정할 수 있습니다.

export declare namespace interfaces.display {
  type Template = interfaces.display.ListTemplate2 | interfaces.display.ListTemplate1 | interfaces.display.BodyTemplate7 | interfaces.display.BodyTemplate6 | interfaces.display.BodyTemplate3 | interfaces.display.BodyTemplate2 | interfaces.display.BodyTemplate1;
}

각 템플릿 객체에 대한 자세한 내용은 여기을 참조하십시오.

템플릿을 파헤쳐보세요

이번에는 BodyTemplate7를 사용합니다.BodyTemplate7 로 등장하는 형 정의를 쫓아갑니다.

export declare namespace interfaces.display {
  interface BodyTemplate7 {
    'type': 'BodyTemplate7';
    'token'?: string;
    'backButton'?: interfaces.display.BackButtonBehavior;
    'title'?: string;
    'image'?: interfaces.display.Image;
    'backgroundImage'?: interfaces.display.Image;
  }
}

어딘가에 정의된 정보로 다음 두 가지가 등장했습니다.

interfaces.display.BackButtonBehavior

interfaces.display.Image

각 정의를 따라갑니다.

export declare namespace interfaces.display {
  type BackButtonBehavior = 'HIDDEN' | 'VISIBLE';

  interface Image {
    'contentDescription'?: string;
    'sources'?: Array<interfaces.display.ImageInstance>;
  }

  interface ImageInstance {
    'url': string;
    'size'?: interfaces.display.ImageSize;
    'widthPixels'?: number;
    'heightPixels'?: number;
  }

  type ImageSize = 'X_SMALL' | 'SMALL' | 'MEDIUM' | 'LARGE' | 'X_LARGE';
}

새로운 등장 인물로 ImageInstance와 ImageSize가 등장했지만 위와 같습니다.

핸들러 수정

그럼 , 형태 정의대로로 설정해 보겠습니다.
파라미터 필요 최소 설정

const ShenronIntentHandler = {
  canHandle(handlerInput: Alexa.HandlerInput) {
    return handlerInput.requestEnvelope.request.type === 'IntentRequest'
      && handlerInput.requestEnvelope.request.intent.name === 'ShenronIntent';
  },
  handle(handlerInput: Alexa.HandlerInput) {
    return handlerInput.responseBuilder
+     .addRenderTemplateDirective({
+       type: 'BodyTemplate7',
+       title: 'いでよ神龍',
+       image: {
+         sources: [
+           {
+             url: '${画像のURL}'
+           }
+         ]
+       }
+     })
      .speak('さあ願いを言え、どんな願いも1つだけ叶えてやろう')
      .reprompt('どうした、早く願いを言え')
      .getResponse();
  },
};

테스트

신룡이었어! !

※이미지는 Google 이미지 검색으로 걸린 것을 사용해 주셨습니다

요약

이번에는 BodyTemplate7를 사용했지만,BodyTemplate에는 여러 종류가 있으며 ListTemplate라는 것도 있습니다.
자세한 내용은 공식 디스플레이 인터페이스 및 템플릿 참조에 정중하게 설명되어 있습니다.