あなたのAlexaダッシュボード
ログイン
ログイン

Alexa Presentation Language（APL）の概要



Alexa Presentation Language（APL）の概要

Alexa Presentation Language（APL）を使用すると、条件付きレイアウトとデータバインディングを使い、音声と視覚の両方のエクスペリエンスを備えたスキルを開発できます。画面付きのAlexa搭載デバイス向けスキルをDisplayテンプレートを使用して開発する方法は、APLに比べて機能が制限されます。APLでは、グラフィック、画像、スライドショーなどの多くの視覚要素を備えたマルチモーダルのスキルを開発したり、さまざまなデバイスの出力をカスタマイズしたりする、機能と柔軟性を持つことができます。また、ウェブページをHTML、CSS、JavaScriptで作成するのと同様の方法で、豊富な機能を持ち、応答性が高くインタラクティブな画面表示を備えたスキルを作成することができます。

APLとスキルのしくみを理解する

以下のプロセスは、スキル開発にAPLを含めると発生する一連のアクティビティについて順を追って説明しています。

  • APLドキュメントをJSON形式で作成します。スキルは、このAPLドキュメントをデータのコレクションと共にデバイスに送信します。APLドキュメントは、追加のAPLコンテンツのパッケージを読み込むことができます。APLコンテンツには、共通リソースプロパティの定義、コンポーネントの表示方法を制御するスタイル、パラメーター化されたコンポーネントレイアウト、1つの「メイン」開始レイアウトが含まれています。

  • mainTemplate開始レイアウトは、テキスト、グラフィック画像、スクロール領域、子コンポーネントが配置される数種類のレイアウトコンポーネントの組み合わせを含むプリミティブコンポーネントの階層にインフレートされます。プリミティブコンポーネントのプロパティはデータバインディングの式を使って設定します。これらの式は、APLドキュメントで参照されるデータソースとコンポーネント階層の構造を組み合わせます。

  • 最初の画面上の視覚階層の表示と、その後のユーザーによる視覚階層との対話によって、状態が変化し、イベントが生成されます。コンポーネントの状態が変化すると、コンポーネントに割り当てられたスタイルは、コンポーネントの外観を視覚的に変更します。コンポーネントに割り当てられたイベントハンドラーがイベントをキャプチャします。イベントハンドラーは、データバインディングを使用して動作を制御します。これらのイベントは次のような動作をします。

    • 視覚コンポーネント階層を変更します。
    • ユーザーが階層内でスクロールまたは移動できるようにします。
    • Alexaにテキストの読み上げ（TTS）やSSMLを発話させます。
    • コンポーネントのプロパティや状態を変更します。
    • メディア再生を制御します。
    • クラウドのスキルにメッセージを送信します。

  • イベントハンドラーがクラウドのスキルにメッセージを送信するか、ユーザーが発話を開始するときにAlexaに渡される情報には、コンポーネント階層のコンテキストが含まれています。そのコンテキストには、表示されるコンポーネントの位置、表示設定、種類が含まれています。スキル開発者は、コンポーネントにそれが音声対応であることや、チェックボックスのスクロールや切り替えなどすぐに使用できる機能があることを表示したりできます。Alexaはこのコンテキストを使用して、「アレクサ、3番目を選んで」などの発話を自動的に解決します。 Alexaがメッセージまたは音声のインテントを受信すると、スキルサービスは、表示された視覚階層で実行する1つ以上のコマンドを含む応答を返します。

APL機能を適用する

レイアウトやコンポーネントの作成および再利用、入れ子構造が可能です。レイアウトとデータバインディングが分離されており、標準的なソフトウェア開発手法に準拠しています。これにより堅牢なAlexaスキルを開発することができます。レイアウトは、使用対象のデバイスの画面のテーマ、形、サイズに合わせて子コンポーネントを適切にインフレートし配置するようデザインでき、またスキルの表示方法や動作を制御できます。APLはデータバインディングを利用して、インフレートされたコンポーネント階層に指定の画像、グラフィック、テキストを追加できます。APL開発ツールを使用すると、APLドキュメントが各種デバイスのさまざまなテーマやアクセシビリティに応じて、どのように表示されるかをすばやくプレビューできます。

APLの用語

