Alexa Presentation Language（APL）の概要



Alexa Presentation Language（APL）を使用すると、スキルに追加する視覚エクスペリエンスを作成できます。Echo Show、Fire TV、一部のFireタブレットなどのサポートされているデバイスで視覚要素を表示し、ユーザーはその視覚要素を使って操作や対話ができます。視覚エクスペリエンスには、アニメーション、グラフィック、画像、スライドショー、ビデオを含めることができます。

• APLとスキルフロー
• 異なる種類のデバイスでのAPLサポート
• スキルでAPLを使用するために作成するもの
  • ドキュメント
  • データソース、データバインディング、データバインディングの構文
  • コマンド
  • スキルのディレクティブとリクエスト
• 条件付きロジックとレスポンシブ対応ドキュメント
• スキルにAPLを実装する手順の概要
• 関連トピック

APLとスキルフロー

すべてのカスタムスキルは、リクエストと応答のインターフェースを使用します。Alexaは、Lambda関数またはWebサービスにリクエストを送信します。スキルがこのリクエストを処理し、応答を返します。APLは、以下のフレームワークで動作します。

• スキルは通常のLaunchRequestまたはIntentRequestを受け取って、ユーザーとの対話を開始します。
• スキルの応答では、APLコンテンツの表示とコマンドの実行をデバイスに指示するディレクティブを返すことができます。これらのディレクティブは、Alexa.Presentation.APLインターフェースで定義されます。ディレクティブのペイロードには、viewportにコンテンツを表示する方法を定義する構造体であるAPLドキュメントが含まれます。ペイロードには、表示する特定のデータを提供するデータソースも含まれます。これらの両方の概念の詳細については、スキルでAPLを使用するために作成するものを参照してください。

• スキルは、ユーザーのアクション（ユーザーが画面上のボタンを選択したときなど）によってトリガーされるリクエストをリッスンできます。これらのリクエストも、Alexa.Presentation.APLインターフェースで定義されます。スキルコードでハンドラーを作成して、これらのリクエストを受け入れて処理します。これは、インテント用に作成したハンドラーと同様です。

  注： APLドキュメントは、スキルにリクエストを送信せずに画面表示を変更するコマンドをトリガーすることもできます。たとえば、ビデオ再生やアニメーションを直接トリガーするボタンを、画面上に定義できます。この場合、Alexaはスキルにリクエストを送信して応答を待つ必要はありません。
• 他のスキルと同様に、ユーザーは通常のIntentRequestリクエストとしてスキルに送信される音声リクエストを行うことができます。優れたユーザーエクスペリエンスを実現するには、ユーザーが音声とタッチの両方でスキルと対話できるようにし、1つの入力モードのみの利用をユーザーに強制しないようにします。

たとえば、ユーザーはAPLスキルと次のような対話を行うことができます。

APLのディレクティブとリクエストがこの対話でどのように使用されているかを以下に示します。

異なる種類のデバイスでのAPLサポート

APLを使用すると、画面付きのデバイス（Echo Showなど）と、英数字の時計付きデバイス（Echo Dot with clockなど）の両方にコンテンツを表示できます。

• すべてのAPL機能を使用して、画面付きのデバイスにコンテンツを表示できます。APLは、ユーザーインタラクションと、画像、ビデオ、アニメーションなどのリッチコンテンツを完全にサポートします。
• 少ないAPLの構成で、Echo Dot with clockなどのキャラクターディスプレイ付きデバイスにコンテンツを表示できます。APLは、これらのディスプレイへの英数字データの表示をサポートしています。また、テキストのスクロールや、タイマーやカウントダウンの表示などのユニークな機能をサポートしています。Alexa Presentation Languageとキャラクターディスプレイの概要を参照してください。

APLの概念は、異なるデバイスでも共通しています。Amazonはこれらのデバイスカテゴリの両方をサポートすることをお勧めします。両方をサポートすることで、より多くのユーザーにリーチできます。

スキルでAPLを使用するために作成するもの

