Hospitality Halloweenへ
お越しいただき、ありがとうございました!

来年度の実施も行う予定なので、またお越しください!

このページは、今回のHalloween用に広大なキャンパスを持つ我が文理佐藤学園内での移動をもっとスムーズにもっとユーザーインターアクトが可能となるように、
本校、西武学園文理高等学校在学生

2-AC1 熊谷和晃総システム設計・開発を単独で担当致しました。

MAPはこちらから

※月間アクセス数によっては、地図が表示されないことがあります。 ご了承ください。


システム概要

「マップも企画もポップに表示!迷わず校内探検、スマホが道案内!」


本システムは、ユーザーの現在地をリアルタイムで把握し、校内の位置情報を正確かつスムーズに提供します。校舎や施設(ポリゴン)をタップすることで、 各エリアで開催されている企画の一覧が瞬時に表示され、さらに企画を選択すると、詳細な内容にすぐアクセスできます。 出店情報についても、地図のズームレベルに応じて動的に出店名が表示され、選択すると視覚的に強調される黄色のポップアップが出店名や詳細情報を一括表示します。 さらに、各企画の待ち時間データがデータベースと自動的に同期し、リアルタイムで反映されるため 、ユーザーは待ち時間の把握や行動の計画を効率的に行えます。 2日間の利用回数は両日程ともに大変高い利用率を記録しており、ユーザーからも好評を得ています。 今後の学校イベントでの導入を視野に、さらなる機能拡充とユーザー体験の向上を目指してまいります。
開発担当 熊谷和晃


開発の流れ

本システムは、合計3216行のコードで開発されました。

まず、学校の地図をOSPで修正し、その後Maptilerに反映させました。次に、Maptilerを使用して全校舎と出店のポリゴンを制作し、GeoJSONファイルを生成しました。これに基づき、JavaScriptの「new ol.layer.Vector」を使用して地図にポリゴンレイヤーを追加し、地図の中心位置やクリック時のアクションを開発しました。

さらに、ポリゴンが押された際に一覧を表示するために、施設のデータをJavaScriptファイルで制作し、すべての施設で行われる企画内容、詳細を公式HPから情報を集めループ関数を組み込みました。ユーザーがポリゴンを選択した際に詳細情報を表示するためのパス設定も行い、
リアルタイムでデータベースにアップデートされた待ち時間情報を反映する関数を追加しました。

加えて、ユーザビリティを向上させるために、各機能のテストを繰り返し実施しました。これにより、システムの利便性が向上し、実際のイベントでの利用を見据えた改良が施されています。

今回のプロジェクトでは、未経験の外部APIサービスや新しい技術を数多く活用し、限られた2週間という短期間で開発を行うという大きな挑戦に挑みましたが、 新たな知識を吸収し、技術を確実に習得しながらプロジェクトを無事に完遂することができました。 また、イベント中に予期せぬシステム障害が発生しましたが、冷静に状況を分析して原因を究明し、柔軟な対応によって迅速な復旧を実現することができ、非常に貴重な経験となりました。
今後も利用者のフィードバックを基に、さらなる機能追加や改善を行っていく予定です。