APLドキュメントを作成および編集する


APLドキュメントを作成および編集する

Alexa Presentation Language(APL)ドキュメントとは、スキル応答のテンプレートを定義するJSON構造のことです。ドキュメントでは、視覚応答とオーディオ応答のいずれかを定義できます。

APLドキュメントを作成して管理するには、開発者コンソールを使用します。

APLドキュメントを作成する

開発者コンソールでは、視覚応答とオーディオ応答を作成できます。

  • 視覚応答にはAPLドキュメント形式を使用します。RenderDocumentディレクティブによってAlexaにドキュメントを送信すると、Alexaはそのコンテンツをデバイスに表示します。
  • オーディオ応答にはAPLAドキュメント形式を使用します。RenderDocumentディレクティブによってAlexaにドキュメントを送信すると、Alexaはそのドキュメントから生成したオーディオを再生します。

以下のセクションでは、開発者コンソールで視覚応答とオーディオ応答を作成する方法を説明します。

視覚応答を作成する

開発者コンソールには、APLで視覚応答を作成するための2つの異なるツールが用意されています。APLを初めて作成する場合は、マルチモーダル応答ビルダーを使用すると、3つの手順に従うだけで新しい応答を作成できます。APLに関する予備知識は必要ありません。APLについてよく理解している場合や、応答を完全にカスタマイズする場合は、代わりにオーサリングツールを使用します。

次の表は、これらの2つのツールの違いをまとめたものです。

マルチモーダル応答ビルダー オーサリングツール

APLとAlexaのベストプラクティスに基づく12個のテンプレートから1つを選択して開始します。

  • 最初から作成します。
  • 限定されたテンプレートのセットから開始します。
  • 既存のドキュメント、Lottieアニメーション、Scalable Vector Graphics(SVG)をアップロードします。

APLに関する予備知識なしで開始できます。

APLに関する知識が必要です。

テンプレートフィールドのサブセットで表示コンテンツを編集してテンプレートをカスタマイズします。テンプレートに基づいて、限定されたAPL機能にアクセスできます。

APLコンポーネントを使用してドキュメントを完全にカスタマイズできます。APLのすべての機能にアクセスできます。ドキュメントの作成を支援する組み込みのリンティング機能とコード補完機能を使用できます。

最初はマルチモーダル応答ビルダーを使用して、さらにカスタマイズが必要になった場合に、後でオーサリングツールに切り替えることもできます。

プリビルドテンプレートをカスタマイズして視覚応答を作成するには

  1. 開発者コンソールで、ドキュメントを作成するスキルを開きます。
  2. 左側のナビゲーションから、マルチモーダル応答をクリックします。
  3. 応答ビルダーで作成をクリックします。
  4. ページの指示に従って3つの手順を完了します。
    • テンプレートを選択します。テンプレートのセットには、レスポンシブ対応テンプレートやその他の視覚デザインが含まれています。
    • カスタマイズします。
    • プレビューとテストを行います。

オーサリングツールで新しい視覚応答を作成するには

  1. 開発者コンソールで、ドキュメントを作成するスキルを開きます。
  2. 左側のナビゲーションから、マルチモーダル応答をクリックします。
  3. オーサリングツールで作成をクリックします。
  4. ドキュメントの作成方法を選択します。
    • サンプルテンプレートから作成する場合は、レスポンシブ対応テンプレートAPLの機能を表示のいずれかのセクションでテンプレートを探し、使用するテンプレートをクリックします。テンプレートの詳細については、プリビルドテンプレートを使用するを参照してください。
    • 空のドキュメントから独自のドキュメントを作成するには、空のドキュメントをクリックします。
    • 既存のJSONドキュメントをインポートするには、アップロードをクリックします。アップロードするドキュメントの形式を設定する方法については、JSONファイルからAPLドキュメントをインポートするを参照してください。
    • 既存のLottieアニメーションをインポートするには、アップロードをクリックします。LottieアニメーションをAPLアニメーションに変換する方法の詳細については、Lottieアニメーションのインポートを参照してください。

    オーサリングツールで新しいドキュメントが開きます。

  5. ドキュメントを更新してプレビューします。以下を参照してください。
  6. 右上隅の保存保存アイコン)をクリックして、ドキュメントをスキルに保存します。プロンプトが表示されたら、ドキュメントの名前を入力します。

