こんにちはSakaeです。 ついに日本でもAmazon Echo Spot（エコースポット）が発売され、早速対応画面対応スキルがいくつかリリースされています。弊社でも現在画面付きEcho Spotのスキル開発・検証を実施中ですので、Echo Spot登場により加わった画面系でどのような機能と制約があるのかをまとめてみました。

※米国ではEcho Showが発売されており、本来画面系の機能はEcho Show向けにリリースされたものでしたが、日本では現状Echo Spotのみの発売ですので、画面系＝Echo Spot向け機能という体で記述させていただいています。

Echo Spotの仕様について

そもそものEcho Spotの仕様をまとめてみます。

• 画面は480px x 480pxの正方形の2.5インチスクリーン
• その正方形を円形にトリミングした形状
• 音声操作だけでなく、タッチしての操作も可能
• 基本的にはテキスト、画像、動画の表示が可能
• デフォルト画面は時計が表示されていて、時々ニュースが表示される
• フロントカメラを搭載
• テレビ電話などの機能も今後対応予定(2018/08/10現在)

基本的には声だけじゃなくてタッチもできる、画面があるので表現の自由度が増した！というのが売りになります。

知人は目覚まし時計の代わりにこういうのが欲しかったと言っており、意外とデフォルトでスクリーンに表示されている時計が重要であることを知りました。

画面付きEchoデバイスのスキル開発の学び方・参照リファレンス

画面付きEcho向けの情報もどんどん増えてきていますが、まず参照すべきはAmazon公式のドキュメントが良いかと思います。公式ドキュメントはやっぱり硬い文章のものが多いですが、まずはざっとでも公式に目を通したうえで他のチュートリアル的な記事をみていくのが良いかと思います。（何よりマーケットリリース時にはAmazonの厳しい厳しい審査が入りますので、公式ドキュメントの制約が守られていないとリジェクトされます！）

まずはAmazonが発信する中でかなり柔らかく書いてくれている、Youtubeのスクリーンキャストとブログ記事を見て感覚を掴み、その後細かなリファレンスを参照していきましょう。

公式動画チュートリアルでざっくり理解する

第10回Alexa道場：Echo Spotに対応したスキルを作ろう

公式ブログのチュートリアルで実際動くものを作ってみる

日本語版 Echo Spot に対応したスキルの作り方 : Alexa Blogs

その他のリファレンスを読み込み、詳細な機能

画面付きのAlexaが使えるデバイスの表示と動作の仕様 | Custom Skills

画面付きEchoデバイス向けスキルデザインのベストプラクティス | Custom Skills

Displayインターフェースのリファレンス | Custom Skills

Displayテンプレートのリファレンス | Custom Skills

画面付きEcho用ディスプレイインターフェースの機能と制約拾い読み

上記のドキュメントを拾い読みしながら、画面付きEchoで動く、かつ、スキルリリース時のAmazon審査でリジェクトされないように機能と注意点を挙げていきたいと思います。

画面表示テンプレートに沿って画面デザインを行う

画面を使えると聞いて、まるでHTML/CSSを使うように自分の思いどおりの画面設計ができると思われているかたもいるかと思います。しかし残念ですが、現在の仕様では完全に自由に画面設計することはできません。

画面を設計する場合にはDisplayテンプレートという、事前にAlexa側で定義された画面設計の雛形に合わせる形で設計を行う必要があります。画面のこの部分に画像1が入り、この部分に見出しテキスト、その下には本文テキストが…。というように決まった定形フォーマットの中に、テキストや画像を流し込んでいくイメージです。

詳しいテンプレートの説明は画面表示に対応したスキル用のDisplayテンプレートを参照してください。各テンプレートにはテンプレート固有のJSONのフォーマットが存在し、そのJSONに表示させたいテキストと画像を指定して画面表示を行います。

例えば、最もベーシックな「BodyTemplate1」というテンプレートの場合、画面設計部分を以下のようなJSONで表現します。

