この文章は Salesforce 機械翻訳システムを使用して翻訳されました。詳細はこちらをご参照ください。

layouts (Classic デザイナダッシュボードのみ)

JSON に layouts セクションを追加して、モバイルデバイスでのClassic デザイナダッシュボードの外観をカスタマイズします。

Wave デザイナダッシュボードのレイアウトについての詳細は、「Generate Unique Dashboard Layouts for Different Devices」を参照してください。

メモ

モバイルデバイスの Classic デザイナダッシュボードレイアウトには 2 つの種類があります。

絶対 (デフォルト): ダッシュボードの JSON で layouts セクションが定義されていない場合、ダッシュボードのレイアウトは絶対です。
絶対レイアウトは、デスクトップまたはラップトップコンピュータの Web ブラウザでの表示に合わせて最適化されます。
モバイル: ダッシュボードの JSON に layouts セクションがある場合、ダッシュボードのレイアウトはモバイルです。
モバイルレイアウトでは、モバイルデバイスでの表示に合わせてダッシュボードのウィジェットの位置、順序、およびサイズを最適化できます。このレイアウトは、行、列、セル、ページで構成されます。グリッド内の各セルには 0 個以上のウィジェットを含めることができます。モバイルレイアウト内の行数、列数、およびセル数は、ウィジェット数とページ数によって異なります。

絶対レイアウトのダッシュボードは Web ブラウザに適しています。

同じ絶対レイアウトのダッシュボードは、スマートフォンでは適切に表示されない可能性があります。

2 つのページでモバイルレイアウトを使用すると、スマートフォンでダッシュボードが完璧に表示されます。

ダッシュボードのモバイルレイアウトの使用

モバイルレイアウトを使用して、モバイルデバイスのダッシュボードの外観をカスタマイズします。

ダッシュボードの JSON ファイルの layouts セクションは、state セクションの子で、widgets および steps セクションの兄弟です。

開いているダッシュボードから、CTRL+E (PC) または CMD+E キー (Mac) を押します。これにより、エキスパートエディタモードが開きます。詳細は、「ダッシュボード JSON ファイルの表示または変更」を参照してください。
ダッシュボードの JSONに layouts セクションを追加します。
たとえば、この layouts セクションでは、各ページに 2 行のウィジェットがある 2 ページのモバイルレイアウトを定義します。1 番目のページには、各行に 1 つのウィジェットがあります。2 番目のページには、1 行目に 2 つのウィジェットがあり、2 行目に 1 つのウィジェットがあります。
1"layouts": [ 2 { 3 "device": "default", 4 "pages": [ 5 { 6 "rows": [ 7 "buttongroup_2", 8 "chart_1" 9 ] 10 }, 11 { 12 "rows": [ 13 "dimfilter_1 | dimfilter_3", 14 "chart_1" 15 ] 16 } 17 ], 18 "version": 1 19 }

必要に応じて、各ウィジェットおよび行の属性を設定することによってダッシュボードのレイアウトをカスタマイズしてください。

たとえば、ステップ 2 の layouts をウィジェットや行の属性を含めるように変更できます。最初のページの最初の行の高さは 300 ピクセルです。2 番目のページのグラフウィジェットには、2 つの列の幅があります。

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 | dimfilter_3",
14          "chart_1 {colspan=2}"
15        ]
16      }
17    ],
18    "version": 1
19  }

必要に応じて、ダッシュボードにデバイス固有および方向固有のレイアウトを設定します。使用できるデバイスおよび方向に関するオプションについては、「レイアウトの仕様」の「レイアウトオプション��を参照してください。

たとえば、ステップ 3 の layouts は、iPad で画面が横向きのときに 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 | dimfilter_3",
14          "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 | dimfilter_3 | buttongroup_2",
27          "chart_1 {colspan=3}"
28        ]
29      }
30    ],
31    "version": 1
32  }

[ランタイムに切り替え] をクリックして更新されたダッシュボードを保存します。
モバイルデバイスでダッシュボードを表示してダッシュボードの新しいモバイルレイアウトをテストします。

モバイルレイアウトの列、行、およびセルのサイズ設定について

ウィジェットのサイズ、行のサイズ、および列の数は動的に決定されますが、JSON で指定することもできます。

列の数とサイズの設定方法

