キャラクターディスプレイを搭載したデバイスをサポートする

キャラクターディスプレイを搭載したデバイスをサポートする

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

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

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

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

キャラクターディスプレイでは、表示できる文字が限られていることがあります。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の概念については、スキルに視覚要素とオーディオを追加するを参照してください。

キャラクターディスプレイ付きデバイス向けの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インターフェースの設定については、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
          }
        }
      }
    ]
  }
}

このページは役に立ちましたか？

最終更新日: 2025 年 12 月 02 日