LoginSignup
4
3

More than 5 years have passed since last update.

@fukamiiiiinmin(Masakazu Fukami)

Slackの招待メール送信をGoogle Apps Scriptで自動化する

Posted at

はじめに

We Are JavascriptersというJavascripter向けのイベントのもくもく会をおこなうことになり、もくもく会専用のSlackを作成しました。
しかし、参加者全員にメールを送ってSlackに招待するのが結構な手間になりそうだったので、どうにかスクリプトでこの手間を省略できないかなぁと考えていました。
探しているとSlackInというアプリが見つかったのですが、筆者がherokuへのデプロイとかやったことないレベルなので今回はAjaxでWebアプリケーションとして公開したGAS(Google Apps Script)へリクエストを送り、GAS内でSlackチームへの招待メールを送るようにしましたので知見を共有します！
無料で全て完結するのでおすすめですよーーー！

必要知識

  • html, css, Javascript（ajax）
  • Google Apps Script（記法はほぼJavascript）

基本的なWebの知識があれば問題ないと思います。

簡単な流れ

Slackの招待メールを送信するための、基本的な処理の流れは以下のとおりです。

フロント側からGASへEmailをパラメータとして渡したAjaxを飛ばす
↓
Emailへ招待メールを送るために、GASからSlackのAPIへEmailをパラメータとしてpostする
↓
SlackのAPIからresponseが返ってくる（この時点でSlackによってEmailは送信されている）
↓
Slackのpostが成功したか確認するために、Slackのresponseをそのまま、ajaxのresponseとしてフロント側に返す

コードの最小構成

見た目などは無視してhtmlのform, それに必要なjavascriptのコード、Google Apps Scriptを書いています。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>WeJS: Send Slack Invitation</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
  </head>

  <body>
    <!-- 招待メールを入力させるform -->
    <form action="#" id="form">
      <div>
        <label for="email">Email Address</label>
        <input type="email" id="email" name="email">
      </div>
      <input type="submit" value="送信">
    </form>

    <!-- Google Apps ScriptへのAjax -->
    <script type="application/javascript">
      $('#form').on('submit', function(e){
        e.preventDefault()
        $.ajax({
          url: '【Your Google Apps Script Endpoint】',
          data: $(this).serialize(),
          dataType: 'jsonp'
        })
        .then(function(res){
          alert(res);
        }, function(res){
          alert("Oops...Something went wrong!");
        })
      })
    </script>
  </body>
</html>


// Google Apps Script

// Getでリクエストを受け取ったときに呼ばれる関数（デフォルトではdoGet関数が定義されていると呼ばれる）
function doGet(e) {
  var TOKEN = '【Your Slack App Token】'
  var URL   = 'https://【Your Slack Team Name】.slack.com/api/users.admin.invite'

　　　　// UrlFetchAppでslackのAPIにpostでemailtとtoken、set_activeを投げる
  var res = UrlFetchApp.fetch(URL, {
    'method': 'post',
    'payload': {
      'token': TOKEN,
      'email': e.parameter.email,
      'set_active': true
    }
  });

  var content = {
    output:   e.parameter.callback + '(' + res.getContentText() + ');',
    mimeType: ContentService.MimeType.JAVASCRIPT
  };
  return ContentService.createTextOutput(content.output).setMimeType(content.mimeType);
}

コードの中にある定数は以下のとおりです。

  • 【Your Slack App Token】 ・・・ Slack Appのtoken
  • 【Your Slack Team Name】 ・・・ どのチームに招待した以下の名前
  • 【Your Google Apps Script Endpoint】 ・・・ GASをWebアプリケーションとして公開したときのエンドポイント

定数の準備

Your Slack App Token

これはSlack Appのtokenになります。
これは以下の記事がわかりやすかったので参考にして下さい。
Slack APIのTokenの取得・場所

おそらくこのような感じになります。

xoxp-xxxxxxxxxxxx-yyyyyyyyyyyy-zzzzzzzzzzzz-aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

スクリーンショット 2017-05-31 10.36.20.jpg

Your Slack Team Name

これはSlackのチームの名前です。
今回招待メールを送りたいSlackのチームはteam-wejs.slack.comというチームだったのでteam-wejsの部分になります。

Your Google Apps Script Endpoint

こちらですが、少し手順が長いです。
そもそもGoogle Apps Scriptの説明なのですが、Google Apps Scriptは使用したスクリプトを外部のアプリケーションとして公開することが出来ます。
また、その際にエンドポイントとしてurlが発行され、GetとPostでアクセス時に呼ばれる関数を設定することも可能です。

// Google Apps Script
doGet(){
  // Endpointにgetでアクセスすると呼ばれる
}
doPost(){
  // Endpointにpostでアクセスすると呼ばれる
}

なので、もちろんブラウザのURL欄に発行されたurlhttps://script.google.com/macros/s/xxxxxxxxxxxx/execをいれてアクセスするとdoGet()で返したものが表示されます。