スキルでAPLを使用するには、APLドキュメント、データソース、コマンド、APLのディレクティブとリクエストを指定します。

以下のセクションでは、これらの主なAPLの概念と、スキルの作成プロセスで使用する方法について説明します。

• ドキュメント
• データソース、データバインディング、データバインディングの構文
• コマンド
• スキルのディレクティブとリクエスト

ドキュメント

APLドキュメントとは、viewportに表示するテンプレートを定義するJSON構造のことです。視覚要素による応答の全体的な構造とレイアウトを制御します。APLドキュメントでは、次のような複数の要素を組み合わせることができます。

• APLコンポーネントは、viewportに表示されるプリミティブなUI要素です。たとえば、シンプルなテキストボックスなどがあります。コンポーネントは、ドキュメントを構築する基本的な構成要素です。
• レイアウトは、コンポーネントを組み合わせたものです。再利用可能なテンプレートに統合し、名前を付けることができます。その後、その名前を参照することでドキュメントにレイアウトを配置できます。これにより、管理しやすくモジュール化されたデザインを作成できます。
• スタイルは、色やフォントサイズなど、視覚要素の一連の特性に名前を割り当てます。その後、スタイルをコンポーネントに割り当てることができます。スタイルを使用すると、一貫性のある視覚要素のデザインを作成できます。
• リソースは、名前付きの定数です。値をハードコーディングすることなく使用できます。たとえば、赤の特定の色調を定義するmyRedというリソースを作成して、コンポーネントの色を指定するときにそのリソース名を使用できます。
• パッケージは、上記のすべての要素をまとめて複数のAPLドキュメントで使用できるようにしたものです。このパッケージをドキュメントに読み込みます。

APLドキュメントは、シンプルにも複雑にもできます。たとえば、シンプルなドキュメントでは、Textコンポーネントのみを使ってプレーンテキストを表示するように設定できます。次のJSONでは、viewportの中央に「ハローワールド」というテキストが表示されます。

{
  "type": "APL",
  "version": "1.3",
  "description": "シンプルなハローワールドAPLドキュメント。",
  "settings": {},
  "theme": "dark",
  "import": [],
  "resources": [],
  "styles": {},
  "onMount": [],
  "graphics": {},
  "commands": {},
  "layouts": {},
  "mainTemplate": {
    "parameters": [
      "payload"
    ],
    "items": [
      {
        "type": "Text",
        "height": "100vh",
        "textAlign": "center",
        "textAlignVertical": "center",
        "text": "ハローワールド"
      }
    ]
  }
}

APLは、モジュール化したドキュメントの作成とその再利用を推奨するように設計されています。APL向けAlexaデザインシステムには、一連のレスポンシブ対応コンポーネントとレスポンシブ対応テンプレートが用意されています。これらは、APLのコンポーネント、スタイル、リソースをモジュール化したレスポンシブ対応レイアウトに統合したものです。これを使用することで、ドキュメントをより迅速に作成し、さまざまなviewportで機能させることができます。また、独自の再利用可能なレイアウトを作成し、それらをパッケージにまとめて複数のドキュメントで使用することもできます。

これらの概念の詳細については、以下を参照してください。

• APLドキュメント
• レスポンシブ対応のAPLドキュメントを作成する
• APL向けAlexaデザインシステム
• APLレイアウト
• APLスタイルの定義と評価
• APL Resources
• APLパッケージ
• コンポーネント

データソース、データバインディング、データバインディングの構文

APLはデータバインディングをサポートしています。これにより、ドキュメントは、指定した別のデータソースからデータを取得できます。データバインディングを使用すると、ソースデータからプレゼンテーションロジック（APLドキュメント）を分離できます。

先ほどの「ハローワールド」ドキュメントの例では、表示するテキストはドキュメントでハードコーディングされています。シンプルな例であれば、ハードコードされたテキストでも問題ありません。しかし、データを別のデータソースに配置し、ドキュメントからそのデータソースをポイントすることでメンテナンスを容易にできます。この場合、ドキュメントは次のようになります。

