MotionBoardでデータの差分比較をしてみよう

#最初に
MotionBoardは綺麗でわかりやすいグラフや画面を作ることができます。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/657414/04c48011-e65b-88dd-f666-a838819636e4.png" width=60%>
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/657414/e777e485-f3d0-3dc7-57e2-ddddd2df8860.png" width=60%>
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/657414/7bc601e7-ace8-cafa-2313-c2d66b9de500.gif" width=60%>
綺麗な上に、動いたりもします。
気になる人は下記リンクをクリックしてください。体験デモもできます。
[MotionBoard　体験デモについて（公式HPより）](https://www.wingarc.com/product/motionboard/demo/index.html)

<details><summary>【MotionBoardとは】</summary><div>
様々なデータソースからデータをあつめ、１つの画面上で統合するMotionBoard。
クラウドサービスとの接続もでき、チャットツール送信もできるのでとてもおもしろいです。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/657180/877897e8-35d1-b055-a80c-b9051866bc38.png" width=60%>
※キャプチャはウイングアーク1st社のホームページより抜粋
[ウイングアーク１ｓｔ株式会社　MotionBoard](https://www.wingarc.com/product/motionboard/index.html)
</div></details>

今回はデータ差分比較について紹介します。

#データの差分比較とは
こちらをご覧ください。
![test.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/657414/9952ecda-287e-f09a-da2c-18bd76171e02.gif)

画面下部のデジタルチャートをクリックすると明細が表示されます。
このデジタルチャートは**先週との比較**を表しています。
営業の商談の中で「この案件は先週の同じ案件と比較して、フェーズが変わった」ということを表しています。
このような差分比較は可視化の観点で強いニーズがあるものの、通常のデータの持ち方だとツール側での比較処理が難しく、実現させるときにはデータマートを構築する必要が出てまいります。
データベースの中でSQLを書いて・・・という作業になってしまうのですね。

MotionBoardは**画面操作だけでデータの差分比較ができてしまう**のです。



#全体の流れ
今回の流れは大きくわけて、３つとなります。

１.このグラフの見方の解説
２.差分データを貯める
３.どうやってグラフを作ればいいのか

さっそく見ていきましょう。

##１.このグラフの見方の解説

今回のターゲットは下図のボードの
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/657414/a87552d2-d960-e1ec-f6f6-2b2de90c4888.png)

この部分です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/657414/6f61733c-f69f-4d6a-7d32-1e5d17c001aa.png)

クリックするとポップアップで明細表にドリルスルーされます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/657414/1d268d7e-7b82-df23-0b77-186863ea10bd.png)

サマリが表示されていて、クリックすると詳細があらわれる、とてもわかりやすい作りをしています。

このボードがどうやって作られているかを解説します。

##２.差分データを貯める

まずはデータを加工しなければなりません。
そもそもこのデータは元はこの形です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/657414/f2bc1a15-d0a7-0e39-2849-45bf8d43d7bd.png)
フェーズのところがひとつです。
これが一週間前のデータです。

一週間後には商談のひとつずつが進み、フェーズが変わります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/657414/7fae2859-bfd4-136c-482e-487209e4817d.png)

この双方の情報がなければ、前述した表現というものはできません。
そのため、MotionBoard内では一週間前と現在の両方のデータを保持する必要があります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/657414/ad15c796-afc7-cdb4-8eb5-7dac502d1661.png)

こんなデータが事前に用意されていれば、何も問題はないのですが、用意がない場合はデータベース側でこの形を作ってもらう必要があったのです。
ITベンダーさんであれば可能ですが、現場の方ですと、難題です。

###MotionBoardならこうやる
MotionBoardのスナップショットの機能を活用します。
スナップショットの[公式マニュアル](https://cs.wingarc.com/manual/mb/6.1/ja/UUID-23126913-8d6f-92cd-4128-009f31648962.html#UUID-23126913-8d6f-92cd-4128-009f31648962_d38915e173404)はこちら。

差分比較スナップショットを図示するとこのようなイメージになります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/657414/6303cc62-6243-33d9-8032-973d23c36c5d.png)


便利ですね、スナップショット。
では設定方法をチェックしましょう。

※注　スナップショットの保存先はMotionBoard Cloudはデータストレージ、オンプレミスのMotionBoardは[こちら](https://cs.wingarc.com/manual/mb/cloud/ja/UUID-3d2daf4c-0dd9-c870-a10f-3ab7551a72bf.html)となります。

###設定方法
今回はMotionBoard Cloudで設定してみます。

MotionBoard編集画面の画面右上の「管理」から「格納データ管理」→「データストレージ管理」をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/657414/576b4662-fb9d-23b5-aaef-68e0e605abf0.png)

