TECH BLOG

MENU

オンプレクラウド

MotionBoard

MotionBoard

2021/08/23 時点(MotionBoard ver.6.2)の記事です。

MotionBoardにアイテムを積上げる「コンテナ」機能があります。この「コンテナ」の機能を活用できる様になると、さらに表現の幅が広がります。例えば、ヘッダーや検索ウィンドウやスクロールボックスに使用することでデザインの向上や操作性の向上につながります。本記事では、とっても便利な「コンテナ」の活用方法についてご紹介します。

CASE1 コンテナアイテムをヘッダーに使う

まず、下の画像をご覧ください。

レイアウトモードでヘッダーを作ったのですが、ヘッダー部分にボードタイトルと検索条件2つを配置して背景に色を付けるとこんな感じになってしまいます。

各アイテムの間にある、白い線が気になりますね。

白い線の原因

レイアウト編集画面はこんな感じ。レイアウトの区切り線の部分に背景色をつけられないことが原因です。

見栄えがあまりよくないので、コンテナを使ってこの線を消しましょう。

コンテナでの解決方法

コンテナにアイテムを入れ、コンテナの背景色を設定することでレイアウト区切り線の部分にも色が付きます。

まず、配置しているアイテムを一旦退避させます。ボード管理からアイテム管理を開き、必要なアイテム(ボードタイトル、検索条件×2)の上で右クリックして[レイアウトから削除する]をクリックします。

背景に使っている四角形は不要なので、[レイアウトから削除]ではなく[アイテム削除]で削除してかまいません。

アイテムが取り除けたら、縦に区切っているレイアウトをすべて削除します。画像のような状態になったら、ヘッダー部分にコンテナを新規作成して配置してください。このとき[背景色]をヘッダーの背景にしたい色に設定します。

こんな感じになったら、レイアウト編集で元通りにレイアウトを区切っていきます。

アイテム一覧から右クリックで[レイアウトに追加する]を選び、元の場所に各アイテムを戻します。

完成~コンテナを使用したヘッダーの作成~

完成しました!白い枠線が消えることで綺麗な見た目になりましたね。

さて、今日はもう一つコンテナの活用法をご紹介します。

CASE2 スクロールボックスとして使う

ボードを作成している時に、たくさんチャートを並べたいけど場所が足りない。そう思ったことはありませんか?そんな時はコンテナを使ってスクロールボックスを作りましょう!

スクロールボックスの作成手順

作り方は簡単。

コンテナを設置する際に、コンテナサイズの高さの100%のチェックをはずします。高さを任意の数値に書き換えてOKをクリックしてください。デフォルトの高さより大きな値に設定すると、スクロールができるようになります。

あとはいい感じにレイアウトを区切って・・・

完成!

チャートを配置すれば完成!

ボード上に表示したいチャートが画面に収まりきらない場合などに使えますね!

横スクロールのボックスを作りたい場合は、高さではなく幅の100%チェックを外して任意の幅を設定すればOKです。

まとめ~コンテナの活用方法~

今回は2通りのコンテナ活用法をご紹介しました。色々な場面で活用できると思うので、ぜひ試してみてください!

また、過去にブログ内でご紹介したコンテナの活用法です。こちらも是非チェックしてみてください。

詳細:ボード上にアイテムを置くスペースがないときは「コンテナ」を活用してみよう
詳細:まるでWebサイト!?お洒落なグローバルメニューの作り方!
詳細:まるでWebサイト!? 折りたたみメニューの作り方!

この記事にリアクションしてみませんか?

  • 分かりやすい (3)
  • 問題が解決した (0)
お役に立てて嬉しいです!
プロフィールへ

Matsuura Takaya

2019年4月からWingArcにJoinし、主にMotionBoardを使ったボード構築に携わっています。デザイン性の高いダッシュボードの製作を得意としています。

Related article

Related article関連記事

Pick up

Pick upおすすめ記事

【まとめ】SVFCloud帳票をinvoiceAgentに連携する方法

  • #帳票作成・出力
  • #システム連携
  • #電帳法
  • #文書定義
  • #処理定義

2024.04.18

SVF

Dr.Sum Copilotをインストールしてみた【OpenAI】

  • #Copilot

2024.04.05

Dr.Sum

特定の文字列で分割して階層構造をつくりたい!~DS Scriptで分割する~1

  • #データ加工
  • #DS Script

2023.07.17

Dr.Sum

Ranking

Rankingランキング

1

棒グラフを大きい順番に並び替えたい!(ソートしたい)

  • #デザイン
  • #グラフ
  • #集計表

2019.06.15

MotionBoard

2

経過時間を時:分:秒で時刻表示したい!【320秒→05:20】

  • #グラフ

2022.08.02

MotionBoard

3

カスタム項目の書き方 よく使う関数からIfまで

  • #データ加工

2023.07.28

MotionBoard

Info

Information

ウイングアーク1stからのお知らせ