オーディオ応答を作成する

オーディオ応答では、一連のオーディオクリップを定義して配置します。テンプレートから新しいオーディオ応答を作成することも、最初から作成することもできます。

新しいオーディオ応答を作成するには

  1. 開発者コンソールで、応答を作成するスキルを開きます。
  2. 左側のナビゲーションから、マルチモーダル応答をクリックします。
  3. オーディオをクリックします。オーサリングツールに、スキルに保存されたオーディオ応答のAPLドキュメントの一覧が表示されます。

  4. オーディオ応答を作成をクリックします。
  5. ドキュメントの作成方法を選択します。
    • サンプルテンプレートから開始する場合は、テンプレートをクリックします。
    • 空のドキュメントから独自のドキュメントを作成するには、空のドキュメントをクリックします。
    • 既存のJSONドキュメントをインポートするには、アップロードをクリックし、インポートするファイルを選択します。
  6. ドキュメントを更新してプレビューします。以下を参照してください。
  7. 右上隅の保存保存アイコン)をクリックして、ドキュメントをスキルに保存します。プロンプトが表示されたら、ドキュメントの名前を入力します。

既存のドキュメントを管理する

開発者コンソールでは、既存のドキュメントの編集、削除、複製、ダウンロードを行うことができます。

既存のドキュメントを管理するには

  1. 開発者コンソールで、ドキュメントが保存されているスキルを開きます。
  2. 左側のナビゲーションから、マルチモーダル応答をクリックします。
  3. オーディオまたは視覚をクリックすると、既存のドキュメントの一覧が表示されます。
  4. ドキュメントの一覧から、目的のアクションのリンクをクリックします。
    • 編集 -(オーディオ応答)APL for Audioオーサリングツールでドキュメントを開きます。
    • 応答ビルダーで編集 -(視覚応答)マルチモーダル応答ビルダーでドキュメントを開きます。このオプションは、応答ビルダーで作成されたドキュメントで使用可能になります。
    • オーサリングツールで編集 -(視覚応答)視覚応答用のオーサリングツールでドキュメントを開きます。

    • スキルと統合 -(視覚応答)スキルコードにコピーできるコードスニペットを含むページを開きます。RenderDocumentディレクティブを使用してデバイスにAPLコンテンツを表示する方法を示すスニペットが提供されます。
    • 削除 - ドキュメントを削除します。
    • 複製 - 同じスキルにドキュメントのコピーを作成します。
    • ダウンロード - ドキュメント、データソース、ソースを含むJSONファイルをダウンロードします。このオプションはドキュメントの書き出しと同じです。詳細については、APLドキュメントのインポートと書き出しを参照してください。

プリビルドテンプレートを使用する

開発者コンソールには、応答のひな形として使用できるテンプレートのライブラリがあります。視覚応答を作成する場合は、マルチモーダル応答ビルダーまたはオーサリングツールでテンプレートにアクセスします。オーディオ応答を作成する場合は、オーサリングツールにテンプレートが用意されています。

マルチモーダル応答ビルダーのテンプレート

複数のテンプレートから選択し、シンプルなインターフェースでテンプレートをコンテンツに合わせてカスタマイズできます。

マルチモーダル応答ビルダーのテンプレートページ

オーサリングツールのテンプレート

オーサリングツールでは、テンプレートが次の2つのセクションに分かれて提供されます。

  • レスポンシブ対応テンプレート - 画面付きのさまざまなデバイスで見栄え良く表示される全画面のテンプレートです。たとえば、テキストリストテンプレートには、背景とヘッダーを含むテキスト項目のスクロールリストが配置されています。表示するコンテンツをデータソースに指定するだけで使用できます。
  • APLの機能を表示 - その他のデザインやAPLの可能性を表現する追加のテンプレートです。

各テンプレートでは、データソースを使用して、レイアウトに表示するコンテンツを提供します。テンプレートを選択したら、DATAをクリックしてデータソースを確認します。たとえば、テキストリストには背景画像とリスト項目が含まれます。JSONデータソースのコンテンツを変更して、テンプレートが別のコンテンツをどのように表示するかを確認できます。

オーサリングツールインターフェースの操作の詳細については、オーサリングツールで視覚応答を作成するを参照してください。

レスポンシブ対応テンプレートとAPLサンプルのライブラリ

