今回作ったもの
私自身も管理職として日々感じていることなのですが、「出退勤の管理が面倒だ！」と思ったことは無いでしょうか？
市販ツールを使っても良いのですが、導入コストが高かったり、ツールのノウハウが必要だったり、思うようにカスタマイズできなかったりなど、導入に踏み切るまでに検討が必要なことが多くありました。
※ もちろん世の中には素敵なツールがたくさんあり、会社規模や体制などによっては市販のツールを使うことがベストになるケースも多々あると思います。
打刻する側も、出退勤、休憩、直行直帰など都度ツールを開いて操作する必要がありますし、管理側もそれらの結果を見るにあたって学習コストがかかるため、これらをもう少し手軽に行えないか、という思いで今回のプログラムを作成しました。
今回自前で作成したものはずばり『Slack と Google スプレッドシートを使った勤怠管理システム』になります。
コンセプトは、『通常業務で利用しているツールで面倒な事務作業を完結させよう！』という思いで作成を行いました。
普段から業務に使っているシステムを使い回すことでツールスイッチの手間を省いたり、学習コストを削ったりすることができるのに加え、自前で作成することでカスタマイズを自由に行うことができるというメリットがありました。
実際に自分たちで使ってみて、もちろん既存のツールには最初は機能面で叶わなかったですが、社内で「こういう機能を追加したら使いやすいのではないか」「仕様をこう変えたい」「こういうものも作ってみたい」というような話が自然と起こるようになり、社内コミュニケーションの活性化や業務に対する積極性の向上につながったので、作成してみてよかったという印象です。
プログラム自体は拙いもので、慣れている方であればすぐシステムを作ったり運用を開始できたりするレベルだと思います。
それでもこれだけの良い影響が生まれてきているので、改めて自分たちでシステムを作ることの意義、効果について再認識できました。
開発
iDeeer では、作成したプログラムは基本的にすべて公開しています！
今回作成したプログラムはこちらになります。
https://github.com/iDeeer/slack_kintai_gas
今回は GAS (Google Apps Script) と Slack を使って、Slack で勤怠報告をすると自動で Google スプレッドシートに反映されるプログラムを作成しました。
直接 GAS を書いても良かったのですが、コードを型で守るために TypeScript でコード部分を書いています。
実際動いている様子はこのようになります。
以下の項目で、各技術の詳細を紹介していきます。
Slack API
Slack で入力したテキストを GAS で受け取るために、Slack Message Event を利用しています。
https://api.slack.com/events/message
Slack チャンネルにテキストが投稿されたら、指定した URL にイベント通知の POST 送信を行うことができます。
今回はこの機能を用いてシステムを実現しています。
設定方法は以下になります。
1. Slack App の作成
まず https://api.slack.com/apps にアクセスして Create New App を押し、新しい App を作成します。
（Slack App を導入したい Workspace が表示されていない場合は、必要に応じて追加してください。）
そして作成した App を選択し、左メニューの中にある Event Subscriptions を選択し、Enable Events を ON にします。
Request URL の箇所には、後述する GAS をデプロイした際に発行される POST 先の URL を指定してください。
Subscribe to bot events の箇所で、Add Bot User Event より message.channels を追加してください。
2. インストール
Install your app より、導入したい Workspace に対して App のインストールを行います。
3. 必要な情報のコピー
App Credentials の Verification Token の値が GAS の設定時に必要となるので、コピーしておいてください。
GAS
Slack から送られた Message Event を受け取って Google スプレッドシートに反映するためには、GAS を利用しています。
今回は GAS を直接書くのではなく、TypeScript でプログラムを書き、clasp を用いて gs コードに変換しています。
こうすることで、プログラムを書いている段階でバグに気づけたり、追加開発を行う際にもデグレが起こりづらいコードを書くことができると考えました。
https://www.npmjs.com/package/@google/clasp
プログラムを書いた後、Github の README に従って操作を行い、デプロイまで完了させます。
その後は Slack の Event Subscriptions の Request URL に、デプロイ後に発行された GAS の URL を指定します。
これで Slack で投稿されたイベントを GAS に送って処理する事ができるようになりました。+
実際に書いてみて、GAS を書くときに clasp を使うことで型があることの強みを最大限生かせると思いました。
普段だとリファレンスを見ながらコードの書き方を調べながら書いて、実際に動かしてエラー内容を見ながら試行錯誤していっていたのですが、型があることで IDE 補完が効き、開発効率が一気に上がりました。
特に Google スプレッドシート操作の際に使える API 群をリファレンス無しにチェックできたことは大きかったです。
次の開発について
iDeeer では、定期的に web サービスやスマホアプリの開発を行ってリリースを行っています。
最近だと Chat GPT などの技術も出てきて、プログラムを自分で書かずとも自動で書いてくれるような方法がいくつかあると思います。
それでも、ある程度複雑なことをやろうとすると今だとまだ自分でコードを書く必要があったり、出力されたコードの意味を理解するためにはある程度コードを書ける必要があると思いました。
今後も、AI によるサポートは利用しつつも、自分たちでコードを書いてサービスを作成していく試みは続けていこうと思います！
さて、次の開発では Google カレンダーと Google スプレッドシートを GAS で連携させたシステムを作成していこうと思います。
スプレッドシートに予定を書いたら、自動的に Google カレンダーに反映される仕組みを作ろうと思いますので、次回もよろしくお願いします！
