【新卒研修その1】GASを使ってSlackと連携してみよう! 〜フォームの回答結果を自動で報告するBOTを作る〜

今年の春に新卒で入社し、現在menuユーザーチームのフロントエンドエンジニアとして勤務している坂井田です🍴
この記事はレアゾンで働くことに興味を持ってくださっている方に向けて、

  • 新卒研修ってどんなことをやるの?
  • 実際に研修で使った技術

を画像を交えながら詳しくご紹介します!
コードの話やアルゴリズムなどプログラミングの要素もあり少し難しいと感じられるかもしれませんが、エンジニア志望でない方でも今後必要になってくる 今回紹介する内容は日常でも役立つものですので、記事を見ながら試してみてくれると嬉しいです。
ぜひ最後までご覧ください!!

研修について

アゾンの研修は大きく分けて2つあり、職種に関係なく学ぶ全体研修と、職種ごとに分かれて深堀りする研修があります。
弊社では現在テックファーストを目標に掲げており、エンジニア職への理解と他職種での作業効率化のため、研修時に採用職種に関わらず最低限のプログラミング知識を学びます。
この記事ではその研修内容の一部である、GASとSlackを連携して実際にBOTを作ってみることについて書いています。
(次回は後者の研修内容についてを書く予定ですので、お楽しみに!)
なお研修内容は毎年異なっており、ここに記載されている内容がすべてではく、来年以降変更される場合がありますのでご注意ください。

GASを使ってみよう!

GASとはGoogle Apps Scriptの略で、Google ドキュメントスプレッドシートなど、Googleの様々なサービスでJava Scriptのコードを書くことで処理をカスタマイズできます。
別のサービスからスプレッドシートに集計したり、フォームの回答を別の場所に送信したり、、色々なことができます!
まずはその基礎として、スプレッドシートの値の取得と設定についてご紹介します。

値の取得

スプレッドシートを開いたら、まずA1セルに何かテキストを入力してください。
はじめにこのセルの内容を取得してみます。

拡張機能メニューのApps Scriptをクリックすると、GASの編集画面が開きます。
ここに下記のコードを入力し、保存して実行することで先程入力したセルの値を取得することができます。

const SPREADSHEET_ID = "スプレッドシートのID";

function myFuntion() {
  const spreadSheetById = SpreadsheetApp.openById(SPREADSHEET_ID);
  const targetSheet = spreadSheetById.getActiveSheet()
  const range = targetSheet.getRange("A1");
  Logger.log(range.getValue())
}

シートIDについて

開いているスプレッドシートのURLの、ピンクの部分がシートIDになっています。
URLからこの部分のみをコピーして貼り付けてください。
https://docs.google.com/spreadsheets/d/〜ここがシートID〜/edit#gid=0

連携について

初回実行時は画像のようなアラートが表示されます。
権限を確認をクリックしてアカウントと連携してください。

実行するとこのように、下の実行ログのところに入力した値が表示され、正しく取得できていることが分かります。
簡単ですね!

値の設定

取得ができたので次はGASから値をセットしてみます。
下記コードを入力して実行すると、A2セルにランダムな値を書き込む事ができます。
(複数のメソッドが存在する場合は、実行ボタン横のドロップダウンで実行するものを指定できます。)

function setRandomValue() {
  const spreadSheetById = SpreadsheetApp.openById(SPREADSHEET_ID);
  const targetSheet = spreadSheetById.getActiveSheet();
  const range = targetSheet.getRange("A2");
  const randomValue = Math.floor(Math.random() * 100);
  range.setValue(randomValue);
}

カスタムメニューの追加

毎回メソッドを選択して実行ボタンを押すのは面倒だし分かりづらいです。
GASには自由にメニューを追加できる機能があるので、それを使ってみます。

function setMenu() {
  SpreadsheetApp.openById(SPREADSHEET_ID).addMenu("カスタム機能", [
    { name: "A2に乱数をセット", functionName: "setRandomValue" },
  ]);
}

上記コードを追加して実行すると、GAS上は特に変化が起きませんが、スプレッドシートの画面を開くとメニューが追加されていることが分かります。

このメニュー項目をクリックすると、GASで実行ボタンを押したときと同じ処理をすることができます。
便利ですね!!

Slackと連携してみよう!

GASの操作だけではいまいち使い道が分からず、イメージしづらかったかも知れません。
そこで業務でもよく使用しているSlackと連携してみたいと思います。

GASからSlackにメッセージを送信する

メッセージを送信する場合は下記の2つの情報が必要です。
1. 送信するBOTトークン 2. 送信先のチャンネル情報(チャンネル名 or ID)

まずはワークスペースBOTを追加し、トークンを取得します。

1. BOTを作ってトークンを取得する

Slack APIのアプリ一覧画面を開き、Create New Appボタンをクリックします。

BOTの細かい設定はしないのでFrom scratchの方をクリックします。

BOTの名前を入力し、追加するワークスペースを選択してCreate Appをクリックします。

次にBOTの権限を設定してメッセージを送信できるようにします。
左側のメニューからOAuth & Permissionsをクリックし、画面を下にスクロールしてBot Token Scopes欄のAdd on OAuth Scopeボタンをクリックします。
(今回はBOTができるようにしたいのでBot Token Scopesで設定します。)

