【Domo】GoogleFormsで入力画面を実装する方法

## はじめに
Domo(ドーモ）は、データの接続や可視化も特別な知識がなく、直感的に操作ができるBIツールです。
ここでは、Domoでデータ入力を行う方法のひとつをご紹介します。

## シチュエーション
ダッシュボードのリニューアルを検討しています。
リニューアルにあたり、開発視点だけでなくユーザーの声を反映させてUIを改善を図りたいと思います。
ユーザーの声を定量的な形でDomoで表現して、透明性の確保を図ります。
そこで以下2点の実現を目指します。

・Domoユーザーに対して、ダッシュボードの使用感についてアンケートを実施
・アンケート回答の集計結果をアンケート入力画面と同じ画面で可視化

## 前提
今回、アンケートフォームには`GoogleForms`を使用します。
※本文中のデータは全てサンプルデータです。


## 実装手順
まず大まかな手順を記載します。

**＜Domoの外でやること＞**
・`GoogleForms`で、入力したいアンケートフォームを作成
・アンケート回答を`Googleスプレッドシート`に出力

**＜Domoでやること＞**
・`Googleスプレッドシート`の連携
・データ集計と可視化
・`GoogleForms`の埋め込み

それではやってみましょう。


## STEP１：GoogleFormsでアンケートを作成
[`GoogleForms`](https://support.google.com/docs/answer/6281888?hl=ja&co=GENIE.Platform%3DDesktop)とは、Google社が提供するオンラインフォームです。
Googleアカウントがあれば、簡単に利用可能です。<br>
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3936844/2864d0d3-c8c2-f99c-069a-f31ba8ab1571.png" width=70%>

<details><summary>アンケート作成時に意識すること</summary>

#### ①質問は原則必須
データに欠損がでると分析の精度も低下します。必ず回答するよう必須を選びます。<br>
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3936844/d17f310d-ae5b-9382-690a-d1286af7224f.png" width=70%>
 
※この後出る④のような場合は、カテゴリのみ必須でOK

#### ②データの指標となる項目は選択回答形式
プルダウンやラジオボダンにすることで、データの揺れを防ぐことができます。<br>
**プルダウン**
* 編集画面

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3936844/d0ed73f4-e4a6-cd72-ecc4-dff060bc2fae.png" width=70%><br>


* アンケート入力画面

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3936844/96fa2444-2a67-4c10-c498-11b20d2ebeea.png"width=70%>

**ラジオボタン** 
* 編集画面
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3936844/fa5bebfa-d761-0760-5e86-88dd166a8681.png" width=70%>

* アンケート入力画面

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3936844/ab88ed2a-3a08-644e-a3a3-acbf16530473.png"width=70%>

複数選択可とするとデータ集計&分析の難易度が上がるため、はじめのうちは単一選択で作成しましょう。
どうしても同じ設問で複数の回答を得たい場合は、設問を分けて1つずつ回答してもらう形式するとデータの扱いは楽になります。

👉すでにDomo上にあるデータと結合などを行う場合、**結合キー**になる要素もプルダウンやラジオボタンが望ましいです。
 
#### ③評価は定量的
[良い、普通、悪い]といった評価も、[良い（3）、普通（2）、悪い（1）]と数値入力形式にすることで、集計時の評価も行いやすくなります。<br>
**評価**
* 編集画面

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3936844/f61b8f2e-a7ab-2612-7414-6dd9b88a2062.png"width=70%>

* アンケート入力画面

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3936844/e025ed66-785b-f28a-9568-e1094c575b47.png" width=70%>


**均等目盛**
* 編集画面

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3936844/65a06c13-846c-07b5-a5c9-73c3b4c2c2d9.png"width=70%>
* アンケート入力画面

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3936844/a231b43d-f64c-60d6-8fcb-f932146960a7.png"width=70%>

#### ④自由な意見もカテゴリに必ず当てはめる
　×：ダッシュボードを使いにくい点を挙げてください
　○：ダッシュボードの使いにくい箇所を選び、その理由を教えてください<br>
自由記載だけだと、集計時にどういった傾向があるかを分析しにくくなります。大まかにでもあらかじめカテゴライズしてもらうことで、テキストマイニングにあたる行程を簡略化でき分析のしやすいデータが作成されます。<br>
* 編集画面

質問はカテゴリを選択→詳細を記述となるように２つに分けます。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3936844/7b0dcf03-cda7-a91d-98ef-16afd8a9375e.png"width=70%>
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3936844/aaee007f-23ce-4518-21a2-7c9c8d69d818.png"width=70%>

* アンケート入力画面

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3936844/b2100c82-baf0-48f6-5a59-91da19fe7217.png"width=70%>

👉分析時を想像して集計結果から行動が起こせるようなカテゴリが望ましいです。
👉アンケート回答者が困らないように、用意するカテゴリは網羅的にします。（その他も有効）



</details>

## STEP２:GoogleFormsの回答をGoogleSheetへ連携
`GoogleForms`でアンケートが作成できましたら、アンケート回答をデータとして書き込み設定をします。

上部にある回答タブに切り替え「スプレッドシートにリンク」を押下します。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3936844/7dec347e-4b59-3e43-a61b-e0455afd235d.png"width=70%>
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3936844/f171177b-392e-db30-ea56-c33015438ce3.png"width=70%>

連携するスプレッドシートを新規/既存から選択します。
このシートをDomoに連携しますので、ここでは見つけやすいように新規にします。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3936844/daafbcb0-3029-3cba-926c-28f68b664f0b.png"width=70%>

## STEP３:GoogleFormsの埋め込み情報
右上の「HTMLを埋め込む」より、<iframe src… で始まるコードをコピーします。(後ほど使用します)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3936844/57e4353c-1ae7-0f18-9089-e914dcff19ec.png)
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3936844/cf2e7634-caf2-686d-145d-87b7870d147b.png"width=70%>

```html:コピーで取得できたHTMLコード
<iframe src="https://docs.google.com/forms/d/e/●●●●●/viewform?embedded=true" 
    width="640" 
    height="868" 
    frameborder="0" 
    marginheight="0" 
    marginwidth="0">
    読み込んでいます…
</iframe>
```
”読み込んでいます…” がとても気になりますが、無視してください。

ここまでが、Domoの外で行う準備となります。
続いてDomoへの実装手順です。

## STEP４：GoogleSheetsコネクターでデータ接続

```mermaid
graph LR
  Start([GoogleForms])-->B([Googleスプレッドシート])
  Start-->|HTML|D[DomoBricks]
  B-->|GoogleSheetConnecter| C[Domo Dataset]
  C-->E[DomoCard]
  E-->Domoダッシュボード
  D-->Domoダッシュボード
  
  
  
```

`GoogleForms`に入力された回答をデータ化してDomoへ連携します。
すでに`GoogleForms`→`Googleスプレッドシート`にデータが書き込まれていますので、
この`Googleスプレッドシート`をDomoへ連携します。

詳しい連携方法は[Domo公式サイト](https://domo-support.domo.com/s/article/360043436633?language=ja
)に記載があります。

ここでは連携時の設定について、つまずきやすいポイントを解説します。

#### ①Googleアカウント連携
`GoogleForms`を作成した際に使用したアカウント情報を連携させます。
１度Domoに連携すると、次回以降は連携済みのアカウントを選択できるようになります。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3936844/909dc210-1c7b-d5f3-2d4c-a04f0c82ba61.png"width=70%>

#### ②使用するデータがある`スプレッドシート`を選択
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3936844/941d2ce8-c5f1-76d9-f02a-d1c1c80c468d.png"width=70%>

:::note warn
👉ここがつまずきポイント！
Domo画面には「スプレッドシートID」とありますが、実際にはhttps://…で始まる`スプレッドシート`のリンクURLを貼り付けます。
〇　https://docs.google.com/spreadsheets/d/●●●●●●/edit?usp=sharing

**参考**
URLは`Googleスプレッドシート`の画面で、右上の共有＞リンクをコピー から取得
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3936844/fd90c85d-0c14-697e-bc71-7995facdb673.png"width=70%>

（2025年1月時点）
:::

URLが正しくペーストできれば、`Googleスプレッドシート`の情報を読み込みます。
複数ワークシートがある場合は、適切なワークシートを選択してください。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3936844/e1e54d93-ba5a-d9c4-e281-a0f3de1b5472.png"width=70%>

### ③更新スケジュールを設定
スプレッドシートの選択後、Domoへデータを連携するスケジュール（更新頻度）を設定します。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3936844/f78ed49c-1327-cb88-2016-eeed8df4018c.png"width=70%>

:::note warn
更新頻度はDomoのクレジット消費に直結します。適切な頻度に設定しましょう。
※デフォルトは毎日になっています。
:::

最後にDomo内でのDataset名をつけて「保存して実行」すれば連携完了です。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3936844/a5ef3f7c-85c7-babc-b48c-5b045db27e3d.png"width=70%>


### ④Dataset作成完了
「GoogleSheets」と書かれた緑色のアイコンのDatasetが作成されます。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3936844/68a63785-9f7e-59c0-a33a-72e68a9de6b2.png"width=70%>

## STEP５：Domoへのアンケートフォーム埋め込み
ここまでSTEP１～４までご紹介しました。
[STEP４](##STEP４)で作成したDatasetで、アンケートの集計結果を可視化したダッシュボードを構築することができます。
ですが、回答を入力する`GoogleForm`と集計結果はそれぞれ別のWebページにある状態です。
これらを１つの画面で完結するため、Domo画面上で`GoogleForms`が操作できるようにしたいと思います。

### ①Domo Bricksを取得
Domoで予め用意されているカードとは別に、カスタマイズした可視化を実現できるのが`Domo Bricks`です。
https://domo-support.domo.com/s/article/4423762260375?language=ja

今回はAppStoreで取得可能な「HTML Easy Brick」を使用します。

:::note warn
お使いのDomoアカウントの権限でAppStoreの使用が許可されている必要があります。
:::

"easy"で検索するとHitします。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3936844/4f7376b9-af65-8ca7-90df-a83db48d9cb8.png"width=70%>
**HTML Easy Brick**
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3936844/194a7829-4d1d-76a6-81ef-a1e30b903748.png"width=70%>


左の「GET」を押下します。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3936844/51cc92b8-0069-d85b-1318-f35890471932.png"width=70%>

既存のダッシュボード内に配置 or 新規ダッシュボードを作成を選択して「SAVE」すると、カード形式で作成されます。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3936844/9323d8fb-f0a7-5176-f080-8d6afd693693.png"width=70%>

### ②GoogleFormsを埋め込み
配置されたカード（正しくはDomoBricksですが、以下カードと表記）を編集します。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3936844/ee9d4508-ea1d-6547-d105-282e1843a0e6.png"width=70%>

右半分の編集画面でHTMLタブを選択します。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3936844/566efde9-3f95-60aa-33dc-67b6ad13dc5a.png"width=70%>

記述されているコードを[STEP３](##STEP３)で取得済みのHTMLコードで上書きします。
※視認性向上のためここではコードを貼り付けた後に改行してます（改行は不要）
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3936844/cdf0d504-4382-4260-c843-30d1c50c8ff4.png"width=70%>

「保存して終了」すると、さきほどのオレンジのカードが、`GoogleForms`画面になります。
これでDomoへの埋め込み完了です。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3936844/3e9579fb-c837-c5ee-2769-4915557b9e05.png"width=70%>

STEP３で取得したHTMLコードのサイズは調整できます。
ダッシュボードのレイアウトにあわせて変更しましょう。
```HTML:HTML
  width="640" 
  height="912" 
```

## ダッシュボード完成
この画面から`GoogleForms`の入力が可能です。
アンケート回答を集計したダッシュボードに配置すれば、入力→可視化がDomo内で完結した画面の出来上がりです。
※集計カードはサンプルです。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3936844/0cd0a62e-ffa6-daff-ef00-514f9cbd72b2.png"width=70%>

## まとめ
今回のシチュエーションではアンケートを例に扱いましたが、
`GoogleForms`の活用で、様々なデータ入力をDomo上で行うことで、ダッシュボードの利用幅が広がります。
他の入力ツールでも応用することが可能です。
一連の手順を参考に、ダッシュボード開発のヒントになれば嬉しく思います。