5分でできる！GoogleForm→Slackへの通知設定

どうもこんにちは。

突然ですが皆さんSlackのリリースノートって知ってますか？

先日、社内勉強会での雑談中にリリースノートのことを知り、見てみたら面白かったので共有します。

>3.56（2018年11月5日）
>アプリの使用中にも通知を受信できるようになりました。これでチャンネルをチェック中に DM が届いた場合でも、見逃すことがありません。でも、チャンネルを見ている間は「スッコココ」はいらない！という方のために、通知設定メニューの「アプリ内通知…」からオフにすることもできますので、ご安心を。いろいろ試して、自分好みの通知設定をみつけてみてくださいね。



>22.08.50（2022年8月29日）
>修正 : ニックネームで呼び合うと距離が縮まりますが、相手のフルネームをまったく知らないのも困りもの。そこで Slack では、プロフィール写真の上に氏名が必ず表示されるようになりました。これで普段ジャイアンと呼んでいる相手も、改まった場面では剛田武さんと呼べますね。


>21.12.10（2021年12月6日）
修正 : メンバーが 2 人しかいないチャンネルからの通知を届ける際、アプリがちょっと気を抜いたのかチャンネル名の表示を飛ばしてしまっていました。これを修正したので、今後は通知されたメッセージが「#あなたと私」や「#ふたりきり」のチャンネルからでもすぐにそうとわかるでしょう。


という感じでユーモアに溢れる文章が並んでいます。
皆さんも気になったらぜひ読んでみてください！
https://slack.com/intl/ja-jp/release-notes/ios
（Slackの通知音は「 **スッコココ** 」が正解だったんだ・・・）

もうお気づきかと思いますが、導入長すぎ！！
早速ですが、今回はSlackにまつわるTipsを紹介したいと思います！

「 **5分でできる！GoogleForm→Slackへの通知設定！！！** 」

では見ていきましょう。


## 活用場面
効率的に通知ができるため以下のような場面で使われます。

### テンプレートを決めて通知したい時
あらかじめメッセージのフォーマットを決めておきたい時に最適です。Googleのフォームに沿って回答すれば、誰でも同じ形式でメッセージを送ることが可能です。
私の会社では勤怠報告などで使っています。

### データとして残して通知したい時
GoogleFormでは回答をデータとして残すことができます。結果をスプレッドシートなどに書き出せば、そこからデータの整形をすることも可能です。
ただ通知するだけではなく、その後データとして何かに活用したい場合は適していると言えるでしょう。

## Slackの設定

### １. 権限設定の確認

設定をするにあたって「ワークスペースの管理者」以上の権限が必要です。
必要な権限が設定されているか確認しましょう。
![unnamed.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710265/af068551-1cbb-1bbb-69ef-55f1a428af2b.png)

### ２. Slack通知用のアプリ（Incoming Webhook）を追加
Slackアプリ > 「その他」 > App を選択




![b.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710265/99a730c5-3ea0-4a75-12be-9325d07e4bd7.png)

Incoming Webhookを追加 >（遷移後のページで）Slackに追加

![c.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710265/b3b8818b-10b5-b77e-cf6a-b5eba07de46e.png)

通知チャンネルを選択 > 「Incoming WebHooks インテグレーションの追加」をクリック
![a.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710265/e213d026-411b-6f13-9520-69463645c18a.png)

### ３. Webhook URLをコピー
後ほどGoogleFormの設定で使用するためWebhook URLをどこかにメモしておきましょう
![d.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710265/1095e9c2-c0cf-ac72-2edf-afb00f7b52e3.png)

## Googleフォームの設定
### １. 権限設定の確認
Slackと同様にGoogleFormでも編集者以上の権限が必要です。
必要な権限が設定されているか確認しましょう。
![e.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710265/0b6e8d1e-af16-ef72-5479-1352b66a8097.png)

### ２. スクリプトエディタにGASを記述
Googleフォーム右上のメニューから「<>スクリプト エディタ」を選択
![f.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710265/e3371d94-c822-1059-f7c9-aac98180124f.jpeg)

以下をコピー
先程メモしたWebhook URLを記述するのをお忘れなく！
```
function onFormSubmit(event) {
　　var message = "<!here>" + " 新しい申請があります" + "\n";

　　//フォームの回答を取得
　　var items = event.response.getItemResponses();

　　//フォームの質問文と回答をmessageに一つずつ格納
　　for (var i = 0; i < items.length; i++) {
　　　　message += items[i].getItem().getTitle() + ": " + items[i].getResponse() + "\n";
　　}
　
　　UrlFetchApp.fetch(
　　　　// Webhook URLを入れる
　　　　"https://hooks.slack.com/services/AAAAAAAA/BBBBBBBBB/CCCCCCCC",
　　　　{
　　　　　　//POSTリクエストでSlackへ送信
　　　　　　"method" : "POST",
　　　　　　"contentType" : "application/json",
　　　　　　"payload" : JSON.stringify({"text": message})
　　　　}
　　);
}
```

これだけ見ると何がなんだかわからない方もいるかもしれません。
### 何をしているのか

