研修について
GASを使ってみよう！
- 値の取得
  - シートIDについて
  - 連携について
値の設定
カスタムメニューの追加
Slackと連携してみよう！
- GASからSlackにメッセージを送信する
- Googleフォームの回答結果をSlackで自動通知する
おわりに

今年の春に新卒で入社し、現在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);
}