LoginSignup
10
7

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

@gkzz(Gakuji Tamaki)in株式会社エーピーコミュニケーションズ

【入門】Google Apps Scriptチュートリアル1/2（デモ動画付き・①doGet()とdoPost()でHellow World!）

Last updated at Posted at 2019-05-03

0.表題の背景

業務でGoogle Apps Scriptを使っているので、なんか自分で作りたい
→サーバーレスなBOTを作りたい。
→→無料がいい。

ということで、Google Apps ScriptでSlack BOTを作ることにチャレンジしました。

その結果、Google Apps Scriptのお作法は言わずもがなとして、HTTPやらAPIと色々触ることが出来ました。

そこでApps Scriptの基本的な書き方からBOTの作成手順を忘れないうちに、デモ動画や画像を適宜交えながらご紹介します。

本記事では、以下のことを取り上げます。
1.最終的に出来上がるSlack BOTの機能
1-1.デモ
1-2.要件をざっくりと
1-3.構成図はこんなかんじ

2.使用するサービス、技術、フレームワークなど
2-1.使っているもの
2-2.特筆するべき使っていないもの

3.作成手順
3-1.doGet()とdoPost()でHellow World!

Appendix
ワークスペースの作成
Appの作成
BOTの作成
BOTをチャンネルに追加
Scriptエディターを新規で作成する2つの方法
スクリプトをウェブアプリケーションとして登録し、Slash Commandsを登録

次回は後編として以下の内容を取り上げます。
3-2.doGet()とdoPost()でオウム返しBOTを作る
3-3.curlでSlack APIを叩き、チャンネル情報を取得
3-4.スプレッドシートにチャンネル情報を入力
3-5.スプレッドシートからチャンネル情報を取得し、responseを生成
3-6.完成

Appendix
userにメンションを飛ばす方法(2019/04/30現在)

#1.最終的に出来上がるSlack BOTの機能
##1-1.デモ
navigate.gif

##1-2.要件をざっくりと
・/navigateとslackの任意のチャンネルの投稿画面で打ったら、ワークスペースに登録されているパブリックチャンネルと各チャンネルの参加者数がコマンドを叩いた者だけに表示されること

・表示されるパブリックチャンネルと各チャンネルの参加者数は事前にSlack APIを使ってスプレッドシートに書き出しておくこと

##1-3.構成図はこんなかんじ↓
①コード.gs(GithubではchannelList.js)
image.png
ソースコード：channelList.js

②getChannels.gs(GithubではgetChannels.js)
image.png
ソースコード：getChannels.js

#2.使用するサービス、技術、フレームワークなど
##2-1.使っているもの

  • Google Apps Script
  • doGet()とdoPost()
  • Slack API
  • conversations.list Method
  • Incoming Webhook URL
  • Slash Commands

##2-2.特筆するべき使っていないもの
Outgoing Webhook URLはslackでは推奨されていない機能なので、使っていません。
代替サービスとしてSlash Commandsを採用しています。
両者の相違点は、コマンドを叩いたユーザーに対してのみ、Slash Commandsで登録したコマンドを叩いた後に表示される出力結果が表示されるという点です。

#3.作成手順
##3-1.doGet()とdoPost()でHellow World!
image.png

###3-1-1.AppのVerification Tokenを取得

以下のURLから今回使いたいAppを選択するか、新たに作成してください。
新たに作成する場合、APPを作成する様子を撮ったデモ動画と手順をAppendixで取り上げているのでご参照ください。
https://api.slack.com/apps

image.png

Appのページの下部にあるVerification Tokenをコピーしましょう。
image.png

###3-1-2.とりあえずコピペ！

コードをコピペ、、、の前にコードをコピペする場所となるApps Scriptのエディターを開く必要があり、エディターの開き方は2種類あるのでそこから。

エディターは任意の場所から右クリックでGoogle Apps Scriptを選択するか、スプレッドシートを開いた後、上タブのToolsからScript Editorを選択して開きましょう。

・任意の場所から右クリックでGoogle Apps Scriptを選択する（直接Google Apps Scriptを開く）
openScriptEditor.gif

・スプレッドシートを開いた後、上タブのToolsからScript Editorを選択して開く
openScriptEditorWithSs.gif

