Go to Qiita Advent Calendar 2024 Top
LoginSignup
29
21

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

@murakami-mmin株式会社日本ピュアシステム

Slack APIを使ってみよう！【Slack + Rails】

Last updated at Posted at 2020-08-19

はじめに

この記事では、Slackへメッセージを送るRailsアプリを作成してみます。
動作としてはこんな感じです。

  1. http://localhost:3000/hello にアクセスする
  2. Slackに「こんにちは」とメッセージが送られる

Slack APIとは何か？

Slack用のアプリケーション開発のためにSlackから公開されているAPIです。

事前準備

  1. Slackのワークスペースを作成する
    下記ページを参考に、Slackのワークスペースを作成しておきましょう。

※注意
アプリケーション開発用のワークスペースをすでに作成済みであれば、
新たに作成する必要はありません。
実際の業務などで使用しているワークスペースを流用しないようにしてください。

Slackアプリを作ってみよう

まずは、Slack側でアプリを作ってみます。

アプリの新規作成

  1. 下記ページにアクセス
  2. 「Create New App」ボタンを押してモーダルを開きます。
  3. App Name は 「テストBot」(名前はなんでも良い)、
    Develoment Slack Workspace には作成した開発用のワークスペースを指定します。
  4. 右下の「Create App」ボタンを押すと、アプリが作成されます。
    Slackアプリ新規作成Modal.png

アプリのPermission(権限)の設定

  1. 権限設定画面を開く
    アプリ新規作成後、下記のようなアプリの基本情報画面に遷移します。
    Install your app to your workspace というメニューを開くと、
    「最低1つ以上のfeatureか、permission scopeを設定する必要がある」と書いてあります。
    アプリの基本情報画面.png
    このpermission scopeというリンクを押すと、権限設定画面に移動します。
    権限設定画面.png
  2. 必要なスコープの設定
    権限設定画面で、必要な権限を設定します。
    今回は、 メッセージの送信をできるようにしたい ので、
    chat:write というスコープを設定します。
    これで、Botとして参加しているチャンネル内でメッセージの送信を行えるようになります。
    スクリーンショット 2020-08-16 21.45.52.png
    スコープにはいろいろな種類があり、
    それぞれのアプリに最低限必要なもののみを設定することで、
    セキュリティを保つことができます。

これで権限設定は完了です。

Botを設定する

  1. Botの名前を設定
    左サイドメニューからApp Homeを選択して、アプリケーションのホーム画面を開きます。
    赤枠で囲んだ部分の「Edit」ボタンを押して、アプリの名前を設定します。
    Botの設定画面.png
    今回は下記のように設定しましたが、好きな名前で設定して問題ないです。
    Botの名前設定モーダル.png

これでワークスペースにアプリをインストールできるようになりました。

ワークスペースにアプリをインストールする

  1. インストール画面を開く
    左サイドメニューからInstall Appを選択して、
    ワークスペースへのアプリインストール画面を開きます。
    アプリインストール画面.png
  2. インストールの確認画面
    「Install App To Workspace」ボタンを押すと、下記のような画面が開きます。
    (画像では、ワークスペース名などを隠しています。)
    「実行出来る内容」の部分が期待通りであることを確認して、「許可する」ボタンを押しましょう。
    インストールの確認画面.png
  3. トークンが発行される
    「許可する」ボタン押下後、下記の画面に遷移します。
    この時に表示されるトークンが、
    Slack APIを利用したメッセージの送信時に必要なので、メモしておいてください。
    (このトークンを公開してはいけません。
    トークンを知った人であれば誰でも、先ほど作成したBotとしてワークスペースへメッセージを送ることができるようになってしまいます。)
    スクリーンショット 2020-08-16 22.12.49.png

ワークスペースのチャンネルにアプリを招待する

任意のチャンネルに、作成したアプリを招待します。
アプリを招待したいチャンネルを開いて、
/invite @アプリのワークスペースでの表示名 を送信します。
(今回は #テスト用チャンネル という名前のチャンネルです。
任意のチャンネルで問題ないです。)

これで、 #テスト用チャンネル 内で作成したアプリがメッセージを送信できるようになりました。
Slack招待.png

以上で、Slack側の準備は完了です。

RailsアプリからSlackへメッセージを送ってみよう

Railsアプリの準備

下記リポジトリに、今回使うRailsアプリを用意しているのでcloneしてください。

README.md の手順にしたがって、環境構築を行ってください。

今回使うgemの説明

下記2つのgemを Gemfile に追加しています。

1. dotenv-rails

開発環境で、
アプリケーションのルートディレクトリに配置した .env ファイル内から
ENV に変数を読み込むためのgemです。

今回は、ワークスペースにアクセスするためのトークンの管理に使用します。

2. slack-ruby-client

RubyでSlackのAPIを利用するためのgemです。

今回は、Slackへメッセージを送信するために使います。

トークンを設定する

Railsアプリケーションに、作成したSlackアプリのトークンを設定します。
(ここで説明するのはレガシーな方法なですが、
今回はいったん手っ取り早くできるこちらの方法を利用します。)

.env ファイルを作成する

アプリケーションのルートディレクトリに、 .env というファイルを作成しましょう。
ファイルの中身は下記です。

.env
BOT_USER_ACCESS_TOKEN=Botのアクセストークン

Botのアクセストークンの部分は、
こちらで作成したトークンに置き換えてください。

トークンの設定

次に、下記のファイルを作成してください。
これで、gem slack-ruby-client を利用したAPIの実行時、
認証用のトークンがパラメータとして送信されるようになります。

config/initializers/slack_ruby_client.rb
Slack.configure do |config|
  config.token = ENV['BOT_USER_ACCESS_TOKEN']
