APLドキュメントをプレビューする

Note: Sign in to the developer console to build or publish your skill.

APLドキュメントをプレビューする

Alexa Presentation Language（APL）オーサリングツールを使用すると、ドキュメントがユーザーにどのようにレンダリングされるかをプレビューできます。

視覚応答の場合は、サイズの異なるデバイスでドキュメントがどのように表示されるかを確認し、タップイベント、コマンド、ビデオなどのドキュメント要素をプレビューできます。オーディオ応答の場合は、ドキュメントで生成されるオーディオクリップを聞くことができます。

視覚応答をプレビューする

視覚応答では、作成したドキュメントをさまざまなビューポートで確認できます。ライブプレビューモードを使用して、タップイベントやコマンドなどのドキュメント要素をさらにテストすることもできます。

さまざまなビューポートでドキュメントを表示する

ビューポートツールバーで、さまざまなビューポートのアイコンをクリックします。ビューポートは、デバイスタイプごとに分類されて表示されます。

デバイス
- デバイス、円、小
- デバイス、横長、小
- デバイス、横長、中
- デバイス、横長、大
- デバイス、横長、特大
- デバイス、縦長、中
テレビ
- TV、横長、特大
モバイル
- モバイル、小
- モバイル、中
- モバイル、大
カスタム

注：ビューポートは画面付きデバイスを表します。Echo Dot with clockなどのキャラクターディスプレイ付きデバイスを表すビューポートはありません。

特定のプロファイルを使用してドキュメントをプレビューするには

デバイスタイプ（デバイスなど）をクリックしてから、プレビューするビューポートのアイコン（デバイス、横長、中アイコンなど）をクリックします。

サイズ範囲をサポートするビューポートプロファイルでは、ビューポートプロファイルアイコンの下にあるドロップダウンリストに、一般的なデバイスに対応する実際のビューポートサイズの一覧が表示されます。これらを使用すると、作成したAPLドキュメントが、そのビューポートプロファイルに該当するすべての一般的なデバイスで適切に動作することを確認できます。ドキュメントが範囲内の最小の幅／高さで動作することを確認してください。同時に、最大の幅／高さにも対応し、余分なスペースが適切に埋められることも確認してください。レスポンシブ対応のAPLドキュメントを作成する方法の詳細については、レスポンシブ対応のAPLドキュメントを作成するを参照してください。

特定のデバイスでドキュメントをプレビューするには

右上のデバイスプリセットメニューからデバイスを選択します。

ビューポートプロファイルリソース（ビューポートプロファイルパッケージ）

オーサリングツールのビューポートは、ビューポートプロファイルパッケージで提供される以下のビューポートプロファイルリソースに対応しています。

デバイス、円、小 - hubRoundSmall
デバイス、横長、小 - hubLandscapeSmall
デバイス、横長、中 - hubLandscapeMedium
デバイス、横長、大 - hubLandscapeLarge
デバイス、横長、特大 - hubLandscapeXLarge
デバイス、縦長、中 - hubPortraitMedium
TV、横長、特大 - tvLandscapeXLarge
モバイル、小 - mobileSmall
モバイル、中 - mobileMedium
モバイル、大 - mobileLarge

たとえば、ドキュメントのコンポーネントで、次のようにwhen文が使用されているとします。

{
  "type": "Text",
  "when": "${@viewportProfile == @hubLandscapeSmall}",
  "text": "このテキストを横長の小型デバイスに表示します。"
}

オーサリングツールでドキュメントをプレビューし、デバイス、横長、小を選択すると、ドキュメントにこのTextコンポーネントが表示されます。ほかのプロファイルを選択すると、このTextコンポーネントは表示されません。

これらのビューポートプロファイルプロパティの詳細については、Alexaビューポートプロファイルパッケージを参照してください。

カスタムビューポートを作成して表示する

カスタムビューポートを作成すると、提供されているプロファイルとは異なるデバイスでデザインがどのように表示されるかを確認できます。

カスタムビューポートは、オーサリングツールでドキュメントを開いている間だけ利用可能になります。ブラウザを閉じたり、開いているドキュメントから別のページに移動したりすると、カスタムビューポートは削除されます。

