燃料残量共有システム

概要

5隻以上の船を不定期に運航するインディクルーズにおいて、船長がLINEグループで報告していた燃料残量を、Webアプリでの一元管理に置き換えた。フォーマットを統一し、全船の残量を一覧できるようにしたことで、現場の情報共有の課題を解決した。

課題

インディクルーズでは5隻以上の船を不定期に運航しており、日によって乗る船長も変わる。これまで各船長は運航終了時にLINEグループで残燃料を報告していたが、この運用には次のような課題があった。

• フォーマットがばらばら：船長ごとに書き方が違い、統一されたルールがない
• 最新情報がわかりにくい：同じ船について何度も報告が流れると、どのメッセージが最新の残量なのか埋もれてしまう
• 一覧できない：全船の状態を俯瞰したいときに、トーク履歴を遡って手動で拾い集める必要がある

属人的な運用に依存していたため、報告の抜け漏れや確認ミスが起きやすい状態だった。

施策

課題の根本は「フォーマットの不統一」と「一覧性のなさ」だったため、この2点にまっすぐ対応する形でWebアプリ化した。

• 入力フォーマットの統一：船・タンクごとに決まった入力UIを用意し、誰が入力しても同じ形式でデータが記録されるようにした
• 全船を一覧表示：ダッシュボードで全船のカードを並べ、各船の燃料残量を一目で確認できるようにした
• 船の増減をユーザー自身で可能に：船の追加・削除・タンク構成の変更を管理画面から行えるようにし、将来的に船が増えても開発者を介さずに運用側で対応できるようにした

LINEでの報告という「人力の伝達」から、「システムに記録し、システムから参照する」という運用に置き換えたことで、フォーマットのばらつきと情報の埋もれという2つの問題を同時に解消した。

アーキテクチャ

Next.js（App Router）+ Supabaseによるシンプルな構成のWebアプリ。

• フロントエンド：Next.js / React、状態管理はZustand、UIはRadix UIベースのコンポーネントで構築
• バックエンド／DB：Supabase（PostgreSQL）。ships（船舶マスタ）、fuel_tanks（燃料タンク）、fuel_records（燃料チェック履歴）、ship_notes（船舶備考）というシンプルなテーブル構成で、最新の残量は履歴テーブルからビューで取得する形にしている
• ホスティング：Vercel

設計・実装で意識したことは以下の2点。

• 属人性の徹底的な排除：特定の誰かしか使えない・わからない仕組みにしないことを最優先にした。入力ルールをUIに埋め込み、迷わず同じ形式で報告できるようにしたほか、船やタンクの構成変更もノーコードで運用側が完結できるようにした
• 現場での使いやすさ（レスポンシブ対応）：報告は基本的に現場でスマートフォンから行われる。PCでの管理画面としての使いやすさだけでなく、スマホでの入力体験を前提にレイアウトを設計した

結果

LINEでの報告という属人的でばらつきのある運用を、統一フォーマット・一覧性のあるWebアプリに置き換えることで、現場の情報共有の課題を解決した。特別な技術要素があるわけではないが、「現場の運用課題をDXで解決する」という観点で、小さくても着実に効果のある改善となった。