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

次に例を示します:

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

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

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

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

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

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

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

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

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

さまざまなデバイスタイプのデザイン方法については、Device Modesを参照してください。

Viewportプロファイルリソース(@viewportProfile)

@viewportProfileリソースでは、デバイスがさまざまなカテゴリーに分類されます。デバイスの特定をハードコーディングする代わりにこれらのカテゴリーの条件付きロジックに基づくことで、新しいデバイスが利用可能になったときのロジックの安定性が高まります。

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

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

以下の表に、利用可能なviewportプロファイルをまとめています。この表では、widthとheightの値が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

tvLandscapeXLarge

長方形/横長

テレビ

960~960

540~540

mobileSmall

長方形/縦長

モバイル

600~959

320~1920

mobileMedium

長方形/横長

モバイル

960~1279

320~1920

mobileLarge

長方形/横長

モバイル

1280~1920

320~1920

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": "${@viewport.width == @viewportSizeMedium}"
リソース viewport幅/viewport高さ(dp)の条件

viewportSizeXSmall

< 600

viewportSizeSmall

≥ 600 && <960

viewportSizeMedium

≥ 960 && <1280

viewportSizeLarge

≥ 1280 && <1920

viewportSizeXLarge

≥ 1920

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

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

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

"when": "${@viewportSizeClass == @viewportClassMediumLarge}"
リソース 高さ

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

密度(@viewportDensity)

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

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

"when": "${@viewportDensity == @viewportDensityHigh}"
リソース viewportの条件(dpi)

viewportDensityXLow

< 140

viewportDensityLow

≥ 140 && < 200

viewportDensityNormal

≥ 200 && < 280

viewportDensityHigh

≥ 280 && < 400

viewportDensityXHigh

≥ 400 && < 560

viewportDensityXXHigh

≥ 560 && < 720