More than 5 years have passed since last update.

Vue+electron製ツールでSlackにメッセージを送る - をやってみた手順

Posted at 2019-05-14

最近Twitter/Qiita界隈ではワイ記法で有名になりつつあるらしい弊社ですが、会社標準というわけではないので標準語でお送りします。

今日の仕事を終えて、勤怠報告用のslackチャンネルに書き込もうとしたとき、ひとつのtweetが目に入りました。

これ見ながら俺も作ってみる
Vue+electron製ツールでSlackにメッセージを送る https://qiita.com/unotovive/items/0e0a117340eaa04c9f77 #Qiita

お？??
これは便利なのでは？と思ったので作ってみることにしました。

【元記事】
Vue+electron製ツールでSlackにメッセージを送る
https://qiita.com/unotovive/items/0e0a117340eaa04c9f77

App.vue ファイルのソースコードがあるだけで何も説明がなかったので、実際にアプリをビルドしてみるところまでのやってみたことをアウトプットしておきます。

Electron vue のサイトを参考に作業を進めました。
https://simulatedgreg.gitbooks.io/electron-vue/content/ja/

前提

macOS Mojave 10.4

$ node -v
v10.14.2

$ npm -v
6.4.1

$ yarn -v
1.16.0

なんせ元記事にはApp.vueしかないので、手元にある環境で進めてみます。

$ npm install -g vue-cli

$ vue init simulatedgreg/electron-vue slackbtn
$ cd slackbtn

slackbtn というディレクトリの中に、プロジェクトが作成されました。ディレクトリ名は適宜変更可能です。

$ yarn

$ yarn run dev

ここで開発中のアプリが起動してきました。

元記事にかかれている App.vue のソースコードを src/App.vue へそのまま貼り付けました。

slackのAPIを使うライブラリを使っているので、プロジェクトへ追加します。

$ npm i messaging-api-slack

こちらの記事を参考に取得しました。Permission選択のところで postMessage を入力すると必要なものを入力すると良いです。

OAuth Access Token と書かれた項目をコピーし、 src/App.vue の43行目に貼り付けます。

45行目、 client.postMessage() の第1引数に、メッセージを書き込みたいslackのチャンネル名を書きました。
例) #project_kintai

ここまでで実装できたはずなので、改めてアプリを動かします。
（先程のアプリが動いたままの場合は Control + C で停止します。）

$ yarn run build

無事起動しました。ボタンを押したら指定したチャンネルに絵文字が投稿されていました。

これにて、:sagyo-shuryo-作業終了_navy: です。