Alexa Presentation Languageとキャラクターディスプレイの概要

Alexa Presentation Languageとキャラクターディスプレイの概要

キャラクターディスプレイ付きのAlexa搭載デバイス（Echo Dot with clockなど）は、英数字の表示機能を備えています。ユーザーがこのようなデバイスでスキルを呼び出すと、スキルはAlexa Presentation Language（APL）を使用して簡単なテキストメッセージを表示できます。この機能は、天気、トリビア、変換／計算結果など、手短な回答を出力するスキルで便利です。

キャラクターディスプレイの概要

キャラクターディスプレイにはいくつか種類があります。たとえば、Echo Dot with clockデバイスは、LEDの7セグメント英数字クロックディスプレイを備えています。英数字4文字を1行に表示できる（4x1）ほか、セグメント間の文字として時刻を表すためのコロン（:）を表示できます。

Echo Dot with clockが備えている4x1の7セグメントクロックディスプレイ
Echo Dot with clockが備えている4x1の7セグメントクロックディスプレイ

キャラクターディスプレイでは、表示できる文字が限られていることがあります。Echo Dot with clockの7セグメントディスプレイは、すべての数字と多くの文字を表示できます。7セグメントで表現できない「W」などの文字は、空白文字として扱われます。

4x1キャラクターディスプレイでは一度に4文字しか表示できませんが、APLはキャラクターディスプレイのマーキースクロールをサポートしており、5文字以上のテキストも表示できます。

セグメントではなくドットを用いるキャラクターディスプレイもあり、1行ではなく複数行を表示できます。

APLでのキャラクターディスプレイサポートの概要

画面用の開発を行う場合に適用される主なAPLの概念は、キャラクターディスプレイ用の開発を行う場合にも適用されます。

  • ユーザーがスキルを呼び出すと、AlexaはLambda関数またはウェブサービスにリクエストを送信します。スキルはリクエストを処理し、応答を返します。応答には、デバイスにコンテンツを表示するためのディレクティブを含めることができます。キャラクターディスプレイに制約があることから、この場合のコンテンツは簡単なテキストです（グラフィック、アニメーション、メディアは不可）。
  • コンテンツは、APLドキュメント形式でデバイスに送信します。APLドキュメントとは、表示するテンプレートを定義するJSON構造のことです。APLドキュメントは、デバイスに表示されるUI要素であるコンポーネントを使用して作成します。キャラクターディスプレイでは、テキストの配置および表示用として、ごく一部のコンポーネントがサポートされています。
  • データバインディングを使用すると、表示データをドキュメントに定義されているテンプレートとは別に指定できます。
  • APLコマンドを使用すると、Pagerを使用したページ分割や、ディスプレイに表示されるテキスト値の変更などのアクションをトリガーできます。
  • ドキュメントで条件ロジックを使用すると、ディスプレイの種類に応じて異なる情報を表示できます。たとえば、Echo Dot with clockのような7セグメントの4x1クロック表示の場合は、天気予報の表示を最高気温と最低気温だけに留める一方で、複数行対応のデバイスでは、今日と明日の気温を異なる行に表示することができます。

APLスキルのフローとその他の主なAPLの概念については、Alexa Presentation Language（APL）の概要を参照してください。

APLドキュメントをキャラクターディスプレイ付きデバイス用に作成する

キャラクターディスプレイには制約があることから、サポートされているAPLドキュメント形式は、画面付きデバイスで使用できるAPLドキュメント形式と比べて格段に小さくシンプルになっています。ドキュメントに指定されたテキストの表示と配置に使用できるコンポーネントの種類は限られています。

  • TextとTimeTextはテキストベースのコンテンツを表示します。TimeTextはキャラクターディスプレイに対してのみ使用できます。
  • Pagerを使用すると、次々に表示される複数の「ページ」を定義して、より多くの情報を提示することができます。
  • Containerは、複数のコンポーネントをグループ化して配置します。

再利用を目的として以下のことも可能です。

  • レイアウトを定義できます。レイアウトは、コンポーネントを統合し、パラメーターを受け付けます。
  • リソースを定義できます。リソースは名前付き定数で、値をハードコードする代わりとして使用できます。

APLドキュメントの概念のうち、パッケージ、スタイル、APL向けAlexaデザインシステムは、キャラクターディスプレイ用の開発には適用されません。また、キャラクターディスプレイでは、ユーザーによるタッチ入力がサポートされません。

基本的なドキュメントの例

このドキュメントは、Pagerコンポーネントを使用して2つの別個の文字列（「HELLO」とそれに続く「thIS IS APL」）を表示します。どちらの文字列も多くのディスプレイの幅より長いことから、overflowプロパティのmarqueeオプションで、テキストを1文字ずつスクロールするようデバイスに指示しています。onMountに定義されているAutoPageコマンドでは、ドキュメントの表示後にページを自動的に進めるよう指示しています。