さて、やってみましょう。
ますGoogle Apps Scriptにアクセスします。
スクリーンショット 2017-05-31 11.48.13.jpg

今回使用するのはdoGet()になります。
ここで、Emailを送るのにgetでアクセスするのかと思われるかもしれませんが、Google Apps Scriptで公開したアプリケーションはCORSが許可されておらず、異なるドメインからのPostを受け付けていません。
なのでAjaxでエンドポイントに対してGetでアクセスし、jsonp形式でレスポンスデータを受け取ります。
もちろんGoogle Apps ScriptではdoGet()内でjsonp形式でデータを返して上げる必要があります。

それでは先ほどのコードをコピペしてみましょう。

// Google Apps Script

// Getでリクエストを受け取ったときに呼ばれる関数（デフォルトではdoGet関数が定義されていると呼ばれる）
function doGet(e) {
  var TOKEN = '【Your Slack App Token】'
  var URL   = 'https://【Your Slack Team Name】.slack.com/api/users.admin.invite'

　　　　// UrlFetchAppでslackのAPIにpostでemailtとtoken、set_activeを投げる
  var res = UrlFetchApp.fetch(URL, {
    'method': 'post',
    'payload': {
      'token': TOKEN,
      'email': e.parameter.email,
      'set_active': true
    }
  });

  var content = {
    output:   e.parameter.callback + '(' + res.getContentText() + ');',
    mimeType: ContentService.MimeType.JAVASCRIPT
  };
  return ContentService.createTextOutput(content.output).setMimeType(content.mimeType);
}

やってることは単純です、doGet()が呼ばれた後、先ほど準備した【Your Slack App Token】と【Your Slack Team Name】を使って定数を定義します。
その後SlackのエンドポイントにPostするためにGoogle Apps ScriptのUrlFetchAppを使用し、値としてe.parameter.emailから取得したemailをpostして上げます。

Slackにpostした後、SlackのAPIからレスポンスを受け取り、ajax側に返してあげるデータを整形します。
上記の以下の部分です。

var content = {
  output:   e.parameter.callback + '(' + res.getContentText() + ');',
  mimeType: ContentService.MimeType.JAVASCRIPT
};
return ContentService.createTextOutput(content.output).setMimeType(content.mimeType);

※ Google Apps Scriptで値を返却する際の型の指定方式が少々特殊なので下にまとめました。

これだけでGoogle Apps Script側の処理は終了です。

それでは外部のWebアプリケーションとして公開してきましょう。
①公開 → ウェブアプリケーションとして導入
スクリーンショット_2017-05-31_12_30_40.jpg

②諸々埋める

スクリーンショット_2017-05-31_12_31_08.jpg

③URLの発行が完了する

スクリーンショット_2017-05-31_12_31_42.jpg

これでhtmlの中のajaxのurlを埋めることが可能です！

$.ajax({
  url: '【Your Google Apps Script Endpoint】',
  data: $(this).serialize(),
  dataType: 'jsonp'
})

これで全部完了です！
あとはフロント側でAjaxで返ってくる値の中身に応じて色々処理を変えてみるとUX的に良いと思います！

また、今回はhtmlをgithub-pagesに上げたのでまったく料金がかからずこのアプリケーションを作成することが出来ました。
サーバレスで気軽に作成できるので良かったら作成してみて下さい！(๑•̀ㅂ•́)و✧

We Are Javascriptersの場合

ちなみにWe Are Javascriptersのサイトでは以下のようなデザインにしています。
スクリーンショット 2017-05-31 12.27.25.jpg
スクリーンショット 2017-05-31 12.29.22.jpg

注釈

Google Apps Scriptの返却する値について

Google Apps Scriptを使用するときに注意して欲しいことなのですが、return 'hogehoge'などにしても正しく値が返ってくれません。
戻り値の型をContentService.createTextOutput(【値】).setMimeType(【型】)を使用して指定するようにして下さい。

普通にtextをreturnした場合

スクリーンショット 2017-05-31 12.04.33.jpg

text/plainを返したい場合

plain/textを返したい場合は
ContentService.createTextOutput('aaaa').setMimeType(ContentService.MimeType.TEXT)
と指定しましょう。

function doGet() {
  return ContentService.createTextOutput('aaaa').setMimeType(ContentService.MimeType.TEXT)
}

スクリーンショット_2017-05-31_12_13_44.jpg

application/jsonを返したい場合

application/jsonを返したい場合は
ContentService.createTextOutput('aaaa').setMimeType(ContentService.MimeType.JSON)
と指定しましょう。

function doGet() {
  return ContentService.createTextOutput('aaaa').setMimeType(ContentService.MimeType.JSON)
}

スクリーンショット_2017-05-31_12_14_09.jpg

ちなみにjsonをさくっと返したい場合はGoogle Apps Scriptで可能なので、僕はよくテストに使ってます（笑）

4
3
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
Sign upLogin
4
3