リモートワークで使える。スラックで自分の勤怠管理サービスを作成する[前編]

こんにちは、松井です。
普段はスタートアップや事業会社に関わりUIを中心としたデザインに関わりながら、自社サービスなどの開発をしています。

今回、リモートワークで働く方のための勤怠管理（自己管理）ツールを作りました。

## 仕組み
Slackのスラッシュコマンドを利用して開始/終了を投稿。投稿したデータをGoogleのスプレドシートに反映。Googleスプレッドシートをデータベースとして使用。データベースの内容をブラウザ側に反映→ブラウザ側から表示の編集も可能。編集した内容は、スプレッドシートに反映されるというものです。
![Desktop.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/420291/6e3925e8-026d-981b-b57d-e27428edae94.jpeg)


**今回は、Slackのスラッシュコマンドを利用して投稿を行い、ボットが投稿したことをSlackでお知らせしてくれる部分までを解説します。**

## この記事内で使用するもの
- slack
- GAS


## スラック側で使うスラッシュコマンドの設定
まずは、開始/終了をスラッシュコマンドを利用して投稿するための、コマンド設定を行います。Slack側の設定をGASと連携させて使用していきます。

## Slash Commandsとは
Slash Commandsは、スラックに標準搭載されている `/`から始まるコマンドです。

<img width="939" alt="スクリーンショット 2020-02-26 6.28.42.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/420291/847a5508-5da6-57b8-553b-2591352f0341.png">

## Google Apps Scriptとは
GAS(Google Apps Script)名前の通り、Googleがスプレッドシートなどのように提供しているサービスで、無料で使え、javascriptをベースとしたプログラムを操作できるものです。

## GAS側
Slack側の設定の前に、Slackでスラッシュコマンドを操作した時に、リアクションが返ってくる仕組みをGAS側で作ります。

https://script.google.com 

を開き、テスト用のコードを用意しましょう。
コピペでもOKです。

```javascript:コード.gs
 var SLACK_ACCESS_TOKEN = 'アクセストークン';
 var KINTAI_CHANNEL =  "投稿したいチャンネルのurl";

 function test(){
   logger.log('test start!');
   var slackApp = slackApp.create(SLACK_ACCESS_TOKEN);
   var channelId = KINTAI_CHANNEL;
   var message = "お呼びでしょうか?ご主人様";
   var option ={
    username: "マツイ タカフミ";  // ボット名を入れます。 
   }
   var result = slackApp.postMessage(channelId, message, option);
   logger.log(result);
}

```
少し解説していきます。

#### SLACK_ACCESS_TOKEN
SLACK_ACCESS_TOKENですが、https://api.slack.com/apps を開き、サイドにあるナビゲーションからinstallAppを選択します。

選択後「OAuth Tokens for Your Team」というタイトルが表示されると思うのでトークンをコピーして、アクセストークンと記載している箇所に貼り付けます。
![スクリーンショット 2020-03-04 12.04.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/420291/bd677005-03eb-bfc0-15c9-4518d5d344d2.png)
#### KINTAI_CHANNEL

次にKINTAI_CHANNELですが、こちらはチャンネルのurlを取得します。

urlは、アプリからであれば、チャンネルの右クリック→「リンクをコピー」で取得することができます。
<img width="679" alt="スクリーンショット 2020-03-04 12.00.09.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/420291/ad0c4565-8665-0fbd-0e8e-c1d1cc50f3f1.png">

 ` https://xxxxx.slack.com/archives/xxxxx `のarchives後のxxxxx部分がチャンネルのurlとなります。

ここまで完了できればGAS側の実装はあと少しです。

GAS側のメニューの「公開」=>「ウェブ アプリケーションとして導入...」を選択します。
選択するとモーダルが開きます。
![スクリーンショット 2020-03-04 12.07.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/420291/e0b62336-e283-afb4-0f4c-44ead7f49410.png)
### GAS側更新時の注意点
プロジェクトのバージョンは、常に「新規作成」、英語表示になってる場合は「NEW」を選択して更新を行います。
更新ボタンをクリックすると、URLが発行されます。
![スクリーンショット 2020-03-04 12.07.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/420291/90035be2-9601-c9e0-1e43-406519642fcc.png)
このURLは、Slack側の設定で必要となりますので、テキストエディターにコピーしておかれてください。

## Slack側
まず、 SlackのAPP設定ページ （https://api.slack.com/apps ） にアクセスします。
ログインできたら「Create New App」を押します。きちんと表示されていない場合は、ログインします。
![スクリーンショット 2020-03-04 12.10.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/420291/2ea1ec21-6ca4-48f9-6c47-d84d7ad55130.png)
ちなみに私はアプリを使用しているので、アプリ側のワークスペースで「appの管理」でサイトに飛んで、再度URLにアクセスすると表示されました。

AppNameをタイムキーパーとして、
WorkSpaceは、利用したいワークスペースを設定します。
![スクリーンショット 2020-03-04 12.11.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/420291/3b0227f4-05e7-00fe-a124-4436fd565e95.png)

入力できれば「create App」でAppを作成します。

作成するとSetting画面に遷移し「Basic Information」という画面が表示されます。どの機能を使うのかを選択するエリア内の「Slash Command」を選択します。
![スクリーンショット 2020-03-04 12.15.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/420291/6b22994e-18ec-5aeb-0c0b-91367bb0ed31.png)
次に「Create New Command」が表示されますので、入力エリアに情報を入力していきます。

- コマンドは、  `/going` を設定
- リクエストurlは、 GASの公開URL
- 短い説明には、 勤怠管理コマンド
- 使い方のヒントは、勤怠管理時に必要なコマンド

を入力します。

![スクリーンショット 2020-03-04 12.12.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/420291/ec59694d-bbc8-ebee-1e45-158528c44ade.png)

作成完了できれば、 入力前の「Basic Information」ページに画面が遷移します。
コマンド設定がきちんと設定できているかは、「Basic Information」のAdd features and Functionalityにチェックマークがついていれば、設定できています。
![スクリーンショット 2020-03-04 12.17.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/420291/8b15cba7-6b36-5195-5220-12cba9fa5b54.png)

チェックがついてるのを確認して「Install App Workspace」でインストールを行います。インスール後のアクション画面で[Authorize]を押せば設定完了です。

## Slack側でテストしてみよう！

最後に、きちんと実装できたかテストしてみましょう。
GAS側で設定したチャンネル内で ` /going` と入力します。すると、以下の添付画像のような内容が返ってきたことを確認できれば、スラックで投稿する部分の実装は完了です。
<img width="270" alt="スクリーンショット 2019-08-09 19.19.29.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/420291/a8b973eb-d447-24cd-3d8b-f319ce320e39.png">

## まとめ
リモートで仕事をする機会も増えてきています。今回は、slackを利用したものを作成していますが、やり方次第でLINEなどのチャットツールでも同じようなことが実装できますので、興味がある方は是非お試しください。

ツイッターなどでもサービスについて日々、考えている事を発信していますので、是非[フォロー](https://twitter.com/takuo0327)してください。

## 参考にした記事
- https://qiita.com/chikuwa111/items/7a1a349b82318a5861cc