最近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しかないので、手元にある環境で進めてみます。

vue-cli のインストール

$ npm install -g vue-cli

プロジェクトの作成

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

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

ライブラリのインストール

$ yarn

アプリ起動

$ yarn run dev

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

App.vue の実装

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

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

$ npm i messaging-api-slack

slackのアクセストークンを取得

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

Slack API 推奨Tokenについて
https://qiita.com/ykhirao/items/3b19ee6a1458cfb4ba21

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

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

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

$ yarn run build

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

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