モバイルレイアウトの列の数は、行のウィジェットの数に相当します。各行に 3 つのウィジェットがある場合、ダッシュボードには 3 つの列があります。モバイルレイアウトに 2 つの行があり、最初の行に 4 つのウィジェット、2 番目の行に 5 つのウィジェットがある場合、ダッシュボードには 5 つの列があります。colspan 属性で、どの行のウィジェット数よりも多い列数を指定すると、colspan 属性に合わせてダッシュボードに列が追加されます。

たとえば、次の layouts セクションがあるダッシュボードでは、最初のページに 3 つの列、2 番目のページに 2 つの列があります。

1"layouts": [
2  {
3    "device": "default",
4    "pages": [
5      {
6        "rows": [  
7          "buttongroup_2",
8          "chart_1 {colspan=3}"
9        ]
10      },
11      {
12        "rows": [  
13          "dimfilter_1 | dimfilter_3",
14          "chart_1"
15        ]
16      }
17    ],
18    "version": 1
19  }

モバイルレイアウト内の列数を決定する場合には、次のヒントを考慮してください。

どの列の幅も同じです。ダッシュボードに 4 つの列がある場合、各列の幅は、2 つの列があるダッシュボードの半分になります。
表示される列数は、ダッシュボードのページごとに独立して決まります。たとえば、ダッシュボードの最初のページに 3 つの列、2 番目のページに 4 つの列を表示できます。
各ダッシュボードには少なくとも 1 つの列があります。
ダッシュボードの列数に制限はありません。追加した列数が多すぎると、列の幅が実用に耐えないほど小さくなることがあります。必ずレイアウトの使いやすさをテストしてください。

行の数と高さの設定方法

次に、各行の高さの計算方法を示します。

height 属性を使用して行の高さを設定する場合、行の高さは指定した値になります。
行の 1 つ以上のウィジェットに優先される高さがある場合、行の高さは、優先される高さで最も高い高さになります。
height 属性がなく、行のウィジェットに優先される高さがない場合、行の高さは使用可能なスペースを埋めるように動的に拡張されます。複数の行が動的に拡張される場合、それぞれの高さは同じになります。たとえば、使用可能なスペースが 200 ピクセルで、動的に高さが設定される行が 2 つある場合、各行の高さは 100 ピクセルになります。

ウィジェットのサイズ変更方法

サイズが固定されているウィジェットもあれば、動的に拡大縮小するウィジェットもあります。

ウィジェット	幅が固定されているか?	高さが固定されているか?	幅の拡大縮小動作	高さの拡大縮小動作
リンク	はい	はい	拡大縮小なし	拡大縮小なし
テキスト	いいえ	1 行の場合は「はい」。複数行の場合は「いいえ」。	テキストに合わせて拡大縮小	テキストに合わせて拡大縮小
Pillbox	いいえ	はい	拡大縮小	拡大縮小なし
ボックス	いいえ	いいえ	拡大縮小	拡大縮小
グラフ	いいえ	いいえ	拡大縮小	拡大縮小
リストセレクタ	いいえ	はい	拡大縮小	拡大縮小なし
範囲セレクタ	いいえ	はい	拡大縮小	拡大縮小なし
数値	いいえ	はい	拡大縮小	拡大縮小なし

レイアウトの仕様

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 セクションで指定される特定のウィジェットを参照します。属性 は、「layouts プロパティ」に記載されているいずれかの属性を参照します。パイプ文字 ( | ) はセルの区切り文字です。カンマ ( , ) で区切ってセルに複数のウィジェットを含めることができます。行は、引用符で囲まれた文字列 (引用符で囲まれた各文字列は 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 用です。

アプリケーションが Apple Watch で表示され、かつ “device”:”applewatch” レイアウトが存在していない場合、アプリケーションはまず “device”:”iphone” レイアウトの最初のページの形式の変更を試みます。“device”:”iphone” が存在していない場合、次に “device”:“default” レイアウトの最初のページの使用を試みます。

メモ

アプリケーションが外部デバイスで表示され、かつ “device”:”external” レイアウトが存在していない場合、アプリケーションはまず “device”:”ipad” “orientation”:”landscape” の最初のページの使用を試みます。“device”:”ipad” “orientation”:”landscape” が存在していない場合、次に “device”:“default” レイアウトの最初のページの使用を試みます。

メモ

レイアウトのオートフォーマット

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  }

layouts プロパティ

layouts キーでは、モバイルレイアウトの各ウィジェットの位置、順序、およびサイズを指定します。このレイアウトは、行、列、セル、ページで構成されます。グリッド内の各セルには 0 個以上のウィジェットを含めることができます。モバイルレイアウト内の行数、列数、およびセル数は、ウィジェット数とページ数によって異なります。

ウィジェット属性

ウィジェットに次の属性を設定できます。各ウィジェットに属性を 0 個以上選択できます。

プロパティ名	詳細
`colspan`	型 Integer 次のウィジェットで使用可能すべてのウィジェット説明ウィジェットがまたがる列数。ウィジェットの幅。ダッシュボードに指定された幅を表示するのに十分な列数がない場合、そのダッシュボードに列が追加されます。例この例では、`“chart_1”` という名前のウィジェットが 3 列にまたがります。 `1"layouts": [ 2 { 3 "device": "default", 4 "pages": [ 5 { 6 "rows": [ 7 "dimfilter_1 \| dimfilter_2 \| dimfilter_3", 8 "chart_1 {colspan=3}" 9 ] 10 } 11 ] 12 "version": 1 13 }`
`rowspan`	型 Integer 次のウィジェットで使用可能すべてのウィジェット説明ウィジェットがまたがる行数。ウィジェットの高さ。ダッシュボードに指定された高さを表示するのに十分な行数がない場合、行が追加されます。例この例では、`“dimfilter1_1”` という名前のウィジェットが 2 行にまたがります。 `1"layouts": [ 2 { 3 "device": "default", 4 "pages": [ 5 { 6 "rows": [ 7 "dimfilter_1 {rowspan=2} \| dimfilter_2", 8 "chart_1" 9 ] 10 } 11 ] 12 "version": 1 13 }`
`zIndex`	型 Integer 次のウィジェットで使用可�� すべてのウィジェット説明ウィジェットの位置は、ダッシュボードの他のウィジェットに対して相対的です。`zIndex` では、ウィジェットが別のウィジェットの前後どちらに位置するかを指定します。`zIndex` 値が小さいウィジェットは、`zIndex` 値が大きい他のウィジェットよりも後ろに表示されます。 `zIndex` のデフォルト値は 0 です。例この例では、`“box_1”` という名前のウィジェットが `“number_1”` という名前のウィジェットの後ろに表示されます。 `1"layouts": [ 2 { 3 "device": "default", 4 "pages": [ 5 { 6 "rows": [ 7 "box_1 {zIndex=1}, number_1 {zIndex=2} \| chart_1" 8 ] 9 } 10 ] 11 "version": 1 12 }`
`vpad`	型 Integer 次のウィジェットで使用可能すべてのウィジェット説明ウィジェットのセルの上下に追加されるパディング (ピクセル単位)。`vpad` が 10 の場合、セルの上下に 10 ピクセルが追加されます。 `vpad` のデフォルト値は 0 です。例この例では、`“dimfilter_1”` という名前のウィジェットを含むセルの上下に 5 ピクセルのパディングがあります。 `1"layouts": [ 2 { 3 "device": "default", 4 "pages": [ 5 { 6 "rows": [ 7 "dimfilter_1 {vpad=5}" 8 ] 9 } 10 ] 11 "version": 1 12 }`
`hpad`	型 Integer 次のウィジェットで使用可能すべてのウィジェット説明ウィジェットのセルの左右に追加されるパディング (ピクセル単位)。`hpad` が 10 の場合、セルの左右に 10 ピクセルが追加されます。負の値を割り当てることができます。 `hpad` のデフォルト値は 0 です。例この例では、`“dimfilter_1”` という名前のウィジェットを含むセルの上下に 5 ピクセルのパディングがあります。 `1"layouts": [ 2 { 3 "device": "default", 4 "pages": [ 5 { 6 "rows": [ 7 "dimfilter_1 {hpad=5}" 8 ] 9 } 10 ] 11 "version": 1 12 }`
`vAxisWidth`	型 Integer 次のウィジェットで使用可能 `chart` 説明グラフウィジェットの X 軸のサイズ (ピクセル単位)。`vAxisWidth` を使用して複数のグラフウィジェットを配置します。例この例では、`“chart_1”` という名前のウィジェットに 250 ピクセルの幅の X 軸があります。 `1"layouts": [ 2 { 3 "device": "default", 4 "pages": [ 5 { 6 "rows": [ 7 "chart_1 {vAxisWidth=250}" 8 ] 9 } 10 ] 11 "version": 1 12 }`
`hAxisHeight`	型 Integer 次のウィジェットで使用可能 `chart` 説明グラフウィジェットの Y 軸のサイズ (ピクセル単位)。`hAxisHeight` を使用して複数のグラフウィジェットを配置します。例この例では、`“chart_1”` という名前のウィジェットに 250 ピクセルの高さの Y 軸があります。 `1"layouts": [ 2 { 3 "device": "default", 4 "pages": [ 5 { 6 "rows": [ 7 "chart_1 {hAxisHeight=250}" 8 ] 9 } 10 ] 11 "version": 1 12 }`

行属性

行に次の属性を設定できます。

プロパティ名詳細

プロパティ名	詳細
`height`	説明 `height` に数値が設定されている場合、`height` は行の高さ (ピクセル単位) です。 `height` に `preferred` が設定されている場合、行の高さは最大の高さと等しくなります。例この例では、最初の行の高さは 300 ピクセルです。2 番目の行の高さは、最も高いウィジェットの高さと等しくなります。 `1"layouts": [ 2 { 3 "device": "default", 4 "pages": [ 5 { 6 "rows": [ 7 "chart_1 {colspan=3} \| row:{height=300}", 8 "dimfilter_1 \| buttongroup_1 \| number_1 \| row:{height=preferred}" 9 ] 10 } 11 ] 12 "version": 1 13 }`

height

説明

height に数値が設定されている場合、height は行の高さ (ピクセル単位) です。

height に preferred が設定されている場合、行の高さは最大の高さと等しくなります。

例

この例では、最初の行の高さは 300 ピクセルです。2 番目の行の高さは、最も高いウィジェットの高さと等しくなります。

1"layouts": [
2  {
3    "device": "default",
4    "pages": [
5      {
6        "rows": [  
7          "chart_1 {colspan=3} | row:{height=300}",
8          "dimfilter_1 | buttongroup_1 | number_1 | row:{height=preferred}"
9        ]
10      }
11    ]
12    "version": 1
13  }

ウィジェット属性の上書き

次の属性をウィジェットに渡して、ウィジェットのデフォルトの動作を上書きできます。すべての色プロパティは「#022B54」のような文字列を使用します。

ウィジェットタイプ	属性
すべてのウィジェット	compact placeholder
`ChartWidget`	legend miniBars fit normalize multiMetrics splitAxis backgroundColor measureAxis (true/false) categoryLabels (true/false) textColor limitBarThickness (true/false)
`BoxWidget`	backgroundColor borderColor imageUrl stretch
`LinkWidget`	destinationType destination visualizationType includeState
`ListSelectorWidget`	instant expanded
`TextWidget`	title または text textColor textAlignment fontSize
`PillBoxWidget`	backgroundColor textColor borderColor selectedColor

次に、属性を渡して chart_1 の背景色、テキストの色、軸や表示ラベルの表示を変更している例を示します。

1"layouts": [
2     {
3       "device": "default",
4       "pages": [
5         {
6           "rows": [
7             "chart_1 {backgroundColor=\"#022B54\", measureAxis=false, categoryLabels=false, textColor=\"#FFFFFF\"}"
8           ]
9         }
10       ],
11       "version": 1
12     }
13   ]

Wave Analytics ダッシュボード JSON リファレンス

layouts (Classic デザイナダッシュボードのみ)

ダッシュボードのモバイルレイアウトの使用

関連項目:

モバイルレイアウトの列、行、およびセルのサイズ設定について

列の数とサイズの設定方法

行の数と高さの設定方法

ウィジェットのサイズ変更方法

レイアウトの仕様

簡単な layouts セクション

複雑な layouts セクション

レイアウトのオプション

レイアウトのオートフォーマット

関連項目:

layouts プロパティ

ウィジェット属性

行属性

ウィジェット属性の上書き

関連項目: