Echo Spot가 도착했기 때문에, 조속히 이전에 만든 버스의 시각표 스킬을 화면 표시에 대응시켜 보았습니다.

이전 기사:
Amazon Echo에게 버스 도착 시간을 알려주세요.
htps : // 코 m / 오사 9 / ms / e 2 c6318b7 e d736 a c6 f
위에서 만든 스킬을 기반으로 만듭니다.

샘플 코드:
htps : // 기주 b. 코 m / 오사 9 / 아 ぁ 부 s / t 레 / ぢ sp y

아마존 공식 문서:

전체 정보
htps : //로 ゔぇぺぺr. 아마존. 이 m/그럼/도 cs/쿠 s와 ms 꽉 ls/ぢspぁy-어서 r후세레-후렌센. HTML

Display 템플릿
htps : //로 ゔぇぺぺr. 아마존. 이 m/그럼/도 cs/쿠 s와 ms 꽉 ls/ぢspぁy-하고 mpぁ테-레훗렌세. HTML

화면 표시 방법

아래가 이전에 만든 메시지를 말하는 샘플입니다.

이전에 만든 예

response = {
    'version': '1.0',
    'response': {
        'outputSpeech': {
            'type': 'PlainText',
            'text': message, # しゃべらせたいメッセージ
        }
    }
}

화면 표시에도 대응시키고 싶은 경우는, 디렉티브에 Display.RenderTemplate를 추가합니다.

화면을 표시하는 예

   response = {
        'version': '1.0',
        'response': {
            'outputSpeech': {
                'type': 'PlainText',
                'text': speech_message,
            },
            'directives': [
                {
                    'type': 'Display.RenderTemplate',
                    'template': {
                        'type': 'BodyTemplate1',  # テンプレートの種類
                        'token': 'TimeTable1',  # 画面の名前(ページ遷移で使う)
                        'title': 'タイトル',  # タイトル
                        'backgroundImage': {  # 背景画像(省略可)
                            "contentDescription": "string",
                            "sources": [
                                {
                                    "url": IMAGE_URL,
                                }
                            ]
                        },
                        'textContent': {  # 本文
                            'primaryText': {
                                'type': 'RichText',
                                'text': '<font size="2">テスト</font>'
                            }
                        }
                    }
                }
            ]
        }
    }

여러가지 준비되어 있는 레이아웃 템플릿에 문서( 간단한 HTML )를 포함해 가는 형태로 만듭니다.
서식 파일에 대한 자세한 내용은 공식 문서이 잘 정렬되어 있습니다.

덧붙여서 템플릿은 BodyTemplate1~7과 ListTemplate1~2가 있습니다만,
Echo Spot의 경우는 Echo Show 등과 달리 화면이 작기 때문에 템플릿에 의한 표시의 차이는별로 없습니다.
BodyTemplate1이나 ListTemplate1, 2당을 메인으로 사용해 가는 느낌이 아닐까요.

스킬 만들기

스킬을 화면 표시에 대응

자세한 것은 샘플 코드 참조.

BodyTemplate1에 간단하게 제목, 배경 이미지, 텍스트를 포함시켰을 뿐입니다.
배경 이미지의 부분은 생략 가능하고, 생략시는 검정 배경이 됩니다.
덧붙여서 텍스트 컬러는 백색 고정이므로 밝은 배경 이미지의 경우는 명도를 떨어뜨리는 등의 전처리가 필요합니다.

배경 이미지는 Echo Spot의 경우 사각형(480x480) PNG 또는 JPG 이미지를 준비합니다.
https하에 두고 있을 필요가 있으므로, S3에 두고 공개하면 좋다.

Alexa 기술 개발자 콘솔에서 설정

Alexa 기술 개발자 콘솔의 인터페이스 설정에서 "Display 인터페이스"를 켜고 모델을 다시 빌드합니다.
빌트인 인텐트가 대량으로 증가하지만 이번에는 이용하지 않습니다.

시뮬레이터로 테스트해보기

실제로 만든 스킬을 개발 콘솔 시뮬레이터에서 테스트해 봅니다.
귀엽네요! (덧붙여서 배경 이미지는 공식 사이트에서 팩 온 것이므로 샘플 코드에 포함되어 있지 않습니다)

실제 기계로 테스트 해보십시오.

안전하게 표시되었습니다!
텍스트 표시가 시뮬레이터와 약간 어긋나는 것 같습니다.


표시와 동시에 배경 이미지를 얻는 것 같고 이미지가 무거우면 이미지 표시가 조금 지연됩니다.

요약

이번에는 Amazon Echo Spot에 화면 표시만 하는 스킬을 작성해 보았습니다.
익숙해지면 비교적 간단합니다.

역시 화면 있던 것이 좋네요!