Slackアプリを作る〜サーバーレスでサクッと〜

はじめに

こんにちは！株式会社80&Companyの技術広報です。
弊社の開発部署では毎週火曜日の朝9:30から社内勉強会を行なっています。

今回の記事は、バックエンド開発や情シスを行なっているエンジニアが社内勉強会で「Slackアプリを作る〜サーバーレスでサクッと〜」というテーマでSlackアプリの導入方法について発表したものを紹介します。

Slackアプリの導入に興味のある方は、ぜひ参考にしてみて下さい♪

読者の対象

• Slackアプリについて知りたい方
• Slackアプリの導入を検討している方

テーマ選定の理由

弊社では、その日1日何かしらお世話になった従業員に対して、感謝を送り合う「タコス制度🌮」というものがあります。
制度の内容は、Slack内のタコス制度用のチャンネルで、お世話になった従業員をメンションして感謝のメッセージとタコススタンプを押すというものです。
その際に「HeyTaco」というピアボーナス用アプリを用いることによって、タコスをたくさんもらった方が計測されます。

そういったタコス制度用アプリを発表者が作り直す過程で、Slackアプリの作成過程に触れたため、今回発表に至ったそうです！

Slackアプリについて！ざっくり概要

最初にSlackアプリの概要について、ざっくり説明します。
Slackでのアプリ使用について、より詳しく知りたい方は、ぜひこちらのSlackヘルプセンターガイドラインをご覧ください🙌

Slackアプリの機能について

最初にSlackアプリの機能について大まかなものを説明します。
Slackアプリの活用方法としては下記の6点があります。

1.ホームタブやメッセージタブ
アプリのホームタブでは、アプリ情報の表示やアプリの設定を行います。
メッセージタブでは、アプリから届いたメッセージを表示します。

2.インタラクティブなUI（モーダルやフォームなど)
文字の入力を行うフォームや画面をスクロールできるモーダルなどが存在し、ユーザーがマウスやキーボードを入力して操作を進めていくことができます。

3.アプリのショートカットやスラッシュコマンド
Slackでアクションを実行するために使用可能なショートカットがあります。
フォーム入力の左側にある+(プラス)アイコンをクリックして、アプリのショートカットまたはスラッシュコマンドを検索します。

4.ボットユーザー
ボットユーザーと呼ばれるユーザーを登録することができます。
ボットユーザーからDMでメッセージが届いたり、チャンネル内で投稿したメッセージを目にすることができます。
ボットユーザーのより詳しい説明は、ぜひこちらをご覧ください。

5.ワークスペース内イベントのサブスクライブ
アプリ開発者は、Slackアプリを無料で利用できるようにするか、サービスの有料アカウントを必須にするかを選択できます。
アプリ開発者がアプリの料金プランの要件を提出している場合、その情報はSlack Appディレクトリのアプリページに表示されます。

6.Webhookを受け取ってコンテンツを通知
Webhookを利用して、コンテンツの更新時にSlackに通知を行うことができます。
操作手順を紹介したチュートリアルを知りたい方は、ぜひこちらをご覧ください。

Slackアプリ概念図

下記の画像は、Slackアプリの概念図です。
Slackアプリの表面的な様相はSlack Appが利用されています。
詳しいロジックはApp Serverに入っており、Slack apiを介してやりとりを行っています。

Slack APIの概要

上記のSlackアプリ概念図でご紹介したSlack APIですが、SlackアプリはこのSlack APIによって様々な種類のデータの読み取り、書き込み、更新へのアクセスを行うことができます。
Slack APIは大きく分けて３種類存在します。

• Web API
  • Slack APIにリクエストを送ってSlackワークスペースを操作したり情報を取得するもの
• Events API
  • Slackワークスペース上でのイベントを送ってくれるもの
