Googleフォームの投稿をGoogleチャットのスペースで受信する

Googleフォームで連絡や問い合わせ窓口フォームなどを用意して，投稿された連絡・問い合わせ内容をGoogleチャットのスペース（グループ）で受信してグループで共有できる方法です。
事例として，児童生徒学生からの連絡や質問を複数の教職員で共有しながら対応したい場合に使える仕組みです。

# 使用例
Webブラウザ上の連絡フォーム
![CleanShot 2022-04-07 at 10.19.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/47334/6f729d21-228a-048c-bad3-ca479307ed04.png "Webブラウザ上の連絡フォーム")
Googleチャット上での受信例
![CleanShot 2022-04-07 at 10.30.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/47334/746e0dad-7dfa-918d-6ed3-31b4274beaa9.png "Googleチャット上での受信例")
iPhone上での通知例
![20D9AFE9-6B8A-4086-A817-12F16A21A140_1_201_a.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/47334/63b90a5b-dc54-d4f2-9c5f-10068397d1ab.jpeg "iPhone上での通知例")

# 設置手順
##### （Googleチャット側）

0. Googleチャットでスペースを作成
0. 作成したスペース内のメニューから「Webhookを管理」を選択
0. スペースの着信Webhook URLを作成
0. いつでも戻ってきて着信Webhook URLをコピペできるようにしておく

##### （Googleフォーム側）

0. Googleフォームで連絡フォーム作成
0. 作成した連絡フォーム内のメニューから「スクリプト エディタ」を起動
0. エディタでfunction myFunctionに引数とコードを追加
0. チャット側の着信Webhook URLをコピーして，コード内に貼り付ける
0. トリガーで「トリガーを追加」する
0. 必要な設定をして［保存］する
0. フォームとチャットを連携させるためにログインと許可をする
0. 連携準備完了

# フォーム側に設定するスクリプト
エディタのコードをすべて消去し，以下のコードで置き換える。
もしくは myFunction() に myFunction(e) と引数を追加してから中身を貼り付ける。

```javascript
function myFunction(e) {
  // myFunctionの引数eを追加↑
  // Googleフォームの投稿内容をitemResponsesへ入れる
  var itemResponses = e.response.getItemResponses();

  // Googleフォームの質問項目名と回答を順番に変数textへ入れる
  var text = "連絡フォームから";
  for(var i=0; i<itemResponses.length; i++){
    var itemResponse = itemResponses[i];
    var question = itemResponse.getItem().getTitle();
    var answer = itemResponse.getResponse();
    text += "\n" + question + answer;
  }

  // Googleチャットのスペースで取得した着信WebhookのURLを設定。コピペすればOK
  var post_url = "https://chat.googleapis.com/...";

  // スペースに投稿する本文(JSON形式) → 変数textの中身を入れているだけ
  var payload = {
    "text": text
  }

  // スペースに投稿する際のパラメータ情報(JSON形式)
  var options = {
    "method":"POST",
    "headers":{"Content-Type":"application/json; charset=UTF-8"},
    "payload": JSON.stringify(payload),
    "muteHttpExceptions":true
  }

  // スペースの着信Webhook URLへ投稿
  var result = UrlFetchApp.fetch(post_url, options); 
}
```

# 具体的手順

### Googleチャット側

0. Googleチャットでスペースを作成
※スペース名が通知の表示に関係するので吟味すること。
    - 組織外の選択は使途に応じて設定する（連絡を共有する範囲に依存）
    - 《注》画面例内の「スレッド返信」項目は廃止されました
    ![CleanShot 2022-04-07 at 09.32.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/47334/ee7b7a8c-6425-03fa-e94d-72d8a0601409.png)


0. 作成したスペース内のメニューから「Webhookを管理」を選択
    ![CleanShot 2022-04-07 at 09.34.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/47334/53ebc665-a614-d3bb-c67d-7331f5894b94.png)


0. スペースの着信Webhook URLを作成
    ※この名称は通知の表示に関係するので吟味すること。
    ![CleanShot 2022-04-07 at 09.42.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/47334/6457dfc3-010f-4acc-747f-d96073f8efc1.png)