オーディオ応答テンプレート

APL for Audioのオーサリングツールには、オーディオのミキシングなど、主な機能のデモを行うテンプレートが用意されています。

オーサリングツールインターフェースの操作の詳細については、オーディオ応答の作成を参照してください。

オーディオテンプレートのライブラリ

オーサリングツールで視覚応答を作成する

オーサリングツールでは、コア機能の領域が常に表示されます。

オーサリングツールのメインインターフェース
UI要素 説明

1

コードビュー/GUIビュー - ドキュメントのコンポーネントのグラフィカルビュードキュメントのJSONコードビューを切り替えます。GUIビューは、APLGRAPHICSセクションで表示できます。

2

左側のツールバー - APLドキュメントのセクションやデータソースを切り替えるボタンが表示されます。

3

上部のツールバー - ドキュメントのプレビュー、保存、書き出しを行うボタンが表示されます。

  • 体験をプレビューを使用すると、プレビューモードに切り替わり、ドキュメントの対話操作とコマンドをテストできます。このモードでは、Logコマンドで生成されたログメッセージを確認することもできます。
  • スキルと統合を使用すると、ドキュメントを表示するコードが生成されます。このコードをスキルにコピーできます。
  • 書き出しボタンを使用すると、ドキュメントをJSONファイルとしてダウンロードできます。

4

Viewportプロファイルツールバー - プレビューペインを異なるViewport間で切り替えるためのボタンです。Viewportは、まずデバイスタイプ(「デバイス」や「モバイル」など)で分類され、次にViewport(「デバイス、横長、中」など)で整理されます。ドロップダウンリストから特定のサンプルデバイスを選択します。詳細については、視覚応答のプレビューを参照してください。

5

サイズ範囲のドロップダウンリスト - サイズ範囲をサポートするViewportプロファイルでは、このリストに範囲内の一般的なデバイスのサイズが表示されます。

6

ドキュメントのプレビューペイン - さまざまなViewportでドキュメントがどのように表示されるかを大まかに確認できます。通常のオーサリングモードでは、プレビューペインをクリックしてコンポーネントを選択できます。コンポーネントをドラッグしてデザインを変更することもできます。タッチイベントやコマンドをテストするには、プレビューモードに切り替えます。詳細については、視覚応答のプレビューを参照してください。

7

コンポーネントパレット - すべてのコアAPLコンポーネントが表示されます。このパレットからプレビューペインに表示されているディスプレイにコンポーネントをドラッグして、ドキュメントを構築できます。

8

表示先 - Amazon開発者アカウントに関連付けられているデバイスにドキュメントをプッシュするためのメニューです。ドロップダウンリストからデバイスを選択し、送信をクリックすると、物理デバイス上でドキュメントを確認できます。

ツールバーボタン

次の表は、左側のツールバーのオプションをまとめたものです。

ツールバーボタン 説明

APLツールバーボタン

APL - APLドキュメント全体をコードビューまたはGUIビューで表示します。完全なJSON構文については、APLドキュメントを参照してください。

DATAツールバーボタン

DATA - データソースのJSONコードを表示します。データソースの完全な構文については、APLデータソースを参照してください。

SOURCESツールバーボタン

SOURCES - ドキュメントでaplAudioToSpeechトランスフォーマーをテストするために必要なsourcesのJSONコードを表示します。APL for Audioトランスフォーマーをテストするを参照してください。

STYLESツールバーボタン

STYLES - ドキュメントのstylesプロパティのJSONコードを表示します。APLスタイルの定義と評価を参照してください。

DOCUMENTツールバーボタン

DOCUMENT - importプロパティのJSONコードと、その他のトップレベルのドキュメントプロパティを表示します。

RESOURCESツールバーボタン

RESOURCES - resources配列のJSONコードを表示します。APLリソースを参照してください。

GRAPHICSツールバーボタン

GRAPHICS - ドキュメントのgraphicsプロパティで定義されるAlexa Vector Graphicsのコレクションを表示します。グラフィックをJSONコードビューまたはGUIビューで表示して編集できます。

SETTINGSツールバーボタン

SETTINGS - settingsプロパティのJSONコードを表示します。このコードには、ドキュメント全体の設定を定義する一連のキーと値のペアを含めることができます。

COMMANDSツールバーボタン