• Interactivity系の通信
  • Interactive Componentの操作情報を送ってくれるもの(ショートカットやスラッシュコマンドなど）

Slackアプリの権限周り

Slackアプリの裏側では、Slack APIへのアクセス管理を行うためトークンを発行したり、アプリとSlack間でアクセスできる情報範囲を選択するなど、権限周りの動作が多く行われています。
今回はAccess tokenの発行と権限スコープについて説明します。

Access token について

Slackアプリは、OAuthを使用してSlackのAPIへのアクセスを管理しています。
アプリがインストールされるとトークンが発行され、そのトークンを使い、アプリはAPIメソッドを呼び出すことができます。
Slackアプリで使用できるトークンには、下記の3種類があります。

• ユーザートークン
  • アプリをインストールまたは認証したユーザーに成り代わって、APIメソッドを呼び出すことができます。
    1つのワークスペースに複数のユーザートークンが存在する可能性があります。
• ボットトークン
  • ボットユーザーに関連付けられ、1つのワークスペースでは、最初に誰かがそのアプリをインストールした際に一度だけ発行されます。
    どのユーザーがインストールを実行しても、アプリが使用するボットトークンは同じです。
• アプリレベルトークン
  • 全ての組織(とその配下のワークスペースでの個々のユーザーによるインストール)を横断して、アプリを代理するものです。
    アプリレベルトークンは、アプリのWebSocketコネクションを確立するためによく使われます。

権限スコープについて

Slackワークスペースを安全に保つために、アプリがSlackとどのように連携して動作するかを理解することが大切です。
権限スコープは、Web APIメソッドの呼び出しやEvents APIのイベントの受信といったSlackでの機能を実行する権限をアプリに付与するために使用されます。

ユーザーはアプリのインストールフローに従って進むと、アプリがリクエストするスコープへのアクセスを許可する必要があります。

それぞれのSlackアプリには独自の権限スコープのセットがあり、Slackでアクセスできる情報と、その情報の使用方法が決められています。

Slackアプリ開発で使えるツール

Slackアプリ開発を行った際に、アプリのレイアウト作成や開発で用いられたフレームワークについて説明します。

UI周りについて

レイアウト周りを直感的に意識しつつ、簡単に構築ができるBlock Kit Builderというツールがあります。
左画面がレイアウト画面を表示し、右画面がJSON形式で構成されたブロックを表示しています。

右画面で新たにブロックを加えることができ、直感的にレイアウトを作ることができます。
また少しコードを消すと、左側でエラーが表示されます。
リアルタイムでレイアウトを調整できるので、とても便利なツールです👏

主要なUI

また、これらのツールにより再現できるレイアウト形式は大きく3種類あります。

• Messages

• Modals

• App Home

また、レイアウトごとにテンプレートが存在します。
Use Message Templateというボタンを押すとレイアウトのブロックコードをコピーできます。
このコピーしたコードを右画面のJSON形式で構成されたブロックに追加すると、そのまま左画面にレイアウトが反映されます。

Boltについて

Slackアプリの開発を行う際に、Boltと呼ばれるSlack API Client + スラッシュコマンド用のレシーバを兼ね備えた、Slackアプリ開発用の公式フレームワークが使用されます。

JavaScript(Node.js)、Python、Javaでの利用が可能です。

Bolt Bolt logo for JavaScript

Bolt for Java

Bolt logo for Python

上記に各言語での利用方法が記載されているため、ぜひお試しください！

Boltは、上記のSlackアプリ概念図で記載されたApp Serverにインストールして使用されます。
公式の入門ガイドがあるため、こちらのガイドラインをぜひご参考に🙌

Slackアプリを作る

では、発表者が実際に作成したSlackアプリの構成について、ご紹介します。

どんなアプリにするか

• 「HeyTaco」のようなピアボーナス用アプリ
• タコス以外の絵文字も使いたい
• 絵文字ではなくて、特定の文字もカウントできるとよい
• リアクションもカウント出来たら面白そう？

機能要件

• 誰かへのメンションが含まれていて、かつ特定のキーワードを含むメッセージを集計する(誰から誰に、キーワードがいくつ含まれるか）
• 特定のキーワードを受け取った時にアプリから通知される
• リアクションを集計すす(誰から誰に、どの絵文字か）
• App Homeから集計データ(受け取り分)を確認できる

使用するサービス

• AWS Lambda
  サーバー管理しなくてもコードが実行できるサービス

• AWS DynamoDB
  フルマネージドでサーバーレスのkey-value型のNoSQLデータベース

構成

Slackから誰かがコメントやリアクションをした際に、Lambdaにイベントが飛んできます。
Lambda上でBoltを使ってロジックを組んでいきますが、受け取ったデータをDynameDBデータベースに保存します。
Slack側でAppホームを開いた際に、開いた旨を伝達するイベントをLambdaに送り、データベースからデータを収集して、またWeb APIを叩き、Slack側にデータを返します。

完成したアプリの様子

1.タコススタンプを相手に送ります。

2.するとデモアプリによって、タコススタップをもらった数が計測されます。

3.先ほどのスレにリアクション✅ボタンを押します。

4.Slackアプリのホームにリアクション✅ボタンが計測されます。

HeyTacoのようなピアボーナス用アプリができましたね😊

最後に

今回は、弊社社内勉強会で発表された「Slackアプリを作る〜サーバーレスでサクッと〜」について扱いました。
今後も継続的に80&Companyでの社内勉強会の取り組みを発信していきます！
Qiita OrganizationやTwitter公式アカウントのフォローもよろしくお願いいたします！
最後まで読んでいただきありがとうございます！

参考文献