19
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

posted at

GASで作るSlack Slash Commands入門

Slack Slash Commandsとは?

Slack Slash Commands(以下、スラッシュコマンド)は、Slackのメッセージの入力ボックスに / から始まる特定の文字列を入力することで起動するアプリケーション。元々実装されているものとして、Slackのログイン状態を変更する /away/active などがある。
今回はGAS(Google Apps Script)でスラッシュコマンドを初めて作成したので、作り方を、備忘録として作成する。

GASの実装・公開

プロジェクトの作成

  1. G Suite Developer Hubにアクセスする。
  2. [新しいプロジェクト]を押下して、プロジェクトを作成する。

プロジェクト名などはお好みで決めてください。

必要最低限必要なコード

サンプルコード
function doPost(e) {
  return ContentService.createTextOutput("返したいテキスト");
}

細かいこと置いておけば、とりあえずこれで動くことには動く。詳細は以下に記載。

doPost(e) メソッド

任意のメソッド名ではなく、必ずこうでないとだめ。 doPost(e) メソッドは、GASに標準で実装されるメソッドで、POSTでリクエストが投げられると、このメソッドが自動的に動く(GETが飛んできたら doGet(e) が動く)。引数にはリクエスト内容が含まれている。

ContentService.createTextOutput(text) メソッド

これもGASに標準で実装されるメソッド。テキストコンテンツを作成する。これを return しているので、要はテキストを返しているだけ。

Webアプリケーションの公開

スラッシュコマンドでこのコードを使用できるようにするには、作成したGASコードをWebアプリケーションとして公開する必要がある。まずは、上記のサンプルコードで公開してみる。

  1. [公開]->[ウェブアプリケーションとして導入...]を押下する。 fig1.png
  2. 以下のように設定し、[Deploy]を押下する。
    • 他のサイトを見ていて、自分だけなぜ英語なのかよく分かんない… fig2.png
  3. デプロイが完了し、URLが発行される。後で使うので控えておく。

Slack APIでアプリの作成・インストール

アプリの作成

  1. ワークスペースにサインインした状態でSlack APIにアクセスする。
  2. [Create New App]を押下する。
  3. アプリケーション名とアプリを作成するワークスペースを設定し、[Create App]を押下する。また、ここで設定したワークスペースにインストールすることにもなる。 fig3.png
  4. 「Add features and functionality」の[Slach Commands]を押下する。 fig4.png
    • 次の画面に出てくる[Create New Command]も押下する。
  5. スラッシュコマンドの作成に必要な情報を入力していく。 fig5.png 上から順に、
項目名 入力する内容
Command 実際に使用するコマンドの単語を何にするか
Request URL さっきのGASのURL
Short Description 補完で表示される簡単な説明
Usage Hint 引数があればそのヒント

となる。Request URL以外は下にプレビューが表示されるので、迷うことはないと思う。

入力が完了したら[Save]を押下する。

アプリのインストール

  1. 左のメニューから[Install App]を押下する。
  2. [Install App to Workspace]を押下する。
  3. アクセス許可の可否が出るので[許可する]を押下する。

これでインストールが完了です。

実際に動かしてみる。

入力していくと、
fig6.png
このように補完が出てくる。今回のコマンド /example を入力して実行すると、
fig7.png
このように「返したいテキスト」が返信された。

最後に:もっとアプリケーションらしくする

今のままでは、何をどうしても「返したいテキスト」しか返ってこない。そこで、引数に入力したURLをBitlyで短縮URLを作成して返してくれるアプリケーションを作成してみる。

Bitly APIアクセストークンの取得

  1. Bitlyに登録後、https://app.bitly.com/にアクセスする。
  2. 右上のメニューから自分のユーザ名を押下する。
  3. [Generic Access Token]を押下する。
  4. パスワードを入力し、[GENERATE TOKEN]を押下する。

作成したトークンは下のコードの (BitlyAPIアクセストークン) に入力する。

GASの実装

GASコード
/*Bitlyアクセス情報*/
var BITLY_TOKEN = "(BitlyAPIアクセストークン)";
var req_base = "https://api-ssl.bitly.com/v3/shorten?access_token=";

function doPost(e) {
  /*作成したアプリからのリクエストか*/
  if (e.parameter.token === "(Verification Token)") {
    /*引数の取り出し*/
    var url = encodeURIComponent(e.parameter.text);
    /*Bitly APIへのアクセス*/
    var request = req_base + BITLY_TOKEN + "&longUrl=" + url;
    var response = UrlFetchApp.fetch(request, {
      "method" : "GET",
      "contentType" : "application/json;"
    });
    var json = JSON.parse(response.getContentText());
    /*結果の返却*/
    return ContentService.createTextOutput(json.data.url);
  }
}

コード内の (Verification Token) には、Slack APIの作成したアプリのコンソール内にある「Basic Information」から「Verification Token」をコピーして貼り付ける。そうすることで、「このリクエストは、作成したスラッシュコマンドからなのか?」がわかることができる。リクエスト内容からは、 e.parameter.token でVerification Tokenを取り出すことができ、一致すれば、作成したアプリからのアクセスとなる。
fig8.png
また、入力した引数は encodeURIComponent(e.parameter.text) 取り出すことができるので、これを使用して、短縮URLを作成することとなる。

更新時の注意

GASコードを書き換えると、再びWebアプリケーションの公開が必要となる。
[公開]->[ウェブアプリケーションとして導入...]までは同様だが、更新時は、Project versionが数字になっている。ここはコンボボックスから[New]にする必要がある。
最後に[更新]を押下し、新しいURLをSlackAPIの既存アプリケーションのURLと置き換える。

動作確認

写真のメッセージ入力欄のように入力し実行すると、短縮URLを返してくれた。
fig9.png

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Sign upLogin
19
Help us understand the problem. What are the problem?