【初めての方向け】Looker Studioでスプレッドシートのデータを可視化

# スプレッドシートのデータを可視化
Looker Studio(旧 Googleデータポータル)では、スプレッドシートのデータを可視化できます。
今回は、LIFF x LINEログイン アンケートフォーム作成で収集したデータの可視化をします。

https://qiita.com/h2m_kinoko/private/5c3165632d7cec7c870b

# 完成イメージ

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/624933/eaa24376-0a1b-a96a-f5af-c2ee7e4d4c00.png)

↓下記のリンク先で、期間の設定などが実際に触れます。

https://lookerstudio.google.com/reporting/3398c638-1cff-4e3d-aee3-2cc84ef0d7ac



# スプレッドシートのデータイメージ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/624933/65741cef-7ecf-a9df-db50-9c5e7b8754a9.png)

https://docs.google.com/spreadsheets/d/1cNUoyoTuhhyhZAf0I5Qlak3RBxGzgXnIROvynEqidIg/edit?usp=sharing

# Looker Studioの準備
Looker Studioにアクセスして準備をはじめます。

https://lookerstudio.google.com/

こちらにアクセスして【空のレポート】を選択します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/624933/23f94b42-2f8f-d086-36fd-08c28ad5f058.png)

【データへのレポート追加】画面で【Googleスプレッドシート】を選択してください。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/624933/cc4d05cc-ea96-74df-e47e-3216182f2975.png)

【データのレポートへの追加】画面で、下記を選択してください
```選択内容
・スプレッドシート
先ほどコピーしたスプレッドシート
・ワークシート
form
・オプション
【先頭行をヘッダーとして使用する】と【非表示のセルやフィルタ処理されたセルを含める】
```
を選択して、右下の【追加】ボタンを押下してください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/624933/292ac283-3b98-491a-09ca-b25216c208ff.png)

確認画面がでますので、【レポートに追加】を押下してください。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/624933/c0d31848-f279-f382-fe76-db47e8c10227.png)

するとレポート画面が表示されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/624933/006ec47f-cb27-d27f-f605-bf31c1f1c3e4.png)

最初に表示されている表は、今回使いませんので削除して真っ新な状態にします。
(選択してdeleteボタンで削除できます)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/624933/8931f030-f156-4af4-d94d-1686c3461c0a.png)

# 準備完了！まずはデータ追加の練習

まずは件数を表示させます。
右上にあるメニューから【リソース】を選択し、データソースを表示させます。
そこで【アクション】の【編集を選択します。】

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/624933/faf17925-d6df-f1b3-7edb-1f3bbf41abf4.png)

そこにある
①【Record Count】の文字を【申込件数】に変更して
② の完了ボタンを押下します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/624933/3c549534-bb7a-126d-b884-89a6c9e421b2.png)

その後最初のレポート画面に戻り、【申込件数】のデータを、レポート画面へドラッグします。
(下記の動画では、Record Countになっていますが、皆様は申込件数と表示されているのが正解です)

![シーケンス 01.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/624933/5598da70-09e8-96a0-af21-1d7d8171d17a.gif)

こちらで申込件数(スプレッドシートに記入されているアンケートの件数)が表示されます。

そのままでは文字が小さいので、スタイルを変更します。
レポート画面の右側にある【グラフ】から【スタイル】を選択し、ラベルのポイント数や指標名・指標の値の位置を見やすいものに変更します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/624933/959081fc-2425-0411-63e5-4ae7e54bc6d9.png)

これでデータを1つ表示させることができました。

# ここからが本番。データの準備

先ほどのように、データをすぐに可視化できることができたと思います。
ここからは、表示させるデータをまず準備していきたいと思います。

今回表示させるデータは
・参加者年代別の円グラフ
・参加者性別 円グラフ
・参加希望日別申し込みコースの棒グラフ
・曜日別 棒グラフ
・売上金額
となります。

現状のデータで
・年代
・性別
・希望日
はあると思います。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/624933/16812b73-da41-1a8b-11ee-b7eab53643d9.png)

ここから、
・申込コース
・申込コース金額
・申込日曜日
のデータを作成していきます。

# データの作成方法
データの作成方法ですが、スプレッドシートにあるデータをLooker studioで加工してデータベースに登録ということを実施します。

まずは、申し込みコースをデータを作成します。

メニューより【リソース】→【追加済みのデータソースの管理】を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/624933/ba70108e-7547-7998-ba6b-9cbd202bd270.png)

アクションから【編集】を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/624933/3037af8b-74f7-be7f-95b8-d5af923cdb34.png)

次の画面にて【フィールドを追加】を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/624933/132f3737-10ed-01bc-7010-26a0a189dcbd.png)

