Wave Analytics ダッシュボード JSON ガイド
jレイアウトの仕様
layouts セクションは、モバイルデバイスのダッシュボードの表示方法をカスタマイズするために使用されます。
ダッシュボードの JSON ファイルの layouts セクションは、state セクションの子で、widgets および steps セクションの兄弟です。次に、典型的な layouts セクションの例を示します。
1"layouts": [
2 {
3 "device": "default",
4 "pages": [
5 {
6 "rows": [
7 "widget_name_1",
8 "widget_name_2"
9 ]
10 },
11 {
12 "rows": [
13 "widget_name_3 | widget_name_4",
14 "widget_name_2 {attribute=2}"
15 ]
16 }
17 ],
18 "version": 1
19 },
20 {
21 "device": "ipad",
22 "orientation": "landscape",
23 "pages": [
24 {
25 "rows": [
26 "widget_name_1 | widget_name_3 | widget_name_4 | row: {attribute=300}",
27 "widget_name_2 {widget_name=3}"
28 ]
29 }
30 ],
31 "version": 1
32 }前述の例の widget_name は、JSON ファイルの widgets セクションで指定される特定のウィジェットを参照します。属性 は、「レイアウト属性の参照」に記載されているいずれかの属性を参照します。パイプ文字 ( | ) はセルの区切り文字です。カンマ ( , ) で区切ってセルに複数のウィジェットを含めることができます。行は、引用符で囲まれた文字列 (引用符で囲まれた各文字列は 1 行) の外側のカンマ ( , ) で区切られます。
簡単な layouts セクション
次に、1 つのページに 1 つの列、4 つの行、4 つのウィジェットがある簡単な layouts セクションを示します。
1"layouts": [
2 {
3 "device": "default",
4 "pages": [
5 {
6 "rows": [
7 "buttongroup_1",
8 "dimfilter_1",
9 "dimfilter_2",
10 "chart_1"
11 ]
12 }
13 ]
14 "version": 1
15 }複雑な layouts セクション
複雑な layouts セクションを使用して、デバイス固有および方向固有の表示ルールを設定できます。次の layouts セクションでは、2 つのページでダッシュボードのウィジェットをレイアウトします。最初のページの最初の行の高さは 300 ピクセルです。2 番目のページには、2 つの行と 2 つの列があります。最初の行のセルの 1 つに 2 つのウィジェットが含まれます。ボックスウィジェットの 1 つに 3 つの属性セットがあります。グラフウィジェットは 2 つの列にまたがります。横モードの iPad でダッシュボードが表示される場合、2 つの行がある 1 つのページのみが表示されます。最初の行には 3 つのウィジェットがあり、2 番目の行には 3 つの列にまたがる 1 つのウィジェットがあります。
1"layouts": [
2 {
3 "device": "default",
4 "pages": [
5 {
6 "rows": [
7 "buttongroup_2 | row: {height=300}",
8 "chart_1"
9 ]
10 },
11 {
12 "rows": [
13 "dimfilter_1, box_1 {colspan=2, rowspan=2, zIndex=-1, vpad=5, hpad=5} |
14 dimfilter_2”,"chart_1 {colspan=2}"
15 ]
16 }
17 ],
18 "version": 1
19 },
20 {
21 "device": "ipad",
22 "orientation": "landscape",
23 "pages": [
24 {
25 "rows": [
26 "dimfilter_1, box_1 {colspan=2, rowspan=3, zIndex=-1, vpad=5, hpad=5} | dimfilter_2 |
27 buttongroup_2",
28 "chart_1 {colspan=3}"
29 ]
30 }
31 ],
32 "version": 1
33 }レイアウトのオプション
前の例は、横モード (“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 が指定されていない場合、Wave では使用に適したレイアウトの最適な推測を行うオートフォーマットを使用してダッシュボードが表示されます。レイアウトのオートフォーマットに関する次の事項に注意してください。
- Apple Watch の場合、オートフォーマットは default レイアウトの最初のページを使用してそれを 1 つの列に変換します。
- 外部デバイスの場合、オートフォーマットはスクロールできない 1 つのページのみをサポートし、外部ディスプレイにすべてのダッシュボードコンテンツを収めようとします。
- オートフォーマットでサポートされる各デバイスの列数には制限があります (下記の表を参照)。
デバイス オートフォーマットでサポートされる最大列数 Apple Watch 1 Apple iPhone 2 Apple iPad 4
オートフォーマットはデフォルトで有効になっています。モバイルレイアウトを使用できない、入念に設計されたダッシュボードなどの場合に、オートフォーマットを無効にするには、次のように空の pages 配列を layouts 配列の下に追加します。
1"layouts": [
2 {
3 "pages": [
4 {
5 }
6 ]
7 }