COMMANDS - commandsプロパティのJSONコードを表示します。このコードには、ドキュメント内で使用可能な一連のユーザー定義コマンドを含めることができます。

ONMOUNTツールバーボタン

ONMOUNT - onMountプロパティのJSONコードを表示します。このコードには、ドキュメントが最初に画面に表示されたときに実行するコマンドの配列を含めることができます。

レイアウトペインでドキュメントを編集する(GUIビュー)

GUIビューオプションではレイアウトペインが表示されます。ここには、コンポーネント、レイアウト、グラフィックが階層表示されます。APLドキュメントの場合、このペインには、最初にmainTemplateが表示され、次にlayoutsプロパティで定義したカスタムレイアウトが表示されます。レイアウトペイン内でコンポーネントをドラッグして、階層の配置を変更することもできます。

ペインでコンポーネントまたはレイアウトを選択すると、プレビューペインで対応する部分がハイライト表示されます。

オーサリングツールのレイアウトペイン
UI要素 説明

1

レイアウト - ドキュメント内のすべてのコンポーネントが階層ビューで表示されます。コンポーネントを選択してコンポーネントを追加ボタンをクリックすると、ドキュメントにコンポーネントを追加できます。

2

コンポーネントのプロパティフォーム - 選択したコンポーネントまたはレイアウトのプロパティを入力できます。

GRAPHICSセクションでは、レイアウトペインにgraphicsプロパティで定義した各ベクターグラフィックのサムネイルが表示されます。グラフィックを選択して、そのプロパティを編集できます。

mainTemplateまたはカスタムレイアウトにコンポーネントを追加するには

  1. レイアウトペインで、新しいコンポーネントの親になるコンポーネントを選択します。

    mainTemplateContainerなど、子コンポーネントを含むことができるコンポーネントを選択する必要があります。

  2. ペインの右上隅にあるコンポーネントを追加ボタンをクリックします。
  3. 子コンポーネントを選択します。
  4. コンポーネントを選択し、追加をクリックします。

    ドキュメントにカスタムレイアウトが含まれている場合は、コンポーネントの代わりにレイアウトを選択することもできます。

  5. 右側のペインで、新しいコンポーネントのプロパティを編集します。

カスタムレイアウトを作成するには

  1. レイアウトペインで、mainTemplateを選択します。
  2. ペインの右上隅にあるコンポーネントを追加ボタンをクリックします。
  3. ドロップダウンリストで、カスタムレイアウトを選択します。
  4. 新しいレイアウト名に入力し、追加をクリックします。
  5. 必要に応じて、新しいレイアウトにコンポーネントを追加します。

コンポーネントのプロパティを更新するには

  • 階層内でコンポーネントを選択し、レイアウトペインの横のペインでプロパティ値を編集します。

ドラッグ&ドロップでドキュメントを構築する

ドキュメントのプレビューペインでコンポーネントをクリックしてドラッグすることで、ドキュメントを視覚的に編集できます。

  • コンポーネントパレットでコンポーネントをクリックし、ドキュメントにドラッグします。
  • TextImageVideoのいずれかのコンポーネントを空のプレビューにドラッグすると、オーサリングツールによって自動的にコンポーネントがContainer内に配置されます。
  • GUIビューを選択し、レイアウトペインでコンポーネントをクリックして、プレビューでそのコンポーネントをハイライト表示します。プレビューペインでコンポーネントをクリックして、レイアウトでハイライト表示することもできます。
  • 必要に応じて、プレビュー内でコンポーネントをドラッグして配置を変更します。

オーディオ応答を作成する

オーサリングツールでは、コア機能の領域が常に表示されます。

オーディオ応答用のオーサリングツール
UI要素 説明

1

左側のツールバー - ドキュメントとデータソースのJSONコードを切り替えるボタンです。

2

上部のツールバー - ドキュメントの保存とダウンロードを行うボタンが表示されます。ドキュメントをMP3ファイルまたはJSONコードとしてダウンロードできます。

3

編集ペイン - ドキュメントとデータソースのJSONコードの編集を行うペインです。

4

プレビューボタン/プレビューコントロール - オーディオをプレビューするためのボタンです。オーディオ応答のプレビューの詳細については、オーディオ応答をプレビューするを参照してください。

ツールバーボタン

