GASを利用してGoolgeForm回答があった時に自動連携でSlack通知する方法

GASを利用してGoolgeForm回答があった時に自動連携でSlack通知する方法

業務でGoogleFormを利用する部署があるのですが、GoogleFormでお客様問い合わせがあっても見逃してしまうケースが多いという相談を受けました。

そこで、GooleFormからお客様問い合わせがあったタイミングでSlackの通知チャンネルに自動通知できるシステムを構築してみました。

今回はその作業の流れを備忘録として残します。

手順説明

自分が実際に作業で行った流れをステップ毎に紹介します。

STEP1 「Slack側の設定」
STEP2 「GoogleForm側の設定」

step1 「SlackのIncoming WebHooks」を取得する

SlackでIncoming WebHooks※を登録します。

※WebhookとはWebサービスであるイベントが実行された時に外部サービスにPOSTリクエストを実行する仕組みの事です。

1. ワークスペース名のプルダウンを押すと、「設定と管理」が表示されるのでクリック
2. 「アプリを管理する」をクリック

すると、以下のようなwebページに遷移します。

appディレクトリに「incoming」と入力して検索をクリック

すると検索結果一覧に「Incoming Webhook」が表示されるので、選択します。

通知したいチャネルを選択して「Incoming Webhookインテグレーションの追加」を押すと、Webhook URL※が表示されるので保存しましょう。（このURLはあとでGASでプログラミングする時に利用します）

※ POSTリクエストするリクエスト先をWebhook URLと呼びます。

参考：SlackのWebhook URL取得手順

step２ Google Apps Scriptの作成

slackに通知するためのスクリプトを作成していきます。

スクリプトはGASを利用します。基本はJavascriptで書くことができます。

Slackと自動連携したいGoogleFormを開いて、スクリプトエディタを選択します。

すると、以下のようなGAS入力画面に移動するのでスクリプトを書いていきます。

スクリプト完成コード(GAS)

function sendToSlack(body, channel) {
  // STEP1で取得したWebhook URL
  var url = "https://hooks.slack.com/services/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";
  var data = { 
    // 通知先チャネル
    "channel" : channel,
    // ユーザー名称
    "username" : "問い合わせ通知",
    // Slackのメッセージを装飾 参考：https://qiita.com/daikiojm/items759ea40c00f9b539a4c8)
    "attachments": [{
      // 色
      "color": "#46D235",
      // 通知メッセージ内容
      "title": "google-formより問い合わせがありました",
      // attachmentの本文
      "text" : body,
    }],
  };
  // JavaScript のdataオブジェクトを JSON 文字列に変換
  var payload = JSON.stringify(data);
  // オプション内容
  var options = {
    // POSTリクエストで送信する
    "method" : "POST",
    // リクエストの Content-TypeをJSON指定
    "contentType" : "application/json",
    // payload指定
    "payload" : payload
  };
  // POSTリクエストを実行
  var response = UrlFetchApp.fetch(url, options);
}

function onFormSubmit(e){ 
  // 参考：https://qiita.com/ryo-yamaoka/items/7677ee4486cf395ce9bc
  var body = "<!here> 詳細情報\n";
  var applicant = "";
  // e.responseでFormResponseオブジェクトが取り出せます。そこからgetItemResponsesを呼び出し、ItemResponseの配列が取り出す
  var itemResponse = e.response.getItemResponses();

  for (var j = 0; j < itemResponse.length; j++){    
    var formData = itemResponse[j];
    // スプレッドシートのカラム名(googleフォームの質問)がtitle変数に代入        
    var title = formData.getItem().getTitle();
    // スプレッドシートのセルの値がresponse変数に代入
    var response = formData.getResponse();

  // Formの質問タイトルによって代入する値を変更する
  switch (title) {
      // 質問タイトルがメールアドレスの場合はmail変数にresponseを代入
      case "メールアドレス":
        mail = response;
        break;
      // 質問タイトルが電話番号の場合はnumber変数にresponseを代入
      case "電話番号":
        number = response;
        break;
      default:
        break;
    }
  }

  // 通知の際に表示する内容をbodyPublic変数に代
  var bodyPublic =  body + "メールアドレス:" + mail + "\n電話番号:" + number;
  // 通知したい内容(bodyPublid)と通知したいチャンネルをsendToSlack関数に渡して実行
  sendToSlack(bodyPublic, "#log-google-form-inquiry");
}

トリガーを設定します。

画面左側の選択項目からトリガーを選択

下記のトリガー設定項目から実行したい関数を選択。

今回の場合だとonFormSubmitを実行する関数に設定します。

今回はGoogleFormが送信されたタイミングでSlack通知して欲しいのでイベントのソースを「フォームから」を選択し、イベントの種類を「フォーム送信時」を選択。

まとめ

上記の作業を完了すれば、GoogleFormからお客様から問い合わせがあったタイミングでSlackに通知されるような仕組みになっているはずです。