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

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

はじめに

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

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

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

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

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

前提条件

事前に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」をクリックして保存します。

また、権限の「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/ など)

これで準備OKです。試してみます!

Slackで試す

最初のコマンドを叩くと、ユーザー認証を促されるので、表示されるリンクをクリックします。

するとデプロイしたHerokuアプリのトップページに遷移します。

画面中央のボタンをクリックすると、確認画面に遷移するので「許可する」をクリックします。

認証が済めば、あとはコマンド実行で絵文字スタンプが貼れます!

まとめ

以上、Slack絵文字をスタンプにする最高Slack体験についてでした!

設定時には色々うまくいかず、ソースコードを読んで処理の流れを追ったりしたのですが、個人的にとても為になりました。今後は自分で同じようなアプリを作成できればなと思います。それでは。