イントロダクション

業務上で、設備のキャパだったり、スタッフのワークロードだったりを検討する際、
データを積み上げて編成して指摘されて修正して、承認もらって...ってプロセスが手間に感じたので。
できるだけ楽に管理できるようなツールとして機能するウェブアプリです。
データの可視化と対話的な操作がメイン機能です。

既存の商用アプリだと、プロジェクト・人事労務管理系が多く、しかもいろいろ複雑な機能ついてるので
ちょっとした使い回しがやりにくそう。だったら自分で作ってみよう、というのがモチベーションです。

デモンストレーション

直感的に操作できるようになっています。下のチャートの要素をドラッグ＆ドロップかフリックしてください。

プロダクション

という感じで、以上が簡単な紹介です。UIに微調整をかけたりcsvファイルの入出力できるようにしたアプリは下のリンクです。

だいたいこのような感じで、メイン機能はJavaScriptで実装してます。

本質は、データの可視化と対話的操作です。
結局、データを「可視化して、積み上げたり、組み入れたり、組み換えたり、入れ替えたり」 できるというところが本質なので、
工数の積み上げだったり、スタッフの業務管理だったり、
財務的なとこで言うと予算の編成だったり、あたりに使えるかな、と思っています。

個人的には、これでおおまかに編成を決打ちしてしまって、出力したデータにエクセルでピボットかませるような使い方をしています。

技術スタック

ソースコードは個人のGitHubリポジトリにて。
https://github.com/Kazuki-Maehara/Capacity_Visualization

今回使用した技術関係は以下となります。

インフラ周り

AWS - Amazon Web Service

クラウドプラットフォーム。今回はEC2, ECSあたりのサービスがメインです。

Terraform

いわゆるIaC - Infrastructure as Code、クラウドリソースのプロビジョニングに使用しています。

仮想化技術

Docker

コンテナ仮想化による開発環境と実行環境との調整に使用しています。

Webサーバ

Nginx

Apacheしか使ったことなかったので、今回試しに使ってみています。設定しやすかったです。

アプリケーションサーバ周り

Python

最近は、特にAI関連などで名前を耳にします。個人的には、業務効率化でスクリプト書く際にもよく使っています。

Django

Webアプリケーションフレームワークです。バックエンドで動かしてますが、
今回はSSRのような動的な処理はさせていません。静的データのホスティングのみ。

フロントエンド

JavaScript

クライアントサイド、フロントエンド全般で使用しています。

D3.js

今回のメイン機能実装で使用したライブラリ。Data-Driven Documents - データ駆動型文書です。
コンポーネントのデータ構造をもっと理解すれば他にも面白い使い方ができる気がしています。

HTML, CSS

Web系の基本要素として使用しています。