画面付きのAlexa搭載デバイスの表示と動作の仕様



画面付きのAlexa搭載デバイスの表示と動作の仕様

画面付きのAlexa搭載デバイスでは、デバイスのグラフィック要素で音声対話を補います。そのため、カスタムスキルには、標準の音声対話だけでなく対話型のタッチディスプレイを応答に含めることができます。たとえば、レシピスキルではスキル対話の適切な時点で材料や作り方の画像を表示できます。シティガイドスキルでは、リクエストされたアトラクションの写真やビデオを表示したり、ユーザーにガイド付きツアーを提供したりできます。

画面付きのAlexa搭載デバイス
画面付きのAlexa搭載デバイス

ディスプレイコンポーネントがユーザーエクスペリエンスを高めることはありますが、常に音声がAlexaとの対話で最優先される方法です。

AlexaアプリではAlexaの音声応答以上の追加情報をユーザーに提供するカードがサポートされますが、このアプリではユーザーが電話かコンピューターでAlexaアプリのカードを個別に表示させる必要があります。つまりカードは役に立ちますが、スキルの主要なワークフローになることはありません。画面付きのAlexa搭載デバイスでは、画面表示がスキルの主なワークフローの重要な要素になることがあります。

画面付きのAlexa搭載デバイス用のスキル開発により、音声、タッチ、テキスト、画像、ビデオを統合できます。

Node.js SDKとJava SDKを使用すると、簡単にAlexaスキルを作成できます。

画面付きデバイスの表示機能と対話機能

スキル開発者は、表示やナビゲーションに次の機能を利用することができます。

画面付きのAlexa搭載デバイスの表示の仕様

画面付きのAlexa搭載デバイスの表示の違い

この2つのデバイスでテンプレートがどのように画面表示されるかの比較については、Displayテンプレートの要素を参照してください。

すべての画面表示で同一のデザインにしてください。画面表示をデザインする際は、以下の特定の表示動作に留意してください。これらのデバイスを直接テストできない場合は、Alexaシミュレーターを使用してEcho ShowまたはEcho Spotをテストできます。

Echo Spotは他の画面付きのAlexa搭載デバイスと比べて画面が小さく形状も異なるため、以下のような特徴があります。

  • ヒントは、Echo Spotのテンプレートでは表示されません。ヒントがテンプレートの一部である場合、Echo Spotでは自動で非表示になります。
  • 横型のリスト(ListTemplate2)のリスト項目画像は、リストコンテンツが一番上になるように、背景内に表示されます。
  • 背景画像は、アスペクト比を維持したまま短辺(多くの場合高さ)が480ピクセルまで小さくなります。次に、使用できる表示領域の中央に画像が配置されます。つまり、背景画像の縁がトリミングされる場合があります。
  • ヘッダーテキストは2行までになり、そのあと楕円形に切り取られます。
  • BodyTemplate2やListTemplate2など、Echo Spotではヘッダーテキストを表示しないテンプレートもあります。詳細については、テンプレートの説明を参照してください。
  • Echo Spotは他の画面付きデバイスよりも画面サイズが小さいため、必然的にテキストの折り返しが多くなります。テキストの折り返しによって行の長さが思いどおりにならない場合がありますが、これは仕様です。デフォルトのフォントサイズを変更すると全デバイスに影響するため、フォントサイズは変更しないことをお勧めします。
  • Echo Spotには戻るボタンがありません。

Fire HD 8やFire HD 10を使用している場合、ユーザーがAlexaと対話する方法は2通りあります。デフォルトでは、Alexaアプリで表示されるものと同じカードの形式でコンテンツが画面に表示されますが、それ以外は画面のないデバイスと同じような対話になります。ユーザーはデバイスを、画面表示と動作をEcho Showと同じにするShow Modeに切り替えることができます。

グラフィック機能

Alexaデバイスの画面表示は、以下のグラフィック機能に対応しています。

  • Bodyテンプレート - テキストや画像の追加が可能なコンテンツを事前に定義された形式で表示します

  • Listテンプレート - コンテンツを事前に定義された形式で横型または縦型のリストとして表示します。

  • 画像 - ListテンプレートやBodyテンプレートで使用します

  • AudioPlayer - スキルがオーディオを再生するときに表示します

  • ビデオ - スキルがビデオを再生するときに表示します

  • タッチ 選択イベント - スキルをコード化してタッチをサポートしている場合、リスト項目とアクションリンクはタッチでアクティブ化できます

Alexaスキルは、Alexa搭載デバイスの画面の有無にかかわらず、常にカードをサポートします。Alexaアプリでカードが表示されるようにスキルがプログラムされており、画面テンプレートを使用するようにはプログラムされていない場合、画面付きのAlexa搭載デバイスの画面にカードが表示されます。スキルにカード表示もテンプレート表示もない場合は、スキル名とスキルアイコンが「中止する準備が整ったら、『アレクサ、終了して」と言ってみてください』というヒントテキストとともに画面に表示されます。

Alexaカスタムスキルとの対話の種類