するとフィールドを追加する画面がでてきます。
こちらで
|項目 |入力する文字 |
|:-----------|:-----------|
|フィールド名 | 申込コース |
| 計算式       | LEFT_TEXT(コース,4)        |


と入力してください。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/624933/bde8562c-493b-fa58-5fc5-78e385fa5694.png)

:::note info
LEFT_TEXT(コース,4)の意味ですが
Looker Studioで使える正規表現が下記にあります。
こちらのLEFT_TEXTを使います。
【コース】の項目にあるデータの左から4文字目まで抽出するという計算式になります。
:::

https://support.google.com/looker-studio/table/6379764

計算式の入力が終わりましたら【更新】を押して【閉じる】を選択してください。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/624933/cbc34dc9-858d-5067-5111-573ef60d7751.png)

同様にして

・申込コース金額
・申込日曜日
を作成していきます。

フィールド名：申込コース金額
```:計算式
REGEXP_EXTRACT(REPLACE(コース, ',', ''), r'\((\d+)円')
```

フィールド名：申込日曜日
```:計算式
CASE
WHEN WEEKDAY(参加希望日) = 0 THEN '0_日'
WHEN WEEKDAY(参加希望日) = 1 THEN '1_月'
WHEN WEEKDAY(参加希望日) = 2 THEN '2_火'
WHEN WEEKDAY(参加希望日) = 3 THEN '3_水'
WHEN WEEKDAY(参加希望日) = 4 THEN '4_木'
WHEN WEEKDAY(参加希望日) = 5 THEN '5_金'
WHEN WEEKDAY(参加希望日) = 6 THEN '6_土'
END
```

こちらでフィールドに追加されているのが確認できると思います。
計算式で追加したものは【fx】と記載されたものです。

申込コース金額は合計金額で集計しますので
|ディメンション|タイプ |デフォルト集計 |
|:-----------|:-----------|:-----------|
|申込コース金額|数値 |合計 |

に変更してください。

変更が完了したら右上の【完了】を押して画面に戻ります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/624933/a6f5b23c-2703-fd88-369b-20ed87a915cd.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/624933/69b7dfa7-f5df-d159-833d-511a826c9a7d.png)


# グラフの追加


### 申込コースのグラフ
レポート画面にグラフを追加していきます。
右側に表示されているデータから、【申込コース】を選択し、レポートのフィールドにドラッグしてきます。
そのままでは【表】が表示さているので、【グラフ】を選択して【棒グラフ】を選択し、
グラフの右上にある【その他】をクリックし、【並び替え】で申し込みコースを降順にします。


![無題のレポート - Google Chrome 2023-09-19 16-25-34_3.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/624933/911edade-6ae0-e9b1-d159-a4fbdcb9e1c2.gif)


### 参加希望日とコースの積み上げ棒グラフの追加
右側に表示されているデータから、【参加希望日】を選択し、レポートのフィールドにドラッグしてきます。
【グラフ】を選択して【積み上げ棒グラフ】を選択します。
そのままでは、積み上げ棒グラフで、UIDごとに分かれたものが表示されているので
【グラフ】の【ディメンション】にある【内訳ディメンション】で【UID】となっているところを【コース】に変更します。
すると、希望日別のコースの積み上げ棒グラフになります。


![無題のレポート - Google Chrome 2023-09-19 16-59-19_1.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/624933/825c4bce-b122-18c0-b250-f8c32a5e06df.gif)

同様にして、
・性別の円グラフ
・年代の円グラフ
・申込コース金額のスコアカード
を作成してみてください。

その後、テキストの追加などで見やすい表現に変更してください。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/624933/8d161250-c1e2-0d75-74eb-bc81771367b1.png)


# 集計期間の設定
こちらでデータを取り込んだ全期間の集計データは完成になりますが
期間を設定した集計もできるようになります。

【コントロールの追加】から【期間設定】を選択してください
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/624933/a65928f7-e97a-b8ae-bba2-6500b58cb8e9.png)

すると、期間を選択というボックスができますのでクリックすると
左側のカレンダーで集計の開始日
右側のカレンダーで集計の終了日
を設定できるようになります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/624933/809236b2-a6d1-c645-0206-3102cd3a5489.png)

# 集計

グラフで見たいもの(ここでは、申し込みされたものがCコースのもの)を選択すれば
他のグラフもその選択されたものが集計されて表示されるようになります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/624933/a9b74311-c1b4-c56a-8542-8a89ce28381f.png)

# 終了です！
いかがでしたでしょうか？
いろいろなデータを集めて計算式などを追加していけばいろいろな集計ができるようになります。
ぜひチャットボットのデータを集めてマーケティングや、データ分析にご利用ください！