Viewportプロファイル

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

Viewportプロファイル

Alexa viewportプロファイルパッケージは、条件付きロジックで使用できるviewportプロファイルのコレクションです。viewport特性で細かく設定するのではなくviewportプロファイルを使用することで、スムーズにレスポンシブ対応のAPLドキュメントを作成できます。

viewportプロファイルとは

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

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

Alexa viewportプロファイルパッケージを読み込む

Alexa Viewportプロファイルパッケージのリソースを使用するには、ドキュメントのimport配列にalexa-viewport-profilesパッケージを追加します。alexa-viewport-profilesパッケージの最新バージョンは1.6.0です。

次に例を示します。

{
  "import": [
    {
      "name": "alexa-viewport-profiles",
      "version": "1.6.0"
    }
  ]
}

条件付きロジックでviewport情報を使用する

viewportプロファイルパッケージでは、プロファイル用の名前付きのリソースと、プロファイルに統合されるviewport特性を提供しています。viewportサイズなどの値をハードコーディングするのではなく、これらのリソースを使用してください。

条件付きロジックでパッケージのリソースを使用するには、リソース名に予約文字の「@」を使用します。

次の例のwhen句は、ユーザーのデバイスがhubRoundSmallプロファイルの基準を満たしている場合にtrueに評価されます。

"when": "${@viewportProfile == @hubRoundSmall}"

次の例のwhen句は、Viewportが長方形の場合にtrueに評価されます。

"when": "${@viewportShape == @viewportShapeRectangle}"

APLドキュメントのデータバインディングの式と条件付きロジックの詳細については、データバインディングの構文とコンポーネントの条件付きインフレートを参照してください。APLでのリソースの動作については、APL Resourcesを参照してください。

Viewportプロファイルリソース（@viewportProfile）

@viewportProfileリソースは、デバイスをさまざまなカテゴリーに分類します。デバイスの特性をハードコードする代わりに、これらのカテゴリーに基づいて条件付きロジックを実装すれば、新しいデバイスが利用可能になったときのロジックの堅牢性が向上します。

次の例は、ユーザーのデバイスがEcho ShowなどのhubLandscapeMediumプロファイルの条件を満たす場合にtrueに評価される条件文です。

"when": "${@viewportProfile == @hubLandscapeMedium}"

以下の表に、利用可能なviewportプロファイルをまとめています。この表では、幅と高さの値はdp単位で表されています。

Viewportプロファイル	形状／向き	モード	minWidth / maxWidth	minHeight / maxHeight
`hubRoundSmall`	丸／等しい	デバイス	100 – 599	100 – 599
`hubLandscapeSmall`	長方形／横長	デバイス	960 – 1279	100 – 599
`hubLandscapeMedium`	長方形／横長	デバイス	960 – 1279	600 – 959
`hubLandscapeLarge`	長方形／横長	デバイス	1280 – 1920	600 – 1279
`hubLandscapeXLarge`	長方形／横長	デバイス	1920 – 2560	960 – 1279
`hubPortraitMedium`	長方形／縦長	デバイス	960 – 1279	1920 – 2560
`tvLandscapeXLarge`	長方形／横長	テレビ	960 – 960	540 – 540
`mobileSmall`	長方形／縦長	モバイル	600 – 959	320 – 1920
`mobileMedium`	長方形／横長	モバイル	960 – 1279	320 – 1920
`mobileLarge`	長方形／横長	モバイル	1280– 1920	320 – 1920
`hubWidgetMedium`	長方形	デバイス	134 / 425	222 / 711

ウィジェットViewportプロファイルのサイズは、そのウィジェットが含まれているViewportのサイズによって変わります。たとえば、「デバイス、横長、特大」Viewportプロファイルのデバイスでは、「デバイス、横長、中」のデバイスよりも大きいバージョンの「ウィジェット、中」プロファイルが表示されます。ウィジェットの作成中には、そのウィジェットがさまざまなデバイスでどのようにレンダリングされるかをオーサリングツールでプレビューできます。

viewportの特性のリソース

viewportプロファイルパッケージは、形状、サイズ、密度といったviewport特性のその他のリソースを定義します。

形状（@viewportShape）

@viewportShapeリソースは、Viewportのさまざまな形状を区別します。

"when": "${@viewportShape == @viewportShapeRectangle}"

リソース	条件
`viewportShapeSquare`	`viewport.width == viewport.height`
`viewportShapeRectangle`	`viewport.width != viewport.height`
`viewportShapeRound`	`viewport.shape == 'round'`

向き（@viewportOrientation）

