概要
社内のSlackチャンネルからスタンプを集計して、オフィスフロアのモニターにサイネージとして表示してみました。
きっかけ
弊社のブランディングのサービスの一つとして「社内エンゲージメント向上に作用するサイネージ」を作ろう！という思いがきっかけです。また、弊社ではいわゆる Jamstack と呼ばれるモダンな開発手法の導入をすすめており、その技術検証を行いたいという思いもありました。
仕組み
- Slackに投稿されたメッセージのリアクションで押されたスタンプを集計する
- 主にアクティブなチャンネル10個から集計する
- 毎日0時に、前日1日間に押されたスタンプを集計する
- 集計したスタンプをサイネージにワードバブルのように表示する
実際にできたもの
実装方法
バックエンド
Strapi
オープンソースのヘッドレスCMS。今回はデータベースとして、集計したスタンプのデータをStrapiに保存します。Amazon Lightsailにセルフホスティングしています。
n8n
こちらもオープンソースの自動化ツール。毎日決まった時間にSlackからスタンプを抽出し、Strapiに保存する役割を担っています。こちらもAmazon Lightsailにセルフホスティングしています。n8nをセルフホスティングした詳しい話はこちらの記事にまとめています。
フロントエンド
Astro.js
Strapiから集計データを取得し、サイネージに表示するHTMLを生成するフレームワークとして、Astro.jsを使用しています。いわゆる Jamstack 構成で、毎日決まった時間に集計結果を反映した静的なHTMLが自動的に生成され、表示されるようにしています。デプロイ先には AWS Amplify もしくは Vercel を使うことが多いです。
d3.js
スタンプの画像をワードバブルのように表示するために使用しているデータビジュアライザーションライブラリです。
d3.jsの中のcircleやcircle packingという機能を使用しました。
【参考】
まとめ
今回は、社内のSlackチャンネルからスタンプを集計して、オフィスフロアのモニターにサイネージとして表示してみた話を紹介しました。
ぜひ参考になれれば幸いです。