次の表は、左側のツールバーのオプションをまとめたものです。

ツールバーボタン 説明

APLAアイコン

APLA - ドキュメント全体のJSONコードを表示します。完全な構文については、ドキュメント(APL for Audio)を参照してください。

DATAツールバーボタン

DATA - データソースのJSONコードを表示します。

APL for AudioドキュメントのJSONコードを更新したら、オーディオを生成してプレビューできます。詳細については、オーディオ応答をプレビューするを参照してください。

ドキュメントとデータソースのJSONコードを編集する

オーサリングツールには、ドキュメント用とデータソース用のJSONエディターが含まれています。

JSONエディターでは、コンマの配置ミスなど、JSON構文エラーの基本的な検証が行われます。視覚応答の場合、コンポーネントに定義されていないプロパティを追加したときもエディターによって警告が表示されます。

APLドキュメントのJSONエディター

APLアイコン

APLツールバーボタンをクリックすると、ドキュメント全体のJSONコードが表示されます。ツールバーのその他のボタンを使用すると、stylesプロパティやresourcesプロパティなど、ドキュメントの特定の部分のJSONコードを表示して編集できます。

コードエディターにはリンティング機能があり、必須プロパティの欠落、APLアトリビュートの不適切な使用、その他の構文の問題などのコーディングエラーを検出できます。エラーメッセージには、ドキュメントへのリンクと問題の解決方法の詳細が含まれています。

オーサリングツールによる不適切なプロパティ値の検出
プロパティ名のスペルが間違っている場合のエラー

コードエディターでは、APL言語の構成要素のオートコンプリートもサポートされています。入力に従って、候補となるAPLプロパティ、プリミティブコンポーネント、コマンド、イベントハンドラーが表示されます。

指定できる値の自動入力

APLドキュメントの完全な構文については、APLドキュメントを参照してください。

APL for AudioドキュメントのJSONエディター

APLAアイコン

APLAツールバーボタンをクリックすると、ドキュメント全体のJSONコードが表示されます。APL for Audioドキュメントの完全な構文については、ドキュメント(APL for Audio)を参照してください。

データソースのJSONエディター

DATAアイコン

DATAツールバーボタンは、ドキュメントのデータソースのJSONコードを表示します。このエディターを使用して、ドキュメントでデータバインディングを使用してアクセスできるJSON構造を作成します。

各データソースは、中かっこ({})内のトップレベルプロパティとして定義し、データバインディング式でデータソースプロパティを参照するための名前を含める必要があります。

以下は、視覚応答の有効なデータソースの例です。

{
  "headlineTemplateData": {
    "type": "object",
    "objectId": "headlineSample",
    "properties": {
      "backgroundImage": {
        "contentDescription": null,
        "smallSourceUrl": null,
        "largeSourceUrl": null,
        "sources": [
          {
            "url": "https://d2o906d8ln7ui1.cloudfront.net/images/templates_v3/headline/HeadlineBackground_Dark.png",
            "size": "large"
          }
        ]
      },
      "textContent": {
        "primaryText": {
          "type": "PlainText",
          "text": "今日の植物トリビアにようこそ"
        }
      },
      "logoUrl": "https://d2o906d8ln7ui1.cloudfront.net/images/templates_v3/logo/logo-modern-botanical-white.png",
      "hintText": "アレクサ、今日の植物トリビアを教えてと言ってみてください。",
      "welcomeSpeechSSML": "<speak><amazon:emotion name='excited' intensity='medium'>今日の植物トリビアにようこそ</amazon:emotion></speak>"
    },
    "transformers": [
      {
        "inputPath": "welcomeSpeechSSML",
        "transformer": "ssmlToSpeech",
        "outputName": "welcomeSpeech"
      }
    ]
  }
}

ドキュメント内のmainTemplate.parameters配列にpayloadが含まれていれば、${payload.headlineTemplateData.properties.textContent.primaryText.text}という構文を使用して、このデータソース内のプロパティを参照することができます。

RenderDocumentディレクティブを使用してドキュメントをAlexaに送信する場合は、スキルコードでデータソースを構築し、RenderDocumentdatasourcesプロパティに含める必要があります。スキルからの実際の応答をAlexaがレンダリングするときには、オーサリングツールに保存されたデータソースは使用されません。

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


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

最終更新日: 2025 年 11 月 26 日