LoginSignup
17
9

More than 3 years have passed since last update.

あえて言おう、Slackはデータベースではないと!!【Slack】【Google Form】

Last updated at Posted at 2019-12-13

ぼく(元エンジニア):boy_tone1:「面談の所感、どこに書いてもらおうかなぁ・・」
同僚(非エンジニア):boy_tone2:「Slackに書いてもらえばいいじゃん」
ぼく(元エンジニア):boy_tone1:「・・・・・・・・・・」

あえて言おう、Slackはデータベースではないと!!

データって回収するだけじゃなくて、ソートしたり、整形したりするじゃないですか。ただ、それをSlackにまとめちゃうとデータとしての価値が減っちゃうと思って、絶対にSlackをデータベースなんかにしてやるものかと強い気持ちを抱いて今回に至りました。

とはいえ、いちいちGoogle Form確認したり、スプレッドシート見るのも面倒なので、やっぱり見るのはSlackでやりたいですよね。(ここら辺から意地を張り始めている)

Google Formの内容をSlackに飛ばすよ!

今回の流れとしてはこんな感じです。
flow-chart.png

  1. 回答者がGoogle Formで回答を送信
  2. 回答内容が自動でスプレッドシートに転記される
  3. GoogleAppsScriptで回答内容をSlackで飛ばす
  4. みんなSlackで内容見れてハッピー♡

Incoming WebhookのURLを取得する

Incoming Webhookは、以前は単体の設定だけで問題なかったですが、仕様が変わり、現在はSlack Appを立ち上げる必要があります。
参考:slackのIncoming webhookが新しくなっていたのでまとめてみた - Qiita

というわけで、Slack Appを作成するところから始めます。
https://api.slack.com/
Start Buildingをクリックします。

incoming-webhook-00.png

アプリの名前を決めて、紐づけるワークスペースを設定します。

incoming-webhook-01.png

これでSlack Appが完成しました。ここから、Incoming Webhookの設定をしていきます。左メニューからIncoming Webhookを選択します。画面が以下のようになったら、右上のトグルを押して、Incoming Webhookをアクティベートします。

incoming-webhook-02.png

アクティベートすると、下の方にAdd New Webhook to Workspaceというボタンが現れるので、そちらをクリックします。

incoming-webhook-03.png

画面が遷移したら、投稿するチャンネルを選択します。新方式で厳格になったようで、チャンネル指定でWebhook URLが発行されるようになりました。

incoming-webhook-04.png

これで、Webhook URLが取得できるようになりました!同じアプリから他のチャンネルに投稿したいと思ったら、再度Add New Webhook to Workspaceから追加してあげれば問題ないです。

incoming-webhook-05.png

これでOK!

GoogleAppsScript(GAS)で飛ばす

次にGoogle Formに対してGASを当てていきます。右上のメニューから スクリプト エディタ を選択すると、GASのページに飛んでくれます。

google-form-01.png

今回、書いたコードは以下の通りです。
Slack + Google Forms (Google Apps Script)を組み合わせて、およそ10分でフォームの回答結果をSlackに通知させる設定を行うを参考にさせていただきました。)

code.gs
function onFormSubmit(e){
  // webhook url
  var POST_URL = "https://hooks.slack.com/services/hogehoge/fugafuga"; // SlackのIncoming Webhook urlを入力

  var data = '';
  var formResponse = e.response;
  var itemResponse = formResponse.getItemResponses();
  var email = e.response.getRespondentEmail();
  for (var i = 0; i < itemResponse.length; i++) {
    var formData = itemResponse[i];
    var title = formData.getItem().getTitle();
    var response = formData.getResponse();
    // アンケート項目
    data += '*' + title + '*'
    data += '\n'

    // 項目への回答内容
    data += response
    data += '\n\n'
  } 

  var staffs = {
    'hogehoge@sample.co.jp':'ほげほげ',
    'fugafuga@sample.co.jp':'ふがふが'
  };

  var attach = {
    pretext: staffs[email] + 'さんが対応報告を提出しました!',
    title: ':fairy: 対応内容 :fairy: \n',
    text: data,
    color: "#7CD197"
  }

  var attachments = []
  attachments.push(attach);

  var jsonData = {
    attachments: attachments
  }

  sendToSlack(jsonData, POST_URL);  
}

function sendToSlack(data, url) {
  var payload = JSON.stringify(data);
  var options = {
    "method" : "POST",
    "contentType" : "application/json",
    "payload" : payload
  };
  UrlFetchApp.fetch(url, options);
}

今回はFormで取得したメールアドレスで回答者の氏名を識別したかったので、以下のように書いておきました。たぶんここはもっと良い方法があると思っている。


var staffs = {
    'hogehoge@sample.co.jp':'ほげほげ',
    'fugafuga@sample.co.jp':'ふがふが'
};

var attach = {
    pretext: staffs[email] + 'さんが対応報告を提出しました!',
    title: ':fairy: 対応内容 :fairy: \n',
    text: data,
    color: "#7CD197"
}

Slackに結果が送られてくる

こんな感じで送られてきました。やったぜ!!
slack-01.png

Slackはコミュニケーションツールであって、データベースではない

っていう話を言いたかった。

17
9
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
17
9