カスタムビューポートを作成するには

上部のビューポートツールバーで、カスタムをクリックし、プラス（+）ボタンをクリックします。
ビューポートの名前を入力し、幅、高さ、密度を入力します。
チェックマークをクリックして、カスタムビューポートを保存します。

カスタムビューポートでドキュメントをプレビューするには

上部のビューポートツールバーで、カスタムをクリックします。
カスタムツールバーで、表示するカスタムビューポートの名前をクリックします。

タップイベント、コマンド、ビデオをプレビューする

タッチイベント、コマンド、ビデオなどのドキュメント要素をプレビューするには、ライブプレビューモードを使用します。ライブプレビューモードでは、ドキュメントを編集するツールは無効になります。プレビューペインをクリックすると、デバイス上と同じようにタップイベントがトリガーされます。ライブプレビューモードでは、Logコマンドの出力を確認できるログウィンドウも表示されます。

ライブプレビューモードを使用すると、次の要素をテストできます。

コマンド - ドキュメント内でトリガーされたすべてのコマンドをテストします。たとえば、onMountやタップイベントからトリガーされたSpeakItemコマンドをテストできます。
APLとAPL for Audioの統合 - ドキュメントでは、APL for Audioトランスフォーマー（aplAudioToSpeech）を使用してAPL for Audioドキュメントをオーディオに変換し、SpeakItemコマンドまたはSpeakListコマンドで再生することができます。この統合を、オーサリングツールのライブプレビューモードでテストできます。詳細については、APLとAPL for Audioの統合をテストするを参照してください。
onMountコマンドの実行 - ライブプレビューモードを開始すると、デバイス上でドキュメントが読み込まれるときと同様に、ドキュメントレベルのonMountコマンドが自動的に実行されます。コンポーネントが表示されると、コンポーネントレベルのすべてのonMountコマンドも実行されます。
ビデオの再生 - Videoコンポーネントはデバイス上と同じように再生されます。
トランスフォーマー - トランスフォーマーはデバイス上と同じように動作します。
タップイベント - ドキュメント上のタッチ可能な領域をクリックして項目を選択します。
ナビゲーション - Pagerコンポーネントでは、ドキュメントをクリックしてドラッグすることでページを「スワイプ」できます。SequenceコンポーネントとScrollViewコンポーネントでは、マウスのスクロールホイールを使用してコンテンツをスクロールできます。

ライブプレビューモードでは、SendEventコマンドのテストはサポートされません。SendEventをテストする場合は、デバイスまたはシミュレーターを使用して、スキル内のドキュメントをテストしてください。

ライブプレビューモードでのテスト中に異なるビューポートでプレビューするには、ビューポートプロファイルツールバーを使用します。別のビューポートに切り替えると、実行中のコマンドやビデオはすべて停止します。ドキュメントが新しいビューポートで表示されると、プレビューはドキュメントの初期状態にリセットされます。

ライブプレビューモードを開始するには

オーサリングツールで、体験をプレビューをクリックします。

オーサリングツールの編集コントロールが無効になり、ドキュメントのプレビューが表示されます。ログウィンドウが表示され、適用可能なonMountコマンドがすべて実行されます。

プレビューをリプレイする

プレビューを再実行するには、リプレイボタンをクリックします。リプレイにより、実行中のコマンドやビデオがすべて停止され、プレビューがドキュメントの初期状態にリセットされます。たとえば、このボタンにより、ドキュメントレベルのonMountコマンドがすべて再実行され、すべてのPagerコンポーネントがリセットされて設定された最初のページが表示されます。

ライブプレビューモードを終了するには

体験をプレビューをもう一度クリックします。

ログウィンドウでドキュメントをデバッグする

Logコマンドで送信されたログメッセージを表示するには、ログウィンドウを使用します。これはドキュメントのデバッグに役立つ可能性があります。ログウィンドウを表示するには、体験をプレビューをクリックします。

ログウィンドウには、Logコマンドが実行されるたびに項目が表示されます。各項目には次の情報が含まれます。

コマンドが実行された時刻。
コマンドのlevelプロパティで指定されたログレベル。
コマンドのmessageプロパティで指定されたログメッセージ。
コマンドのargumentsプロパティの値。

次の画像は、使用可能なすべてのログレベルの例を示しています。

ログメッセージを生成するには、ドキュメントでLogコマンドを実行する必要があります。コマンドはイベントハンドラーに追加します。以下の例では、次の3つの状況でLogコマンドを実行します。

ドキュメントがインフレートされた後、ドキュメントのonMountハンドラーが実行されたとき。
AutoPageコマンドを実行するボタンをユーザーがクリックしたとき。
Pagerでページが変更されたとき。

APLドキュメント
データソース

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

{
  "type": "APL",
  "version": "2024.3",
  "import": [
    {
      "name": "alexa-layouts",
      "version": "1.7.0"
    }
  ],
  "mainTemplate": {
    "parameters": [
      "pagerData"
    ],
    "items": {
      "type": "Container",
      "width": "100%",
      "height": "100%",
      "items": [
        {
          "type": "AlexaHeader",
          "headerTitle": "${pagerData.title}"
        },
        {
          "type": "Pager",
          "id": "myPager",
          "data": "${pagerData.colors}",
          "width": "50%",
          "height": "50%",
          "alignSelf": "center",
          "items": [
            {
              "type": "Frame",
              "borderWidth": 10,
              "background": "${data}",
              "item": {
                "type": "Text",
                "width": "100%",
                "height": "100%",
                "textAlign": "center",
                "textAlignVertical": "center",
                "text": "${pagerData.colors.length}ページ中の${index+1}ページ。"
              }
            }
          ],
          "onPageChanged": [
            {
              "type": "Log",
              "level": "info",
              "message": "ページが変更されました。",
              "arguments": [
                "新しいページのインデックスは${event.source.page}です。"
              ]
            }
          ]
        },
        {
          "type": "AlexaButton",
          "buttonText": "AutoPageコマンドを開始",
          "spacing": "@spacingMedium",
          "alignSelf": "center",
          "primaryAction": [
            {
              "type": "Log",
              "level": "info",
              "message": "ユーザーがボタンを押しました。",
              "arguments": [
                "${event.source.type}"
              ]
            },
            {
              "type": "AutoPage",
              "componentId": "myPager",
              "transitionDuration": 2000,
              "duration": 2000
            }
          ]
        }
      ]
    }
  },
  "onMount": [
    {
      "type": "Log",
      "level": "debug",
      "message": "onMountが呼び出されました。",
      "arguments": [
        "${event.source}"
      ]
    }
  ]
}

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

{
  "pagerData": {
    "title": "Logコマンドの例",
    "backgroundColor": "@colorYellow800",
    "colors": [
      "@colorYellow800",
      "@colorTeal800",
      "@colorGreen800",
      "@colorBlue800"
    ]
  }
}

ログメッセージは、Clearをクリックするかドキュメントを終了するまでログウィンドウに残ります。

オーディオ応答をプレビューする

オーディオ応答をプレビューするには

オーサリングツールで、最初にプレビューボタンをクリックしてオーディオを生成します。
再生をクリックしてオーディオ応答を再生します。
JSONに変更を加えたら、更新をクリックして、変更内容を反映したオーディオ応答を再生成します。

オーディオ応答を生成すると、オーサリングツールにオーディオを表すタイムラインが表示されます。このタイムラインを操作すると、応答の各部分を再生できます。

UI要素	説明
	更新ボタン - クリックするとオーディオ応答が再生成されます。JSONへの変更を反映するには、応答を再生成する必要があります。
	再生ボタン - クリックすると応答が再生されます。
	リピートボタン - クリックすると、応答全体または応答の一部を繰り返し再生できます。もう一度クリックすると、リピートがオフになります。
	オーディオ応答タイムライン - オーディオ応答を表す波形が表示されます。タイムラインをクリックすると、応答のさまざまな部分を聞くことができます。別の位置から再生を開始したり、再生中に別の位置にジャンプしたりするには、タイムラインをクリックします。再生する応答の部分を選択するには、タイムラインをクリックしてドラッグします。選択した応答の部分をタイムラインの別のセクションに移動するには、選択した部分をクリックしてドラッグします。選択した応答の部分を解除するには、選択した領域内をクリックします。

