今回の記事では、障害福祉サービス事業所における「ガイドヘルパー」の利用者×ヘルパーのマッチングシステム～シフト調整アプリをさくっと作ってみる的なことをやってみたいと思います。イメージを固めたら、AIにプロンプトを投げかけます。
障害福祉サービス事業所における、移動支援や行動援護といったお散歩・外出系のシフトを管理するシステムを、firebaseで作っていきたいと思います。利用者からは、翌月の支援希望日をAuthenticationでログインしてから選択してゆく感じにしたいと思います。そのデータはFirestore Databaseに記録して、管理者ダッシュボードから確認、重複しているところをガイドヘルパーのシフト調整をして、翌月の移動支援等のガイドヘルパーシフトにするようなシステムを作れないかと考えています。利用者ごとに発行されたメールアドレス+パスワードで希望日予約システムでデータベースに送信された希望日を、管理者がヘルパーの休みや対応できるヘルパーを調整して確定シフトにするようなシステムを作りたいです。ダミーデータで複数人の利用者の希望日を作っていただいて、複数人のサービス提供責任者やガイドヘルパーが対応する当該月のシフトを管理者が調整できるようなUI/UXに配慮したアプリを作ってみてください。実際は、FirebaseのHostingやAuthentication、Firestore Databaseで作りますが、UI/UXのデモとして、フロントエンドだけのコードを、html,css,javascriptで作ってみてください。ガイドヘルパーの仕事の概要や、ガイドヘルパーのシフトの概念は、ネットで調べてください。以上、お願いします。
承知いたしました。障害福祉サービス事業所向けの移動支援・行動援護シフト管理システムのUI/UXに配慮したフロントエンドのデモを作成します。
Firebaseでの実際の開発を想定し、管理者（サービス提供責任者）が利用者の希望を確認し、ガイドヘルパーを割り当てる操作を直感的に行えるようなインターフェースをHTML, CSS, JavaScriptで実装します。
システムのコンセプト
目的: 利用者からの支援希望を効率的に集約し、重複やヘルパーの空き状況を考慮しながら、最適なシフトを迅速に作成すること。
UI/UXのポイント: 視覚的な状況把握:「未割り当ての希望」「確定シフト」「ヘルパーの状況」をパネルで分離し、一目でタスクの全体像がわかるようにします。
直感的な操作: ドラッグ＆ドロップやクリック操作で、希望をシフトに割り当てられるようにし、管理者の負担を軽減します。
情報の明確化: 色分けを利用して、シフトの状態（例：未割り当て、確定、重複警告）を瞬時に識別できるようにします。
AIが教えてくれるwebアプリ開発
このデモは、管理者（サービス提供責任者）が、利用者からのたくさんの支援希望を、いかに効率よく、間違いなくシフトに組み込んでいくかを体験するためのものです。
画面の見方
まず、画面は大きく3つのエリアに分かれています。
- 【左パネル】利用者からの支援希望（未割り当て）
- これは、利用者から寄せられた「この日に外出支援をしてほしい」という「仕事のタスクリスト」です。黄色のカードが一つ一つのタスク（支援希望）にあたります。
- 【中央パネル】シフトカレンダー
- これは、ヘルパーの割り当てが完了した「確定済みのシフト表」です。最初はほとんど空ですが、操作を進めるとここに緑色の「確定シフト」が追加されていきます。
- 【右パネル】ガイドヘルパー
- これは、「ヘルパーさんの状況を確認するエリア」です。特定の日付を選ぶと、その日にどのヘルパーが「対応可能」か、「お休み」か、あるいは「既に他のシフトが入っているか」が一目でわかります。
基本的な操作手順
シフトを確定させるまでの流れは、以下の簡単3ステップです。
① 希望を掴んで、カレンダーへ置く（ドラッグ＆ドロップ）
- まず、左パネルの黄色の支援希望カードの中から、シフトを組みたいものを一つ選びます。
- そのカードをマウスでクリックしたまま（掴んだまま）、中央のカレンダーの希望する日付のマスまで持っていきます。
- 目的の日付のマスの上で、マウスのクリックを離します。
ポイント: これでシステムに「今からこの希望（例：田中様の5日の支援）について、ヘルパーを割り当てますよ」と伝えることができます。ドロップすると、右のヘルパーリストの日付も自動でその日に切り替わります。
② 対応できるヘルパーを選ぶ
- カードをカレンダーにドロップすると、右のヘルパーリストがその日付の状況に更新されます。
- リストの中から、ステータスが緑色で「対応可」となっているヘルパーさんを見つけます。
- 割り当てたいヘルパーさんをクリックします。
ポイント: 「休み」や「割り当て済み」のヘルパーはクリックできないようになっています。これにより、ダブルブッキングなどのミスを防ぎます。
③ 完了！
- ヘルパーをクリックすると、「割り当てました」という旨のメッセージが表示されます。
- 確認すると、以下の変化が起こります。
- 左パネルにあった黄色の支援希望カードが消えます。（タスク完了！）
- 中央のカレンダーに、緑色の「確定シフト」が追加されます。誰の支援に、どのヘルパーさんが入るかが明記されます。
以上が、基本的なシフト作成の流れです。このドラッグ＆ドロップとクリックの操作を繰り返すことで、山積みの支援希望を直感的に整理し、シフトを完成させていくことができます。
その他の機能
- 月の切り替え: 画面上部の「<」「>」ボタンで、前月や翌月のカレンダーに移動できます。
- 特定の日付のヘルパー状況確認: 右パネルの日付を直接変更すると、その日のヘルパーの空き状況だけをピンポイントで確認することも可能です。
このデモを通じて、AIによるバイブコーディングやFirebaseで実現できることを、試して、遊んでみてください！（利用者氏名やヘルパー氏名は、AIが創作した氏名で、実在の人物とは関係ありません。）
コメント