テキストを定義する際には、該当デバイスでサポートされている文字を考慮してください。この例では、Echo Dot with clockのような7セグメントディスプレイでサポートされている文字を使用しています。

クリップボードにコピーされました。

{
  "version": "1.0",
  "type": "APLT",
  "mainTemplate": {
    "item": {
      "type": "Pager",
      "id": "myPager",
      "items": [
        {
          "type": "Text",
          "textAlign": "center",
          "overflow": "marquee",
          "text": "HELLO",
          "msPerCharacter": 500
        },
        {
          "type": "Text",
          "textAlign": "center",
          "overflow": "marquee",
          "text": "thIS IS APL",
          "msPerCharacter": 500
        }
      ]
    }
  },
  "onMount": {
    "type": "AutoPage",
    "componentId": "myPager",
    "delay": 3000,
    "count": 2,
    "duration": 200
  }
}

条件ロジックを使用するドキュメントの例

APLは条件ロジックを軸に構築されているので、デバイスに応じて異なるコンテンツを表示するAPLドキュメントを作成できます。キャラクターディスプレイにはさまざまなサイズが考えられますが、出力を工夫すると、使用できるスペースを最大限に活かせます。

たとえば、このドキュメントは、天気予報スキル向けのデータの表示例です。このドキュメントで定義されているReportという単一レイアウトは、データセットに応じたパラメーターを受け付けます。そして、条件ロジックを使用して、デバイスに応じて次のように表示を変えます。

  • 非常に小さいデバイスの場合は、気温の数字のみを表示します（「23」）。
  • Echo Dot with clockのような4x1デバイスの場合は、2ページのPager（「H 23」と「L 14」）を表示します。
  • それより大きいデバイスの場合は、3行を使って、今日、火曜日、水曜日のテキストを表示します。

APLに対応するようスキルを設定する

APLを使用してキャラクターディスプレイにコンテンツを表示するには、Alexa.Presentation.APLインターフェースサポートを追加する必要があります。このインターフェースは、Echo Showなどの画面付きデバイスでAPL用として使用するインターフェースと同じであることに注意してください。このインターフェースを有効にすると、スキルに送信されてきたリクエストの出どころがキャラクターディスプレイ付きデバイスかどうかを判断し、テキストを表示するためのディレクティブで応答できるようになります。

APLインターフェースの設定については、Alexa Presentation Language（APL）に対応するようスキルを設定するを参照してください。

コードでキャラクターディスプレイ対応をチェックする

キャラクターディスプレイにコンテンツを送信するためのディレクティブは、Alexa.Presentation.APLTインターフェースにあります。これはコンテンツの画面表示に使用するディレクティブ（Alexa.Presentation.APL）とは違います。スキルコードがAlexa.Presentation.APLTディレクティブを送信する前に、ユーザーのデバイスがAlexa.Presentation.APLTインターフェースに対応していることを確認してください。

すべてのリクエストについて、含まれているcontext.System.device.supportedInterfacesオブジェクトをチェックします。Alexa.Presentation.APLT対応デバイスからのリクエストのサンプルについては、ユーザーのデバイスがAPLに対応していることを確認するを参照してください。

応答でRenderDocumentディレクティブを送信する

コンテンツをデバイスに表示するには、応答にAlexa.Presentation.APLT.RenderDocumentディレクティブを含めます。

たとえば、この応答は前述の「Hello World / Welcome」Pagerドキュメントを送信します。

{
  "version": "1.0",
  "response": {
    "outputSpeech": {
      "type": "SSML",
      "ssml": "<speak>ハローワールド。 これでこちらからのご挨拶を画面でも見られるようになりました。</speak>"
    },
    "sessionAttributes": {},
    "directives": [
      {
        "type": "Alexa.Presentation.APLT.RenderDocument",
        "token": "helloworldToken",
        "document": {
          "version": "1.0",
          "type": "APLT",
          "mainTemplate": {
            "item": {
              "type": "Pager",
              "id": "myPager",
              "items": [
                {
                  "type": "Text",
                  "textAlign": "center",
                  "overflow": "marquee",
                  "text": "Hello World",
                  "msPerCharacter": 500
                },
                {
                  "type": "Text",
                  "textAlign": "center",
                  "overflow": "marquee",
                  "text": "Welcome",
                  "msPerCharacter": 500
                }
              ]
            }
          },
          "onMount": {
            "type": "AutoPage",
            "componentId": "myPager",
            "delay": 2000,
            "count": 2,
            "duration": 200
          }
        }
      }
    ]
  }
}
</code></pre></div></div>
このページは役に立ちましたか？