きっかけは、特別日程の朝のバタつき
利用者の送り迎えがある事業所——福祉施設やスイミングスクール、学習塾のような「送迎のある現場」では、地味に、でも確実に時間と神経を削られる仕事があります。送迎の段取りです。
ふだんは送迎元(学校や自宅など)ごとに時刻が決まっていて、動線もだいたい固定されます。ところがふだんと予定が変わる時期——学校の長期休暇、季節の特別教室、行事の日など——になると話が一変します。出発地も時間もいつもと違い、これまでの固定ルートがまるごと使えなくなる。誰をどの車に乗せ、どの順番で回り、何時に着くのか。担当者が毎回イチから組み直すことになります。
紙とホワイトボード、頭の中の地理感覚でなんとか回していたのですが、人数が増え、車両が増え、習い事への送りや家族の直接送迎が混ざってくると、限界が見えてきました。そこで「自分たちの運用に合う送迎管理ツール」を作ることにしました。
この記事では、そのツールがどんなものか、どんな考えで作ったかを、技術的な裏側も含めて書いてみます。
どんなアプリか
ひとことで言うと、送迎の「割り当て・順番・時刻・印刷」までを一気通貫で扱える送迎管理アプリです。福祉施設やスイミングスクールなど、車での送り迎えがある事業所なら、業種を問わず使える設計にしています。
特徴的なのは、たった1枚のHTMLファイルでできていること。サーバーもインストールも不要で、ファイルをダブルクリックすればブラウザで開きます。フレームワークもCDNも使わず、素のJavaScriptだけ。社内ネットワークや個人のPCに置いてそのまま使え、オフラインでも動きます。
画面は7つのタブで構成しています。
- 本日の予定 … その日の出欠と時刻を確定する起点
- 配置確認 … 誰がどの車のどの便に乗るかを一覧・ドラッグで調整
- ルート編集 … 立ち寄り順の並び替え、便の追加
- 印刷プレビュー … 当日の運行表・月次一覧をそのまま印刷
- 実績 … 実際の打刻を記録
- マスタ管理 … 利用者・送迎元・車両・区間所要時間の登録
- データ … バックアップや読み込み
使う人の目線で「効く」機能
1. 特別日程モード(休暇モード)
トグルひとつで、その日だけ全員を自宅お迎えに切り替えます。土曜は自動でON。学校の長期休暇や特別教室の日など、ふだんの固定運用から離れて「家から拾う」モードに切り替わります。これがこのアプリの背骨です。
2. 自動配分(5つの考え方)
「自動配分する」を押すと、複数の割り当て案を比較しながら選べます。狙いの違う5つのアルゴリズムを用意しました。
- A 早く終わらせる … 時刻が早い順に詰めて、運行時間を最短に
- B 同じ送迎元でまとめる … 立ち寄り回数を減らす
- C 人数を揃える … 車ごとの乗車人数を平準化(ドライバーの負担調整)
- D じっくり最適化 … 入れ替えを繰り返して総運行時間と遅刻を改善する局所探索
- E エリア別ルート … 全員自宅お迎えのとき専用
Eが今回の主役です。利用者を事業所から見た方角でA(北東)・B(南東)・C(南西)・D(北西)の4エリアに分け、各車両がエリアを担当します。事業所から遠い人から順に拾い、近づきながら戻ってくる、いわゆるスイープ型の発想です。自宅お迎えモードがONなら、これが自動で「おすすめ」として提示されます。
3. 現場の「例外」をちゃんと拾う
実際の送迎は、きれいな箱には収まりません。そこで例外対応をかなり作り込みました。
- お迎え便と帰宅便で別の車(習い事への送りなど)
- 家族の直接送迎を独立した枠として扱う
- 帰宅便の送迎先を5分類(自宅本宅／親類宅／別の教室や施設／勤務先／その他)
- きょうだい・関係者の自動追従 … 片方を動かすともう片方も同じ車に寄せる
- 時刻ギャップで自動分割 … 同じ便の中でお迎え時刻が30分以上空いたら、自動的に複数便に分ける(間に事業所への帰着を挟む前提)
4. ドラッグ&ドロップ + やり直し
配置確認タブでは、利用者をドラッグして別の車へ移せます。操作のあとには「元に戻す」も出るようにして、間違えても怖くないようにしています。
5. 使うほど賢くなる
実際の所要時間を打刻として貯めていくと、ルート計算の精度が上がっていきます。採用した自動配分案に👍👎をつけると、似た条件の日に優先される仕組みも入れました。
6. 地図APIとの連携(無料・キー不要)
住所から座標、座標から区間所要時間を、国土地理院 + OpenStreetMap系の無料APIで自動取得します。APIキーの登録もいりません。時間割やスケジュール表の写真から、曜日ごとの時刻を読み取る補助機能も用意しています。
7. そのまま印刷できる
当日の運行表(車両別)と、月次一覧(A3)を、ブラウザの印刷からそのまま出せます。押印欄まで含めて、現場で配れる帳票になるよう調整しました。
設計でこだわったところ(技術メモ)
単一HTML・ノーフレームワーク
依存ライブラリゼロ、ビルド工程ゼロ。1ファイルなので、配布も差し替えもファイルを渡すだけ。現場のPC環境にインストール権限がなくても動く、というのは大事なポイントでした。コードは1万行を超えましたが、素のJavaScriptで通しています。
三層ストレージで「データが消えない」を担保
file:// で開くWebアプリは、データ保存が意外と落とし穴です。そこで保存層を抽象化し、
- 永続化API(対応環境のとき)
- IndexedDB を主たる保存先、
localStorageをバックアップに二重化 - それも無理ならインメモリ(リロードで消える旨を通知)
という多段構成にしました。書き込みは使える層すべてへベストエフォートで行い、読み出しは優先順位順に探索します。localStorage のキーは名前空間で前置きし、ほかのアプリと衝突しないようにしています。「現場の記録が消えた」を起こさないための地味で重要な作り込みです。
日本語と印刷を前提にしたデザイン
書体は BIZ UDPGothic / Noto Sans JP を基調に、淡いブルーグレーの紙面とインディゴのアクセント。画面で見やすいだけでなく、A4・A3に出したときに罫線と押印欄がきれいに収まることを優先しました。「印刷して使う」前提の設計です。
余談:入力の小さなバグを直した話
最近、時刻入力で「50 のように 0 を含む分が入力できない」という不具合に出くわしました。
原因は <input type="time"> の挙動でした。この入力欄は「時と分が揃って妥当な値になった瞬間」に change を発火します(フォーカスを外すのを待ちません)。すでに値が入っている欄を編集すると、時を打ち終えた時点で「旧い分」との組み合わせがいったん妥当になり、change が発火。その先で画面全体を再描画していたため、入力中の欄ごと作り直されてフォーカスが外れ、続く分の入力を受け取れなくなっていました。
直し方はシンプルで、change では保存だけ行い、再描画は入力が確定する blur のタイミングだけに限定しました。こういう「現場で毎日触るからこそ気づく」小さな引っかかりを潰していくのが、自作ツールの醍醐味だと思っています。
作ってみて
市販の送迎システムは立派ですが、「特別な日だけ運用がまるごと変わる」という事情や、家族送迎・きょうだい・習い事といった例外まで、自分たちの粒度で扱えるものはなかなか見つかりませんでした。
だったら、自分たちの運用に合わせて作ればいい。1枚のHTMLという軽さは、その思想ともよく合いました。完璧な最適化を狙うより、朝のミーティングを5分短くすること、「この人、誰が乗せるんだっけ?」を一覧でなくすこと——そういう現場の体感が良くなることを目標に作っています。
福祉施設やスイミングスクールをはじめ、送迎のある現場でツールを自作している方、これから作ってみたい方の参考になればうれしいです。
この記事で紹介したアプリは、現場運用のために個人で開発したものです。利用者名・施設名などの個人情報は本文に含めていません。