Alibaba CloudのBIツールQuickBIでフォームで送られた情報をもとにダッシュボードを作る

Alibaba Cloudを使う機会が出来たので、気になったサービスとしてQuickBIを触ってみたいと思います。

中でもQuickBIというBIツールでフォームを作成して、そのフォームに送られた内容をそのままBIダッシュボードとして作れたら面白いなと思ったのでやってみたいと思います。

BIツールのサービスは各クラウドベンダーや専用のサービスなどあるかと思いますが、同一クラウドベンダーのサービス内で完結すると楽なこともあるので試してみたいというのがモチベーションになります。

またフォームを簡単に作ってその結果を可視化出来たら、社内イベントなどでアンケートを取った結果を見たい時・共有したい時にも使えるのかなと、思いました。

## 事前準備

- ApsaraDB RDS for MySQLの立ち上げ：データ参照元として用意する必要があります

## やってみる

流れとしては以下の手順となります。

### 手順

1. QuickBIの初期設定 - Workspaceを作成
2. QuickBIとRDS(AlibabaのDB)を接続
3. QuickBI上でフォームを作成
    1. RDSにフォーム用のテーブルを作成
4. フォームで送られた内容をRDSで確認
5. QuickBIでダッシュボードの作成

### 1. QuickBIの初期設定

初期設定は画面の指示通りに進めていく形になります。

まずは初期設定としてQuickBIにアクセスしてリージョンを選択します。

