Analytics ダッシュボード JSON リファレンス
jダッシュボードのモバイルレイアウトの使用
モバイルレイアウトを使用して、モバイルデバイスのダッシュボードの外観をカスタマイズします。
ダッシュボードの JSON ファイルの layouts セクションは、state セクションの子で、widgets および steps セクションの兄弟です。
- 開いているダッシュボードから、CTRL+E (PC) または CMD+E キー (Mac) を押します。これにより、JSON エディタが開きます。詳細は、「ダッシュボード 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 } - [ランタイムに切り替え] をクリックして更新されたダッシュボードを保存します。
- モバイルデバイスでダッシュボードを表示してダッシュボードの新しいモバイルレイアウトをテストします。