Skip to content

Latest commit

 

History

History
253 lines (145 loc) · 11.5 KB

README_ja.md

File metadata and controls

253 lines (145 loc) · 11.5 KB

Bolt ⚡️ を使った開発を始めよう

このリポジトリは、Slack の Bolt⚡️ フレームワークを使ったアプリのテンプレートです。この README は以下のような Slack アプリを作る手順をカバーしています。

  • CodeSandboxを使う: ステップ 1 -> ステップ 2A
  • Glitchを使う: ステップ 1 -> ステップ 2B
  • ローカルマシン(Linux/macOS/Windows)を使う: ステップ 1 -> ステップ 2C

(ステップ 1) Slack App の初期設定

Slack App を新規作成

まずは Slack App を https://api.slack.com/apps でつくりましょう。

ボットスコープ（Bot Scope) を設定

左サイドバーから Features > OAuth & Permissions へアクセスして、Bot Scope を以下の通り追加します。

https://api.slack.com/apps/{APP_ID}/oauth

  • app_mentioned:read
  • chat:write
  • commands

Slack App をワークスペースにインストール

左サイドバーから Settings > Install App にアクセスしてください。さらにいくつかの設定を後ほど行いますが、まずは bot token (xoxb-***) を入手するためにワークスペースにインストールしてみてください。

https://api.slack.com/apps/{APP_ID}/install-on-team

(ステップ 2A) CodeSandbox のセットアップ

GitHub アカウントでログイン

https://codesandbox.io/

2019 年 12 月時点で CodeSandbox は GitHub アカウントのみのログインをサポートしています。GitHub アカウントが必要となりますので、ご準備ください。

Sandbox を作成

この手順はとても簡単です。この GitHub リポジトリを import 対象として指定して、新規の Sandbox を作ってください。

  • Create Sandbox をクリック
  • Import タブへ遷移
  • https://github.com/seratch/bolt-starter を入力
  • Open Sandbox をクリック

すると、テンプレートの Sandbox が作成されますので、これを fork して作業用の Sandbox を作ります。

この Sandbox プロジェクトで secrets の値を設定します。

  • SLACK_SIGNING_SECRET: Basic Information > App Credentials > Signing Secret の値を表示して取得
  • SLACK_BOT_TOKEN: Slack App 管理画面 Settings > Install App に表示された xoxb- で始まる Bot User OAuth Access Token

たった、これだけで完了です！もし変更しても反映されないときは同じ画面の Restart Sandbox ボタンを押してください。

Request URL (Slack App) を設定

CodeSandbox の右側のペインを見ると https://{random}.sse.codesandbox.io/ のような URL が表示され、そのアクセス結果が表示されているはずです。

この URL に /slack/events というパスを加えた https://{random}.sse.codesandbox.io/slack/events を Slack App 内の Request URL の項目に設定します。全て同じ URL で OK です。設定する箇所は以下の三箇所です。

  • Interactivity & Shortcuts: Off -> On に変えて Request URL を指定したら Save Changes で保存
  • Slash Commands: /open-modal という名前のコマンドを追加、その Request URL に上記の URL を指定して保存
  • Event Subscriptions: Off -> On に変えて Request URL を設定し Bot Events の中の app_mention を選択して Save Changes で保存

Slack App をワークスペースに再インストール

設定が変更されて、再インストールを促されていると思います。もう一度インストールし直してください。

https://api.slack.com/apps/{APP_ID}/install-on-team

(Step 2B) Glitch のセットアップ

https://glitch.com/

Glitch プロジェクトの作成

手順は CodeSandbox にかなり似ています。

プロジェクトを作成したら、 _env ファイルを複製して .env という名前をつけて保存します。.env という名前のファイルは特殊なファイルとして認識され、Glitch は自動的に秘匿すべき情報の書かれたファイルとして、あなた以外のユーザには閲覧できないように制御してくれます。

