見出し画像

ある日…

みんなでSlackに投稿する何かを作りたい

そう相談されました。うん、そういう体験をすることが楽しかったりしますよね。その時はGoogleスプレッドシートのとある列に何かを書いてボタンを押すとSlackに投稿されるといったものを作ったのですが、以下記事を参考にして、具体的に何をしたらいいのかわからなかったことが発端でした。

まぁ、わかる

具体的な活用方法は今後記事にしていければとは思っていたのですが、案外その時が早くきてしまうもので…しかし、今日はGoogleスプレッドシートからSlackに投稿する話ではありません。

GoogleフォームからSlackに投稿しよう

新規にGoogleドライブからGoogleフォームを作成しましょう。

スクリーンショット 2019-11-27 18.19.37

フォーム名は適当です。

スクリーンショット 2019-11-27 18.21.35

入力項目設定

1つだけ作ります。コメントという項目です。項目のタイプは長文でも書けるように段落です。そして必須にしておきます。

スクリーンショット 2019-11-27 18.23.49

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

右上あたりにあるメニュー?からスクリプトエディタを開いてください。

スクリーンショット 2019-11-27 18.28.26

スクリプトを書く

このようなスクリプトを書きます。

function getResponseFromForm(e) {
 var itemResponses = e.response.getItemResponses(); //フォームに入力された内容
 var message = itemResponses[0].getResponse(); // 最初の項目の値
 if(message){
   post2slack(message);
 }
}

function post2slack(message){
 var jsonData = {
   "text" : message
 };
 var payload = JSON.stringify(jsonData);
 var options = {
   "method" : "post",
   "contentType" : "application/json",
   "payload" : payload
 };
 UrlFetchApp.fetch(PropertiesService.getScriptProperties().getProperty("url"), options);
}

スクリプトプロパティの設定

以下の要領で url というプロパティに Slack の Incoming Webhooks URL を設定してください。

Slackの Incoming Webhooks URL の取得は以下を参考にしてください。

最後にスクリプトエディタでスクリプトを保存してください。

Googleフォームで送信されたらGASのメソッドを実行する設定

トリガー設定といいます。スクリプトエディタで編集→現在のプロジェクトのトリガーをクリックします。

スクリーンショット 2019-11-27 18.42.45

新規ウィンドウが立ち上がりますので、そちらからトリガー追加をクリックします。

スクリーンショット 2019-11-27 18.43.44

概ね以下のような感じで設定して保存します。ポイントはイベントの種類がフォーム送信時になっておりており、そのタイミングで getResponseFromForm というメソッドが実行されるところです。

スクリーンショット 2019-11-27 18.44.43

保存をクリックすると、認証確認処理が走りますので以下の要領で認証確認を行ってください。

無事保存されるとこのようになります。

スクリーンショット 2019-11-27 18.46.09

フォームを共有しよう

作ったGoogleフォームをチームに共有しましょう。フォームの編集画面から…

スクリーンショット 2019-11-27 18.53.57

フォームのURLを取得します。

スクリーンショット 2019-11-27 18.57.07

あとはみんなで遊びましょう✌️

スクリーンショット 2019-11-27 18.59.24

↑こうして…こうでしょう↓

スクリーンショット 2019-11-27 19.00.00

まとめ

簡単な例ではありますけど応用できれば結構実用的です。急にイベントとかでフォームが必要になり、Googleフォームで凌ぐ際についでにSlackに通知したいといった用途は結構あるのではないでしょうか。

Googleフォームで項目をもっと追加した場合、GASで取得するサンプルも置いておきます。以下では3つ項目がある場合です。そんじゃまた。

function getResponseFromForm(e) {
 var itemResponses = e.response.getItemResponses(); //フォームに入力された内容
 var message = itemResponses[0].getResponse(); // 最初の項目の値
+var message = itemResponses[1].getResponse(); // 2つ目の項目の値
+var message = itemResponses[2].getResponse(); // 3つ目の項目の値
 :
}

Freelance Cloud Architect/Consultant @ 時藤屋 https://tokifu.jp/