CLIN開発日記 #017｜管理者ダッシュボード完成。止まって見えた期間に、開発環境と設計を作り直しました
こんにちは。
清掃業務プラットフォーム「CLIN」の開発を進めています。
前回の開発日記から、少し更新が空きました。
ブログだけを見ると、
「開発が止まっていたのかな？」
と思われるかもしれません。
実際には、その逆でした。
この期間は新しい機能を次々に追加するよりも、これからCLINを本当に運用できるシステムにするため、開発環境、コード構造、管理画面、そして開発ルールそのものを大きく作り直していました。
そして今回、ひとつ大きな区切りとして、管理者ダッシュボードが試験運用へ進める形まで完成しました。
なぜ開発ブログの更新が空いたのか
CLINは短期間で多くの機能を作ってきました。
スタッフ画面、管理者画面、物件カルテ、発注センター、リアルタイム更新、写真レビュー、Cleaning Job、API、Job Timeline。
機能が増えていくにつれて、ひとつの問題が見えてきました。
「このまま機能追加だけを続けると、後から直す方が大変になる」
ということです。
画面ごとに似たUIが別々に実装されていたり、以前の仕様と新しい仕様が混在していたり、開発環境によって動作確認の手順が変わったりする部分もありました。
そこで、機能追加のスピードを一時的に落としてでも、土台から整理し直すことにしました。
結果として、一度作ったコードを整理し直した部分もあります。
遠回りに見える作業ですが、試験運用を始めてから大きな問題になるより、今の段階で直しておく方が良いと判断しました。
AIと開発するための環境も作り直しました
CLINでは、AIを開発チームの一員として活用しています。
しかし、AIを使えば自動的に開発が速くなるわけではありません。
認証が切れる。
ローカル環境とGitHubの状態が違う。
どのコードが最新版なのか分からなくなる。
処理が動いているのか、止まっているのか分からない。
確認のたびに人が操作しなければならない。
こうした状態では、AIを増やしても逆に管理が複雑になります。
そこで今回は、GitHubを開発の正本とするルールを明確にし、開発環境そのものを再構築しました。
Windowsのローカル開発環境、VS Code、Codex、GitHub、AWSの役割を整理し、Node.jsのバージョンも固定しました。
さらに、環境構築や検証をできるだけ再現できるようにし、Frontend、Backend、Realtimeを自動チェックするCIも導入しました。
PRを作成すると、
コードがビルドできるか。
テストに問題がないか。
Frontend、Backend、Realtimeが壊れていないか。
といった項目をGitHub側で自動確認します。
Frontend、Backend、Realtimeの3系統をPRごとに検証する開発環境へ再構築しました。
目指しているのは、
「人がずっとAIの横について確認操作をする開発」から、「AIが進め、人が重要な判断と実画面確認をする開発」へ移行すること。
CLINそのものだけでなく、CLINを作る仕組みも開発しています。
管理者ダッシュボードも一度作り直しました
今回、特に時間をかけたのが管理者ダッシュボードです。
以前から管理画面は存在していましたが、実際に毎日の業務で使うことを考えると、情報量と画面構成をもう一度見直す必要がありました。
特に重要だったのは、
「きれいな画面を作る」
ことより、
「管理者が今何を見るべきか、数秒で判断できる画面にする」
ことです。
そのため、写真レビューとリアルタイム進捗のカード構造を共通化しました。
物件名、担当スタッフ、進捗、写真枚数、推定時間、チェックイン時刻などを、画面ごとに別々の作りにせず、共通のカード基盤として整理しています。
これによって、今後新しいカードが増えても同じ考え方で拡張できるようになりました。
ブラウザ100%表示で、今日の状況を一覧できる情報密度へ調整しました。
PCだけでなく、スマートフォンまで作り込みました
管理者画面というとPC中心になりがちですが、CLINでは現場でスマートフォンから確認するケースも想定しています。
そのため今回の調整では、単純にPC画面を小さく縮める方法は採用しませんでした。
PC最大幅。
PCの狭い画面。
タブレット。
スマートフォン。
それぞれで情報の並び方を変えています。
PCではできるだけ多くの情報を一覧で確認できるようにし、スマートフォンでは文字を読める大きさに保ちながら、必要な情報が縦に自然につながるよう調整しました。
ブラウザ倍率を変えなければ使いにくい管理画面ではなく、100%表示のままで使えることも今回の重要な基準です。
スタッフの変化を「ベル」で知らせる
稼働中スタッフ欄にも変更を加えました。
スタッフの状態が変わったとき、対象スタッフのベルが動いて管理者へ知らせます。
通知音も既存の写真レビュー機能と共通化し、ON／OFFを管理者が選べるようにしました。
通常時は静止し、本当に状態変化があったスタッフだけを知らせます。
今後スタッフチャットを実装するときには、スタッフ名をクリックするとダッシュボードを離れず、右側からチャット画面が開くドロワー形式を予定しています。
左メニューも業務単位に整理しました
管理者画面の左メニューも大きく整理しました。
これまで画面内の「管理メニュー」と左側メニューに似た機能が存在していたため、役割が重複していました。
そこで管理機能を左メニューへ統合しました。
現在は、ダッシュボード、物件カルテ、カレンダー、清掃管理、写真レビュー、イレギュラー、発注センター、スタッフ管理など、業務単位で迷わず移動できる構成にしています。
将来的に追加予定の請求・見積、売上管理、評価管理も、この構造へ追加できるよう設計しています。
さらに将来の料金プランについても、Free、Standard、Proなどの契約内容によって、利用可能機能、物件数、スタッフ数、写真・動画の保存容量などを切り替えられる構造を想定しています。
今すぐ課金機能を作るのではなく、後から無理なく追加できる土台を先に作っています。
「今日の作業・管理対応」をKPIへ統合
今回、ダッシュボード完成の最後の大きな作業になったのが、上部のKPIです。
以前は、
「今日の作業・管理対応」
という独立した大きなエリアがありました。
しかし内容を確認すると、写真レビュー、清掃進捗、管理対応、発注など、すでに別の場所で扱っている情報と重なる部分がありました。
そこで情報そのものを減らすのではなく、見る場所を整理することにしました。
現在は、本日の清掃、写真レビュー、清掃進捗、メッセージ、管理対応、発注管理などをKPIエリアで確認できます。
管理対応や発注管理では、件数だけでなく代表的な内容も直接表示します。
さらに「すべて見る」を押すと、別ページへ移動するのではなく、その場で詳細一覧を確認できます。
必要な案件を選んだときだけ、物件カルテやイレギュラー、発注センターなどの正式な処理画面へ進みます。
数字を見るだけのKPIから、「今やるべきこと」まで確認できるKPIへ整理しました。
これによって管理者はダッシュボードを行ったり来たりせず、まず状況を把握してから必要な業務へ進めるようになりました。
管理者ダッシュボードがひとつの完成形へ
今回の変更で、管理者ダッシュボードはかなりすっきりしました。
上部では今日の状況をKPIで確認する。
その下で稼働中スタッフを見る。
写真レビュー待ちを確認する。
リアルタイムで進行中の清掃を見る。
必要な管理対応や発注を確認する。
という流れが、一つの画面につながっています。
単に情報を並べるダッシュボードではなく、
「今日の現場をどう動かすか判断するための画面」
に近づいてきました。
開発ブログ自体も開発環境の一部へ
今回、もう一つ新しい仕組みを作りました。
それが、この開発ブログの保存方法です。
これまで開発ブログはWordPressだけに保存されていました。
しかしAIと継続的に開発する場合、新しい開発セッションになったときに、過去の記事や開発経緯をもう一度確認できることが重要です。
そこで、WordPressで公開した開発ブログをGitHubにも自動的に同期できる仕組みを作りました。
WordPressが正本であることは変わりません。
記事を公開すると、GitHub側が定期的に確認し、AIが検索・再読しやすいMarkdown形式へ変換して保存します。
【画像6：GitHub docs/devlog/INDEX.md】
過去の開発ブログもGitHubから再読できるようになり、新しいAIセッションでも開発経緯を復元できるようになりました。
これによって、新しいAIセッションになっても過去の開発日記を読み直し、
「なぜこの設計になったのか」
「前回どこまで完成していたのか」
を復元できるようになります。
つまり開発ブログも、単なる広報記事ではなく、CLINの開発履歴そのものになりました。
次は8月の試験運用へ
今回、管理者ダッシュボードという大きな区切りまで到達しました。
ここからの目標は明確です。
2026年8月中の試験運用開始です。
今後は新しい機能を無制限に増やすのではなく、実際の業務で必要になる流れを一つずつ確認していきます。
物件を登録する。
スタッフを登録する。
清掃を割り当てる。
スタッフが清掃を開始する。
リアルタイムで進捗を確認する。
写真を報告する。
管理者が写真をレビューする。
問題があれば修正する。
そして清掃を完了する。
この一連の流れを実際の業務に近い形で通し、止まる場所や使いにくい場所を改善していきます。
配置マップ、請求・見積、売上分析、評価管理、本格的な料金プランなど、まだ作りたい機能はたくさんあります。
ただ、まずはCLINを、
「作っているシステム」から「実際に使うシステム」へ。
今回の開発期間は、見た目には遠回りだったかもしれません。
しかし、コード、設計、開発環境、管理画面、AIとの開発方法まで一度整理したことで、これからの開発速度と安定性は大きく変わります。
次の開発日記では、いよいよ試験運用へ向けた実業務フローの検証について紹介していく予定です。
CLINは、現場スタッフ、管理者、そして経営者まで、清掃業務に関わるすべての人が使えるプラットフォームを目指して、引き続き開発を進めていきます。