新潟大学医学部災害医療教育センター 講義用アプリケーション
システムの概要
災害時の緊急車両や救護人員の配置をシミュレーションする際に使用する、Webブラウザで動作するアプリケーションです。
ブラウザ上に地図や見取り図などを災害が発生した「シーン」として読み込み、その上に消防車や警察官などのスタンプを配置したり、描画ツールで自由に図形を書き込んだりして、シミュレーション図を作成することができます。
講義で使用する際は、グループごとに個別のIDでログインして操作します。別のグループの画面を共有して閲覧することもできるため、グループごとの成果を発表する際にも便利です。
システム開発のポイント
講義の流れを想定し、任意のタイミングで講師が「シーン」の追加をしたり、使用する「スタンプ」を追加できるような仕組みを実装しました。
「シーン」の切り替えにより、同じ場所で災害発生箇所が増えていったり、別の場所に切り替わったりする場合に対応しました。また、最初から何シーンあるかを見せずに一つずつ増やしていきたいという要望を受け、「次をロード」ボタンでの制御を実装しました。
「シーン」の切り替え時には、背景が切り替わるだけでなく、切り替え前の描画データを引き継げる仕様とし、ひと続きの作業として図の作成を行えるようにいたしました。
複数のスタンプのセットを「パッケージ」としてまとめ、任意のタイミングでスタンプパッケージを追加できる仕組みとすることで、災害発生現場に増援が来ることを表現したい場合に対応しました。
描画については、配置した図形の色や大きさ、重なり順などを細かく編集できる機能を実装し、自由度の高いシミュレーション図の作成を可能としました。
作成した図は画像として書き出してグループワークの成果を保存しておくことを可能としました。講師が講義後に振り返ったり、別の講義で参考として受講者へ見せたりする際に活用できます。
「表示切替」欄では、他のグループがログインしているか、編集モードかどうかを確認することができます。一定時間ごとに同期し、同時に描画データの自動保存を実行するように設計いたしました。
UI/UX設計について
本アプリケーションは使用する端末の画面サイズが固定であるため、画面スクロールをせずにマウスクリックだけですべての操作が完了できるような設計といたしました。〈工夫した主なポイント〉
- スタンプは数が多くなることもあるため、カーソルボタンによる横スクロールで表示を切り替えられるようにいたしました。
- スタンプの使用可能回数と何番目のパッケージかを見分けるため、使用可能回数は右下に数字で表示し、何個目のパッケージかは左上のドット表示で区別できるようにいたしました。
- 「スタンプパッケージ」や「メニュー」のウインドウが描画領域に重なってしまうため、ウィンドウのタイトルバーをドラッグによって移動できるようにし、描画作業を妨げないようにいたしました。
- 「表示切替」の次の同期と自動保存までの時間をタイマーとして表示しました。
クライアント：新潟大学医学部医学科 様
新潟大学医学部では、度重なる震災の経験から「災害医療教育センター」という組織を設立し、職域を超えて組織横断的な災害医療を実践することができる教育を実施し、実災害時に活躍できる次世代の災害医療人材の養成を行っています。
この度、災害医療を学ぶ講義にて使用するグループワーク用のWebアプリケーションを制作させていただきました。