Vue.js勉強記録その33 Slack投稿アプリを作ろうver1
こちらの書籍で勉強中です。
Slackのワークスペースの、特定のチャンネルに、匿名で投稿する仕組みを作りたいと思ったので作ってみました。
今回は、一度テキストを離れて、Slack投稿アプリの作り方を備忘録的に書いていきます。
■そもそもなぜ作りたかったか
まず、何故Slack投稿アプリを作りたかったのかを書いていきます。
僕の仕事は、ホームページの作り方を教える講師です。いわゆる職業訓練校の講師をしています。2022年3月時点で、3つのクラスを担当させていただき、日々授業しています。
今は、基本的にはオンライン授業が多いので、自宅から授業することが多いです。
オンライン授業だと、生徒さんたちも自宅からオンラインで受講できるというメリットもある反面、対面で授業しているわけじゃ無いので、質問しにくいというデメリットもあります。
なので、Slackで質疑応答というチャンネルを作って、そこに質問のある方は書いてもらおうと考えました。対面でサクッと質問できるわけじゃ無いので、問題が解決するとは考えていないのですが、まぁ無いよりはマシという事で。
ただ、Slackだとアカウント名が出てしまうので、ひょっとしたら「こんな事質問したら、他の生徒に笑われるかな」とか思って、質問しにくいかもしれないと感じ、匿名で質問ができるアプリを作りたかったのです。
■作りたいものの詳細
学校が借りてくれているレンタルサーバーがあり、ドメイン以下にディレクトリで区切られて、僕の自由に使っていい場所があるので、そこで運用したい。具体的には、以下のような感じ。
https://ドメイン名.com/000/
この000のところが、僕に割り当てられている番号です。
000のディレクトリには、授業で使うあれこれが色々入っているので、
/000/slack/
こんな感じにさらにディレクトリを区切って作りたい。
さらにさらに、現状担当するクラスが3つあり、一つ終わればまた新しいクラスが始まる感じになるので、
/000/slack/クラス名
こんな感じで、各々のクラスで質問出来るようにしたい。
クラス名は、生徒からみたら、自分のクラス名しか解らないので、URLを教えなければ自分のクラス以外のURLで間違えて質問しちゃうことも無い。
今担当してるクラスが終わり、新しいクラスが始まっても、すぐに増やせる。
こんな物を目指しました。
■大まかな流れ
作業の大まかな流れは以下の感じです。
1.slackのAPIから、アプリを登録し、ボットで投稿できるトークンを取得
2.そのアプリを、該当のSlackのチャンネルに追加
3.axiosを使ってSlackにアクセスし、投稿する仕組みを作る
4.routerを使って、各クラスのSlackに投稿出来る様にする
大体こんな感じの事をやりました。
■Slackからトークン取得
サインインしている状態で以下にアクセスします。
モーダルで選択項目が出てくるので、From scratchを選択
アプリ名と、割り当てたいSlackのワークスペースを選んでCreate Appをクリック。
アプリの設定画面に飛びます。
今度は、トークンを取得しにいきます。
左側のメニューから、OAuth & Permissionsをクリック。
少し下にスクロールすると、「Scopes」という項目があるので、そこを見つける。
そのScopesから、Bot Token ScopesとUser Token Scopesに値を設定する。（今回使いたいのはBot Token Scopesだけだけど、一応User Token Scopesも設定しておきます。）
設定する値は、どちらもchat:write
Add an OAuth Scopeをクリック
chat:writeを選択
User Token Scopesも同様の手順でchat:writeを選択します。
これでOK
■アプリをSlackのワークスペースにインストールする
次は、このアプリを、Slackのワークスペースにインストールします。OAuth & Permissionsのページのまま、上にスクロールすると、Install to Workspaceのボタンがあるのでクリック。
許可するをクリック。
なお、この時に許可するボタンが出ずアプリをインストール出来ない事態が発生しました。
「インストールするボットユーザーがありません」の様なエラーが発生しました。
その時は、左側のメニューのBasic Infomationをクリックし、
Add features and functionalityをクリックして、左下の「Bots」の項目をクリックします。（画像では、チェックがついて緑の線がタグの左側についていますが、エラーが出た時はグレーの状態でした）
Your App's Presense in Slackの項目から、Editボタンをクリック
モーダルで、入力項目が表示されるので、名前を入力してsaveをクリック。どうやら、この名前が入力されていないのが、アプリをSlackにインストール出来ない原因らしい。
これで今度はインストールできるはず。
Slackのアプリで、登録したいチャンネルを選ぶ
投稿するUIの左下の+ボタンをクリック
アプリを追加したいので、「アプリ」と検索。
「このチャンネルにアプリを追加する」をクリック
先ほど作ったアプリが表示されるので、追加ボタンをクリック。なお、画像に写っているQA_slackというアプリは、実際の作業時にテストで作ったアプリですw
これで、ボットからSlackのチャンネルに投稿する準備が出来ました。
なお、このアプリを追加する時も、何故か追加ボタンが表示されずに、確認ボタンになっていて、追加できない状況に陥りました。
その時は、再度SlackのAppの画面に戻って、Basic Infomationから、Install your appのアコーディオンメニューを開き、Reinstall to Workspaceをクリックすると追加できる様になりました。
OAuth & Permissionsのページに行くと、各トークンが取得できます。今回は、Bot User OAuth Tokenを使います。
今回の作業をするにあたって、以下のサイトがとてもとても参考になりました。
■まとめ
これで、Slackにボットで投稿する準備が整いました。
海外のAPIを使おうとすると、当然情報は英語なので、英語ができるといいなぁといつも思います。vue.jsだけでなく、余裕があったら英語の勉強もしたいですね。。。
次回はコードを書いていきます。
この記事が気に入ったらサポートをしてみませんか？