[Alexa] Skillの応答にカードを追加して、詳細情報を提供する

1 はじめに

カスタムスキルでは、音声のやりとりを説明するグラフィックなカードをレスポンスに含めることができます。

ホームカードは、スマートフォンや、WebブラウザでアクセスするAmazon Alexa App(以下、Alexa App)の「ホーム」で見ることができます。残念ながら、Echoや、Echo dotだけでは、これを見ることは出来ません。

001

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に表示されているようすです。

002

こちらは、iPhoneのAlexa Appで表示されたものです。

008

なお、Amazon開発者コンソールのTestを利用すると、Echo Show Response(Beta) というのがありますが、こちらでは、下記のように表示されています。Echo Show用のテンプレートを返さなかった場合、Echo Showの画面には、このように表示されるということでしょう。

003

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

010

iPhoneのAlexa App

007

Amazon開発者コンソールのEcho Show Response(Beta)

009

Standard Typeで表示する画像は、下記の要件を満たす必要があります。

  • 画像形式はJPG若しく、はPNG
  • サイズは2MByte以下
  • 推奨サイズは、小さな画面で 720 x 480 大画面用で 1200 x 800(2種類を指定しておくと、適切に利用される)

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

005

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

011

iPhoneのAlexa App

012

5 最後に

今回は、Alexaの応答に含めることができるホームカードについて見てみました。

音声の応答は、ユーザーが確実に聞き取れるようにする事が大前提のため、ある程度、簡潔である必要があります。そこで、音声では冗長となりそうな情報は、積極的に、このような視覚情報で提供するアプローチは、非常に重要だと思います。

6 参考リンク


Including a Card in Your Skill's Response
Best Practices for Skill Card Design