Viewportプロファイル

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

viewportプロファイルとは
Alexa viewportプロファイルパッケージを読み込む
条件付きロジックでviewport情報を使用する
プロファイル
形状
向き
サイズクラス
密度
関連トピック

viewportプロファイルとは

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

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

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

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

次に例を示します：

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

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

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

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

以下の例では、ユーザーのデバイスがhubRoundSmallプロファイルの基準を満たすと、このwhen句がtrueと評価されます。

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

以下の例では、長方形のviewportであればwhen句がtrueと評価されます。

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

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

プロファイル

以下のリソースでは、viewportプロファイル一式を提供しています。

リソース	オプション
`viewportProfile`	以下のいずれかになります。 `hubRoundSmall` `hubLandscapeSmall` `hubLandscapeMedium` `hubLandscapeLarge` `tvLandscapeXLarge`

リソース	形状条件	向き条件	サイズクラス条件	密度条件
`hubRoundSmall`	`viewportShapeRound`	`viewportOrientationEqual`	`viewportClassSmallSmall`	`viewportDensityLow`
`hubLandscapeSmall`	`viewportShapeRectangle`	`viewportOrientationLandscape`	`viewportClassMediumXSmall`	`viewportDensityLow`
`hubLandscapeMedium`	`viewportShapeRectangle`	`viewportOrientationLandscape`	≥ `viewportClassMediumSmall`	`viewportDensityLow`
`hubLandscapeLarge`	`viewportShapeRectangle`	`viewportOrientationLandscape`	≥ `viewportClassLargeSmall`	`viewportDensityLow`
`tvLandscapeXLarge`	`viewportShapeRectangle`	`viewportOrientationLandscape`	≤`viewportClassXLargeLarge`	>=`viewportDensityHigh`

形状

shapeリソースの定義を使ってviewportのさまざまな形状を区別します。

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

リソース	オプション
`viewportShape`	以下のいずれかになります。 `viewportShapeSquare` `viewportShapeRectangle` `viewportShapeRound`

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

向き

viewportの向きのリソース値を使ってviewportの向きを区別します。

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

リソース	オプション
viewportOrientation	以下のいずれかになります。 `viewportOrientationEqual` `viewportOrientationLandscape` `viewportOrientationPortrait`

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

サイズクラス

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

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

"when": "${@viewport.width == @viewportSizeMedium}"

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

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

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

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

リソース	オプション
viewportSizeClass	以下のいずれかになります。 `viewportClassSmallSmall` `viewportClassSmallMedium` `viewportClassMediumXSmall` `viewportClassMediumSmall` `viewportClassMediumMedium` `viewportClassMediumLarge` `viewportClassLargeSmall` `viewportClassLargeMedium` `viewportClassLargeLarge` `viewportClassXLargeLarge` `viewportClassXLargeXLarge`

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

密度

viewport密度（DPI）のリソースグループ

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

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

リソース	オプション
`viewportDensity`	以下のいずれかになります。 `viewportDensityXLow` `viewportDensityLow` `viewportDensityNormal` `viewportDensityHigh` `viewportDensityXHigh` `viewportDensityXXHigh`

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

Viewportプロファイル