【GAS】スプレッドシートの更新をSlackに通知させよう！

タイトルの通り、スプレッドシートを編集して変更がかかったとき、Slackに通知させたいときってきっとあるかと思います。 今回はそのやり方を紹介したいと思います。

Slack botを用意しよう

まずは、Slack側にボットのアプリを作成しましょう。

アプリの作成

以下のリンクから作成することができます。

api.slack.com

App Nameにアプリの名前(ボットの名前)を入力して、Development Slack Workspaceに対象のワークスペースを選択します。

入力が終わったらCreate Appをクリックします。

すると以下のようなページが開かれるかと思います。

これでボットのアプリ自体は作成完了になります。

ボットに名前をつけてあげよう

ボットの名前を設定しないと、あと以下のようなエラーが発生してしまいます。

ゴミ にはインストールするボットユーザーがありません このアプリはこのワークスペースにボットをインストールする許可を要求していますが、現在、ボットを使用するための設定がされていません。この問題を解決するためには開発者にお問い合わせください。

そのため、サイドメニューのApp Homeをクリックしましょう。

App HomeのHow Your App Displaysの中にあるEditをクリックします。

Display Name(Bot Name) とDefault usernameを入力して、Addをクリックします。 これで、ボットの名前の設定は完了します。

Incoming WebhooksのURLを発行しよう

その後に、サイドメニューから Incoming Webhooks をクリックします。

Incoming WebhooksのActivate Incoming WebhooksがOffになっているかと思うので、Onにしましょう。

するとこのような項目が表示されるかと思います。 Add New Webhooks to Workspaceをクリックします。

権限のリクエストのページに遷移すると思うので、チャンネルを検索をクリックして、ボットが投稿する先のチャンネル名を選択しましょう。

そして、許可をクリックします。

すると、以下のようにWebhook URLのところにURLが発行されるかと思いますので、CopyをクリックしたりしてこのURLをメモしておきましょう、。

これで、Slackのボット側の設定は完了になります。

スプレッドシート側のスクリプトを作成しよう

まずはテキトーにスプレッドシートを用意します。

スクリプトを入力する

上のメニューからツール→スクリプトエディタをクリックします。

すると以下のような画面が表示されるかと思います。

以下のスクリプトを貼り付けます。

function onEdit(e) {
  var columnStart = e.range.columnStart;
  var columnEnd = e.range.columnEnd;
  var rowStart = e.range.rowStart;
  var rowEnd = e.range.rowEnd;
  var value = e.value

  var text = 'スプレッドシートに変更がありました\n';
  text += 'cell: ' + to26Str(columnStart) + rowStart;
  if (columnStart != columnEnd || rowStart != rowEnd) text+= ' ~ ' + to26Str(columnEnd) + rowEnd;
  if (value) text += '\nValue: ' + value
  console.log(text)
  postSlack(text)
}

function to26Str(n) {
    const mod = n % 26;
    let pow = n / 26 | 0;
    const out = mod ? String.fromCharCode(64 + mod) : (--pow, 'Z');

    return pow ? to26Str(pow) + out : out;
}

function postSlack(text) {
  var url = 'https://hooks.slack.com/services/XXXXXXXXXX/XXXXXXXXXXXXXXXXXXXXXXX'; // Webhook URLを入力する
  var headers = {
    "Content-Type" : "application/json; charset=UTF-8",
  };
  
  var postData = {
    "text": text
  };
  
  var options = {
    "method" : "post",
    "headers" : headers,
    "payload" : JSON.stringify(postData)
  };
  
  return UrlFetchApp.fetch(url, options);
}

このとき、Webhook URLのところに、先程メモしたWebhook URLを貼り付けて置き換えてください。

ctrl + s(Macだとcommand + s)をクリックして保存します。そのときにプロジェクト名を入力する必要があるのでテキトーに入力してOKをクリックして保存してください。

トリガーの設定をする

入力が終わったら上のメニューから編集→現在のプロジェクトのトリガーをクリックします。

すると以下のような画面が表示されるかと思います。

ページ右下のトリガーを追加をクリックします。 ポップアップが表示されるかと思うので、以下のように入力して保存をクリックしてください。

すると、以下のような画面が表示されるかと思いますので、自身のGoogleアカウントをクリックしてください。

以下のような画面が表示されるかと思いますので、左下の詳細をクリックしてみてください。

すると、以下のようにプロジェクト名+(安全ではないページ)に移動が表示されるので、それをクリックしてください。

以下のような画面に切り替わるので、許可をクリックします。

するといろいろ開いていたポップアップとかが閉じるかと思います。

これでスプレッドシート側の設定も完了です。

実際にスプレッドシートに入力してみる。

これで設定が終わったので、スプレッドシートに入力してみましょう。

このようにテキトーに文字を入力してみます。

すると、以下のようにSlackに通知が投稿されます。

複数セルの同時編集にも対応しています。

これで無事に投稿できました！

さいごに

今回はスプレッドシートの編集時にSlackへ通知するということを実現できました。 これを応用すれば、誰かがスプレッドシートに入力したのを検知できたり、Googleフォームなどのアンケートの入力などでスプレッドシートに変更がかかったときに、Slackを通して検知することができるようになりますね。このように、どんどん作業の効率化・業務の効率化をどんどん進めていきましょう。