**POSTリクエストを用いて、payloadパラメーターとしてmessageに格納したフォーム情報を、JSON形式で送信**しています。

なのでスクリプトエディタを使わなくても、ターミナルから通知を送ることもできます。
たとえば以下のようにターミナル上でcurlを使って送信できちゃう。

```
$ curl -X POST --data-urlencode "payload={\"text\": \"TEST\" }" https://hooks.slack.com/services/TAAAAAAAA/BBBBBBBBBB/ZZZZZZZZZZZZZZZZZZZZZ
```


ただ、**フォームの情報をPOSTリクエストで送っているだけ**なんだなぁということがわかりました！

少し脱線しましたが、設定を進めていきます。

コードを書いたら保存ボタンをクリック！

### ３. トリガーを設定する
編集メニュー > トリガー > トリガーを追加
![g.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710265/9ca0ee39-db81-c91e-aff3-43881c60a901.png)

先程のコードが実行されるための「 **トリガー** 」を設定します。

フォーム送信時にコードが実行されるよう、以下のように設定して保存。

![h.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710265/8eeeddfb-7bdb-d745-fc23-fe1c6778f501.png)

自身のGoogleアカウントで認証

![LZkzBtRA2BpSj7z1663845804_1663845839.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710265/64216dfc-47f4-34a3-cc9c-9f5cfcda4825.png)

アカウントを選択すると警告表示が出てきますが、問題ないので構わず

**詳細 > 無題のプロジェクトに移動 > 許可**

というように進めてください。

![Qux4tXME1rZoN8f1663845908_1663845915.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710265/dcc8ed85-3c43-fb32-f844-badfcafe2036.png)

無事トリガーが登録されていたら成功です！

![k.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710265/d1e7e619-db4a-1b55-08c0-1e3d12f922f2.png)

## 動作確認
実際にフォーム項目を設定して送信してみましょう。
今回はこんな感じで設定してみました。

![5UhmRGnKyaxmKt61663846021_1663846027.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710265/891a2402-8057-4b1e-ba38-86da6f9a2a5a.png)

すると・・・

「 **スココココココココココ！！** 」

しっかり通知が届きました！
どうも、ジロリアン太郎と申します🍜
![m.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710265/59c9efc0-38ce-d940-da91-883d3668167a.png)

余談ですが、
アイコンとアカウント名は 
Incoming Webhookのページから変更することができます。
お試しあれ！

![n.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710265/661628be-eb44-0add-535b-5a3230309b7e.png)

## （応用編）通知内容のカスタマイズ
ここからは応用編になります。
通知内容をカスタマイズする方法をみていきましょう。

### ①メッセージを装飾する
![o.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710265/3774e564-470e-1d1f-f677-debcd1f9c45b.png)
```
"payload" : JSON.stringify({
　　"attachments": [
　　　{
　　　　"fallback":"fallback Test",
　　　　"pretext":"<!here>" + " 新しい申請があります",
　　　　"color":"#D00000",
　　　　"text": message,
　　　}
　　]
}),
```

`attachments`を使うことで、上記のような装飾したメッセージ群を送ることができます。
`<!here>" + " 新しい申請があります" ` を`pretext` に代入することで装飾の外に出すことが可能です。


### ②文字列にリンクをつける
![p.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710265/78ba507b-106c-5910-3ea2-ebb846c54f9a.png)

```
{
    "text": "<https://〇〇/|This is my favorite JIRO Ramen>"
}

```
`<URL|特定の文字列> `と書くと、文字列にリンクをつけることができます。

### ③Slackの書式設定を使う
![q.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710265/aaad823e-bc07-8595-02a2-683daf8576f7.png)

```
{
　"text": "いろんな書式設定 *太文字* _斜体_ ~取り消し線~ `赤文字`"
}
```

Slackにはたくさんの書式設定があり、設定方法には
   1. 入力欄のツールバーから適用する方法
   2. マークダウンと似た（マークアップ）書式で設定する方法

の2つがあります。
通知内で使用する場合はマークアップ書式で記載してあげます。




### ④attachmentsの中でSlackの書式設定を使う
![r.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710265/d353f8c3-0199-470e-8827-e8378ed87e1c.png)
```
"attachments": [
　{
　　"text": "いろんな書式設定 *太文字* _斜体_ ~取り消し線~ `赤文字`".
　　"mrkdwn_in": [ "text" ]
　} 
]
```
attachmentsの中でSlackの書式設定を使う場合は`mrkdwn_in`で適用したい要素を指定する必要があります。


## 最後に
今回はGoogleForm→Slackへの通知設定を紹介しました。
テンプレートを決めてメッセージを送りたい時や、データとして残したい時などに最適です。ぜひ使ってみてください。

また途中で出てきたSlack用アプリIncoming Webhookを使えば、アプリ上からでも通知が可能です。エラーの通知やビルドの成否通知などで活用場面はさまざま。

機会があったらアプリ上からの通知方法もまとめてみたいですね。

最後まで読んでくださり、ありがとうございました！