22
8

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.

SlackAdvent Calendar 2019

Day 1

えぇ!?何も入ってないMacでSlack Bot作成を!?

Last updated at Posted at 2019-11-30

この記事は Slack AdvendCalendar 1日目の記事です


スクリーンショット 2019-11-30 12.23.45.png

AdvendCalendarのネタどうしようかな〜と悩んでいたタイミングで、知り合いの方からMacbook Airを譲っていただきました。

上の画像を見てわかるとおり、ほぼ何も入っていない状態です(ChromeとGoogle 日本語入力だけ入れた)

せっかくなので、この新しい相棒を使ってSlack Botを作ってみたいと思います :sparkles:

えぇ!?何も入ってないMacでSlack Bot作成を!?

できらぁ! そう、Glitch ならね。

Glitch とは

node.jsで作ったアプリケーションを作成・公開できるWebサービスです。
ブラウザのみで作成から公開まですることができ、しかも(いろいろと制限はありますが、)無料です。

こちらのブログ で詳しく説明されていました。

というわけで、このGlitchを使ってSlackbotを作成していきたいと思います。

どんなSlackbotを作るか

弊社Slackではよく emoji reaction を使ってアンケートの投票などを行ったりしています。
polly?知らない子ですね

IMG_45FBC2CA7E83-1.jpeg

上は忘年会での宿泊するかタクシー使って帰るかのアンケートですね!(忘年会めっちゃ楽しみです :beers: )

このときに :hotel: を押したのが誰で、 :taxi: を押したのが誰かを調べるのが地味に面倒です。

なので、これをSlack Botを使って集計/表示させたいと思います :sparkles:

まずは Remix :cd: だ!!!

Slackのフレームワーク、 Boltを使ったHello WorldのコードがGlitch上に用意されているので、そちらをRemix(githubでいうところのforkらしい)します :cd:

ちなみに以下のリンクからRemixできます
https://glitch.com/edit/#!/remix/slack-bolt-hello-world

上記リンクを開くと、以下のような画面が表示されました

スクリーンショット 2019-11-30 16.02.42.png

こちらをベースに作っていきます :sparkles:

Hello World!!!

コーディングを始める前にまずはSlackとGlitchアプリケーションをつなげてみたいと思います。
まずはSlackにアプリを追加します。

アプリの新規作成

Slackアプリ新規作成ページを開き、アプリ名とワークスペースを適当に入力していきます。

入力したら、少し下にある、 Signing Secret をコピーし、Glitchの .env ファイルの SLACK_SIGNING_SECRET に貼り付けます。

アプリをSlackにインストール

左メニューの Bot Users を選択し、 Add Bot User でBotユーザーを追加します。
追加したら 左メニューの Install App を選び、アプリをワークスペースにインストールします。

追加できたら Bot User OAuth Access Token が表示されるので、それを Glitchの .env ファイルの SLACK_BOT_TOKEN にコピペします。

イベントの有効化

SlackからEventを受け取るための設定を行います。

Event Subscriptions を選択し、 Enable Events を有効にします。

Requeset URL のところに、GlitchのWeb App のURLを入力します
URLは https://[your-project-name].glitch.me/slack/events となります。
(Glitchの画面で Share -> Live AppでURL確認できます)

イベントを追加しますが、ここでは動作確認用に app_home_opened と あとで使う emoji_reaction を追加します。

さっそく動作確認

ここまでで、もうGlitchとつながったはずですので、確認してみます。

Slackに開き、追加したアプリケーションのDM画面を開きます

スクリーンショット 2019-11-30 16.49.49.png

よさそうですね!:beers:

いざ、じっそう!

app.event('reaction_added', async ({ event, context, say }) => { 
  const trigger = 'zap';
  // only react to ⚡ (:zap:) emoji
  if(event.reaction === trigger) {
    const channelId = event.item.channel;
    const ts = event.item.ts;
    
    // コメントのemoji reaction を取得する
    const getReactionsResult = await app.client.reactions.get({
      token: context.botToken,
      channel: channelId,
      timestamp: ts
    });
    const reactions = getReactionsResult.message.reactions.filter(v => v.name !== trigger);

    // メッセージを作成
    const message = reactions
            .map(r => `:${r.name}: x ${r.count} \n ${createUserNames(r.users)}`)
            .join('\n');
    
    // post this message to the configured channel
     await app.client.chat.postMessage({
       token: context.botToken,
       channel: channelId,
       text: message,
       thread_ts: ts // これを指定するとスレッドにコメントできる
     })
  }
});

function createUserNames(userIds) {
  // https://api.slack.com/messaging/composing/formatting#mentioning-users
  return userIds.map(uid => `<@${uid}>`).join(', ')
}

サンプルコード見ながら、書いてみました。
コメントについたemoji reactionについた情報を整形して、スレッドにコメントするようにしています

Glitchでは公開ボタンとかは無いようで、コードを書くとすぐにその内容が公開されます。
console.log を入れることで、ログが見れるので、それを頼りに開発をしていました。

スクリーンショット 2019-11-30 20.55.29.png

実際の動作はこんな感じで :zap: をつけると、emoji つけたユーザーをスレッドに投稿するようになっています zap!zap!zap!

まとめ

というわけで、何も入っていないMacでもGlitch使えば、Slack Botをサクッと作れるよっていう紹介でした!!

制限はあるもののサーバーなどを用意しなくていいので、すごい楽ですね :sparkles:

コードは以下になります。
もしよかったらRemix :cd: して使ってみてください :musical_note:

view source remix this

参考: https://qiita.com/girlie_mac/items/93538f9a69eb4015f951
(Glitchを使ったSlack Bot 作成の手順がすごく丁寧に解説されています!)

22
8
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
22
8

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?