@viewportOrientationリソースは、Viewportのさまざまな向きを区別します。

"when": "${@viewportOrientation == @viewportOrientationLandscape}"

リソース	条件
`viewportOrientationEqual`	`viewport.width == viewport.height`
`viewportOrientationLandscape`	`viewport.width > viewport.height`
`viewportOrientationPortrait`	`viewport.width < viewport.height`

サイズクラス

サイズとサイズクラスのリソースは、さまざまなサイズのviewportを区別します。

viewportの幅と高さ（dp）のviewportサイズのリソースグループ

条件付き句のサンプルです。

"when": "${@viewportWidth == @viewportSizeMedium}"

"when": "${@viewportHeight == @viewportSizeSmall}"

リソース	viewport幅／viewport高さ（dp）の条件
`viewportSizeXSmall`	< 600
`viewportSizeSmall`	≥ 600 && <960
`viewportSizeMedium`	≥ 960 && <1280
`viewportSizeLarge`	≥ 1280 && <1920
`viewportSizeXLarge`	≥ 1920

viewportの幅と高さの組み合わせのviewportサイズクラスのリソースグループ（@viewportSizeClass）

@viewportSizeClassリソースは、幅と高さの組み合わせによってさまざまなViewportサイズを区別します。

条件付き句のサンプルです。

"when": "${@viewportSizeClass == @viewportClassMediumSmall}"

リソース	幅	高さ
`viewportClassXSmallXSmall`	`viewportSizeXSmall`	`viewportSizeXSmall`
`viewportClassSmallSmall`	`viewportSizeSmall`	`viewportSizeSmall`
`viewportClassSmallMedium`	`viewportSizeSmall`	`viewportSizeMedium`
`viewportClassMediumXSmall`	`viewportSizeMedium`	`viewportSizeXSmall`
`viewportClassMediumSmall`	`viewportSizeMedium`	`viewportSizeSmall`
`viewportClassMediumMedium`	`viewportSizeMedium`	`viewportSizeMedium`
`viewportClassMediumLarge`	`viewportSizeMedium`	`viewportSizeLarge`
`viewportClassMediumXLarge`	`viewportSizeMedium`	`viewportSizeXLarge`
`viewportClassLargeSmall`	`viewportSizeLarge`	`viewportSizeSmall`
`viewportClassLargeMedium`	`viewportSizeLarge`	`viewportSizeMedium`
`viewportClassLargeLarge`	`viewportSizeLarge`	`viewportSizeLarge`
`viewportClassLargeXLarge`	`viewportSizeLarge`	`viewportSizeXLarge`
`viewportClassXLargeMedium`	`viewportSizeXLarge`	`viewportSizeMedium`
`viewportClassXLargeLarge`	`viewportSizeXLarge`	`viewportSizeLarge`
`viewportClassXLargeXLarge`	`viewportSizeXLarge`	`viewportSizeXLarge`

密度（@viewportDensity）

@viewportDensityリソースは、さまざまな密度（dpi）を区別します。

条件付き句のサンプルです。

"when": "${@viewportDensity == @viewportDensityNormal}"

リソース	viewportの条件（dpi）
`viewportDensityXLow`	< 140
`viewportDensityLow`	≥ 140 && < 200
`viewportDensityNormal`	≥ 200 && < 280
`viewportDensityHigh`	≥ 280 && < 400
`viewportDensityXHigh`	≥ 400 && < 560
`viewportDensityXXHigh`	≥ 560 && < 720

Viewportプロファイルの例

以下の例では、データバインディングコンテキストのviewportオブジェクトから、Viewportに関する情報を表示します。さらに、いくつかのwhen文を使用して、プロファイルが条件を満たす場合に追加の詳細を表示します。たとえば、Viewportのプロファイルを「デバイス、横長、中」に変更すると、追加の詳細がすべて表示されます。

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

フィードバックを送信

最終更新日: 2025 年 10 月 02 日

Viewportプロファイル

viewportプロファイルとは

Alexa viewportプロファイルパッケージを読み込む

条件付きロジックでviewport情報を使用する

Viewportプロファイルリソース（@viewportProfile）

ウィジェットViewportプロファイルのサイズ

viewportの特性のリソース

形状（@viewportShape）

向き（@viewportOrientation）

サイズクラス

viewportの幅と高さ（dp）のviewportサイズのリソースグループ

viewportの幅と高さの組み合わせのviewportサイズクラスのリソースグループ（@viewportSizeClass）

密度（@viewportDensity）

Viewportプロファイルの例

関連トピック