{
  "type": "APL",
  "version": "1.3",
  "description": "データソースを含むシンプルな「ハローワールド」のAPLドキュメント",
  "theme": "dark",
  "mainTemplate": {
    "parameters": [
      "helloworldData"
    ],
    "items": [
      {
        "type": "Text",
        "height": "100vh",
        "textAlign": "center",
        "textAlignVertical": "center",
        "text": "${helloworldData.properties.helloText}"
      }
    ]
  }
}

Textコンポーネントのtextプロパティの値には、ドル記号（$）と波括弧（{ }）で始まる式が含まれています。この構文は、データバインディングの式です。この例の${helloworldData.properties.helloText}の式は、表示するテキストをhelloworldDataというデータソースから取得するようドキュメントに指示しています。そして表示するテキストはhelloworldDataのproperties.helloTextプロパティにあります。

{
  "helloworldData": {
    "properties": {
      "helloText": "ハローワールド"
    }
  }
}

データソースとデータバインディングの詳細については、以下を参照してください。

• APLデータソースとトランスフォーマー
• APLデータバインディングの構文
• APLデータバインディングの評価

コマンド

次の両方を行うAPLコマンドを使用します。

• ランタイムで視覚エクスペリエンスを変更します。たとえばSetValueコマンドでは、コンポーネントのプロパティの値を変更できます。これにより、コンポーネントの外観や動作が変更されます。
• 対話中にスキルのLambda関数やウェブサービスと通信します。これを行うには、ドキュメントで SendEventコマンドを使用します。このコマンドは、スキルにUserEventリクエストを送信するようAlexaに指示します。コードは、IntentRequestなど他のタイプのリクエストを処理する場合と同様に、このリクエストを処理できます。APLに関連するスキルのリクエストと応答については、スキルのディレクティブとリクエストで詳しく説明します。

次の例は、buttonDescriptionTextというIDを持つコンポーネントのtextプロパティを変更するように設定されたSetValueコマンドを示しています。

{
  "type": "SetValue",
  "componentId": "buttonDescriptionText",
  "property": "text",
  "value": "「クリックして」ボタンを押しました"
}

APLコマンドを実行するには複数の方法があります。

• 一部のコンポーネントには、コマンドをトリガーできるイベントハンドラープロパティがあります。たとえばTouchWrapperコンポーネントには、ユーザーが画面上のコンポーネントを選択したときに実行するコマンドを指定するonPressプロパティがあります。同様に、AlexaButtonレスポンシブ対応コンポーネントには、ユーザーがボタンを選択したときに使用するコマンドを指定するprimaryActionプロパティがあります。
• APLドキュメント自体には、ドキュメントの読み込み時にコマンドを実行するonMountプロパティがあります。このプロパティは、ユーザーがスキルを起動したときに再生されるウェルカムアニメーションを作成するときに役立ちます。
• スキルディレクティブを使用してスキルコードからAPLコマンドを送信できます。これについては、スキルのディレクティブとリクエストで詳しく説明します。

たとえば、次のようにAlexaButtonでprimaryActionプロパティを使用して、前述のSetValueコマンドをトリガーできます。

{
  "type": "AlexaButton",
  "id": "clickMeButton",
  "primaryAction": {
    "type": "SetValue",
    "componentId": "buttonDescriptionText",
    "property": "text",
    "value": "「クリックして」ボタンを押しました"
  }
}

サンプルドキュメント： SetValueでテキストを変更する

