Googleフォームの回答をテンプレの文章に整形してSlackに送信させるGAS

目的

Slackで、チームメンバーにテンプレの文章をコピーして編集してもらう形で送信してもらっていることってありませんか？

ただ、こんな時にテンプレの文章を編集するのって面倒だと思います。特にPCならまだしもスマホからの操作は大変...
特にコードブロックなどを使うと文章は見やすくなるものの、文章の編集が少々面倒...

そこで、Googleフォームから回答を送信することで、テンプレの文章に整形して任意のチャンネルに送信してもらうようにしました！

概要

SlackでIncoming Webhooks君を作成し, Googleフォームの回答をGASで処理して, Incoming Webhooks君に送信してもらいます.

GASってなんだ？？

Google Apps Script（GAS）は、Googleが提供するアプリケーション開発プラットフォームです。GmailやGoogleスプレッドシートを始めとしたGoogleサービスを自動化することが可能です。

今回は以下のようなフォームでサンプルのコードを作成します.

チームに新たなメンバーを入れるため, 紹介者の名前, 紹介したい方の名前, 人事担当のメンバーに紹介したい方の好きなおにぎりの具(??)と, ひとことを入れています.

フォームから送信したい文章のイメージは以下の通りです.
(takoyaki.kimuraの部分は設定したAppの名前になります.）

実装

1. Incoming Webhook URL を取得する

まずはじめにブラウザからSlackにサインインしてください.

次に, Slack App (アプリ) を作成します. こちらのURLにアクセスしてください.

こんな画面に移ったら, 上の「From scratch」を選択します.

次の画面で, Slack Appを作成しましょう.

1. 「App Name」に任意のアプリ名を入力します.
2. 「Pick a workspace to develop your app in:」は追加したいワークスペースを選択してください.
3. 「Create App」をクリック！

次の画面で, 右下の「Incoming Webhook」をクリック, クリックすると以下の画面に移るので「Activate Incoming Webhooks」をOffからOnにしましょう.

「Activate Incoming Webhooks」をOnにすると, 下にずらっと項目が広がります.
1番下までスクロールして, 以下の「Add New Webhook to Workspace」をクリック！

以下の画面に移るので, Googleフォームの内容を送信したいチャンネルを選択して, 「許可する」をクリックしましょう！

先程見た画面に移ると思います.
以下の画面のところに「Webhook URL」が出ているので, これをコピーしましょう！
そして, このURLは後程使うので, 適当な場所(規定のメモアプリなど)にメモしておきましょう！

これで, Slackの設定は完了です！！！

2. GASのコード作成

GoogleフォームとGASの設定に移っていきます！
まず, Googleフォームを作成してください.

そして, 作成したGoogleフォームの右上の3点リーダ(送信ボタンの右）からスクリプトエディタを開きます.

開かれたスクリプトエディタのfunction myFunction() {}を削除して, 以下のコードを貼り付けましょう！

// メンションテキストとWebhook URLは変数として宣言
const MENTION = "メンションテキスト";
const WEBHOOK_URL = "保存しておいたWebhook URL";

function onFormSubmit(event) {

  // 以下はフォームの回答内容の取得
  const items = event.response.getItemResponses();
  
  // 以下は送信するメッセージの整形
  let message =  MENTION + "\n";

  message += items[0].getResponse() + "さんが新メンバー候補として招待したい方がいるよ！"

  message += "```";

  message += "名前：" + items[1].getResponse() + "\n";

  message += "好きなおにぎりの具：" + items[2].getResponse() + "\n";

  message += "```";

  message += items[3].getResponse() + "\n";

  // 以下は整形したテキストの送信
  UrlFetchApp.fetch(
      // Webhook URL
      WEBHOOK_URL,
      {
          "method" : "POST",
          "contentType" : "application/json",
          "payload" : JSON.stringify({"text": message}),
      }
  );
}

コードの変更するポイント

1. 2行目の"メンションテキスト"の部分に, 送信したい相手のメンションの文字列を入れます. メンションする際の表記があるので, それはこちらの記事から見てください！
2. 3行目の"保存しておいたWebhook URL"の部分に, 保存しておいたWebhook URLを入れます.
3. フォームの質問項目と送信したい文章によってコードをいじいじする必要があります. 以下のコードの解説を読みながら行ってみてください！

コードの解説

message += という記述がたくさんあると思います.
これは, messageという箱(変数)に文章を増やしていっているということです！
今回のコードでは, let messageという部分で最終的に送信する文章の 箱(変数) を宣言して, そこに文章をどんどん足していく形を取っています.

そして, 質問の回答のテキストを足す方法です.
例えば, items[1].getResponse() とすることで, 2問目の回答の文字列を得ることができます.
回答を得たい質問の番号に1引いた数を[]の中に入れます.

また, 直接その文字列を表示して欲しい場合は, " "でくくります.

改行を行いたいところでは, "\n"を加えてください.
最終的に作成した文字列の中で, "```"で囲まれた部分はコードブロックで表示することができます.

3. Googleフォームのトリガーを設定しよう！

最後の大詰めです.
フォームで回答された時に送信されるように「トリガー」を設定しましょう.

コードの画面の左のサイドバーから, 時計のマークの「トリガー」の部分をクリックして以下の画面に移ります.

中央の「新しい　トリガーを作成する」をクリックしましょう！

出てきた画面で以下のように設定を変更して保存しましょう！
ここで認証画面が出てくるかもしれませんが認証して問題ありません！

最後にフォームを送信してテストしてみましょう！
無事遅れていたら完成です🎉

まとめ

いかがだったでしょうか.
全くプログラミングやGASに触れたことがない方でも作れるようにと思って書きましたが, わかりやすく書けていない部分があればすみません；；
以下参考記事も併せてお読みいただければ必ず作れると思いますので, こちらで補っていただければ幸いです.

GASで効率的な業務を実現しましょう！！

参考記事

• 【簡単！】SlackのIncoming Webhook URLを取得する方法
• Googleフォームからslackに通知（Googleフォームとslack連携）