データバインディングコンテキストのViewportオブジェクト



データバインディングコンテキストのViewportオブジェクト

データバインディングコンテキストには、表示デバイスの動作特性を示すviewportプロパティが含まれています。たとえば、Echo Showのviewportには次のプロパティがあります。

{
  "viewport": {
    "width": 1024,
    "height": 600,
    "pixelWidth": 1024,
    "pixelHeight": 600,
    "shape": "rectangle",
    "dpi": 160,
    "theme": "dark",
    "mode": "hub"
  }
}

スキルで条件付きロジックを使用することで、viewportに応じて異なる応答を提供できます。

関連トピック: スキルのLambda関数でのViewport特性

プロパティ

viewportプロパティでは、次のプロパティが定義されています。

プロパティ 型/値 説明
dpi 整数 viewportのピクセル密度です。
height 整数 dp単位のviewportの高さです。
mode モード 動作モードです。
pixelHeight 整数 ピクセル単位のviewportの高さです。
pixelWidth 整数 ピクセル単位のviewportの幅です。
shape roundまたはrectangle viewportの形状です。
width 整数 dp単位のviewportの幅です。
theme lightまたはdark 色スキーマの設定です。

dpi

画面非依存ピクセル(dp)は、携帯電話を見るときの距離で画面を持ち、画面のピクセル密度が1インチ(3cm)あたり約160ピクセルであると仮定した場合の画面のビジュアルサイズを表す測定単位です(初代iPhoneの画面では1インチあたり163ピクセルでした)。物理的な大きさが同じ2つの画面を同じ距離から見た場合、画面の実際のピクセル密度にかかわらず、2つの画面のdpディメンションはほぼ同じになります。

viewportのdpi(インチあたりのドット数)とは、人が見たとおりのポイントまたはピクセルのサイズを表した値であり、画面の実際のインチあたりのピクセル数とは異なります。dpiを求める公式は次のとおりです。

dpi = 160 * (ピクセルサイズ/dpサイズ)

サポートされているDPI値は、 120、160、213、240、320、480です。

実際には、メーカーが物理的なサイズと想定される視聴距離に応じて、画面のdpiサイズを指定しており、このdpiを基にdpサイズが計算されています。たとえば、1080pのテレビについて、実際の画面サイズにかかわらず、テレビ画面の対角線の長さの約2倍の距離から視聴するようにメーカーから推奨されていました。視聴者に対するテレビの見た目の大きさは一定のため、1080pのテレビのdpiは320であり、pixelHeightは1080、heightは540となります。

形状

画面のshapeは、roundまたはrectangleのどちらかに設定されています。

heightおよびwidth

heightプロパティとwidthプロパティは、画面の現在の画面非依存ピクセル数に設定されます。これらのプロパティが特定のデバイスの固定値であるとは考えないでください。heightwidthには、画面の現在の向きが反映されます。タブレットは横向きモードと縦向きモードで切り替えられるため、そのときのモードに応じた画面のwidthheightがレポートされます。たとえば、1024×600dpのタブレットのwidthは、横向きモードでは1024、縦向きモードでは600とレポートされます。

mode

modeプロパティは、想定されるデバイスの用途を示します。modeプロパティには、次のいずれかの値が割り当てられます。

説明 一般的な入力方法
auto 車内で運転手が使用 タッチ 自動車のダッシュボード、航空機の内蔵ディスプレイ
hub 卓上デバイスまたは据え置き型デバイス タッチ(近くにいるとき) Amazon Echo Show、キッチン家電
mobile ユーザーが持ち運べる携帯デバイス タッチ 携帯電話、タブレット型コンピューター
pc デスクトップまたはノートパソコン キーボード、マウス、トラックパッド デスクトップ、ノートパソコン
tv テレビまたは投影型ディスプレイ 遠隔操作 テレビ、看板

上の表に記載されている入力方法は代表的な例であり、特定のデバイスモードに必ずしも当てはまるとは限りません。

1台のデバイスがさまざまなモードで使用される場合もあります。たとえば、タブレット型コンピューターは、通常「mobile」デバイスとして使用されますが、ドッキングステーションに接続している場合は「hub」デバイスとして使われます。同じ場所にあるデバイスでも、モードが異なる場合もあります。たとえば、自動車の場合、ダッシュボードに内蔵されたデバイスは「auto」、後部座席の天井に設置されたデバイスは「tv」、同乗者が所持する携帯電話は「mobile」になります。

モードのリストは変更される可能性があります。modeを条件付きロジックで使用する場合、プロパティが認識できない値を返す可能性があることが想定されます。モードに依存するプロパティまたはコンポーネントには、常にデフォルトの定義を指定してください。

pixel高さおよび幅

pixelHeightプロパティとpixelWidthプロパティは、画面の現在のピクセル数に設定されます。pixelHeightpixelWidthには、画面の現在の向きが反映されます。タブレットは横向きモードと縦向きモードで切り替えられるため、そのときのモードに応じた画面のpixelHeightpixelWidthがレポートされます。たとえば、1024×600dpのタブレットのpixelWidthは、横向きモードでは1024、縦向きモードでは600とレポートされます。

theme

themeには、デバイスで使用されている基本色スキーマが反映されます。themeは文字列値です。APLドキュメントのthemeプロパティでテーマを設定できます。ドキュメントで設定されていない場合、デバイスによって「light」または「dark」のいずれかに設定されます。

  • light: 明るい背景に暗いテキスト
  • dark: 暗い背景に明るいテキスト

themeは、ドキュメントまたはパッケージでスタイルを定義する際に使用できます。次に例を示します。

{
  "styles": {
    "styledText": {
      "values": [
        {
          "color": "${viewport.theme == 'dark' ? 'white' : black'}"
        }
      ]
    },
    "styledFrame": {
      "values": [
        {
          "backgroundColor": "${viewport.theme == 'dark' ? '#096484' : '#74B6CF'}"
        }
      ]
    }
  }
}

ドキュメントでは、テーマを完全に無視するか、デバイスが提供する値をカスタムテーマで上書きできます。たとえば、以下のドキュメントではカスタムの「fancy」テーマを作成しています。

{
  "type": "APL",
  "version": "1.1",
  "theme": "fancy",
  "styles": {
    "styledText": {
      "description": "lightテーマ、darkテーマ、fancyテーマに基づいて色を選択するテキストスタイル",
      "values": [
        {
          "color": "white"
        },
        {
          "when": "${viewport.theme == 'light'}",
          "color": "black"
        },
        {
          "when": "${viewport.theme == 'fancy'}",
          "color": "red"
        }
      ]
    }
  },
  "mainTemplate": {
    "items": {
      "type": "Text",
      "style": "styledText"
    }
  }
}

この方法を取ると、読み込んだAPLパッケージにスタイルとリソースを柔軟に移行できます。ドキュメントの作成者はテーマを1つ選択するだけで、カスタマイズしたさまざまなデザインを簡単に切り替えることができます。