{
  "type": "APL",
  "version": "1.3",
  "settings": {},
  "theme": "dark",
  "import": [
    {
      "name": "alexa-layouts",
      "version": "1.1.0"
    }
  ],
  "resources": [],
  "styles": {},
  "onMount": [],
  "graphics": {},
  "commands": {},
  "layouts": {},
  "mainTemplate": {
    "parameters": [
      "payload"
    ],
    "items": [
      {
        "type": "Container",
        "width": "100vw",
        "height": "100vh",
        "alignItems": "center",
        "items": [
          {
            "type": "AlexaButton",
            "id": "clickMeButton",
            "width": "75%",
            "alignSelf": "center",
            "buttonText": "クリックして",
            "paddingTop": "@spacingLarge",
            "paddingLeft": "@spacingLarge",
            "paddingRight": "@spacingLarge",
            "paddingBottom": "@spacingLarge",
            "primaryAction": {
              "type": "SetValue",
              "componentId": "buttonDescriptionText",
              "property": "text",
              "value": "「クリックして」ボタンを押しました"
            }
          },
          {
            "type": "Text",
            "id": "buttonDescriptionText",
            "textAlignVertical": "center",
            "paddingLeft": "@spacingSmall",
            "paddingRight": "@spacingSmall",
            "text": ""
          }
        ]
      }
    ]
  }
}

コマンドの詳細については、以下のトピックを参照してください。

• APLコマンドの概要
• APL標準コマンド
• APLメディアコマンド
• APLのユーザー定義コマンド

スキルのディレクティブとリクエスト

Lambda関数やウェブサービスでは、Alexa.Presentation.APLインターフェースで定義されたディレクティブとリクエストを使ってAPL関連の情報をやり取りします。

• Alexa.Presentation.APL.RenderDocumentディレクティブを送信して、APLコンテンツを表示するようにデバイスに指示します。ドキュメントと関連データソース（該当する場合）の両方をディレクティブの一部として含めます。
• Alexa.Presentation.APL.ExecuteCommandsディレクティブを送信して、デバイスにコマンドを送信します。通常、これらのコマンドは、ドキュメントの特定の部分を参照します。たとえばSpeakItemコマンドでは、特定のコンポーネント（Textコンポーネントなど）で定義されたテキストを読み上げるようにデバイスに指示します。
• ドキュメントでSendEventコマンドを使用すると、スキルにAlexa.Presentation.APL.UserEventリクエストが送信できます。リクエストは、ユーザーがボタンに触れたときなど、デバイス上で実行されるユーザーアクションをスキルに伝えます。コードには、これらのタイプのイベントを受け入れて処理するハンドラーを含める必要があります。

ディレクティブとリクエストを使用して、音声とタッチの両方で機能するユーザーインターフェースを作成します。たとえば前述のトリビアの対話例では、ユーザーが画面にタッチするか、カテゴリーを読み上げることでトリビアのカテゴリーを選択できるしくみを説明しました。このタスクを実現できるよう、画面に表示される各カテゴリーは、UserEventリクエストを送信するSendEventコマンドで設定されています。スキルの対話モデルには、「{category}カテゴリーを再生して」などの発話が指定されたChooseCategoryIntentインテントもあります。スキルコードにはAlexa.Presentation.APL.UserEventリクエストまたはChooseCategoryIntentのIntentRequestをリッスンするハンドラーがあり、そのカテゴリーを選択してゲームを開始することで応答します。

ディレクティブとリクエストの詳細については、次を参照してください。

• ASK SDK v2でのAlexa Presentation Languageの使用
• Alexa.Presentation.APLインターフェース
• カスタムスキルのJSONインターフェースのリファレンス

条件付きロジックとレスポンシブ対応ドキュメント

APLは、条件付きロジックに基づいて構築されています。viewportの特性やその他の要因に応じて、さまざまな方法でコンテンツを表示するAPLドキュメントを作成できます。たとえば、大きな画面では垂直方向の連続したスクロールリストを表示し、小さな画面では1つのページに各リスト項目を表示するリストを作成できます。

すべてのAPLコンポーネントとコマンドには、ブール値（true / false）を取るオプションのwhenプロパティがあります。この値は、デバイスがコンポーネントを表示するのか、それともコマンドを実行するのかを決定します。値を指定しない場合、whenプロパティのデフォルトはtrueです。

whenプロパティを使用するには、評価結果がtrueまたはfalseになるデータバインディングの式を記述します。たとえば次のステートメントでは、デバイスが小さく横長である場合に評価結果がtrueになります。

"when": "${@viewportProfile == @hubLandscapeSmall}"