chat:writeと入力して送信権限を付与します。

権限の付与が完了したら上にスクロールし、Install to WorkspaceボタンをクリックしてワークスペースBOTを追加します。

このような画面が表示されるので、許可するボタンをクリックします。

完了するとトークンが表示されるので、これをコピーして控えておきます。
これでトークンの取得は完了です。

2. 送信先のチャンネルの設定

BOTをチャンネルに追加し、チャンネルのIDを取得しておきます。

BOTがメッセージを送信するチャンネルの設定を開き、インテグレーションタブのアプリを追加するボタンをクリックします。

先ほど作成したBOTを探し、追加ボタンをクリックします。

次にチャンネルIDを取得します。
対象のチャンネルを右クリックし、コピーリンクをコピーをクリックします。
コピーされたURLのピンクの部分がIDになっているので、控えておきます。
https://ワークスペース名.slack.com/archives/〜ここがチャンネルID〜
これでした準備は完了です。

メッセージを送信

下記コードをGASで実行すると、メッセージを送信できます。

function postMessage() {
  // 投稿設定
  const url = "https://slack.com/api/chat.postMessage";
  const payload = {
    token: "Slack BOTのトークン",
    channel: "送信先のチャンネルID",
    text: "GASから送信しています!",
  };
  const params = {
    method: "post",
    payload: payload,
  };

  // Slackに投稿する
  UrlFetchApp.fetch(url, params);
}

BOTのアイコンや名前は、Slack APIのアプリ一覧画面Basic Informationから変更できます。

スタンプ(絵文字)を一緒に送る

上記コードのtextの部分を、下記のようにするとスタンプを付けて送ることができます!
(コロンの間にスタンプコードを入れます。)

:mega: お知らせです!

スタンプコードは下記のページを使うと簡単に調べられます。
www.webfx.com

また、他にもメッセージは自由にカスタマイズできるためボタンや画像をつけて送ることもできます。
気になった方は下記のページをご確認ください。
qiita.com api.slack.com

Googleフォームの回答結果をSlackで自動通知する

少し応用して、GoogleフォームのGASとSlackを繋げてみます。
今回は検温フォームを作り、その結果をSlackで通知するようにしてみます!

まずはGoogle フォームでこのような質問を作成します。

次に右上の三点リーダーをクリックし、スクリプト エディタをクリックしてGASを開きます。
(なぜここはApps Script表記ではないのでしょうか...)
開いたら、回答結果をSlackで送信する下記コードを入力します。

コードはこちら

function autoSlack(e) {
  // すべての質問と回答を取得
  const itemResponses = e.response.getItemResponses();

  // 質問と回答の格納用
  let questionAndAnswers = [];

  itemResponses.forEach((item) => {
    //質問のタイトル
    const questionTitle = item.getItem().getTitle();
    //回答
    const answer = item.getResponse();

    if (!answer) {
      // 未回答の場合
      questionAndAnswers.push(questionTitle + ": *未回答*");
      return;
    }
    questionAndAnswers.push(questionTitle + ": *" + answer + "*");
  });

  // Slackの本文
  const sendMessage = "[検温フォームの回答]\n" + questionAndAnswers.join("\n");

  // メッセージを投稿する
  postMessage(sendMessage);
}

function postMessage(sendText) {
  // 投稿設定
  const url = "https://slack.com/api/chat.postMessage";
  const payload = {
    token: "Slack BOTのトークン",
    channel: "送信先のチャンネルID",
    text: sendText,
  };
  const params = {
    method: "post",
    payload: payload,
  };

  // Slackに投稿する
  UrlFetchApp.fetch(url, params);
}

スプレッドシートでは実行ボタン or メニューをクリックした時にコードを実行していましたが、今回は回答が送信された時に実行させたいのでトリガーを設定します。

左の目覚まし時計のアイコンをクリックし、右下のトリガーを追加ボタンをクリックして下記のように条件を設定します。

  • 実行する関数:autoSlack
  • イベントのソース:フォームから
  • イベントの種類:フォーム送信時

完了したらフォームに回答して確認します。
項目を入力して送信すると、Slackの特定のチャンネルにメッセージが送られてきます。

メールアドレスとSlackのユーザーIDの対照表を事前に用意しておけばメンションを飛ばすこともできるので、活用法次第で十分実用的なツールが作れそうです!!

おわりに

GASは他にも様々な機能が用意されていて、使いこなすことで普段の作業を効率化することができます。
また、JavaScriptで書けるので他のサービスとの連携も簡単にできるのが特徴です。
Slack自体にもとても便利なAPIが多数存在しており、可能性が広がりますね!!

menuチームでは実際に、GitHubでメンションするとその内容がSlackでも通知されるBOTが稼働しています。
コメントやApproveをいただいた時にすぐ気づくことができるので、とても助かっています😊

最後に、弊社では様々なポジションのエンジニアを募集しています。
まずはカジュアルにお話を、という形でも結構ですので是非気軽にご応募ください!
reazon.jp