ちょっと一息

ちょっと一息

主に自分の学んだこと、使えそうなことをまとめてます

Google App Scriptを使ってみた~ その1 ~

JavaScript

あけましておめでとうございます

あっという間に2019年の2月になりました。先月はドタバタしていて全く発信できませんでした...
今月からまたコツコツ色々まとめてみます。さて、前回は簡単にJavaScriptのクラスをまとめました。今回はFirebaseとの連携とかをまとめてみようと思ったのですが、色々あってGASを触ってみたのでまとめてみました。

Google App Script

Google App Script (GAS)はその名の通りGoogleが提供しているJavaScriptをベースとした実行環境です。
Googleのサーバー上に実行環境があり、色々と便利そうです。今回使ってみようと思ったGASの利点は以下になります。

  • Googleの関連サービスと連携することができる
  • 外部サービスと連携することができる
  • 自分でサーバーを用意する必要がない


Googleの関連サービスと連携できる

GoogleドライブやGメールとか、Googleが提供しているサービスと簡単に連携することができるようです。
今回はGoogleカレンダーと連携したかったのでGASを使ってカレンダーに予定を追加できるようにしてみました。

外部サービスと連携できる

Twiiter, LINE, チャットワークといったwebサービスが提供しているAPIを使って連携できるようです。
今回はSlackと繋げてみました。

自分でサーバーを用意する必要がない

レンタルサーバーを借りたり、自分でサーバーの環境構築をする必要がなく、すぐに使用できます。準備が必要ないっていうのが楽でとてもいいですね！

やってみたこと

今回やりたかったことは、Slackに日付と時刻、内容を書くとGoogleカレンダーに予定を登録できる仕組みです。

slackからの投稿を受け取る → GASを使ってGoogleカレンダーに予定を投稿

これをただやりたかっただけなのですが、色々と連携方法とかをまとめてみました。やることは、

細かく分けると上記の4つです。

SlackとGASの連携

まずSlackからの投稿を受け取りたかったのでGASと連携します。

  1. Slack のAppから発信webフックを設定します。
    f:id:yasumuo:20190212030939p:plain
    SlackのApp
    f:id:yasumuo:20190212031832p:plain
    発信webフック
    f:id:yasumuo:20190212031909p:plain
    設定

    インストールできたらインテグレーションの設定をします。チャンネルと引き金となる言葉をひとまず設定して、トークンはどこかに記録しておきます。
    この設定をすることで、引き金となる言葉と一緒にメッセージをslackに投稿することでGASにそのメッセージを渡す準備ができました。(URLは後から設定します)

  2. GASにSlackAppライブラリを追加する

    今回はまず、
    Slackから投稿→投稿したメッセージをGASからSlackへ返す
    を実現してみます。

    そこでGASからSlackに簡単にpostできるようにするために以下に紹介されているライブラリをGASに導入します。
    Slack BotをGASでいい感じで書くためのライブラリを作った - Qiita
    f:id:yasumuo:20190212041152p:plain
    ライブラリを追加

    f:id:yasumuo:20190212044007p:plain
    Tokenの作成

    以下の記事を参考にトークンを作成してチャンネルに試しに送信してみてメッセージが投稿されれば準備OK.
    Slack API 推奨Tokenについて - Qiita
    取得した発信webフックとslack APIのトークンをGASのプロジェクトのプロパティとして保存しておきました。

    ここまでで、まずGASからメッセージを送信できるか試してみました。以下のように書いて、関数を実行したところうまくslackにメッセージが送信できました！
function postSlackMessage() {
  var token = PropertiesService.getScriptProperties().getProperty('SLACK_TOKEN');
  var slackApp = SlackApp.create(token);
  
  var options = {
    channel: "#schedule",
    message: "Hello from Gas"
  };
  
  slackApp.postMessage(options.channel, options.message);
}

f:id:yasumuo:20190212050557p:plain
メッセージ送信

3. Slackから投稿したメッセージをGASで受け取ってそのまま返す

　次にGASのdoPost関数と発信webフックを使ってslackに投稿したメッセージをGASで扱ってみます。

function doPost(e) {
  if(e.parameter.user_name != "slackbot") {
    postSlackMessage(e.parameter.token, e.parameter.channel_name, e.parameter.text);
  }
}


function postSlackMessage(web_token, channel, text) {
  var WEB_TOKEN = PropertiesService.getScriptProperties().getProperty('WEB_HOOK_TOKEN');
  if (WEB_TOKEN != web_token) {
    throw new Error('error');
  }
  var token = PropertiesService.getScriptProperties().getProperty('SLACK_TOKEN');
  var slackApp = SlackApp.create(token);
  
  var options = {
    channel: "#"+ channel,
    message: text
  };
  
  slackApp.postMessage(options.channel, options.message);
}

このようにdoPost関数を作成して、GASを「webアプリケーションとして公開」します。
最後にGASを公開した時にURLが取得できるので、こちらを発信webフックのインテグレーションの設定 URL に貼り付けて保存すると完了です。

f:id:yasumuo:20190212055713p:plain
動作確認

最後に何か文字を書いてそのまま返ってくればとりあえず完成です！

まとめ

今回、簡単にGASをさわってみました。slackから受け取ったメッセージはdoPost関数を使うだけで簡単に扱えました。slackから送信するための準備、GASから返すためのtokenを準備するのに少し時間がかかってしまいましたが、サーバーを自分で用意しなくていいのはとても便利ですね！
次回はその2としてGoogleカレンダーと連携、slackから予定を投稿する方法をまとめてみます。