データストレージにテーブルを新しく追加するので「新規作成」をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/657414/2e15dc43-4e23-b46b-95a5-6b02fb7ed4a7.png)

サンプルに入っている「案件.csv」を使用します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/657414/757a927d-abd4-0702-9888-432c085e4a8a.png)

内容を確認して、そのまま「OK」
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/657414/3542e17e-32f6-23a1-56df-698428df92bf.png)

実行ユーザーの「検索」ボタンをクリックし、データを取り込む権限のあるユーザを選択して、
差分比較を「利用する」にチェック、そして「詳細設定」ボタンをクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/657414/408fffef-2afb-8d2c-1ef8-72d7a9327637.png)


ここが大事です。
このデータのキーとなる項目を**比較キー**とします。
新しいデータと古いデータのキーを見て、同一のものがあったら、差分をチェックするようにします。
今回の場合は、商談IDが比較キーとなります。
そしてフェーズを**差分抽出対象**とします。
この項目が新（CURRENT）と旧（BEFORE）として、１つのレコード内で保持されるのです。

項目を指定すると、該当箇所の色が変わります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/657414/b623ee2b-fc6f-4fa8-43ea-7b35c74db0e6.png)

最後に繰り返しタイプを毎週にするなど、データを吸い上げる時間をセットします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/657414/b09fe03a-c557-b29f-2e21-e108d919168a.png)

今回のやり方ですと、
日曜日の朝5:00に案件.csvをデータストレージに登録します。
登録するときにすでにデータストレージに入っている、前回のデータと比較して、同様の商談IDを持っていたら、フェースの旧（BEFORE）に過去情報をセットします。
という方法になります。
案件.csvがデータベースだったり、Salesforceなどであっても、同じことが可能です。


これで冒頭のデータを揃えることができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/657414/ad15c796-afc7-cdb4-8eb5-7dac502d1661.png)


##３.どうやってグラフを作ればいいのか
さて、データが揃いました。
あとは可視化すればOKです。


###まずはデータを絞る
さて、先ほど作成したデータですが、キャプチャではわかりやすいようにフェーズが変わったもののみを出していますが、実際はそんなことありません。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/657414/19aff2fe-aacd-3c31-8f5d-021438267dea.png)

こんな感じで、変更のないデータがほとんどになると思います。
検索設定で、変化のあるデータだけを抽出するようにしましょう。

さて、検索をかけるには少々トリックが必要です。
フェーズBがAになったとか、フェーズDがBになったとかの抽出をするために、一度、A、B、Cなどを数字にします。

文字を数字に置き換えるために、カスタム項目を用意し、REPLACE関数を使います。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/657414/c9419d31-f0e0-4654-19f0-5f6e9f4f84bb.png)

``REPLACE([案件確度_CURRENT], "A|B|C|D|E|F|G|H", "1|2|3|4|5|6|7|8")
``

BEFOREにも同じことをしてあげましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/657414/99cca50b-0eeb-55f1-42f4-76d6fbd9c0fc.png)


そしてデータソースエディタの検索画面から、下図の設定をします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/657414/b4b88681-1f2f-2647-fbb4-777e0158c9c9.png)

先ほど作ったカスタム項目のCURRENTに対して、
・比較条件：より小さい
・検索候補値：他項目　先ほどのカスタム項目のBEFORE
をセットします。

こうすると、 BEFOREよりもフェーズの上がったCURRENTが抽出対象となります。
逆にフェーズの下がったものを抽出する場合は比較条件を「より大きい」にすればOKです。

今回は集計表を使用します。
（シングルデジタルでも構いませんが表現の幅から集計表を選択）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/657414/d93c35ec-4ee6-aefa-abde-5d65cabddee6.png)

行項目にはダミーの項目を入れておきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/657414/32b16eb7-f6f3-99ac-82cf-297a884ca9ef.png)


最後に集計表の左クリックにドリルスルーの機能を割り当てます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/657414/e16e47e9-feb6-acc6-bc86-22385a0eef70.png)


以上でこの画面（の一部ですが）ができるようになります。
![test.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/657414/9952ecda-287e-f09a-da2c-18bd76171e02.gif)


##まとめ
いかがでしたでしょうか？

MotionBoardのスナップショットを活用した、差分比較。
ぜひともお試しください！