データバインディングコンテキストのViewportプロパティ（1.0）



（これはAPLの最新バージョンではありません。APLの最新バージョンの資料を参照するには、その他のバージョンオプションをクリックしてください）

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

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

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

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

• プロパティ
  • dpi
  • 形状
  • heightおよびwidth
  • pixel高さおよび幅
  • theme

プロパティ

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

dpi

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

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

dpi = 160 * （ピクセルサイズ／dpサイズ）

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

形状

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

heightおよびwidth

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

pixel高さおよび幅

pixelHeightプロパティとpixelWidthプロパティは、画面の現在のピクセル数に設定されます。pixelHeightとpixelWidthには、画面の現在の向きが反映されます。タブレットは横向きモードと縦向きモードで切り替えられるため、そのときのモードに応じた画面のpixelHeightとpixelWidthがレポートされます。たとえば、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つ選択するだけで、カスタマイズしたさまざまなデザインを簡単に切り替えることができます。