前述のように、データバインディング式は常に${expression}の形式を取ります。上記の例のviewportProfileとhubLandscapeSmallの定数は、alexa-viewport-profilesパッケージの一部として提供されるリソースです。アットマーク（@）は、リソースを参照する標準的な構文です。

データバインディングの式を使用して、コンポーネントやコマンドにプロパティ値を条件付きで割り当てることもできます。たとえば、次の式では、小さい円形のデバイスの場合は文字列「center」を、その他の場合には文字列「left」を返します。

${@viewportProfile == @hubRoundSmall ? 'center' : 'left'}

この式を使用すると、whenを使用してコンポーネント全体の表示や非表示を切り替える代わりに、コンポーネントのプロパティ値を条件付きで設定できます。

条件付きロジックは、レスポンシブ対応のAPLドキュメントを作成する際の重要な要素です。レスポンシブ対応のAPLドキュメントは、viewportの特性に合わせて調整できます。ユーザーはさまざまな画面サイズ、形状、アスペクト比のデバイスでスキルを呼び出すことができるため、優れたユーザーエクスペリエンスを作り出すにはレスポンシブ対応のAPLドキュメントが不可欠です。詳細と推奨事項については、レスポンシブ対応のAPLドキュメントを作成するを参照してください。

APLの条件付きロジックの詳細については、以下のトピックを参照してください。

• APLデータバインディングの構文
• APLコンポーネントの条件付きインフレート
• レスポンシブ対応のAPLドキュメントを作成する

スキルにAPLを実装する手順の概要

次の手順は、カスタムスキルの作成方法を理解していることを前提としています。カスタムスキル全般については、カスタムスキルとはとカスタムスキルのビルド手順を参照してください。

1. 視覚要素のデザインを検討します。アイデアやガイダンスについては、AlexaデザインガイドのAPLセクションを参照してください。
2. APLドキュメントと付随するデータソースを作成します。
   • スキルフローの段階に応じて異なるコンテンツを表示できるように、複数のドキュメントを作成することもできます。前述のトリビアの対話例では、トリビアのスキルに3つのAPLドキュメントがありました。1つ目はウェルカムアニメーション、2つ目はトリビアのカテゴリーのリスト、3つ目は質問テキストを表示します。
   • 作成中のドキュメントをプレビューするには、開発者コンソールのAPLオーサリングツールを使用してください。
   • ユーザーが所有するさまざまなデバイスでコンテンツが適切に表示されるようにするには、ベストプラクティスを参考にしてください。
3. Alexa.Presentation.APLインターフェースに対応するようスキルを設定します。詳細については、APLをサポートするようスキルを設定するを参照してください。
4. スキルコードには、必要に応じてドキュメントを表示できるようにRenderDocumentディレクティブとExecuteCommandsディレクティブを送信するコードを追加します。ディレクティブの詳細については、以下のトピックを参照してください。
   • ASK SDK v2でのAlexa Presentation Languageの使用
   • APL RenderDocumentスキルディレクティブ
   • APL ExecuteCommandsディレクティブ
5. スキルコードで、UserEventリクエストのハンドラーを作成します。リクエストの詳細については、以下のトピックを参照してください。
   • UserEventリクエスト
   • Alexaから送信されたリクエストを処理する

6. シミュレーターと実際のデバイスでスキルをテストします。スキルがサポートする一連のviewportプロファイルを更新し、スキルをテストしてさまざまな種類のデバイスでコンテンツが適切に表示されることを確認します。

   シミュレーターを使用して、画面付きのデバイス（Echo Showなど）を含むさまざまなviewportでコンテンツがどのように表示されるかを確認できます。シミュレータには、Echo Dot with clockのようなキャラクターディスプレイ用のviewportは含まれていないため、キャラクターディスプレイでコンテンツをテストするには実際のデバイスを使用する必要があります。

7. スキルをテストして認定を申請します。

関連トピック

• Alexaデザインガイド
• ASK SDK v2でのAlexa Presentation Languageの使用
• APLドキュメント
• APL向けAlexaデザインシステム
• マルチモーダルなAlexaスキルの作り方