最初に
MotionBoardは綺麗でわかりやすいグラフや画面を作ることができます。
綺麗な上に、動いたりもします。
気になる人は下記リンクをクリックしてください。体験デモもできます。
MotionBoard 体験デモについて（公式HPより）
【MotionBoardとは】
※キャプチャはウイングアーク1st社のホームページより抜粋
[ウイングアーク１ｓｔ株式会社 MotionBoard](https://www.wingarc.com/product/motionboard/index.html)
今回はポップアップメニューの作り方を紹介します。
ブロック別のグラフから、さらに詳細を見たい時に、グラフをクリックすると、ウィンドウが出てきて詳細の集計表があらわれます。
ダッシュボードでよくある悩みのひとつとして、画面の中に入れたい情報が多すぎて、ゴチャゴチャしちゃうことがあります。
そんなときに有効な手段として、ポップアップメニューが使えるんです。
BIやダッシュボード製品はいろいろありますが、このようなホームページのような動きがつくれるのはMotionBoardならではだと思います。
さっそくつくりかたを見てみましょう。
つくり方サマリー
今回は以下のようなMotionBoardのマニアックな機能を複数つかいます。
✅ コンテナ
✅ 変数
✅ データポイントアクション
✅ 左クリック割り当て
今回のMotionBoardの機能を覚えると、様々に応用が効きますので、ぜひ挑戦してください。
大まかな流れはこちらです。
１.コンテナを用意する
２.コンテナON、OFFボタンを用意する
３.集計表に変数をセットする
４.データポイントアクションを設定する
５.左クリック割り当てをする
さっそく見ていきましょう。
１.コンテナを用意する
まずはポップアップ用のコンテナを用意します。
今回は画面から浮かせた形でコンテナを出したいので、フリーレイアウト型にコンテナを用意します。
操作方法はコンテナをレイアウトにはめこむのではなく、ドラッグして大きさを決めるのですね。
コンテナにはグラフの項目を掘り下げた集計表をセットします。
今回のぼくの例ですと
グラフ：ブロック別の売上金額
集計表：ブロック・支店別、年度・月度毎の売上金額
となります。
２.コンテナON、OFFボタンを用意する
続いて、コンテナを表示ボタン、非表示ボタンを用意します。
表示ボタンは見栄えが悪くてOKです、最終的に非表示にして画面から出しません。
非表示ボタンはコンテナの中に入れましょう。
ボタン表示の設定はこちら。
ボタン非表示はこれの逆ですね。
以下のように動けばOKです。
３.集計表に変数をセットする
さて、次は集計表の絞り込みをおこないます。
たとえばグラフで「関東」をクリックしたら、コンテナの中の集計表は「関東」で絞り込んだ状態にします。
こちらはMotionBoardの変数を使用します。
プログラムを書く人であれば当たり前の機能ですが、ユーザーシステム変数は複雑なボードを作る上で切っても切れない存在です。
今回はグラフでクリックしたブロック（関東とか関西とか）を変数に入れて、集計表の検索条件にセットをします。
順番に紹介しましょう。
変数をつくる
画面右上の「管理」から
管理→システム変数→全般→変数
を選択します。
設定箇所は画面の右側になります。
今回気をつけるべき設定はこちら。
| 項目 | 入力する値 | 備考 |
|---|---|---|
| カテゴリ | テンプレート | 任意の値でOK（あとで探しやすくするための名前だから） |
| データ型 | 文字型 | |
| 変数名 | ブロック名 | |
| 値 | 👈 ここを空っぽにする |
何を作ったかというと、「ブロック名」という名前の"箱"をつくったのです。
この"箱"の中にボード上から値をセットするのですね。
グラフから変数に値を格納する
では次につくりました変数に値を入れる作業をします。
ここではデータポイントアクションという機能を使います。
グラフをクリックして、アイテムプロパティを表示させると、一番下に"データポイントアクション"が表示されますので、そこの歯車マークをクリックします。
今回はこのデータポイントアクションで２つの機能をセットします。
ひとつは先ほどつくったコンテナ表示ボタンの実行、もうひとつが変数の格納です。
下図のように指定します。
反映するシステム変数の"項目名"のところで絞り込みたい項目を入力し、システム変数に格納するという流れですね。
ではもうひとつ。
せっかく変数に情報が入りましたので、ポップアップで出てくる集計表の検索条件にこの変数をセットしましょう。
集計表のデータソースエディタから「検索」を選択します。
ブロック名を指定して、値の中に変数を入れます。
${ブロック名}のように 半角のドルマークと中カッコで変数の名前をはさめばOKです。
うまくいかなければ、下図の赤枠のところをクリックすると、変数を選んでくることができます。
これでグラフを右クリックしたらボタンを実行できるようになりました。
開いたコンテナの中にある集計表はきちんとブロック名で絞り込まれていますね。
では最後にワンクリックでこの動きが起きるようにしましょう。
左クリック割り当てにデータポイントアクションを設定する
グラフを左クリックしたときに、先ほどのデータポイントアクションを動かすようにします。
グラフの「チャート編集」を開き、「共通設定 ＞ 全般」を開き、一番下までスクロールをすると、"左クリックに割り当てる機能"が出てきます。
こちらの設定を「データポイントアクション」にしてあげると、左クリックで動作が実行します。
これで無事に動かすことができました。
コンテナ表示のボタンは直接クリックしなくてOKになりましたので、アイテム管理からボタンを非表示にしちゃいます。
これで完成です。
下図のような動きになりましたでしょうか？
さいごに
いかがでしたでしょうか。
こんなホームページみたいな動きができちゃうのがMotionBoardの特長です。
操作が大変な部分はありますが、ノウハウをつかんでしまえばいろいろな動きをさせることができます。
ぜひひとつずつ、機能を覚えていきましょう。