Alexa用にデザインするカスタムスキルは、次の対話を考慮する必要があります。

  • 音声対話画面があっても、Alexaとの対話は音声をメインに考えます。写真閲覧スキルなどスキルを効果的に使用するのに画面が必要な場合、画面付きデバイスを使用していないユーザーに画面の要件を伝えるワークフローを作成します。ユーザーは次のアクションを話しかけることで画面表示を制御できます。

    • 上/下/左/右にスクロール

    • 前/次のページ

    • 次/前

  • Alexaアプリでの対話。カスタムスキルで、追加情報を伝えるカードがAlexaアプリに表示されるようにできます。画面付きデバイスでカスタムスキルを使用すると、応答にDisplayテンプレートを含んでいない場合でもこのカードが画面に表示されます。したがって、Displayテンプレートを含んでいないスキルは、画面付きのAlexa搭載デバイスにすべてのカードを表示します。応答にカードとDisplayテンプレートの両方が含まれる場合、Displayテンプレートが画面に表示されます。このDisplayテンプレートは、カードを含むかDisplayテンプレートが送信される次の応答まで、画面に表示されています。

  • 画面表示の対話。カスタムスキルがDisplayテンプレートを使用し、適切な対話でDisplayテンプレートが起動した場合、対応するテキストと画像が画面に表示されます。

  • 画面タッチによる対話。選択インテントでエンコードされた画面の項目をユーザーがタッチすると、選択された項目に対応するレシピが表示されるなど、スキルにプログラムされた特定のアクションが起動します。

Alexa搭載デバイスのオーディオ、ディスプレイ、ビデオ機能

Alexa搭載デバイスはAudioPlayerインターフェースをサポートし、オーディオファイルを再生します。

Echo ShowとEcho Spotは、コンテンツを画面に表示するDisplayインターフェースと、画面のビデオファイルを再生するVideoAppインターフェースをサポートしています。

Displayテンプレートを使って画面表示を出力する方法とタイミング

カスタムスキルを開発するときは、スキルがAlexaに送信する応答の形式を決定します。この応答は音声に限定することも、カードや画面表示を含むこともできます。応答に音声出力とカードを含めることができるのと同様に、使用するDisplayテンプレートがある場合は、JSON形式で記述された応答に含められます。Displayテンプレートとカードの両方が応答に含まれる場合は、Displayテンプレートが画面に出力されます。カードだけが含まれる場合は、カードが画面に出力されます。カードもテンプレートも指定されていない場合は、Bodyテンプレートが画面に出力され、スキル名とスキルアイコンが表示されます。DisplayテンプレートはAlexaコンパニオンアプリには出力されません。

一般にスキル開発者がユーザーエクスペリエンスを向上させたい場合は、Displayテンプレートを効果的に表示し、スキルユーザーにとって見やすくなるようにします。つまり、ユーザーからリクエストされた情報に応答する場合、Displayテンプレートだけを返す必要があります。ユーザーに詳しい情報を尋ねる質問などの他の応答には、通常Dislayテンプレートは含まれません。

カードデザインのベストプラクティスを参照してください。

Alexaスキルのマルチモーダル対話モデルを作成する

VUI(音声ユーザーインターフェース)をGUI(グラフィカルユーザーインターフェース)およびEcho ShowとEcho Spotのタッチ要素と組み合わせると、独自のユーザーエクスペリエンスが生まれます。さらに、GUIと組み合わせたVUIと、くつろげるリビング環境があれば、FireTV Cubeで独自のユーザーエクスペリエンスを提供できます。スキルをデザインするときには、これらの要素すべてがスキルユーザーに対してどう連動するかを考慮します。

「上へ」などのコマンドの効果が意味するものを考えるときには、スキルのフローが重要となります。たとえばレシピスキルで、ユーザーはレシピの前のステップや以前のレシピに戻るでしょうか? 同様に、ユーザーがファクトスキルで「上へ」と言った場合の動作はどんなものでしょうか。 スキル開発者は、スキルのサービスコードでこの動作を指定する必要があります。ユーザーがスキルとどう対話してほしいかを念頭にデザインしてください。

スキルが各種デバイスでどう機能するかを考慮する

Echo Spotなどの特定のデバイス用にスキルをデザインする場合、ユーザーが他のAlexaデバイスでも(画面やタッチ機能のあるなしにかかわらず)そのスキルを有効にしようとする可能性があることに留意してください。画面やタッチの機能を使わない方法でユーザーがそれらの機能を利用できるようにするのか、スキルやスキルの特定の機能は特定のデバイスでのみ対応していることをユーザーに通知するのかを決定します。たとえば、スキルでビデオを使えるようにするVideoAppインターフェースは、Amazon Echoなどの画面がないデバイスではサポートされていません。

画面付きのAlexa搭載デバイス用に既存スキルをアップグレードする

画面のないAlexa搭載デバイスで使用できる、認定済みのスキルがすでに作成されているとします。このスキルを修正して機能を追加し、Displayテンプレートやタッチ機能を利用できるようにすることができます。

画面付きのAlexa搭載デバイス用にスキルをアップグレードするには、以下の手順に従います。

  • スキルのワークフローを再考します。ユーザーが画面を使用してスキルと対話する場合、その方法は多種多様です。画面の有無にかかわらず、スキルが機能する方法を考えます。

  • Displayインターフェースのリファレンスの説明に従いDisplay.RenderTemplateインターフェースを有効にします。

  • スキルサービスのコードを修正して、新しくデザインしたワークフローを反映するとともに、画面付きのAlexa搭載デバイスを持っていないユーザーのエクスペリエンスも維持できるようにします。

  • 新しい機能が追加されたスキルをテストします。

  • 変更を公開します。