一般的なAPL概念を示す用語一覧です。

  • ドキュメント： 読み込むAPLパッケージのリスト、リソースの定義、レイアウト、スタイル、画面に表示する初期レイアウトが含まれるJSONファイルのことです。スキルがAPLドキュメントをデバイスに送信します。

  • パッケージ： 名前とバージョンが一意であるファイル一式のことです。パッケージには通常、1つ以上のAPLドキュメント、ビットマップ画像、ベクター形式のグラフィックが含まれています。パッケージはデバイスにキャッシュされるため、再利用時は処理が高速になります。オーサリングツールに含まれる各サンプルには、含まれるドキュメントが1つだけのパッケージが1個あります。

  • レイアウト： 画面に描画されるコンポーネント階層を視覚化したものです。標準的なコンポーネントには、テキスト、ビットマップ画像、ベクター形式のグラフィック、スクロール領域、相互関係を持つ子コンポーネントを配置するコンポーネントが含まれます。レイアウトは条件に応じた展開をサポートします。レイアウト階層は、画像のサイズや形、または開発者定義のプロパティによって異なる場合があります。レイアウトには他のレイアウトを含めることができます。大きなレイアウトは個々のコンポーネントとレイアウトで構成されています（それらがレイアウトにインフレートされます）。レイアウトを使用すると、開発者が共通パターンをライブラリとして作成しやすくなります。

  • リソース： 画面にテキストや画像、レイアウトを描画するときに使用する定数のことです。たとえば、定数textSizeCaptionは画像のキャプションを描画するのに使用するフォントのサイズです。数値ではなく名前付き定数を使用すれば、各デバイスごとにリソース定義を渡すことができ、さまざまなデバイスでAPLドキュメントを再利用できます。

  • スタイル： 状態に応じて変化するリソースを集めたものです。たとえば、flatButtonスタイルは、あるタイプのボタンのサイズ、背景色、テキストの色、境界線の色、境界線の幅、角丸に対して「normal」、「pressed」、「focused」、「disabled」の各状態を定義します。スタイル設定が可能なプロパティは、すべてのAPLコンポーネントにリストとして含まれています。

  • コンポーネント： コンポーネントは、viewportに表示されるプリミティブな要素です。コンポーネントには、動作や表示に影響を与えるさまざまなプロパティがあります。

これらの要素を使用してマルチモーダルなAlexaスキルの操作性を向上させる方法については、Alexaデザインガイドを参照してください。

APLに対応するようスキルを更新する

SDK for Node.js v2.0を使用してスキルを開発していない場合は、APLサポートのスキルへの追加を参照してください。

SDK for Node.js v2.0を使用してスキルを開発済みの場合は、APLに対応するようスキルを更新を参照してください。

APLオーサリングのベストプラクティス

以下のベストプラクティスは、フロントエンドのデザインやプログラミングで見られるのと同様のものであり、拡張性や再利用性を促します。Alexaデザインガイドでは、効果的なスキルデザインのガイダンスを用意しています。

リソース

  • 絶対値ではなく名前付きリソースを使用します。たとえば、テキストの色を「黒」に設定する代わりに、「standardTextColor = black」のように適切な名前付きリソースを定義します。
  • リソースを使用して条件を定義します。

レイアウトとスタイル

  • 統一感を考慮してレイアウトを作成します。
  • 視覚デザインを論理的な部分に分けて、視覚デザインのそれぞれの部分に対してレイアウトを定義し、適切なパラメーターを指定します。
  • スタイルをコンパイルしてテーマを作成します。
  • 「%」ベースのサイズを使用しないようにします。このサイズは親Containerに対する割合で、指定したいサイズにならない場合がよくあります。ほとんどの場合、画面全体のサイズに対する割合（"${viewport.width * 0.05}"）を使うか、Flexboxのgrowおよびshrinkのプロパティを使用します。
  • レイアウトに効果的な分岐ロジックを利用します。たとえば、新しいカスタムMyHeaderレイアウトを定義し、それを横長画面、縦長画面、円形画面などに合わせる必要がある場合、この例のように、異なるレイアウトに表示を割り振る単純なロジックを使用します。
"MyHeader": {
  "parameters: ["title", "subtitle"],
  "item": [
    {
      "when": "${viewport.shape == 'round'}",
      "type": "MyRoundHeader"
    },
    {
      "when": "${viewport.width > viewport.height}",
      "type": "MyLandscapeHeader"
    },
    {
      "when": true,
      "type": "MyPortraitHeader"
    }
  ]
},
"MyRoundHeader: {
  :
  :

テンプレート

  • データバインディング式を使ってテンプレートに動的にデータを展開します。
  • 複数のデバイス向けのテンプレートを構築します。
  • スキルの画面ごとにテンプレートファイルシステムを整理します。

APLドキュメントと情報の送受信

APLがAlexaサービスにデータを送信することでユーザー操作や視覚的コンテキストをサポートします。次にAlexaサービスが、APLに処理させるコマンドを送ります。

以下は、APLドキュメントが関与する典型的な情報の送受信です。

  • Alexaスキルから、APLドキュメントが関連メタデータと共にデバイスに送信されます。データはデバイスでの描画に使用されます。

  • AlexaスキルがExecuteCommandsディレクティブを、実行すべきコマンドのリストを含む現在のAPLドキュメントに送ります。

  • ユーザーがデバイスに話しかけるか、デバイスでアクション（画面のオプションにタッチするなど）を行うと、発話やイベントと共にコンテキストが送られます。

デバイスのEchoボタンなどのイベントハンドラーをスキルでサポートし、一連のコマンドを実行してデバイスに処理させることもできます。これらのうち1つ以上のコマンドを使用して、Alexaにメッセージを送り返すことができます。

リファレンス

関連トピック：