.env の編集が終わったら、アプリが正常に起動できているかログを確認してください。特にエラーのトレースが出ていなければ問題ないでしょう。

Request URL (Slack App) を設定

Glitch 上で上記のような手順でアクセスすると Live App の設定のところで https://{some-fancy-name}.glitch.me/ のような URL を入手できます。

この https://{some-fancy-name}.glitch.me/slack/events を Slack App の設定に何箇所か出てくる Request URL として指定します。全て同じ URL で OK です。

  • https://api.slack.com/apps/{APP_ID}/event-subscriptions
  • https://api.slack.com/apps/{APP_ID}/slash-commands
  • https://api.slack.com/apps/{APP_ID}/interactive-messages

Slack App をワークスペースに再インストール

設定が変更されて、再インストールを促されていると思います。もう一度インストールし直してください。

https://api.slack.com/apps/{APP_ID}/install-on-team

(Step 2C) ローカルマシンをセットアップ

ngrok をセットアップ

https://ngrok.com/ を使ってインターネットに公開された URL を生成し、ローカルで動いているアプリにリクエストを流します。

ngrok http 3000

もし有償プランに入っている場合は、サブドメインを固定のものに指定することができます。

ngrok http 3000 --subdomain your-awesome-subdomain

Node Version Manager (nvm) のセットアップ

Linux / macOS

Windows

  • nvm-windows from here をインストール
  • mvn list available を実行してダウンロード可能なバージョンを調べる
  • nvm install {最新の LTS バージョン} (最新の LTS バージョンをインストール)

もし Windows Subsystem for Linux (WSL) を使っている場合は Linux / macOS と全く同じステップでいけるはずです。

このテンプレートを使って開発を始める

あるいは、以下の方法でこのテンプレートをローカルにダウンロードしてください。

git clone [email protected]:seratch/bolt-starter.git or https://github.com/seratch/bolt-starter/archive/master.zip

アプリを起動

cd bolt-starter
cp _env .env
# edit .env
npm i
npm run local

Request URL (Slack App) を設定

https://{your-awesome-subdomain}.ngrok.io/slack/events のような URL を以下の Request URL の項目に設定します。全て同じ URL で OK です。

  • https://api.slack.com/apps/{APP_ID}/slash-commands
  • https://api.slack.com/apps/{APP_ID}/event-subscriptions
  • https://api.slack.com/apps/{APP_ID}/interactive-messages

Slash Commands を設定

左サイドバーから Features > Slash Commands へアクセスします。/open-modal というスラッシュコマンドを以下の内容で設定し、保存します。

https://api.slack.com/apps/{APP_ID}/slash-commands

  • Command: /open-modal
  • request URL: https://{your-awesome-subdomain}.ngrok.io/slack/events
  • Short Description: お好きな内容で
  • "Save" ボタンを押すのを忘れずに！

Event Subscriptions を設定

左サイドバーから Features > Event Subscriptions へアクセスします。有効にしたら app_mention というイベントを bot event で受信するよう設定し、忘れずに "Save Changes" ボタンを押してください。

https://api.slack.com/apps/{APP_ID}/event-subscriptions

  • app_mention

Interactivity & Shortcuts を設定

左サイドバーから Features > Interactivity & Shortcuts へアクセスします。有効にしたら Request URL を適切に設定して "Save Changes" ボタンを忘れずに押してください。

https://api.slack.com/apps/{APP_ID}/interactive-messages

Global Shortcuts

左サイドバーから Features > Interactivity & Shortcuts > Shortcuts へアクセスします。Callback ID open-modal でグローバルショットカットをつくります。

  • Name: お好きな内容で
  • Short Description: お好きな内容で
  • Callback ID: open-modal
  • "Create" ボタンをクリック

Slack App をワークスペースに再インストール

設定が変更されて、再インストールを促されていると思います。もう一度インストールし直してください。

https://api.slack.com/apps/{APP_ID}/install-on-team

ライセンス

The MIT License