{
  "type":"BodyTemplate1",
  "token": "string",
  "backButton": "VISIBLE"(default) | "HIDDEN",
  "backgroundImage": {
    "contentDescription": "some image",
    "sources": [
      {
        "url": "https://example.com/some/image.png",
        "size": null,
        "widthPixels": null,
        "heightPixels": null
      }
    ]
  }
  "title": "Did You Know?",
  "textContent": {
     "primaryText": {
      "text": "But in reality, mice prefer ...(略)",
      "type": "PlainText"
    },
    "secondaryText": null,
    "tertiaryText": null
  }
}

上記のJSONを表示させると以下のような画面がEcho Spot上に表示されます。

ディスプレイテンプレートの種類

ディスプレイテンプレートには大きく分けて、画像とテキストを組み合わせた標準的な表示フォーマットのBodyテンプレートと、複数の選択肢から選択を行うようなリストを列記するのに適したListテンプレートの2カテゴリに分けられ、2018/08/10現在では以下の7種類のテンプレートが用意されています。

具体的にどのテンプレートがどんな画面構成であるかは、Displayテンプレートのリファレンスを御覧ください。

ディスプレイインターフェース利用時の注意点

ディスプレイインターフェースを利用する際にいくつか注意点がありそうなので列記します。

表示テンプレートの使用に関するデザインガイドラインより

• Echo Spotの表示に最適化するためにEcho Showの表示が崩れたりするのはNG（審査でリジェクトされる可能性あり）
• テキストを縦書きのように見せるために1文字づつ改行させるような利用はNG
• テキストの見た目を操作するフォントサイズやマークアップは、推奨距離（デバイスから2メートル離れた距離）からでも判読できるようにする
• 背景画像を前景画像（メインコンテンツ）として使用してはいけない。画像をコンテンツとして見せる場合はBodyTemplate7を利用する。

また、画面付きEchoでリリース時に審査される、以下の項目にも注意する必要があります。

画面表示とナビゲーションより

• 音声命令を送ってから10秒以内に画面表示される必要がある。
• 画像が縦や横に引き伸ばされたり、不鮮明なのはNG
• 音声の内容に無関係な画像の表示はNG
• 画面のコンテンツに設定したアクション（リンクなど）はすべて音声でも操作できる必要がある

表示する画像についての仕様

画面付きEchoの最大の特徴は画像の表示にありますので、どのような画像フォーマット・ホスティング方法で画像を表示させるのかを確認しましょう。

Displayテンプレートごとの使用可能な画像サイズと書式

上記のドキュメントを見ると以下のような画像仕様が確認できます。

• 画像形式はjpegかpng。
• 画像の解像度・縦横比（アスペクト比）は利用するテンプレート規定の解像度、縦横比に合わせて縮小や変形・トリミングして表示される。
• 画像サイズは一回の応答に含まれる画像の合計サイズが3MB以下。例えば、1枚300KBの画像であれば10枚利用可能、1枚1.5MBの画像であれば2枚利用可能。
• 背景画像の場合、表示を最適にするため、
  • 余白は透過にする(その場合pngにする）
  • 見た目をムラ無く高品質にするためわずかにグラデーションをかける
  • 全面のテキストとコントラスト差をつけるため不透明度70%の黒いレイヤーを重ねる
• 画像はhttpsでホストされている必要があります。
• 画像のホスティング先はCORS（オリジン間リソース共有：Cross-Origin Resource Sharing)を許可している必要があります。

特に、画像の形式やサイズの指定や、httpsでホスティングされていることなどは見逃しそうな条件ですので注意したほうが良さそうです。

さいごに

ルーターでもこれまでヴォイスインターネット事業の中で多数のスキル制作をしてきました。これから画面付きデバイスが各プラットフォーム（Alexa ／ Googleアシスタント / Clova）で続々発売されていくと思われますので、この領域もすでに開発・検証を進めております。

画面付きのスキル開発のご要望があればぜひお問い合わせください！