※エディターの開き方によってスプレッドシートを開く方法が異なるので、興味がある方はAppendixをどうぞ。

Apps Scriptのエディターを開いたら、以下のコードをコピペしてください。

function doGet(e){
    doPost(e);
}

function doPost(e) {
    //先ほど取得したVerification Tokenをココに貼る
    const VERIFICATION_TOKEN = "<YOUR_APP_VERIFICATION_TOKEN>";
    var paramToken = e.parameter.token;
    if (paramToken != VERIFICATION_TOKEN) {
        throw new Error('Invalid token');
    }
    //お好きな言葉をどうぞ♪
    var response = {
        text: "Hellow World!"
        //text: "just published" 
    };
    return ContentService.createTextOutput(
        JSON.stringify(response)
    )
    .setMimeType(
        ContentService.MimeType.JSON
    );
}

さあ、いよいよ、今回一番の山場がやってきました(笑)。
がんばりましょう！

###3-1-3.ウェブアプリケーションとして登録/Deploy as web app
Scriptエディター上のPublish(公開)、続いて**Deploy As Web App(ウェブアプリケーションとして導入)をそれぞれクリックしてください。
クリックした後、Project version(プロジェクトバージョン)をNew(新規)として、Who has access to the app(アプリケーションにアクセスできるユーザー)はAnyone, even anonymous(全員（匿名ユーザを含む）)**と設定しましょう。
publish.gif

####Q. なぜAnyone, even anonymous(全員（匿名ユーザーを含む）)？####
A. slackでコマンドが叩かれたときに、Googleアカウントを持っていないSlackがアプリケーションにアクセスすることになるためです。つまり、ここでのanonymous(匿名ユーザー)とは、Googleアカウントを持たないユーザーとなります。

※Scriptを書き換えたら都度上のデプロイをやらないといけません汗。
※なお、Scciptを変えた後、上のデプロイをしても後述するslack側での設定は不要です。何故ならCurrent web app URLは変わらないためです。

※上の動画(GIF)では登録後、Current web app URLをコピーしていますが、みなさんもコピーしておいてください。
次にご説明するslack側でのslash comamndsの設定でURLを貼る必要があります。

もうだめだ、、。ワケわからん、、、。
もし、このあたりでつまずいたら、以下のAppendixを参考に再度チャレンジしてください！

###3-1-4.Slash Commands
以下のURLから先ほど取得したVerification TokenのAppをクリック。
https://api.slack.com/apps
クリック後、下の画像の青線で囲んだ、Add features and functionalityをクリック。
image.png

同様に下の画像の青線で囲んだ、Slash Commandsをクリック。
image.png

下の画像の青線で囲んだ、Create New Commandをクリック。
※既存のSlash Commandsの設定を変更する場合は鉛筆マークをクリック。
image.png

下の画像の青線で囲んだ、Request URLの右隣の枠内に先ほどのCurrent web app URLを貼り付けてください。
image.png

他はみなさんの好きなように入力していただいてOKですが、ご参考までに私の設定画面を共有します。
※コマンドの冒頭(一文字目、一番左)には"/"が必要なので、お忘れなく。
image.png

###3-1-5.さあ、slackの投稿画面で叩いてみよう！

#"/" + <slash commandsで登録した文字列> 
/navigate

を叩いたら

#<変数responseに格納した値>
Hello World
//just published

が表示されたらOK！

Congrats!!

おめでとうございます！！！
そしておつかれさまでした！

次回はresponseの中身を書き換えていくので、次回もお楽しみに♪

#Appendix

##ワークスペースの作成
以下のURLをクリックして、デモ動画を参考に作ってみてください。
https://slack.com
参考：デモ動画
addWorkspace.gif

##Appの作成

以下のURLをクリックしてデモ動画を参考に作ってみてください。

https://.slack.com/apps

addApps.gif

※この画像で青く塗りつぶされている部分は、先ほど作ったワークスペースごとに異なります。
image.png

直接以下のURLを叩いてもAppの追加ページに行けますが、　僕はワークスペースのページをブックマークしているので、https://.slack.com/messages のmessagesを消してappsを入力しています。
https://api.slack.com/

##BOTの作成
Appを作成したら、続けて下記のデモ動画を参考にBOTも作ってみてください。
addBOT.gif

