[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（小さなバージョンと大きなバージョンの２つ）を指定します。

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（２種類を指定しておくと、適切に利用される）

また、画像を配置するサーバでは、CORSの設定が必要です。下記は、S3で、CORSの設定を行っている様子です。

Alexaからアクセスされる、下記の２つのドメインを指定します。

<?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