Viewportプロファイル



Viewportプロファイル

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

viewportプロファイルとは

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