Help us understand the problem. What is going on with this article?

Slack API | スラッシュコマンドを作成する (チュートリアルをやってみた)

More than 3 years have passed since last update.

ngrok を立ち上げておく

後で node でローカルサーバーを起動し、グローバルなURLを叩ける用にするための準備。
ここでの port は 4390 にしておく。

$ ngrok http 4390

image

参考: ngrok | グローバルなURLからローカルサーバーを参照する ( Slack API チュートリアルより ) - Qiita

Slack API を作成する

https://api.slack.com/apps より作成。

image

チームに App をインストールする

image

Slack API にスラッシュコマンドを追加する

image

Ruequest URL には、ngrok で得られたグローバルなURL + node スクリプトのコマンド用のパスを指定する。

この例では https://735e2fba.ngrok.io/command を入力する。

image

node でローカルサーバーを立てる

スラッシュコマンドへのレスポンスをおこなうスクリプトを、node で作っておく。
以下のコード例では OAuth での認可も扱っているが、自分のチームにインストールする場合は不要なので無視する。

index.js
// Import express and request modules
var express = require('express');
var request = require('request');

// Store our app's ID and Secret. These we got from Step 1. 
// For this tutorial, we'll keep your API credentials right here. But for an actual app, you'll want to  store them securely in environment variables. 
var clientId = '42945109218.183907997622';
var clientSecret = 'XXXXXXXXXXXXXXXXXXXXXX';

// Instantiates Express and assigns our app variable to it
var app = express();


// Again, we define a port we want to listen to
const PORT=4390;

// Lets start our server
app.listen(PORT, function () {
    //Callback triggered when server is successfully listening. Hurray!
    console.log("Example app listening on port " + PORT);
});


// This route handles GET requests to our root ngrok address and responds with the same "Ngrok is working message" we used before
app.get('/', function(req, res) {
    res.send('Ngrok is working! Path Hit: ' + req.url);
});

// This route handles get request to a /oauth endpoint. We'll use this endpoint for handling the logic of the Slack oAuth process behind our app.
app.get('/oauth', function(req, res) {
    // When a user authorizes an app, a code query parameter is passed on the oAuth endpoint. If that code is not there, we respond with an error message
    if (!req.query.code) {
        res.status(500);
        res.send({"Error": "Looks like we're not getting code."});
        console.log("Looks like we're not getting code.");
    } else {
        // If it's there...

        // We'll do a GET call to Slack's `oauth.access` endpoint, passing our app's client ID, client secret, and the code we just got as query parameters.
        request({
            url: 'https://slack.com/api/oauth.access', //URL to hit
            qs: {code: req.query.code, client_id: clientId, client_secret: clientSecret}, //Query string data
            method: 'GET', //Specify the method

        }, function (error, response, body) {
            if (error) {
                console.log(error);
            } else {
                res.json(body);

            }
        })
    }
});

// Route the endpoint that our slash command will point to and send back a simple response to indicate that ngrok is working
app.post('/command', function(req, res) {
    res.send('this is the message.');
});

ローカルサーバーを起動する

$ npm install express --save
$ npm install request --save
$ node index.js

グローバルURLにアクセスする

この例では https://735e2fba.ngrok.io/ にアクセスする。
Ngrok is working! と表示されれば成功。

Slack API にコールバック用のURLを追加する

この例では https://735e2fba.ngrok.io/oauth を入力する

image

Slack チームから Slack API に対して、OAuthの認可を与える

https://api.slack.com/docs/slack-button

image

image

Slack でスラッシュコマンドを入力してみる

image

結果

コマンド成功。

image

メッセージの変更

index.js の内容を書き換えると、メッセージ内容も変わる。( node を再起動すること )

index.js
app.post('/command', function(req, res) {
-    res.send('this is the message.');
+    res.send('I can return any messages');
});

結果

image

参考

YumaInaura
Ruby on Rails 業務経験 約5年 / Perl PHP Python Golang Linux Apache MySQL BigQuery Jenkins ansible AWS など / いなうらゆうま / YumaInaura / 稲浦悠馬
http://twitter.com/yumainaura
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