【４つの結合方法】結合データソースを解説【難易度：低】

#最初に 

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> 

今回はMotionBoardのデータ結合方法のひとつである結合データソースについて解説をします。
過去に紹介したマスター項目、モデル、MotionBoard Viewとは異なる結合方式で、この機能を覚えるとMotionBoardの使い勝手がますます上がるものとなります。

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


#マスター項目、モデル、MotionBoard Viewとは異なる
過去に記事にしたマスター項目、モデル、MotionBoard Viewと、今回紹介する結合データソースは同じデータ結合なのですが、使用用途が異なります。
まずはこの部分を解説します。

###データ（トラン）とマスタを結合する
売上データの中に担当者コードが入っていて、担当者マスタと担当者コードで結合させて、担当者名称を表示する。
ごくごく簡単なデータ結合の形ですね。
このようにデータを結合する相手がマスタの場合は、マスター項目、モデル、MotionBoard Viewを使用します。
※売上データなど日々蓄積されているデータはトランザクション（トラン）とも言います


###データ（トラン）とデータ（トラン）を結合する
売上データと結合するデータが予算データのように、マスタと違い蓄積されるタイプのとき、結合データソースの出番となります。

売上データと予算データってデータの粒度が異なります。
売上データは超ざっくり言うとコンビニで言うと１つの店舗でピッってバーコードを読み込んだ数に相当します。
予算データってその店舗の一月の予算額が１レコードです。
売上データの方がデータが細かいですね。

このようにデータの粒度の異なるトランザクション同士を結合させる場合に結合データソースをつかうのです。

説明がややこしいので、実際のデータで見ていきましょう。


#つくり方
まずは売上CSVを読み込みます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/657414/73e9fb74-3bb0-ac1e-fab5-94a96b31b15d.png)

ここに[＋]ボタンがありますね。こちらをクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/657414/f740e8e0-3115-1d8d-f28e-b5bc6437646e.png)

[DS1]とはひとつめのデータソースという意味です。
[+]ボタンをクリックして、[DS2]を表示します。

[DS2]には予算Excelを読み込ませます。
**ちなみにこの[DSx]は合計８つまで指定することが可能です。**
（そんなに多いとレスポンス遅くなりますが）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/657414/938b34bc-1033-ef0e-e099-cdc6e249dcc5.png)


データソース一覧の[項目一覧]を見ると黒文字の項目と赤文字の項目があります。
黒文字が[DS1]つまり売上CSVの項目で、赤文字が[DS2]予算Excelの項目になります。
![test12.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/657414/beb30d77-6a3c-6451-080e-ca337d9ff61c.gif)




行・列・集計項目に配置していきます。

|名称  |項目  |
|---|---|
|行  |ブロック名、支社名  |
|列  |年度  |
|集計  |売上金額、予算金額  |


![test123.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/657414/70afd998-9b20-3e09-bdf2-af805e4bbf40.gif)


はい、結合ができました。
予実対比なので、事後計算項目を入れて、予実比を出しておきましょう。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/657414/d4c1d56c-5fe6-7912-7403-e7cf37fe4397.png" width=60%> 

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/657414/d0944c8f-3b60-c201-f483-57596e2b9865.png" width=60%> 

つくり方は以上です。
ここからは技術的な解説をします。

#結合データソースのカラクリ

結合データソースは行項目と列項目にはDS1、DS2それぞれで同一の名称の項目を配置しています。
このへんの使い方はサクセスコンテンツの[複数データを使って集計したい](https://cs.wingarc.com/ja/tips/10775?brand=motionboardc)を参考にしましょう。
良記事です。

ここでは技術的な仕組みを解説します。
先ほど述べたように、結合データソースは**粒度の異なるデータ同士を結合させる処理**となります。
しかし最終的に同じ集計表に結果が入るわけなので、**結合はしている**のです。
では粒度の異なるデータをどうやって結合させているかと言うと、**粒度を合わせてから**結合しているのです。

では何に粒度を合わせているのでしょう？
それが行と列に置いている項目なのです。

今回の場合、予算も売上も、**ブロック名、支社名毎の年度別の金額**に集計しています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/657414/32e0fd4e-d54b-bee1-b4e4-2a335d9fc9ea.png)


このように粒度の異なるデータでも、同じ形に集計した結果を結合することで、ひとつの表として表すことができるのです。


#さいごに
いかがだったでしょうか。
結合データソースの概念はMotionBoardの特徴的な機能となっており、結合データソースを駆使した応用技も数々ございます。

結合データソースの応用技につきましては、また記事にしたいと思います。