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 |
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 |
viewport.width == viewport.height |
viewportShapeRectangle |
viewport.width != viewport.height |
viewportShapeRound |
viewport.shape == 'round' |
向き
viewportの向きのリソース値を使ってviewportの向きを区別します。
"when": "${@viewportOrientation == @viewportOrientationLandscape}"
リソース | オプション |
---|---|
viewportOrientation | 以下のいずれかになります。
|
リソース | 条件 |
---|---|
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 |
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 |
以下のいずれかになります。
|
リソース | viewportの条件(dpi) |
---|---|
viewportDensityXLow |
< 140 |
viewportDensityLow |
≥ 140 && < 200 |
viewportDensityNormal |
≥ 200 && < 280 |
viewportDensityHigh |
≥ 280 && < 400 |
viewportDensityXHigh |
≥ 400 && < 560 |
viewportDensityXXHigh |
≥ 500 && < 720 |