データバインディングコンテキストのViewportオブジェクト
データバインディングコンテキストには、表示デバイスの動作特性を示すviewportプロパティが含まれています。
viewportプロパティは、APLドキュメントでデータバインディングコンテキストの一部として使用できます。これはスキルに送信されるリクエストに含まれるviewport情報とは別のものであり、こちらにはスキルコードでアクセスできます。Viewportプロパティの例
たとえば、Echo Showのviewportには次のプロパティがあります。
{
"viewport": {
"width": 1024,
"height": 600,
"pixelWidth": 1024,
"pixelHeight": 600,
"shape": "rectangle",
"dpi": 160,
"theme": "dark",
"mode": "hub"
}
}
スキルで条件付きロジックを使用することで、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プロパティは、画面の現在の画面非依存ピクセル数に設定されます。これらのプロパティが特定のデバイスの固定値であるとは考えないでください。heightとwidthには、画面の現在の向きが反映されます。タブレットは横向きモードと縦向きモードで切り替えられるため、そのときのモードに応じた画面のwidthとheightがレポートされます。たとえば、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プロパティは、画面の現在のピクセル数に設定されます。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.7",
"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つ選択するだけで、カスタマイズしたさまざまなデザインを簡単に切り替えることができます。
最終更新日: 2021 年 08 月 30 日