現在、Slackアプリを開発中なのですが、初めてのこともあり色々と学ぶことが多かったです。
Botkitでの開発
Slackアプリを開発するにあたっては、公式フレームワークのBotkitを利用することにしました。
BotkitとBabelの導入
Botkitの導入はSlackアプリのプロジェクトで、npm i botkit
をするだけでいいのですが、
ES201Xでコーディングするため、Babelも導入しました。
npm i botkit npm i -D babel-cli babel-core babel-preset-env
SlackアプリはNode.jsで動くので、.babelrcは以下のようになります。
{ "presets": [ ["env", { "targets": { "node": "current" } }] ] }
開発用のコードはsrc/main
配下に、実行コードはdist/main
配下とすることにしたので、
トランスパイルの実行用にpackage.jsonのscriptsに以下の記述を加えました(app.jsが起点のファイルです)。
"build": "babel src -d dist", "start": "node dist/main/app.js", "clean": "rm -rf dist",
実行する際は以下のようにして使っています。
npm run clean; npm run build; npm start
開発時の注意点
あとはコーディングするだけなのですが、起動の段で幾つか注意するところがあります。
Botkitの注意点
- createWebhookEndpointsにverificationの値を渡すと、ブラウザから/loginにアクセスができない
- configureSlackAppに渡すパラメータにredirectUriが増えている(
https://ホスト名:ポート/oauth
を渡せばOK) - Slackにしているするパスは、Interactive Components、Slash CommandsどちらのRequest URLも
https://ホスト名:ポート/slack/recieve
になる
SlackアプリとBotsの違い
どちらもBotkitで開発できるのですが、以下の点が異なります。
- Botsにする場合はtokenを、アプリにする場合はclient_idとclient_secretを利用する
- アプリでは起動したタイミングで毎回/loginにアクセスし、認証しなければいけない
- interactive_message_callbackを使う場合はアプリでなければいけない(サーバが必要)
今回Slackアプリとして開発したのは、interactive_message_callbackを利用したかったためです。
Slackへの設定
アプリ作成は、slack apiのページで『Create New App』ボタンを押すことで開始できます。
ここでアプリの名前とインストールするSlackのチームを入力しましょう。
その後の各項目での作業は以下になります。
Basic Information
- App CredentialsのClient IDとClient Secretをメモ(アプリ起動に利用するため)
- Display Informationにアプリの情報を入力する
Install App
- アプリをSlackにインストールする(最後でもよい)
Interactive Components
- Request URLに
https://ホスト名:ポート番号/slack/receive
を設定する
Slash Commands
アプリ用のSlackコマンドを作る場合はここの設定を行います。
- コマンドの情報を入力する
- Request URLに
https://ホスト名:ポート番号/slack/receive
を設定する
OAuth & Permissions
配布アプリを作成する場合は、ここでRedirect URLsにhttps://ホスト名:ポート番号/oauth
を設定する必要がありますが、
内部利用だけの場合は設定不要です。
Bot User
利用するBotユーザの表示情報をここで設定します。
注意点として、Slack上に登録されるユーザはここで設定した名前ですが、スラッシュコマンドが応答するアプリの名称はBasic Informationで設定したものになります。
Slackアプリの起動
トランスパイルが終わっていればnpm start
で起動するので、SSL対応のサーバでアプリを起動してください。
起動後にブラウザからhttps://ホスト名:ポート番号/login
にアクセスし、認証を行うとRMTがスタートします。
Herokuにデプロイする場合の注意点
最初は開発用サーバとしてHerokuを利用していたのですが、Herokuではできないこともあり、現在は利用していません(ngrokを使っています)。
ただ、利用する際にもいくつかハマリポイントが合ったので残しておきます。
- ポートが動的に設定されるため、起動ポートには
process.env.PORT
を利用する- 上記の理由で、SlackAppのURL設定項目にはポートを記載しない
- Herokuではサーバに書き込みができないため、json_file_storeが利用できない(宣言していてもアプリ自体は起動する)
- 書き込みできないため、babelを利用する場合、トランスパイル後のファイルもコミットする必要がある
- Procfileを用意して、
web: npm start
のように起動コマンドを記載する
ngrokの利用
Slackのチュートリアルにもありますが、開発ではngrokでSlackからのリクエストを受けて、ローカルに転送することで、ローカル開発ができます。
Macの場合はHomebrewで導入するのが簡単だと思います。
brew cask install ngrok
起動は以下のようにアプリで利用するポート(ここでは3000)を指定して実行する感じです。
ngrok http 3000
ngrokは起動している間はドメインが変わらない&裏でアプリの再起動をしても問題なく転送してくれるので、開発中はngrokを起動しっぱなしにして利用することになると思います。
ただ、セキュリティリスクがあることをやっているので、会社などで立ち上げていると情シスに怒られる可能性があります。注意しましょう。
まとめ
コーディングに関してはざっくり省きましたが、このようにすることでSlackアプリを自分で作ることができます。
本番利用にはAWSを使おうと思っているので、その手順はまたの機会に。
コーディングのエッセンスはまた別途書きたいと思っています。