TECH BLOG

MENU

オンプレクラウド

MotionBoard

MotionBoard

 

MotionBoardにはレイアウトページタブ機能が搭載されており、 1つのボードで複数の画面を切り替えて利用することができます。 しかし、レイアウトページタブは文字サイズを変えることができなかったり 表示する場所が画面の最上部固定だったり、お洒落にするには色々と制約があります。 そこで今回は、レイアウトページタブ機能を使わず Webサイトのようにグローバルメニューを使って画面を切り替える方法をご紹介します。

MotionBoardでWebサイトのようなデザインの画面を作成する

STEP1 レイアウトを区切りコンテナを配置する

それでは早速やっていきましょう。 流れとしては、ボタンを作成してそれぞれにコンテナを割り当て、表示非表示で切り替える形になります。 まず、以下の画像のようにレイアウトを区切ります。 1番上はロゴやタイトルを配置するエリア、真ん中はメニューを配置するエリア、 下の1番広いエリアはチャートを配置するエリアになります。

次に、このエリアに下線付きメニューのボタンを配置するためのコンテナを配置します。 コンテナの背景色を設定してOKをクリックしてください。 コンテナができましたね。 コンテナの中は、以下のようなレイアウトで区切ります。

STEP2 図形とコンテナを配置する

後ほど解説するボタンで表示非表示が切り替わる図形とコンテナを配置します。

ボタン選択時の下線となる図形を配置する

コンテナ内の区切ったエリアの下側に、それぞれ図形アイテムの四角形を配置してください。 配置した図形アイテムの設定を開き、[塗りつぶし]に任意の色を設定してください。 この色がボタン選択時の下線になります。先ほど設定したコンテナの背景色と違う色を選ぶようにしましょう。 また、[線]の✓は外します。 他の2つにも同様の設定を行います。 図形の名称は、ここではそれぞれ「下線A」「下線B」「下線C」とします。

ボタン選択時に出現するコンテナを配置する

次に、先ほど設置したコンテナの下のエリアに新規のコンテナを設置してください。 背景色は基本的にボードの背景と同じ色(今回の場合だと白)にしますが、 ここでは説明が分かりやすくなるように3つとも別の色にします。 今回はボタンが3つなので、同じ場所にコンテナを重ねて3つ設置します。 名称は、それぞれ「コンテナA」「コンテナB」「コンテナC」としてください。 コンテナが設置できましたね。

STEP3 表示非表示機能を持ったボタンアイテムを作成する

ボタンAを押すとコンテナAが出現するような設定をしていきます。まず、ボタンアイテムを新規作成します。 先ほど配置した図形の上のレイアウトに設置しましょう。 アクション種別は「表示非表示切り替え」を選択します。 「下線A」と「コンテナA」を表示、「下線B」「下線C」「コンテナB」「コンテナC」を非表示に設定してください。 詳細をクリックしてボタンの詳細設定を行います。 [名前]は、今回は「ボタンA」とします。 [表示テキスト]にボタンの名称を設定し、[サイズに合わせて拡大縮小する]の✓を外します。 [フォント設定]の[サイズ]で適当なフォントサイズに変更します。 [光沢効果] と [枠線] の✓を外します。 [通常時]の画像に透明画像(透過画像)を設定してください。  ※透明画像がない場合は、こちらを保存して使用してください  透明.png ボタンAが作成できたら、同じ要領で「ボタンB」「ボタンC」を作成します。 ボタンBの場合は 「下線B」と「コンテナB」を表示、「下線A」「下線C」「コンテナA」「コンテナC」を非表示に ボタンCの場合は 「下線C」と「コンテナC」を表示、「下線A」「下線B」「コンテナA」「コンテナB」を非表示に設定してください。 これでボタンの設定が完了しましたね。 次に、[レイアウト編集]でボタンと下線の間のレイアウトを「90」に設定します。 ボタンAの上で右クリックし、ボタンアクションを実行してください。 これで設定は完了です。 最後に[ボード管理]の[ボード設定]から[レイアウトページタブ]を利用しない設定にしましょう。

まとめ ~コンテナを使用したWebサイトのようなグローバルメニューの作成~

いかがだったでしょうか。

今回は表示しているメニューの下に線が表示されるものを作成しましたが、工夫次第で色々なメニューが作れます。 是非色々試してみてください!

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

What do you think of this post?
  • 分かりやすい (8)
  • 問題が解決した (1)
お役に立てて嬉しいです!

Matsuura Takaya

MotionBoard
プロフィールへ >

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

Related article

Related article関連記事

Pick up

Pick upおすすめ記事

【脱Excel】MotionBoardの入力機能で業務アプリをつくる

公開:2024.08.05
更新:2024.08.05

分かりやすい

2

解決した

0
  • データ入力
  • デザイン
  • コンテナ

MotionBoard

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

公開:2024.04.18
更新:2024.08.07

分かりやすい

2

解決した

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

SVF

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

公開:2024.04.05
更新:2024.04.18

分かりやすい

2

解決した

0
  • Copilot

Dr.Sum

Ranking

Rankingランキング

1

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

公開:2019.06.15
更新:2023.11.27

分かりやすい

13

解決した

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

MotionBoard

2

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

公開:2022.08.02
更新:2024.05.08

分かりやすい

11

解決した

7
  • グラフ

MotionBoard

3

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

公開:2023.07.28
更新:2024.10.30

分かりやすい

25

解決した

7
  • データ加工

MotionBoard

Info

Information

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

int(57)