やること

Google Forms のフォームの回答が送信された時に、Slack チャンネルに内容が届くようにする

このやりかたのよいところ

• どんなフォームにも使える
• スクリプト（Google Apps Script）の知識は不要
• 通知内容がきれいで見やすい

やりかた

Slack に投稿するための URL を得る

まず Slack で、チャンネルに Google フォーム側が内容を送るための URL をもらいます。

• ブラウザで Slack の使いたいチャンネルを開く
  • まだ無かったら新しく作って開く
• チャンネル名をクリック
• 出てきたメニューの「アプリを追加する」（英語：Add apps ...）をクリック

もしもこのような↑画面になったら、「View App Directory」をクリック

新しいタブが出たら、

• 検索ボックスに「Incoming Webhooks」と入力
• 「着信 web フック」（英語：Incoming Webhooks）をクリック

• 「設定を追加」（英語：Add Configuration）をクリック

• 使いたいチャンネル名が表示されていることを確認
• 「着信 Web フック インテグレーションの追加」（英語：Add Incoming WebHooks integration）をクリック

• Webhook URL をコピーして、どこかに貼り付けておく（後で使います）

フォームのスクリプトをつくる

ここまでで Slack での準備は終わりです。 次に Google フォームでの設定をしていきます。

スクリプトエディタを開く

• 使いたいフォームを開く
• 右上の点をクリック
• 出てきたメニューの「スクリプト エディタ」をクリック

すると、このような新しいタブが出てきます。これがこのフォーム専用のスクリプトを書くところです。

コピペする

• 最初から書かれているスクリプト

function myFunction() {

}

　　を消す

• その跡地に、script.gs をそのまま貼り付ける

Slack の情報を貼り付ける

ここまでで大体できたのですが、Slack のチャンネル名などは人それぞれなので、先ほどのコードの該当部分に入力します。

• ■１■ の部分に、さっきどこかに貼り付けた URL をコピーして貼り付ける
• ■２■ の部分（２ヶ所）に、使う Slack チャンネル名 （一番最初に開いたチャンネル）を貼り付ける（例「#google-form」）

「■１■」「■２■」の文字は消して同じ位置にこれらを書いてください。

通知のタイトルを設定する

• ★３★ を、なんのフォームなのかの短い説明に書き換える

１〜３全部で４ヶ所の書き換えです。

保存する

• 左上の「ファイル」をクリック
• 出てきたメニューの「保存」をクリック

• 適当な名前（基本的に使いません）を入力
• 「OK」をクリック

テスト

Slack と繋がっていることを確認

• コードの上にある、「関数を選択」をクリック
• 出てきたメニューから「test」をクリック

• 今のメニューの左の虫ボタンをクリック

• ログインを求められたらログイン、許可を求められたら許可する

すると、許可が終わった途端に Slack に投稿が来ます。

• Slack を開いてメッセージを確認する

さっき★３★のところに書いたタイトルが出ています。これで Slack との接続成功です。

実際の通知のテスト

フォーム送信時に自動で送るように設定

あとは、「Google フォームで回答が送信されたときに」Slack に送るという設定をします。

• スクリプト画面を開く
• 「関数を選択」だった部分を、「test」から「onFormSubmit」に変更する

• 時計のようなボタンをクリック
• 「トリガーが設定されていません。今すぐ追加するにはここをクリックしてください。」をクリック

• 「実行」のところだけ、「onFormSubmit」に変える
• 「保存」をクリック

• 承認を求められたら承認する
• スクリプトをもう一度保存する

これで全て完成しました。

最終確認

実際にフォームを使って、Slack に届くかどうか確かめましょう。 簡単にフォームの回答を行う方法は、フォーム編集画面からプレビューを開くことです。

• さっき開いたフォームのタブに戻る
• 上の目ボタンをクリック

• フォームを埋めて送信する
• Slack を確認する

こんな感じです。完成です。

カスタマイズ

上の通知の見た目を少しだけ変える方法を紹介します。

Slackで表示される、メッセージの送信者名を変更

スクリプトの、// 1: bot 名 と書いてある行（５行目）の、Googleフォーム Bot を書き換えてください。

アイコン画像を変更

スクリプトの、// 2: アイコン画像 と書いてある行（12行目）を書き換えます。

• 画像を使う場合

  • 画像をどこかにアップロードしてURLを得る
  • 行をまるごと "icon_url" : "画像のURL" に書き換える

• Slack の絵文字を使う場合

  • :envelope_with_arrow: を他の絵文字名に書き換える

左線の色を変更

Slack メッセージの画像に緑の縦線がありますが、この色は自由に変えられます。 デフォルトでは Slack が定める「good」色になっています。good な感じを表す色のようです。

スクリプトの、// 3: 左線の色 と書いてある行（10行目）の good を、#000000 〜 #FFFFFF に変更すれば色が変わります。

#000000 （黒色）にした場合

左右２列で表示するようにする

もしかすると、右上のこのへんの空白が無駄だと思われるかもしれません。

そこで、Slack では項目を左右２列に分けて表示させることができます。 その設定は Google フォームのスクリプトの中でします。

スクリプトの // 4: 左右２列で表示 の行（66行目）の false を以下のように書き換えます。

• 全部２列で表示する場合 true

• 答えが30文字未満だった項目だけ２列にして、長い項目はそのままにする場合 value.length < 30
  • 文字数 30 は自由に書き換えてください。

参考

Googleformからのslack通知設定方法 - Qiita