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

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

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

viewportプロファイルとは

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

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

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

スキルを設定する際は、そのスキルでサポートする一連のviewportプロファイルを指定してください。スキルは、次のプロファイルの任意の組み合わせをサポートできます。

  • デバイス、円、小（hubRoundSmall）
  • デバイス、横長、小（hubLandscapeSmall）
  • デバイス、横長、中（hubLandscapeMedium）
  • デバイス、横長、大（hubLandscapeLarge）
  • デバイス、横長、特大（hubLandscapeXLarge）
  • デバイス、縦長、中（hubPortraitMedium）
  • TV全画面（tvLandscapeXLarge）
  • モバイル、小（mobileSmall）
  • モバイル、中（mobileMedium）
  • モバイル、大（mobileLarge）

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

サポートしている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に応じて拡大縮小され、上下左右に黒帯を入れるレターボックス処理されて表示されます。

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

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

スキルマニフェストでAPLのサポートを示すには、interfaces配列（manifest.apis.custom.interfaces）にALEXA_PRESENTATION_APLオブジェクトを指定する必要があります。このオブジェクト内に、サポートする各viewportプロファイルのオブジェクトを含む配列を含むsupportedViewportsプロパティを追加します。

スキルで使用可能なビューポートを設定するには、次の表のオブジェクトをsupportedViewports配列に指定します。

Viewportプロファイル オブジェクト

デバイス、円、小

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

{
  "mode": "HUB",
  "shape": "ROUND",
  "minWidth": 100,
  "maxWidth": 599,
  "minHeight": 100,
  "maxHeight": 599
}

デバイス、横長、小

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

{
  "mode": "HUB",
  "shape": "RECTANGLE",
  "minHeight": 100,
  "maxHeight": 599,
  "minWidth": 960,
  "maxWidth": 1279
}

デバイス、横長、中

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

{
  "mode": "HUB",
  "shape": "RECTANGLE",
  "minHeight": 600,
  "maxHeight": 959,
  "minWidth": 960,
  "maxWidth": 1279
}

デバイス、横長、大

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

{
  "mode": "HUB",
  "shape": "RECTANGLE",
  "minHeight": 600,
  "maxHeight": 1279,
  "minWidth": 1280,
  "maxWidth": 1920
}

デバイス、横長、特大

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

{
  "mode": "HUB",
  "shape": "RECTANGLE",
  "minHeight": 960,
  "maxHeight": 1279,
  "minWidth": 1920,
  "maxWidth": 2650
}

デバイス、縦長、中

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

{
  "mode": "HUB",
  "shape": "RECTANGLE",
  "minHeight": 1920,
  "maxHeight": 2560,
  "minWidth": 960,
  "maxWidth": 1279
}

TV、横長、特大

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

{
  "mode": "TV",
  "shape": "RECTANGLE",
  "minHeight": 540,
  "maxHeight": 540,
  "minWidth": 960,
  "maxWidth": 960
}

小

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

{
  "mode": "MOBILE",
  "shape": "RECTANGLE",
  "minHeight": 320,
  "maxHeight": 1920,
  "minWidth": 600,
  "maxWidth": 959
}

中

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

{
  "mode": "MOBILE",
  "shape": "RECTANGLE",
  "minHeight": 320,
  "maxHeight": 1920,
  "minWidth": 960,
  "maxWidth": 1279
}

大

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

{
  "mode": "MOBILE",
  "shape": "RECTANGLE",
  "minHeight": 320,
  "maxHeight": 1920,
  "minWidth": 1280,
  "maxWidth": 1920
}

たとえば、次のALEXA_PRESENTATION_APLオブジェクトは、「デバイス、円、小」、「デバイス、横長、中」、「デバイス、横長、大」および「TV、横長、特大」のサポートを設定します。

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

{
  "type": "ALEXA_PRESENTATION_APL",
  "supportedViewports": [
    {
      "mode": "HUB",
      "shape": "ROUND",
      "minWidth": 100,
      "maxWidth": 599,
      "minHeight": 100,
      "maxHeight": 599
    },
    {
      "mode": "HUB",
      "shape": "RECTANGLE",
      "minHeight": 600,
      "maxHeight": 959,
      "minWidth": 960,
      "maxWidth": 1279
    },
    {
      "mode": "HUB",
      "shape": "RECTANGLE",
      "minHeight": 600,
      "maxHeight": 1279,
      "minWidth": 1280,
      "maxWidth": 1920
    },
    {
      "mode": "TV",
      "shape": "RECTANGLE",
      "minHeight": 540,
      "maxHeight": 540,
      "minWidth": 960,
      "maxWidth": 960
    }
  ]
}

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

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

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

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

  • オーサリングツールの場合、スキルがサポートするviewportプロファイルにかかわらず、サイズ調整を行いません。

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

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

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

最終更新日: 2021 年 10 月 11 日