##BOTをチャンネルに追加
ワークスペースの画面に戻って、APPをお好きなチャンネルに追加してください。
registerBOTAsMember.gif

##Scriptエディターを新規で作成する2つの方法
Googleドライブから直接Scriptエディターを新規で開いた場合（スプレッドシートと紐づけることなく）、スプレッドシートのセルの値やシートの名前などスプレッドシートを操作するには、どのスプレッドシートを操作するか指定する必要があります。
下の画像は、操作する対象のスプレッドシートを指定することなく、スプレッドシートの一番左のシート名をLoggerメソッドで表示させようとしたところ、

image.png

TypeError: Cannot call method "getSheets" of null. (line 3, file "Code")

とnullとエラーを吐かれてしまいました汗。
Scriptエディターをスプレッドシートに紐づけることなく、新規で作成したうえで、スプレッドシートを操作する場合、スクリプトのシートオブジェクト（the active Spreadsheet object, 本スクリプトではss）を取得する部分を以下のように改修してください。

function myFunction() {
  //スプレッドシートとScirptエディターが紐づいている場合に利用
  //var ss = SpreadsheetApp.getActiveSpreadsheet();

  //SpreadSheetのIDはSpreadSheetのURLの"/d/"と"/edit"との間に連なる文字列
  //https://docs.google.com/spreadsheets/d/<YOUR_SPREADSHEET_ID>/edit#gid=0
  var ss = SpreadsheetApp.openById("<YOUR_SPREADSHEET_ID>");
  var sheet = ss.getSheets()[0];
  Logger.log(sheet.getSheetName());
}

getActiveSpreadsheet()
Returns the currently active spreadsheet, or null if there is none.
[...]

// The code below logs the URL for the active spreadsheet.
Logger.log(SpreadsheetApp.getActiveSpreadsheet().getUrl());

出所：Class SpreadsheetApp | Apps Script | Google Developers

##スクリプトをウェブアプリケーションとして登録し、Slash Commandsを登録
registerSlashCommands.gif

Scriptエディター上のPublish(公開)、続いて**Deploy As Web App(ウェブアプリケーションとして導入)をそれぞれクリックしてください。
クリックした後、Project version(プロジェクトバージョン)をNew(新規)として、Who has access to the app(アプリケーションにアクセスできるユーザー)はAnyone, even anonymous(全員（匿名ユーザを含む）)**と設定しましょう。

[本記事 ###3-1-3.ウェブアプリケーションとして登録/Deploy as web app](###3-1-3.ウェブアプリケーションとして登録/Deploy as web app) より

##Q. xoxbのtokenがない、、、。
A. Add BOT UserからBOTを追加しましょう。追加するとpermissionのページにBOT用のtokenが表示されると思います。
image.png

##Q. BOTとAPPの違いは？
A. APPにユーザーと会話をする機能を追加したものがBOTと認識しています。ご参考までにslackのドキュメントから僕が参考にした箇所を引用します。

A bot is a type of Slack App designed to interact with users via conversation.

A bot is the same as a regular app: it can access the same range of APIs and do all of the magical things that a Slack App can do.

出所：Enabling interactions with bots | Slack

####xoxpトークンとxoxbトークンではこのようにスコープの設定範囲
xoxpとxoxbとではスコープの設定範囲が異なります。
xoxbトークンでconversations.listを使う際には、botのみscopeに追加すればよいのです。
image.png

####soopeの設定範囲
image.png

ソースコード
channelList.js
getChannels.js

参考
下記の記事は、今回の実装をするうえでdoGet(), doPost(), Slash Commandsの概要を知るうえで参考にしました。
Slash CommandsとGASでSlackのオリジナルコマンドをつくる

後編
[【入門】Google Apps Scriptチュートリアル2/2（デモ動画付き・②コマンドを叩いてチャンネル情報を表示させる）]
(https://qiita.com/gkzz/items/e63f8d86b6c253a5cd26)

番外編
【入門】Google Apps Scriptチュートリアル1/2（デモ動画付き・①doGet()とdoPost()でHellow World!）

P.S. Twitterもやってるのでフォローお願いします！
@gkzvoice

10
7
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
10
7

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?