レイアウトの仕様
layouts セクションは、モバイルデバイスのダッシュボードの表示方法をカスタマイズするために使用されます。
ダッシュボードの JSON ファイルの layouts セクションは、state セクションの子で、widgets および steps セクションの兄弟です。次に、典型的な layouts セクションの例を示します。
前述の例の widget_name は、JSON ファイルの widgets セクションで指定される特定のウィジェットを参照します。属性 は、「layouts プロパティ」に記載されているいずれかの属性を参照します。パイプ文字 ( | ) はセルの区切り文字です。カンマ ( , ) で区切ってセルに複数のウィジェットを含めることができます。行は、引用符で囲まれた文字列 (引用符で囲まれた各文字列は 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 に固有のレイアウトです。次に、レイアウトのデバイスおよび方向のオプションを示します。
- “device”:“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 が指定されていない場合、Analytics では使用に適したレイアウトの最適な推測を行うオートフォーマットを使用してダッシュボードが表示されます。レイアウトのオートフォーマットに関する次の事項に注意してください。
- Apple Watch の場合、オートフォーマットは default レイアウトの最初のページを使用してそれを 1 つの列に変換します。
- 外部デバイスの場合、オートフォーマットはスクロールできない 1 つのページのみをサポートし、外部ディスプレイにすべてのダッシュボードコンテンツを収めようとします。
- オートフォーマットでサポートされる各デバイスの列数には制限があります (下記の表を参照)。
デバイス オートフォーマットでサポートされる最大列数 Apple Watch 1 Apple iPhone 2 Apple iPad 4
オートフォーマットはデフォルトで有効になっています。モバイルレイアウトを使用できない、入念に設計されたダッシュボードなどの場合に、オートフォーマットを無効にするには、次のように空の pages 配列を layouts 配列の下に追加します。