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


# ngrok を立ち上げておく

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

```
$ ngrok http 4390
```

![image](https://qiita-image-store.s3.amazonaws.com/0/89618/07eecd8e-da3e-d1e2-8a5b-68bbf35847b0.png)

参考: [ngrok | グローバルなURLからローカルサーバーを参照する ( Slack API チュートリアルより ) - Qiita](http://qiita.com/YumaInaura/items/2f3ce41be137931fb014)

## Slack API を作成する

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

![image](https://qiita-image-store.s3.amazonaws.com/0/89618/94c9ed01-9845-5a90-cc5a-29181467178e.png)

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

![image](https://qiita-image-store.s3.amazonaws.com/0/89618/540357d2-0d2d-a376-23e5-4d81a8c90b7e.png)

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

![image](https://qiita-image-store.s3.amazonaws.com/0/89618/8b15d6ef-07f5-0783-6743-3ca32e9a4125.png)

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

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

![image](https://qiita-image-store.s3.amazonaws.com/0/89618/b73f6891-7a30-6c33-26f9-43a9d8c99605.png)

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

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

```js: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](https://qiita-image-store.s3.amazonaws.com/0/89618/69bc2199-9471-25ba-a4dc-7a9ff8d9de47.png)

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

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

![image](https://qiita-image-store.s3.amazonaws.com/0/89618/4fc59f2b-31c5-1ad7-6ea2-db2414ed36dc.png)

![image](https://qiita-image-store.s3.amazonaws.com/0/89618/31af17f8-e73f-e979-9385-fcca3d1b4d6d.png)

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

![image](https://qiita-image-store.s3.amazonaws.com/0/89618/0b86bf0c-0f7a-b06f-b1f8-df378e8c9c8c.png)

## 結果

コマンド成功。

![image](https://qiita-image-store.s3.amazonaws.com/0/89618/b041c9b1-5804-5270-89af-a59e33ac825c.png)

# メッセージの変更

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

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

```

## 結果

![image](https://qiita-image-store.s3.amazonaws.com/0/89618/3b65f1f3-92a6-4fa4-b465-53037837583d.png)


# 参考

- [Using ngrok to develop locally for Slack | Slack](https://api.slack.com/tutorials/tunneling-with-ngrok)








<!-- Update From Qiita API -->

# チャットメンバー募集


何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。

https://line.me/ti/g2/eEPltQ6Tzh3pYAZV8JXKZqc7PJ6L0rpm573dcQ





# Twitter


https://twitter.com/YumaInaura


<!-- Update From Qiita API -->