[Alexa] Skillの応答にカードを追加して、詳細情報を提供する
1 はじめに
カスタムスキルでは、音声のやりとりを説明するグラフィックなカードをレスポンスに含めることができます。
ホームカードは、スマートフォンや、WebブラウザでアクセスするAmazon Alexa App(以下、Alexa App)の「ホーム」で見ることができます。残念ながら、Echoや、Echo dotだけでは、これを見ることは出来ません。
Alexa Skill Kitで利用可能なホームカードの種類は以下のとおりです。
- Simple テキスト
- Standard テキストと画像
- LinkAccount アカウントリンクの誘導
なお、ここで触れているホームカードは、Echo Show表示用のテンプレートとは違います。(Echo Showでも、ホームカードは表示されます)
2 Simple
最も単純なホームカードは、テキストのみで構成されています。ホームカードの総文字数(タイトルとコンテンツを合わせたもの)は8000文字以内である必要があります。
Alexa SDK for nodejs を使用する場合、下記のように記述できます。
var cardTitle = 'Hello World Card'; var cardContent = 'This text will be displayed in the companion app card.'; this.emit(':tellWithCard', 'Hello World', cardTitle, cardContent);
生成されるレスポンスは、次のようになります。
"card": { "type": "Simple", "content": "This text will be displayed in the companion app card.", "title": "Hello World Card" },
そして、Web上のAlexa Appに表示されているようすです。
こちらは、iPhoneのAlexa Appで表示されたものです。
なお、Amazon開発者コンソールのTestを利用すると、Echo Show Response(Beta) というのがありますが、こちらでは、下記のように表示されています。Echo Show用のテンプレートを返さなかった場合、Echo Showの画面には、このように表示されるということでしょう。
3 Standard
テキストに画像を含んだホームカードの表示です。 先のタイトル及びコンテンツにプラスして、画像のURL(小さなバージョンと大きなバージョンの2つ)を指定します。
Alexa SDK for nodejs を使用する場合、下記のようになります。
var imageObj = { smallImageUrl: 'https://exsample.com/smallImage.png', largeImageUrl: 'https:/exsample.com/largeImage.png' }; var cardTitle = 'Hello World Card'; var cardContent = 'This text will be displayed in the companion app card.'; this.emit(':tellWithCard', 'Hello World', cardTitle, cardContent, imageObj);
生成されるレスポンスは、次のようになります。
"card": { "type": "Standard", "text": "This text will be displayed in the companion app card.", "title": "Hello World Card", "image": { "smallImageUrl": "https://exsample.com/smallImage.png", "largeImageUrl": "https://exsample.com/largeImage.png" }
表示の様子は、それぞれ下記のとおりです。
Web上のAlexa App
iPhoneのAlexa App
Amazon開発者コンソールのEcho Show Response(Beta)
Standard Typeで表示する画像は、下記の要件を満たす必要があります。
- 画像形式はJPG若しく、はPNG
- サイズは2MByte以下
- 推奨サイズは、小さな画面で 720 x 480 大画面用で 1200 x 800(2種類を指定しておくと、適切に利用される)
また、画像を配置するサーバでは、CORSの設定が必要です。下記は、S3で、CORSの設定を行っている様子です。
Alexaからアクセスされる、下記の2つのドメインを指定します。
<?xml version="1.0" encoding="UTF-8"?> <CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/"> <CORSRule> <AllowedOrigin>http://ask-ifr-download.s3.amazonaws.com</AllowedOrigin> <AllowedMethod>GET</AllowedMethod> </CORSRule> <CORSRule> <AllowedOrigin>https://ask-ifr-download.s3.amazonaws.com</AllowedOrigin> <AllowedMethod>GET</AllowedMethod> </CORSRule> </CORSConfiguration>
4 LinkAccount
いくつかのスキルでは、エンド・ユーザーの身元を別のシステムのユーザーと接続する機能が必要です。 これをAccount Linkingと呼んでいます。
Account Linkingを必要とするスキルは、まだ、ユーザーがこのリンクを確立していない場合、Alexaアプリを使用して、これを促す応答を返すことができます。この時、使用されるのが、LinkAccountタイプです。
Alexa SDK for nodejs を使用する場合、下記のようになります。
this.emit(':tellWithLinkAccountCard', 'Please go to your Alexa app and link your account.');
生成されるレスポンスは、次のようになります。
"card": { "type": "LinkAccount" }
表示の様子は、それぞれ下記のとおりです。
Web上のAlexa App
iPhoneのAlexa App
5 最後に
今回は、Alexaの応答に含めることができるホームカードについて見てみました。
音声の応答は、ユーザーが確実に聞き取れるようにする事が大前提のため、ある程度、簡潔である必要があります。そこで、音声では冗長となりそうな情報は、積極的に、このような視覚情報で提供するアプローチは、非常に重要だと思います。
6 参考リンク
Including a Card in Your Skill's Response
Best Practices for Skill Card Design