Viewportプロファイル

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

viewportプロファイルとは

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