![](https://storage.googleapis.com/zenn-user-upload/91f763ce42f2-20241030.png)

次はトライアルの登録を行います。ここではSMS認証があります。

![](https://storage.googleapis.com/zenn-user-upload/0779bc221ce2-20241030.png)

入力例

![](https://storage.googleapis.com/zenn-user-upload/cf4501f1b9ff-20241030.png)

登録後の画面はこちら。

次に赤枠のボタンからWorkspaceを作成します。

![](https://storage.googleapis.com/zenn-user-upload/c0a0e11a0ab0-20241030.png)

今回は「TestWorkspace」という名前で作成します。

![](https://storage.googleapis.com/zenn-user-upload/c3fc5969f401-20241030.png)

これでQuickBIの初期設定は完了です。

### 2. QuickBIとRDSを接続

次に、QuickBIのデータソースとして ApsaraDB RDS for MySQL を使用するため、QuickBIのData Sourcesからデータソースを作成します。

このデータソースがないと後に作成するフォームも保存出来ないようになっています。

![](https://storage.googleapis.com/zenn-user-upload/fe26e5b7ca19-20241030.png)

「TestFormAlibabaMySQL」という名前のデータソースを作成します。

![](https://storage.googleapis.com/zenn-user-upload/523f2c329e34-20241030.png)

ApsaraDB RDSの方でWhitelistを使用するため「Copy Whitelist」を押してコピーしておき、ApsaraDB RDSのWhitelistに追加します。

![](https://storage.googleapis.com/zenn-user-upload/0f3bf1c279c4-20241030.png)

細かい接続情報については以下を参照してください。

[Alibaba Cloud Data Source MySQL - Quick BI - Alibaba Cloud Documentation Center](https://www.alibabacloud.com/help/en/quick-bi/user-guide/add-an-apsaradb-rds-for-mysql-data-source)

接続情報を入力したら「Test Connection」を押して接続できるか試してみましょう。

※ 接続できない時は、「ApsaraDB RDS > Instances > 用意したInstance > Accounts」を見て、接続に必要なAccountsに適切な権限が付与されているか確認しましょう。

![](https://storage.googleapis.com/zenn-user-upload/bcd978c63b3e-20241030.png)

接続に成功したら以下の画面が表示されます。

![](https://storage.googleapis.com/zenn-user-upload/8783eff45221-20241030.png)

これでフォームの作成準備が完了しました。

### 3. QuickBI上でフォームを作成

以下の赤枠のボタンからフォームを作成します。

![](https://storage.googleapis.com/zenn-user-upload/81f86c059df3-20241030.png)

フォーム作成時の初期表示はこちら

![](https://storage.googleapis.com/zenn-user-upload/9d7456a72fa1-20241030.png)

左の「ウィジェット選択エリア」から「フォーム配置エリア」にドラッグアンドドロップで配置することができます。

※ 今回はわかりやすくなるように勝手にエリア名を付けてしまっています。

公式ドキュメントは英語ですが、かなり充実しているので詳細に見たい方は公式ドキュメントを参照してください。

https://www.alibabacloud.com/help/en/quick-bi/user-guide/create-a-form

今回作成するフォームでは、あるイベントの事前アンケートを想定して、以下の情報を取得するようにしたいと思います。

- ニックネーム：テキスト入力
- イベント参加形式：選択式（ラジオボタン）
- 興味がある項目：選択形式（複数選択ボタン）本当ならメールアドレスなど必要そうですね。

![](https://storage.googleapis.com/zenn-user-upload/bec0b969e07a-20241030.png)

それぞれ対応する項目を番号付けています。

これでフォームの作成は完了したので保存します。

- データソース：先ほど作成した「TestFormAlibabaMySQL」
- テーブル名：「test_forms_table」

![](https://storage.googleapis.com/zenn-user-upload/b06bde2971c9-20241030.png)

保存できたら右上の「Preview」を押すことでこのように表示されます。

![](https://storage.googleapis.com/zenn-user-upload/00ac7e148b75-20241030.png)

### 4. フォームで送られた内容をRDSで確認

あとはフォームに送られた内容を確認してみましょう。

以下の内容でフォームを送信します。

![](https://storage.googleapis.com/zenn-user-upload/ba8b63ee31fa-20241030.png)

内容を確認するためにデータソースからアドホッククエリを叩いてみます。

![](https://storage.googleapis.com/zenn-user-upload/dae7064d7f94-20241030.png)

クエリを書いて実行すると、、、

![](https://storage.googleapis.com/zenn-user-upload/9ad59c0f08a2-20241030.png)

見事にデータが入っているのを確認できましたー！

### 5. QuickBIでダッシュボードの作成

ダッシュボードを作成するためには「Dataset」が必要なので、データセットを用意します。

![](https://storage.googleapis.com/zenn-user-upload/cf5d2242b870-20241030.png)

利用するデータソースとデータセットを選択

![](https://storage.googleapis.com/zenn-user-upload/e1cad8749d15-20241030.png)

「TestFormDataset」という名前で保存をします。

![](https://storage.googleapis.com/zenn-user-upload/43b85cab4e5e-20241030.png)

これでデータセットを作成できたので、いよいよダッシュボードを作成します。

![](https://storage.googleapis.com/zenn-user-upload/c8776895d686-20241030.png)

ダッシュボードでは、3つのグラフを作ってみます。

- テーブル：回答結果を表形式で表示
- 円グラフ：参加形式を表示
- 棒グラフ：興味ある項目を表示

テーブルを作成

![](https://storage.googleapis.com/zenn-user-upload/f2e536fddbec-20241030.png)

次に円グラフを作成

初期状態では、Dimensionにしか「参加形式」がないと思うので、「参加形式」を押して、「Copy to Measure」でMeasureにも「参加形式」を作成する。

![](https://storage.googleapis.com/zenn-user-upload/60616015d8cd-20241030.png)

![](https://storage.googleapis.com/zenn-user-upload/af99d8f69d3c-20241030.png)

最後に棒グラフを作成

![](https://storage.googleapis.com/zenn-user-upload/d50e78b09074-20241030.png)

これで保存すると目的のダッシュボードが作成完了しました！

![](https://storage.googleapis.com/zenn-user-upload/58604d66a377-20241030.png)

## まとめ

QuickBIでフォームを作成し、送信された内容をダッシュボードとして可視化することができました！

Alibaba Cloudにまだ慣れていないと少々分かりづらいこともあるかもしれませんが、慣れればすぐに作れちゃうなーという感想です。

BIツールにフォーム作成が出来るサービスをあまり見たことがなかったので試してみましたが、サクッと出来て良いキャッチアップが出来たと思っています。

ダッシュボードをよりリッチにしていこうと思うと時間はかかってしまうと思いますが、それ以外はそこまで大変じゃないだろうな、という印象です。

よかったら参考にしてみてください。

参考記事

- [Alibaba Cloud Data Source MySQL - Quick BI - Alibaba Cloud Documentation Center](https://www.alibabacloud.com/help/en/quick-bi/user-guide/add-an-apsaradb-rds-for-mysql-data-source)
- https://www.alibabacloud.com/help/en/quick-bi/user-guide/create-a-form