Wave Analytics ダッシュボード JSON リファレンス
jlayouts (Classic デザイナダッシュボードのみ)
JSON に layouts セクションを追加して、モバイルデバイスでのClassic デザイナダッシュボードの外観をカスタマイズします。
モバイルデバイスの 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 つのウィジェットがあります。
-
必要に応じて、各ウィジェットおよび行の属性を設定することによってダッシュボードのレイアウトをカスタマイズしてください。
たとえば、ステップ 2 の layouts をウィジェットや行の属性を含めるように変更できます。最初のページの最初の行の高さは 300 ピクセルです。2 番目のページのグラフウィジェットには、2 つの列の幅があります。
-
必要に応じて、ダッシュボードにデバイス固有および方向固有のレイアウトを設定します。使用できるデバイスおよび方向に関するオプションについては、「レイアウトの仕様」の「レイアウトオプション」を参照してください。
たとえば、ステップ 3 の layouts は、iPad で画面が横向きのとき�� 1 ページだけ使用するように変更できます。
- [ランタイムに切り替え] をクリックして更新されたダッシュボードを保存します。
- モバイルデバイスでダッシュボードを表示してダッシュボードの新しいモバイルレイアウトをテストします。
モバイルレイアウトの列、行、およびセルのサイズ設定について
ウィジェットのサイズ、行のサイズ、および列の数は動的に決定されますが、JSON で指定することもできます。
列の数とサイズの設定方法
モバイルレイアウトの列の数は、行のウィジェットの数に相当します。各行に 3 つのウィジェットがある場合、ダッシュボードには 3 つの列があります。モバイルレイアウトに 2 つの行があり、最初の行に 4 つのウィジェット、2 番目の行に 5 つのウィジェットがある場合、ダッシュボードには 5 つの列があります。colspan 属性で、どの行のウィジェット数よりも多い列数を指定すると、colspan 属性に合わせてダッシュボードに列が追加されます。
たとえば、次の layouts セクションがあるダッシュボードでは、最初のページに 3 つの列、2 番目のページに 2 つの列があります。
モバイルレイアウト内の列数を決定する場合には、次のヒントを考慮してください。
- どの列の幅も同じです。ダッシュボードに 4 つの列がある場合、各列の幅は、2 つの列があるダッシュボードの半分になります。
- 表示される列数は、ダッシュボードのページごとに独立して決まります。たとえば、ダッシュボードの最初のページに 3 つの列、2 番目のページに 4 つの列を表示できます。
- 各ダッシュボードには少なくとも 1 つの列があります。
- ダッシュボードの列数に制限はありません。追加した列数が多すぎると、列の幅が実用に耐えないほど小さくなることがあります。必ずレイアウトの使いやすさをテストしてください。
行の数と高さの設定方法
次に、各行の高さの計算方法を示します。
- height 属性を使用して行の高さを設定する場合、行の高さは指定した値になります。
- 行の 1 つ以上のウィジェットに優先される高さがある場合、行の高さは、優先される高さで最も高い高さになります。
- height 属性がなく、行のウィジェットに優先される高さがない場合、行の高さは使用可能なスペースを埋めるように動的に拡張されます。複数の行が動的に拡張される場合、それぞれの高さは同じになります。たとえば、使用可能なスペースが 200 ピクセルで、動的に高さが設定される行が 2 つある場合、各行の高さは 100 ピクセルになります。
ウィジェットのサイズ変更方法
サイズが固定されているウィジェットもあれば、動的に拡大縮小するウィジェットもあります。
| ウィジェット | 幅が固定されているか? | 高さが固定されているか? | 幅の拡大縮小動作 | 高さの拡大縮小動作 |
|---|---|---|---|---|
| リンク | はい | はい | 拡大縮小なし | 拡大縮小なし |
| テキスト | いいえ | 1 行の場合は「はい」。 複数行の場合は「いいえ」。 |
テキストに合わせて拡大縮小 | テキストに合わせて拡大縮小 |
| Pillbox | いいえ | はい | 拡大縮小 | 拡大縮小なし |
| ボックス | いいえ | いいえ | 拡大縮小 | 拡大縮小 |
| グラフ | いいえ | いいえ | 拡大縮小 | 拡大縮小 |
| リストセレクタ | いいえ | はい | 拡大縮小 | 拡大縮小なし |
| 範囲セレクタ | いいえ | はい | 拡大縮小 | 拡大縮小なし |
| 数値 | いいえ | はい | 拡大縮小 | 拡大縮小なし |
レイアウトの仕様
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 が指定されていない場合、Wave では使用に適したレイアウトの最適な推測を行うオートフォーマットを使用してダッシュボードが表示されます。レイアウトのオートフォーマットに関する次の事項に注意してください。
- Apple Watch の場合、オートフォーマットは default レイアウトの最初のページを使用してそれを 1 つの列に変換します。
- 外部デバイスの場合、オートフォーマットはスクロールできない 1 つのページのみをサポートし、外部ディスプレイにすべてのダッシュボードコンテンツを収めようとします。
- オートフォーマットでサポートされる各デバイスの列数には制限があります (下記の表を参照)。
デバイス オートフォーマットでサポートされる最大列数 Apple Watch 1 Apple iPhone 2 Apple iPad 4
オートフォーマットはデフォルトで有効になっています。モバイルレイアウトを使用できない、入念に設計されたダッシュボードなどの場合に、オートフォーマットを無効にするには、次のように空の pages 配列を layouts 配列の下に追加します。
layouts プロパティ
layouts キーでは、モバイルレイアウトの各ウィジェットの位置、順序、およびサイズを指定します。このレイアウトは、行、列、セル、ページで構成されます。グリッド内の各セルには 0 個以上のウィジェットを含めることができます。モバイルレイアウト内の行数、列数、およびセル数は、ウィジェット数とページ数によって異なります。
ウィジェット属性
ウィジェットに次の属性を設定できます。各ウィジェットに属性を 0 個以上選択できます。
行属性
行に次の属性を設定できます。
| プロパティ名 | 詳細 |
|---|---|
| height |
|
ウィジェット属性の上書き
次の属性をウィジェットに渡して、ウィジェットのデフォルトの動作を上書きできます。すべての色プロパティは「#022B54」のような文字列を使用します。
| ウィジェットタイプ | 属性 |
|---|---|
| すべてのウィジェット |
|
| ChartWidget |
|
| BoxWidget |
|
| LinkWidget |
|
| ListSelectorWidget |
|
| TextWidget |
|
| PillBoxWidget |
|
次に、属性を渡して chart_1 の背景色、テキストの色、軸や表示ラベルの表示を変更している例を示します。