APLドキュメントのプレビュー



APLドキュメントのプレビュー

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

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

視覚応答のプレビュー

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

異なるViewportでドキュメントを表示する

Viewportツールバーで異なるViewportのアイコンをクリックします。Viewportは、デバイスタイプ、Viewportの順に表示されます。

  • デバイス
    • デバイス、円、小
    • デバイス、横長、小
    • デバイス、横長、中
    • デバイス、横長、大
  • テレビ
    • TV、横長、特大
  • モバイル
  • カスタム
Viewportはデバイスタイプ、Viewportの順に表示されます
Viewportはデバイスタイプ、Viewportの順に表示されます

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

  • デバイスなどのデバイスタイプをクリックしてから、デバイス、横長、中アイコンなどのプレビューしたいViewportのアイコンをクリックします。

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

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

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

Viewportプロファイルリソース(Viewportプロファイルパッケージ)

オーサリングツールのViewportは、Viewportプロファイルパッケージで使用できるViewportプロファイルリソースに対応します。

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

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

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

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

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

カスタムViewportを作成して確認する

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

カスタムViewportは、オーサリングツールでドキュメントを開いている間、使用できます。ブラウザを閉じたり、開いているドキュメントの外に移動したりすると、カスタムViewportは削除されます。

カスタムViewportを作成する

  1. 上部のViewportツールバーでカスタムをクリックし、プラス(+)ボタンをクリックします。
  2. Viewportの名前を入力し、高さ密度を入力します。
  3. チェックマークをクリックしてカスタムViewportを保存します。

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

  1. 上部のViewportで、カスタムをクリックします。
  2. カスタムツールバーで、確認するカスタムViewportの名前をクリックします。

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

プレビューモードを使って、タッチイベント、コマンド、ビデオなどのドキュメント要素をプレビューします。プレビューモードにすると、ドキュメントを編集するツールは無効になります。プレビューペインをクリックすると、デバイス上と同じようにタップイベントがトリガーされます。

プレビューモードを使うと、次の要素をテストできます。

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

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

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

プレビューモードでのドキュメントの表示
プレビューモードでのドキュメントの表示

プレビューモードを開始する

オーサリングツールで、右上隅にあるプレビューモード開始ボタン(プレビューボタンアイコン)をクリックします。

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

プレビューを再生する

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

プレビューモードを終了する

右上隅にあるプレビューモード終了ボタン(プレビューボタンアイコン)をクリックします。

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

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

  1. オーサリングツールでプレビューボタンをクリックするとオーディオが生成されます。
  2. 再生をクリックしてオーディオ応答を聞きます。
  3. JSONに変更を加えた場合は、更新をクリックすると変更内容を反映したオーディオ応答が再生成されます。

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

更新をクリックすると表示されるオーディオタイムライン
プレビューをクリックすると表示されるオーディオタイムライン
UI要素 説明

更新ボタン

更新ボタン – クリックするとオーディオ応答が再生成されます。JSONへの変更を反映するには、応答を再生成してください。

再生ボタン

再生ボタン – クリックすると応答が再生されます。

リピートボタン

リピートボタン – クリックすると、応答全体または応答の一部を繰り返し再生できます。もう一度クリックすると、リピートがオフになります。

オーディオ応答タイムライン

オーディオ応答タイムライン – オーディオ応答を表す波形が表示されます。タイムラインをクリックすると、応答のさまざまな部分を聞くことができます。

  • 別の位置から再生を開始したり、再生中に別の位置に移動したりするには、タイムラインをクリックします。
  • 再生する応答の部分を選択するには、タイムラインをクリックしてドラッグします。
  • 以前に選択した部分をタイムラインの別のセクションに移動するには、選択した部分をクリックしてドラッグします。
  • 以前に選択した部分を解除するには、選択した領域内をクリックします。

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

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

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

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

  1. オーサリングツールで視覚応答のAPLドキュメントを開きます。
  2. ソースをクリックします。RenderDocumentsourcesプロパティに指定したものと同じJSONオブジェクトを指定します。これは、APL for Audioドキュメントのマップを含むJSONオブジェクトです。

    たとえば、ソースの次のJSONでは、文字列"helloApla"とAPL for Audioドキュメントとの間のマッピングを作成します(簡潔に示すため詳細は割愛しています)。

     {
       "helloApla": {
         "version": "0.91",
         "type": "APLA",
         "mainTemplate": {
           "parameters": [
             "payload"
           ],
           "item": {}
         }
       }
     }
    
  3. データセクションに、データソースを貼り付けるか作成し、aplAudioToSpeechトランスフォーマーを追加します。トランスフォーマーのtemplateフィールドに、ソースセクションでAPLAドキュメントに定義したキーを設定します。

     {
       "helloData": {
         "properties": {
           "user": {
             "name": ""
           }
         },
         "transformers": [        
           {
             "template": "helloApla",
             "outputName": "aplaHelloSpeech",
             "transformer": "aplAudioToSpeech"
           }
         ]
       }
     }
    
  4. APLドキュメントで、コンポーネントのspeechプロパティをaplAudioToSpeechトランスフォーマーの出力にバインドします。そのコンポーネントをターゲットとするSpeakItemSpeakListのいずれかのコマンドを設定します。

    この例では、outputNameaplaHelloSpeechです。このため、生成されるオーディオはpayload.helloData.properties.aplaHelloSpeech.urlとなります。

     {
       "type": "AlexaButton",
       "alignSelf": "center",
       "buttonText": "APLオーディオを再生",
       "speech": "${payload.helloData.properties.aplaHelloSpeech.url}",
       "primaryAction": {
         "type": "SpeakItem"
       },
       "spacing": "@spacingLarge"
     }
    
  5. プレビューモードを開始(プレビューボタンアイコン)し、コマンドを呼び出します。オーサリングツールがAPLAオーディオを生成し、デバイスと同じように再生します。

aplAudioToSpeechトランスフォーマーのセットアップと使用について詳しくは、トランスフォーマーを参照してください。

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

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

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

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