スキルがサポートするViewportプロファイルの選択



スキルがサポートするViewportプロファイルの選択

Alexa Presentation Language(Alexa.Presentation.APL)をサポートするようにスキルを設定するときは、そのスキルがサポートするviewportプロファイルも指定する必要があります。これらのオプションによって、デバイスに応じたコンテンツの表示方法が決まります。開発の際はこうしたオプションを再確認し、スキルでのサポートが正しく反映されるようにしてください。

viewportプロファイルとは

画面付きのAlexa搭載デバイスでは、「viewport」はユーザーに表示される画面領域のことを指します。それぞれのviewportには、形状、向き、サイズ、密度があります。viewportプロファイルは、viewport特性の範囲を表す名前付きのリソースです。プロファイルでは、viewportの各値(形状、サイズなど)を指定します。サイズと密度は、プロファイルが複数の物理デバイスを表すことができるように範囲として定義されます。たとえば、viewportプロファイルのhubLandscapeSmallは、幅が9601280ピクセル、高さが600ピクセル未満の横長の長方形デバイスを含みます。

APLドキュメントを作成する場合、Alexa viewportプロファイルパッケージで提供されているAlexa viewportプロファイルを条件付きロジックで使用して、レスポンシブ対応のドキュメントに変更できます。

さまざまなデバイスにAPLコンテンツを表示する方法

