[小ネタ]Slack絵文字をスタンプにして最高の体験をしよう！

以前に見かけて個人的にチャレンジしたものの、うまく設定できなかった「Slack絵文字をスタンプにする」という話を最近また社内Slackで見かけたので、ちょっと再チャレンジしてみました。

大高大輔

2019.05.30

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

はじめに

こんにちは。DI部の大高です。

設定については、以下の記事、および、GitHubのREADMEを参照させて頂きました。大変ありがたいことにGitHubにソースコードも公開されていたので、そちらも利用させて頂きました。

Slackのemojiをデカくする - Grooves開発ブログ

GitHub - 16g/slamp: Chat with big like stamp

(2021/10/27 追記)：上記のリポジトリは現在は非公開になってしまっているようです。以下の私個人のリポジトリにkazumihirata/slampからforkさせていただいたものを公開しています。また、詳細は省きますが、現在はHerokuのMongoDBアドオンmLabが利用できなくなっているため、わたしはこちらのMongoDBを別途利用しています。

前提条件

事前にHerokuのアカウント作成とSlackのワークスペースを作成しておきます。

なお、Herokuアカウントはフリープランで問題ないのですが、アドオンの利用にクレジットカードの登録が必要となるので、事前に登録しておきます。

Heroku Buttonで「slamp」をデプロイする

Herokuには「Heroku Button」という最高にイケてる仕組みがあります。なんとWebページに配置されているボタンをクリックするだけで、あっという間にHeroku環境にアプリをデプロイできます。

詳しくは Heroku Button | Heroku をご参照ください。

今回利用したい「slamp」も、なんとGitHubのREADMEにHeroku Buttonが用意されていたので、こちらを利用してデプロイします。

まずは Herokuのログイン画面(Heroku | Login)にアクセスしてログインしておきましょう。

次に、README.mdの「Deploy to Heroku」ボタンをクリックします。するとHerokuの画面へ遷移し、アプリケーション作成画面になるので、それぞれ項目を設定してきます。

項目	値	備考
App name	任意のアプリケーション名	アプリケーション名はグローバルでユニークな必要があります
Choose a region	United States	United States か Europe

「Config Vars」については、後で正しい値で更新するので、一旦適当な値の foo で埋めておきます。

入力したら「Deploy app」ボタンでデプロイします。

すると、すぐにデプロイが始まるので、しばし待ちます。

しばらくするとデプロイが完了します。

アプリケーションの詳細画面右上の「Open app」からアプリケーションを開くと、以下のようなURLになると思いますので、これを控えておきます。

https://[アプリケーション名].herokuapp.com/

Slackの設定

次は、Slackアプリの作成です。以下のアドレスにアクセスしてワークスペースにアプリを作成します。

https://api.slack.com/apps

「Create New App」ボタンをクリックしてアプリを作成します。

アプリケーション名と対象ワークスペースを選択して「Create App」ボタンをクリックします。

アプリケーションを作成したら、「Add features and functionality」から「Slash Commands」をクリックして、スラッシュコマンドの設定をします。

コマンドを新規に作成するので「Create New Command」をクリックします。

コマンドは以下のように設定します。

設定は任意ですが「Command」は /stamp に、「Request URL」については、先程Herokuの画面で確認したアプリケーションURLを指定します。指定したら「Save」ボタンで保存します。

保存したら「Install App to Workspace」でコマンドをワークスペースにインストールしておきましょう。

次にメニューの「OAuth & Permissions」を開きます。

「Redirect URLs」の「Add New Redirect URL」ボタンをクリックしてURLを追加します。

URLはHerokuアプリのアプリケーションURLに /auth を付与したものです。なお、注意点としてプロトコルは https ではなく http を指定する必要があります。設定したら「Add」をクリックし、「Save URLs」をクリックして保存します。

(2021/10/27 追記)：オリジナルのソースコードにおいては、このプロトコルにhttpを指定する必要がありました。一方で、現在はオリジナルのリポジトリは非公開となってしまっているため、リポジトリをforkしてこの設定を修正したもの（https指定にできるもの）を私個人のリポジトリで公開しています。

また、権限の「Scope」を設定しておきます。追加する権限は「chat:writer:user」と「emoji:read」です。

最後に「Basic Informatin」に戻って、Herokuアプリに設定する変数を調べておきます。Herokuアプリの設定では、この「Client ID」、「Client Secret」、「Verification Token」を利用します。

Herokuアプリの変数設定

では最後にHerokuアプリの変数設定です。アプリの「Settings」タブから「Reveal Config Vars」を開きます。

すると、アプリ作成時に適当に設定した変数が出てくるので、鉛筆アイコンをクリックして編集しましょう。

それぞれ、先程Slackで調べた値を入力します。

変数	値
SLACK_CLIENT_ID	SlackアプリのClient ID
SLACK_CLIENT_SECRET	SlackアプリのClient Secret
SLACK_VERIFICATION_TOKEN	SlackアプリのVerification Token
URL	HerokuアプリのURL (https://[アプリケーション名].herokuapp.com/ など)