0. いつでも戻ってきて着信Webhook URLをコピペできるようにしておく
    ![CleanShot 2022-04-07 at 09.43.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/47334/53dcd345-ac3c-d0fb-548b-3e1797cb32f6.png)






### Googleフォーム側

0. Googleフォームで連絡フォーム作成
    画面例は単純な記述式だけだが、選択式など選べるのは通常通り。
    ※質問文が通知や連絡本文の表示に関係するので吟味すること。
    ![CleanShot 2022-04-07 at 09.26.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/47334/83db9624-5789-d090-b094-e65127146995.png)


0. 作成した連絡フォーム内のメニューから「スクリプト エディタ」を起動
    ![CleanShot 2022-04-07 at 11.16.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/47334/43fd004b-2118-635e-a312-288613e23ea6.png)


0. エディタでfunction myFunctionに引数とコードを追加
    ※コード内の「連絡フォームから」が通知の表示に関係するので吟味して変更を。
    ![CleanShot 2022-04-07 at 11.18.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/47334/6c04cc3a-54eb-f1bb-53d7-89d2ce516054.png)


0. チャット側の着信Webhook URLをコピーして，コード内に貼り付ける
    ![CleanShot 2022-04-07 at 11.20.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/47334/993683fc-66be-5520-045d-159424740241.png)


0. トリガーで「トリガーを追加」する
    ![CleanShot 2022-04-07 at 11.24.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/47334/81df52de-2b3c-6362-ac70-0b1617c96ff7.png)


0. 必要な設定をして［保存］する
    - 「イベントの種類を選択」は「フォーム送信時」
    - 「エラー通知設定」は「今すぐ通知を受け取る」（これは任意）
    - （もし別の関数を使うなら）「実行する関数を選択」を適切なものに変更
![CleanShot 2022-04-07 at 10.09.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/47334/cba6eec3-1dfc-561d-9d4b-13aabea4842d.png)


0. フォームとチャットを連携させるためにログインと許可をする
（初めて連携させる場合に出てくる）
    ![CleanShot 2022-04-07 at 10.09.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/47334/c07a8458-3f49-fffe-c4c5-96f55d5cb50e.png)

    ![CleanShot 2022-04-07 at 10.10.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/47334/93e45522-919a-46ea-2eac-0568f4308f72.png)
    ![CleanShot 2022-04-07 at 10.10.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/47334/3907f2c2-b7fb-2fd2-8b90-8ad6f40d06fd.png)


0. 連携準備完了
    ![CleanShot 2022-04-07 at 10.10.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/47334/788a0f13-1daa-adc6-5482-8b4923868494.png)


連絡フォームとチャット画面で確認を。

# その他・注意事項
- チャットに届いた連絡メッセージに返信しても相手には届かないので誤解しないように。
　- 連絡ごとに返信欄でスタッフ内での対応協議などのやり取りが可能というメリット
- 「【学籍番号】」になっているところを「【メールスドレス】」とか「【電話番号】」にして、逆連絡の手段を確保するのも一案。
　- 相手が入力間違いする場合もあることを承知しておくこと
　- メールアドレス収集機能を使うと記録はされるがメッセージには含まれないので注意。含めたい場合は「var mailaddr = e.response.getRespondentEmail();」や「text += "\n【メール】" + mailaddr;」をスクリプトに追加する。 
- 「スペースの名称」「着信Webhookの名称」「連絡フォームの質問項目」「スクリプトのコード内の文字列」を編集することでメッセージや通知の字面を編集することになる。
- スペース作成時のタイプは「スレッド返信」でも「ストリーム」でも可能。（2023年3月13日以降はすべてインラインスレッド形式に仕様変更された模様。）
- 連絡の履歴は、フォーム側の機能で回答をスプレッドシートとリンク（連動）させることにより管理できる。スプレッドシートの記録は累積で残るので、フォーム側の回答は適宜削除してリセット可能。
- 年度更新などで連絡履歴を分けたい場合は、スプレッドシートとのリンクを解除し、新たなリンクで新規スプレッドシートに記録するようにすれば、フォーム自体は同じものを継続利用できる。


# 参考
以下の投稿を参考にさせていただきました。感謝。

https://qiita.com/fuku_sato1/items/3acb2686a9d989dd8563