レイアウトの仕様
“layouts” セクションは、モバイルデバイスのダッシュボードの表示方法をカスタマイズするために使用されます。
ダッシュボードの JSON ファイルの “layouts” セクションは、“widgets” セクションの子で、“state” および “steps” セクションの兄弟です。次に、典型的な “layouts” セクションの例を示します。
前述の例の widget_name は、JSON ファイルの “widgets” セクションで指定される特定のウィジェットを参照します。属性 は、「レイアウト属性の参照」に記載されているいずれかの属性を参照します。セルはパイプ文字 ( | ) で区切られます。カンマ ( , ) で区切ってセルに複数のウィジェットを含めることができます。行は、引用符で囲まれた文字列 (引用符で囲まれた各文字列は 1 行) の外側のカンマ ( , ) で区切られます。
簡単な layouts セクション
次に、1 のページに 1 つの列、4 つの行、4 つのウィジェットがある簡単な “layouts” セクションを示します。
複雑な layouts セクション
複雑な “layouts” セクションを使用して、デバイス固有および方向固有の表示ルールを設定できます。次の “layouts” セクションでは、2 つのページでダッシュボードのウィジェットをレイアウトします。最初のページの最初の行の高さは 300 ピクセルです。2 番目のページには、2 つの行と 2 つの列があります。最初の行のセルの 1 つに 2 つのウィジェットが含まれます。ボックスウィジェットの 1 つに 3 つの属性セットがあります。グラフウィジェットは 2 つの列にまたがります。横モードの iPad でダッシュボードが表示される場合、2 つの行がある 1 つのページのみが表示されます。最初の行には 3 つのウィジェットがあり、2 番目の行には 3 つの列にまたがる 1 つのウィジェットがあります。
レイアウトのオプション
上記の例は、横モード (“device:ipad, orientation:landscape”) の iPad に固有のレイアウトです。次に、レイアウトのデバイスおよび方向のオプションを示します。
- “default”: 特定のデバイスまたは方向を対象としていないレイアウト用です。
- “device:ipad, orientation:portrait”: 縦モードの Apple iPad 用です。
- “device:ipad, orientation:landscape”: 横モードの Apple iPad 用です。
- “device:ipad”: 縦モードまたは横モードの Apple iPad 用です。
- “device:iphone”: Apple iPhone 用です (暗黙的に縦モード)。
- “device:external”: 外部デバイス用です (デバイスが HDMI ケーブルでプロジェクターやディスプレイに接続されている場合など)。external レイアウトを使用するには、[設定] で [プレゼンテーションモード] を選択します。
- “device:applewatch”: Apple Watch 用です。1 つのスクロールページのみがサポートされます。
- “orientation:portrait”: 縦モードの iPhone または iPad 用です。
- “orientation:landscape”: 横モードの iPad 用です。
レイアウトのオートフォーマット
“layouts” が指定されていない場合、使用に適したレイアウトの最適な推測を行うオートフォーマットを使用してダッシュボードが表示されます。レイアウトのオートフォーマットに関する次の事項に注意してください。
- Apple Watch の場合、オートフォーマットは default レイアウトの最初のページを使用してそれを 1 つの列に変換します。
- 外部デバイスの場合、オートフォーマットはスクロールできない 1 つのページのみをサポートし、外部ディスプレイにすべてのダッシュボードコンテンツを収めようとします。
- オートフォーマットでサポートされる各デバイスの列数には制限があります (下記の表を参照)。
デバイス オートフォーマットでサポートされる最大列数 Apple Watch 1 Apple iPhone 2 Apple iPad 4
オートフォーマットはデフォルトで有効になっています。モバイルレイアウトを使用できない、入念に設計されたダッシュボードなどの場合に、オートフォーマットを無効にするには、"layouts": "" のように空の “layouts” 属性を “state” 属性の下に追加します。
layouts セクションを含むダッシュボード JSON ファイルの例
次に、“layouts” セクションを含むダッシュボード JSON ファイルの例を示します。