スキルを設定する際は、そのスキルでサポートする一連のviewportプロファイルを指定してください。どのAPLスキルでも、次のデバイスをサポートする必要があります。

  • デバイス、円形(hubRoundSmall
  • デバイス、横長(hubLandscapeMediumhubLandscapeLarge
  • TV全画面(tvLandscapeXLarge

ユーザーエクスペリエンスを最大限に高めるために、次のデバイスもサポートすることをお勧めします。

  • デバイス、横長、小(hubLandscapeSmall

どのロケールであっても、スキルは上記の必須プロファイルをサポートする必要があります。ここに示す一連のプロファイルは、グローバル設定です。

viewportプロファイルをサポートするということは、APLコンテンツをテストし、そのプロファイルで動作を確認したことを意味します。たとえば、スキルが「デバイス、円形」をサポートすることを宣言するには、コンテンツがhubRoundSmallプロファイルに正しく表示されることを確認する必要があります。

サポートしているviewportプロファイルに応じて、さまざまなviewportでのコンテンツの表示方法が変わります。

  • サポートされているviewportでは、コンテンツは拡大縮小されずに、そのまま表示されます。
  • サポートされていないviewportでは、コンテンツをviewport内に収めるために、コンテンツが拡大縮小されたり、上下左右に黒帯を入れるレターボックス処理されて表示されたりします。

たとえば、「デバイス、円形」、「デバイス、横長」、「TV全画面」で正しく表示されるようにAPLドキュメントをデザインしたとします。しかし、「デバイス、横長、小」はサポート対象に含めませんでした。もしユーザーが、サポートされていないプロファイルのデバイス(Echo Show 5など)でスキルを呼び出した場合、サポートされているプロファイルの中で最も対象に近いプロファイルに従って、ドキュメントがインフレートされます。コンテンツは、Echo Show 5の画面に合わせて拡大縮小され、上下左右に黒帯を入れるレターボックス処理されて表示されます。

サポートするviewportプロファイルを選択する

サポートする一連のviewportプロファイルは、開発者コンソールで設定できます。あるいは、設定をスキルマニフェストに追加してから、ASKコマンドラインインターフェース(CLI)やスキル管理API(SMAPI)を使用して、スキルを更新することもできます。

サポートするプロファイルは、正しく設定してください。

サポートするプロファイルと、スキルの実際のAPLコンテンツが一致しない場合、予期せぬ結果が生じる可能性があります。たとえば、次のようなシナリオに注意が必要です。

  • スキルを更新して、すべてのviewportプロファイルで正しく表示されるようにしました。ただし、デバイス、横長、小はサポート対象のプロファイルとして選択しませんでした。この場合、コンテンツは拡大縮小され、ユーザーには、デザイン時に意図したようには表示されません。
  • デバイス、横長、小プロファイルをサポートするようスキルを更新しませんでしたが、サポート対象のプロファイルとして選択しました。この場合、結果は予測できません。拡大縮小が行われないため、コンテンツがviewport内に収まるように表示される保証はありません。

サポートするviewportプロファイルを開発者コンソールで設定する

  1. 開発者コンソールで、ビルド>カスタム>インターフェースに移動します。
  2. Alexa Presentation Languageオプションが有効になっていることを確認します。
  3. サポートするviewportプロファイルのチェックボックスをオンにします。
    • プロファイルが選択されている場合、コンテンツは拡大縮小なしで該当するviewportに表示されます。
    • プロファイルが選択されていない場合、コンテンツはviewportに応じて拡大縮小され、上下左右に黒帯を入れるレターボックス処理されて表示されます。
    • 「デバイス、円形」、「デバイス、横長」、「TV全画面」の各プロファイルは必須です。

ASK CLIまたはSMAPIでサポートするviewportを設定する

サポートするviewportをASK CLIまたはSMAPIで設定するには、スキルマニフェストを更新してデプロイします。

スキルマニフェストでAPLのサポートを示すには、interfaces配列(manifest.apis.custom.interfaces)にALEXA_PRESENTATION_APLオブジェクトを指定する必要があります。このオブジェクト内に、サポートする各viewportプロファイルのオブジェクトを含む配列を含むsupportedViewportsプロパティを追加します。有効なviewportプロファイルのオブジェクトを下の例に示します。4つの必須viewportを含めてください。

必須のviewport

次のコードブロックに示すviewportをスキルでサポートする必要があります。これには、「デバイス、円形」、「デバイス、横長」、「TV全画面」が含まれます。このブロックをmanifest.apis.custom.interfacesに追加して、既存のALEXA_PRESENTATION_APLオブジェクトを置き換えます。

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

{
  "type": "ALEXA_PRESENTATION_APL",
  "supportedViewports": [
    {
      "mode": "HUB",
      "shape": "ROUND",
      "minWidth": 480,
      "maxWidth": 480,
      "minHeight": 480,
      "maxHeight": 480
    },
    {
      "mode": "HUB",
      "shape": "RECTANGLE",
      "minWidth": 1024,
      "maxWidth": 1024,
      "minHeight": 600,
      "maxHeight": 600
    },
    {
      "mode": "HUB",
      "shape": "RECTANGLE",
      "minWidth": 1280,
      "maxWidth": 1280,
      "minHeight": 800,
      "maxHeight": 800
    },
    {
      "mode": "TV",
      "shape": "RECTANGLE",
      "minWidth": 960,
      "maxWidth": 960,
      "minHeight": 540,
      "maxHeight": 540
    }
  ]
}

オプションのviewport(デバイス、横長、小)

「デバイス、横長、小」プロファイルをサポートすることを選択できます。supportedViewports配列に、サポートするプロファイルのコードブロックを追加します。

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

{
  "mode": "HUB",
  "shape": "RECTANGLE",
  "minWidth": 960,
  "maxWidth": 960,
  "minHeight": 480,
  "maxHeight": 480
}

ASK CLIとSMAPIについて詳しくは、以下のトピックを参照してください。

さまざまなviewportでスキルをテストする

スキルを作成したら、さまざまなviewportで表示をテストします。明示的にサポートしているデバイスと、サポートしていないデバイスの両方でテストすることが理想的です。

実際のデバイスでテストすることをお勧めしますが、テストページオーサリングツールまたはシミュレーターを使用することもできます。これらのツールは、拡大縮小などのサイズの調整やサポートされているプロファイルに関して、動作が異なります。

  • オーサリングツールの場合、スキルがサポートするviewportプロファイルにかかわらず、サイズ調整を行いません。
  • テストページのシミュレーターの場合、スキルがサポートするviewportプロファイルに応じて、デバイスと同じサイズ調整を行います。

    たとえば、シミュレーターではデバイス、横長、小プロファイルでテストできます。デバイス、横長、小プロファイルをサポートすることを選択した場合、コンテンツはそのまま表示されます。このプロファイルのサポートを選択していない場合、コンテンツは拡大縮小して表示されます。