APLとAPL for Audioの統合をテストする

aplAudioToSpeechトランスフォーマーは、APL for Audioドキュメントを変換して、APLコンポーネントのspeechプロパティにバインドできるオーディオを生成します。その後、SpeakListコマンドまたはSpeakItemコマンドを使用してこのオーディオを再生できます。

スキルでaplAudioToSpeechトランスフォーマーを使用するときは、オーディオのAPLAドキュメントをRenderDocumentディレクティブのsourcesプロパティに指定する必要があります。オーサリングツールのSOURCESセクションでこのプロパティをシミュレートできます。このセクションに、sourcesに指定する場合と同じようにオブジェクトを入力します。これにより、aplAudioToSpeechトランスフォーマーの出力に依存するコマンドをテストできます。

オーサリングツールでAPL for Audioトランスフォーマーをテストするには

オーサリングツールで視覚応答のAPLドキュメントを開きます。
SOURCESをクリックします。RenderDocumentのsourcesプロパティに指定する場合と同じようにJSONオブジェクトを入力します。これは、APL for Audioドキュメントのマップを含むJSONオブジェクトです。

たとえば、SOURCESに次のJSONを入力すると、helloAplaという文字列からAPL for Audioドキュメントへのマッピングが作成されます（簡潔にするために詳細は省略しています）。
```
 {
   "helloApla": {
     "version": "0.91",
     "type": "APLA",
     "mainTemplate": {
       "parameters": [
         "payload"
       ],
       "item": {}
     }
   }
 }
```

DATAセクションで、データソースを貼り付けるか作成し、aplAudioToSpeechトランスフォーマーを追加します。トランスフォーマーのtemplateフィールドに、SOURCESセクションで定義したAPLAドキュメントのキーを設定します。

 {
   "helloData": {
     "properties": {
       "user": {
         "name": ""
       }
     },
     "transformers": [        
       {
         "template": "helloApla",
         "outputName": "aplaHelloSpeech",
         "transformer": "aplAudioToSpeech"
       }
     ]
   }
 }

APLドキュメントで、コンポーネントのspeechプロパティをaplAudioToSpeechトランスフォーマーの出力にバインドします。SpeakItemコマンドまたはSpeakListで、そのコンポーネントをターゲットにするように設定します。

この例のoutputNameはaplaHelloSpeechです。したがって、生成されるオーディオはpayload.helloData.properties.aplaHelloSpeech.urlとなります。
```
 {
   "type": "AlexaButton",
   "alignSelf": "center",
   "buttonText": "APLオーディオを再生",
   "speech": "${payload.helloData.properties.aplaHelloSpeech.url}",
   "primaryAction": {
     "type": "SpeakItem"
   },
   "spacing": "@spacingLarge"
 }
```
体験をプレビューをクリックし、SpeakItemコマンドまたはSpeakListコマンドを呼び出します。オーサリングツールによってAPLAオーディオが生成され、デバイスと同じように再生されます。

aplAudioToSpeechトランスフォーマーを設定して使用する方法の詳細については、トランスフォーマーを参照してください。

APL for Audioドキュメントの作成方法の詳細については、APL for Audioリファレンスを参照してください。

SOURCESセクションでは、必要に応じてAPL for Audioドキュメントを調整できます。その後、変更したドキュメントを返すようにスキルのRenderDocument応答を更新します。

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

RenderDocumentの詳細については、Alexa.Presentation.APLインターフェースのリファレンスを参照してください。

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

フィードバックを送信

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

APLドキュメントをプレビューする

視覚応答をプレビューする

さまざまなビューポートでドキュメントを表示する

ビューポートプロファイルリソース（ビューポートプロファイルパッケージ）

カスタムビューポートを作成して表示する

タップイベント、コマンド、ビデオをプレビューする

ログウィンドウでドキュメントをデバッグする

オーディオ応答をプレビューする

APLとAPL for Audioの統合をテストする

関連トピック