end

hello アクションを作成してみよう

では、slack-ruby-clientを利用してSlackAPIを実行するように、
コントローラーのアクションを作ってみます。

ルーティングの追加

config/routes.rb にルーティングを追加します。
「 /hello というパスにはapplicationコントローラー の hello アクション が対応する」
というルーティングです。

config/routes.rb
Rails.application.routes.draw do
  # For details on the DSL available within this file, see https://guides.rubyonrails.org/routing.html
+ get "hello", to: 'application#hello'
end

アクションを作成する

hello アクションを作成します。

app/controllers/application_controller.rb
class ApplicationController < ActionController::API
  def hello
    client = Slack::Web::Client.new
    client.chat_postMessage(
      channel: '#テスト用チャンネル',
      text: 'こんにちは'
    )
  end
end

上記のソースについて簡単に説明します。

  • client = Slack::Web::Client.new
    slack-ruby-client では、基本的にこのオブジェクトをレシーバとして、
    様々なSlackAPIに対応したメソッドを呼び出します。

  • client.chat_postMessage
    これは、 chat.postMessage methodというAPIに対応する slack-ruby-client のメソッドです。
    見ただけでわかると思うのですが、
    メソッドの引数で「メッセージを送信するチャンネル」と「テキスト」を指定しています。

メッセージを送る

では、実際にメッセージを送信してみましょう。

bin/railsでサーバーを起動し、
ブラウザで http://localhost:3000/hello にアクセスします。
Slackを確認すると、下記のようにメッセージが送信されていると思います。

スクリーンショット 2020-08-16 23.18.49.png

今回作りたかったアプリケーションはこれで完成です。
今回は一つのAPIしか利用していませんが、
いろいろなAPIを複合的に利用することで目的のアプリを作成できるようになると思います。

Block Kit Builderを使ってメッセージのフォーマットを整えてみよう

実際にアプリを作成した場合、もう少しいい感じにテキストを表示したいと思います。
(箇条書き、文字サイズ、文字色の指定など)

そんな場合は、下記のBlock Kit Builderを使ってみましょう。

これを使うと、簡単にボタンやテキストを配置のプロトタイプを作成することができます。

BlockKitBuilder使用例.png

画面の右側に作成したリッチテキストから生成されたコードが表示されるので、
これをコピーすればすぐにアプリケーションに組み込むことができます。

作成したコード
{
	"blocks": [
		{
			"type": "section",
			"text": {
				"type": "mrkdwn",
				"text": "今日も暑いね:watermelon: 無理せずがんばろう:smile:"
			}
		},
		{
			"type": "header",
			"text": {
				"type": "plain_text",
				"text": "何をチェックする？",
				"emoji": true
			}
		},
		{
			"type": "actions",
			"elements": [
				{
					"type": "button",
					"text": {
						"type": "plain_text",
						"emoji": true,
						"text": "天気"
					},
					"style": "primary",
					"url": "https://www.jma.go.jp/jp/yoho/"
				},
				{
					"type": "button",
					"text": {
						"type": "plain_text",
						"emoji": true,
						"text": "カレンダー"
					},
					"style": "danger",
					"url": "https://calendar.google.com/"
				},
				{
					"type": "button",
					"text": {
						"type": "plain_text",
						"emoji": true,
						"text": "ニュース"
					},
					"url": "https://news.google.co.jp/"
				}
			]
		}
	]
}

hello アクションを更新してみよう

試しに、先ほど作成した hello アクションを更新して、
作成したブロックをメッセージとして送信できるようにしてみましょう。

chat_postMessageの引数に、 blocks を追加しています。
(ソースコードが長いので折りたたんでいます。)

`hello` アクションを更新
app/controllers/application_controller.rb
  def hello
    client = Slack::Web::Client.new
    client.chat_postMessage(
      channel: '#テスト用チャンネル',
      text: 'こんにちは',
      blocks: [
        {
          "type": "section",
          "text": {
            "type": "mrkdwn",
            "text": "今日も暑いね:watermelon: 無理せずがんばろう:smile:"
          }
        },
        {
          "type": "header",
          "text": {
            "type": "plain_text",
            "text": "何をチェックする？",
            "emoji": true
          }
        },
        {
          "type": "actions",
          "elements": [
            {
              "type": "button",
              "text": {
                "type": "plain_text",
                "emoji": true,
                "text": "天気"
              },
              "style": "primary",
              "url": "https://www.jma.go.jp/jp/yoho/" # 気象庁HP
            },
            {
              "type": "button",
              "text": {
                "type": "plain_text",
                "emoji": true,
                "text": "カレンダー"
              },
              "style": "danger",
              "url": "https://calendar.google.com/" # Googleカレンダー
            },
            {
              "type": "button",
              "text": {
                "type": "plain_text",
                "emoji": true,
                "text": "ニュース"
              },
              "url": "https://news.google.co.jp/" # Googleニュース
            }
          ]
        }
      ]
    )
  end

Railsアプリを起動し、 再度 http://localhost:3000/hello にアクセスします。
すると、Slackには下記のような通知がくると思います。

Blockを含んだメッセージ.png

Block Kit Builderの紹介は以上です。
Block Kit のチュートリアルについては、こちらも参照してください。

あとがき

実際にRailsアプリをHerokuなどにデプロイすることで、
Slack上でコマンドを実行するとそれに応じてメッセージを返すBotを作成することもできます。

記事ボリュームの都合上入れられなかったので、それについてはまた次回書きます。

Slack APIについてはいくつか日本語翻訳されているページもあるので、
こちら をベースにいろいろ学習できると思います。

参考URL

29
21
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
29
21

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?