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

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

Alexa Presentation Language（Alexa.Presentation.APL）をサポートするようにスキルを設定するときは、そのスキルでサポートするViewportプロファイルを選択する必要があります。これらのオプションによって、さまざまなデバイスでのコンテンツの表示方法が決まります。スキルの開発を進めるに従って、これらのオプションを再確認し、スキルのサポート対象を反映するように更新してください。

Viewportプロファイルとは

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

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

さまざまなデバイスでのAPLコンテンツの表示

スキルを設定するとき、開発者は、そのスキルでサポートする一連のViewportプロファイルを指定します。スキルでは、次のプロファイルの任意の組み合わせをサポートできます。

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

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

サポートするViewportプロファイルのセットによって、AlexaがさまざまなViewportでどのようにコンテンツを表示するかが決まります。

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

たとえば、「デバイス、円、小」、「デバイス、横長、中」、「TV、横長、特大」で正しく表示されるようにAPLドキュメントをデザインしたとします。ただし、「デバイス、横長、小」はサポート対象に含めませんでした。このとき、サポートされていないプロファイルのデバイス（Echo Show 5など）でユーザーがスキルを呼び出したとします。Alexaは、サポートされている最も近いプロファイルに従ってドキュメントをインフレートした後、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オブジェクトを含める必要があります。このオブジェクト内にsupportedViewportsプロパティを追加して、サポートする各Viewportプロファイルのオブジェクトを含む配列を設定します。

次の表は、利用可能な各Viewportプロファイルをサポートするために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": 2560
}

デバイス、縦長、中

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

{
  "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プロファイルに応じて、デバイスと同じサイズ調整が行われます。

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

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

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