googleフォームで送信された内容をスプレッドシートのGAS（Google Apps Script）から、Webhook（ウェブフック）を利用してslackに通知する方法です。
全体の流れとしては、
１）フォームを作る
２）回答をスプレッドシートにリンク
３）SlackのWebhookエンドポイントを作成
４）スプレッドシートのGASで通知用のコードを作成
５）GASのトリガー設定
６）通知テスト
こんな感じです。
それぞれ説明していきます。
フォームを作る
テスト用のフォームは以前書いた「googleフォームの内容をメールで送る方法比較」と同じ構成にしました。
なんかデザイン変わってますね・・・
回答をスプレッドシートにリンク
フォームの回答がスプレッドシートに記入されるようにフォームとスプレッドシートを連携させます。
SlackのWebhookエンドポイントを作成
GASのプログラムを作る前に、Slack側でWebhookのエンドポイントを作成します。
基本的には、こちらのSlackのWebhookのドキュメントにある説明の通り進めますが、ちょっと躓きやすいポイントもあるので、詳しく解説します。
流れはこんな感じ
１）Slackアプリを作成する
２）incoming webhooks を有効にする
３）incoming webhook を作成する
Slackアプリを作成する
Webhookの受け側となるSlackアプリを作成します。
上のリンクをクリックするとアプリ作成ページに飛びます。
ポップアップが開くので「From scratch」を選択してください。（ポップアップが開かない場合は「Create an App」ボタンをクリック）
アプリの名前を記入し、通知を受け取るワークスペース名を選択します。
アプリ名は日本語でも大丈夫です。
ワークスペース名は一覧から選択します。
一覧にワークスペース名が出ない場合はSlackにログインしていない（または別のワークスペースにログインしている）可能性があります。
その際は、ワークスペース選択の下にある「Sign into a different workspace」リンクからログインしてください。
アプリが作成されるとアプリ管理画面に推移します。
incoming webhooks を有効にする
左メニュー「Features」の「Incoming Webhooks」をクリックし、
「Activate Incoming Webhooks」の横のスイッチを「On」にします。
incoming webhook を作成する
ここで「Add New Webhook to Workspace」ボタンを押したくなりますが、今のままでボタンを押しても「Slack通知アプリ にはインストールするボットユーザーがありません」というメッセージが出てWebhookを作成できません。ボットの名前を設定をする必要があるのです。
ボットの名前を設定する
左メニュー「Features」の「App Home」をクリックし、「Your App’s Presence in Slack」項目で「Edit」ボタンを押して、ボットの名前を入力します。
ボットの表示名（Bot Name）は日本語で大丈夫です。
ボットのユーザー名（username）は、小文字の英数字とピリオドとハイフンとアンダーバーが使えます。
こんな感じで名前が設定できればOKです。
webhook を作成する
あらためて「Features」の「Incoming Webhooks」に戻り、下にある「Add New Webhook to Workspace」ボタンをクリックします。
投稿チャンネルを選択して「許可する」ボタンをクリックします。
WebhookのエンドポイントのURLが生成されました。
このURLは次の項目で作成するGASのプログラム内で利用します。
スプレッドシートのGASで通知用のコードを作成
スプレッドシートの「拡張機能」メニューから「Apps Script」を開き、下のソースを入力します。
個人的なメモも兼ねているので、テスト用の関数やログ出力なども入っていますが、必要なければ削除してください。初回構築時には動作確認が出来るのであると便利だと思います。
//送信関数のテスト用
function test() {
sendToSlack("テスト通知");
}
//Slcak送信用パラメータ生成->Slackへ送信
function sendToSlack(body) {
var url = "SlackのWebhookエンドポイントのURLを記入する"; // WebhookエンドポイントURL
// 送信パラメータ生成
var options = {
method: "POST",
contentType: "application/json",
payload: JSON.stringify({ text: body })
};
// パラメータ確認用ログ出力
console.log(options);
// Slackへの送信
var response = UrlFetchApp.fetch(url, options);
}
//メッセージ生成->送信関数へ
function submitForm(e) {
var ss = SpreadsheetApp.getActiveSpreadsheet();
var durl = 'アップロードファイルが保存されるディレクトリのURLを記入する'; // ファイル保存ディレクトリURL
//スプレッドシートの項目名のリスト（Slackへ送る項目）
var items = ['タイムスタンプ', 'メールアドレス', '質問', '一行', '長文', 'ファイルアップロード'];
//コンテンツ生成
var content = '以下の内容でフォームが送信されました。\n\n';
for (var i = 0, len = items.length, name; i < len; i++) {
name = items[i];
content += '【' + name + '】\n' + e.namedValues[name] + '\n\n';
}
content += '【アップロードフォルダURL】\n' + durl + '\n\n';
content += '【スプレッドシートURL】\n' + ss.getUrl() + '\n\n';
//送信関数へ
sendToSlack(content);
}
最低限必要な変更箇所
WebhookエンドポイントURL
8行目の「SlackのWebhookエンドポイントのURLを記入する」の部分を、前の章で作成したSlackのWebhookエンドポイントのURLに書き換えてください。
スプレッドシートの項目名のリスト
30行目の「スプレッドシートの項目名のリスト」を、フォームに連動したスプレッドシートの項目名に書き換えてください。
通知する項目のみ設定したり、順番を変えることも可能です。
Webhookのテスト
test()関数を実行すると、Slackへの通知テストを行います。
スプレッドシートの内容に関係なく「テスト通知」というテキストが送信されます。
Slackのチャンネルに通知が届いているか確認してみてください。
なお、初回テスト時にgoogleのアクセス権限の承認作業が入ります。
おまけ機能
27行目の「ファイル保存ディレクトリURL」は、個人的に便利なので実装しています。
設定しなくても問題なく動きます。
ファイルのアップロードがある時、ファイルのURLは通知されますが保存フォルダのURLは分かりません。
「フォルダを開いて確認したい」と思うことが多いので通知に保存フォルダのURLを付けました。
保存フォルダのURLは、フォームのエディタ画面の「フォルダを表示」リンクから開いてURLを手動でコピペします。
GASのトリガー設定
フォームと連携できるようにトリガーの設定を行います。
Apps Scriptの画面の左メニューから「トリガー」画面を開きます。
右下にある「＋ トリガーを追加」ボタンをクリック。
「実行する関数を選択」を「submitForm」へ変更。
「イベントの種類を選択」を「フォーム送信時」へ変更。
「保存」ボタンで保存します。
トリガー保存時にgoogleのアクセス権限の承認作業が入ります。
これで、googleフォームとSlack通知の連携作業は終わりです。
通知テスト
では、実際にフォームに書き込んで通知が届くかやってみてください。
以下のような通知が届けば成功です。
お疲れ様でした。
フォームから直接通知する方法
今回はスプレッドシート介して通知を送りましたが、フォームから直接Slackに通知を送りたいこともあるかもしれません。
その際は、フォーム側のApps Scriptでスクリプトを組むだけで、基本的にはやることは変わりません。
ただし、フォーム側のスクリプトではsubmitForm()関数で受け取る引数の構造が違うので注意してください。
詳細はこちらの記事で書いています。
参考ページ
記事中の「躓きポイント」は、私が実際に躓いた所で、こちらの記事がとても参考になりました。
ありがとうございます。
最後に
SlackのWebhookは、昔と少しやり方が変わっています。
最初はアプリを作ったり、いろいろ設定が必要で「難しそう」というイメージでしたが、やってみると思ったより簡単にできました。
今回はテスト用のコードや、通知文の成形のためのコードでボリュームが増えてしまいましたが、通知だけであればソースコードもシンプルで簡単だと思います。
ぜひ、皆さんも活用してみてください。
では、良いSlack ライフを～
この記事が参考になりましたら下の「参考になった！」ボタンのをお願いいたします。
コメント