Quantcast
Channel: Node.jsタグが付けられた新着記事 - Qiita
Viewing all articles
Browse latest Browse all 8892

Slack Appを無料で運用する(Netlify Functions)

$
0
0

背景

前回はSlack Advent Calendar 2019 6日目として、Microsoft TeamsとSlackの比較記事を投稿しました。
https://qiita.com/hide2018/items/d410b16d75d190ae4271

今度はSlackに焦点を当て、ワークフロービルダーについて書こうとしました。
しかし無料プランでは使えませんでした:frowning2:残念
https://qiita.com/kazushi_iizuka/items/5cd9c3bb0bde9803cac0

そこで無料で使えるSlack Appについて書きます。
以下の記事が良いなと思ったので自分でも作ってみます。

(記事1)
社内slackにVIPチャンネルを作った話
https://qiita.com/peisuke/items/80984db8b47cd8243019

ただAWS Lambdaは無料枠があるものの、クレジットカード登録が必要です。
https://aws.amazon.com/jp/aws-jp-faq/prospects/

アカウント作成およびご利用開始にあたっては、本人確認および無料範囲を超えたご利用に対する料金のご請求といった点から、クレジットカード登録は必須となります。

無料かつクレジットカード不要で開発したいので、今回は代わりにNetlify Functionsを使います。

(記事2)
【入門】Netlify Functionsコトハジメ
https://qiita.com/Sr_Bangs/items/7867853f5e71bd4ada56

Netlify Functionsの中身はLambdaです。
ただ、記事1はPythonで書いてますが、Netlify FunctionsはJavaScriptしか動きません。
そのためNode.jsで書き直します。

手順

vipチャンネルとvipアプリを作成する

vipチャンネルを作ります。
image.png

自分の代わりに匿名でメッセージを投稿してくれるアプリを作ります。
Slack Apiのページでアプリを作ります。
https://api.slack.com/apps

image.png

アプリの名前と、導入するSlackのワークスペースを入力します。

image.png

権限を設定します。

image.png

image.png

Step 1: Select bot token scopesで以下にチェックを付けます。

  • chat:write (メッセージを投稿できる)
  • commands (スラッシュコマンドを使える)

以降は、特に設定するところはありません。
画面に沿って完了させます。

次にワークスペースにアプリをインストールします。

image.png

許可します。

image.png

後で使うのでトークンをメモっておきます。

image.png

Appのページを見るとvipアプリが追加されています。

image.png

vipチャンネルでvipアプリを追加します。

image.png

追加されました。

image.png

メッセージを投稿できるようにする

全体の流れは以下です。

  1. Slackでスラッシュコマンド/2chでメッセージを打つ。例えば、/2ch ぬるぽと打つ。
  2. Netlify FunctionsのAPIにぬるぽがPostされる。
  3. Netlify Functionsのスクリプトでぬるぽがvipチャンネルに投稿される。

この章では3ができるようにします。
1,2は次の章で設定します。

Netlify Functionsの使い方は記事2を参照ください。
(申し訳ございません、執筆に力尽きました…)

ソースは以下です。
https://github.com/hideboh/qiita_slack_bot

Slackに投稿するスクリプトは以下です。

resources/api/slack_vip.js
const{WebClient}=require('@slack/web-api');consttoken=process.env.TOKEN;constweb=newWebClient(token);constquerystring=require('querystring');exports.handler=async(event)=>{constbody=querystring.parse(event.body);constresult=awaitweb.chat.postMessage({text:body.text,channel:'#vip',});return{statusCode:200,body:'vipに投稿したお( ^ω^)',};};

スラッシュコマンドを設定する

Slack Apiのページでスラッシュコマンドを設定します。

image.png

以下のように設定して保存します。
Request URLは、Netlify FunctionsのAPIのEndpointを入力してください。

image.png

/2と打つと/2chコマンドが認識されていることが分かります。

image.png

なお、公開チャンネルでこのコマンドを打ってしまうと、typingって出て匿名性が失われます。
そのため自分へのダイレクトメッセージで打ってみます。

image.png

vipチャンネルに匿名で投稿されました!

image.png

アイコンを変える

このままだと味気ないのでアイコンを変えます。

image.png

登録します。

image.png

登録できる画像は意外と厳しく、512px~2000pxの正方形でないといけません。
このサイズの画像が見つからなかったので、こちらのサイトでリサイズしました。
https://www.image440.com/

それっぽくなりました。

image.png

まとめ

これでSlackで2ch気分を味合えます!
IDやコテハンをつけるところまでいけませんでしたが、全体の流れは分かりました。
機能拡張も頑張ればできそうです。


Viewing all articles
Browse latest Browse all 8892

Trending Articles