モーダルシフトを楽しく学ぶゲーム

概要

すごろくゲームで楽しみながら、配送の環境問題を考えることのできるゲーム。

サイコロを振ってますを進め、その後に配送チャレンジをしてターンを終了する。 配送チャレンジでは、選ぶルートによってCO2排出量が変わるので、できるだけ少ない排出量で配送をする。

コンセプト

物流の「環境負荷」を直感的に理解する ユーザーが地図上の拠点をクリックしていくだけで、複雑な計算を意識することなく、選択したルートが環境に与える影響を数値で把握できます。物流やサプライチェーンにおける最適なルート選定や、環境負荷の意識向上を目的としている

処理フロー

拠点の表示 (Map) ↓ ユーザーによるルート選択 (Click) ↓ 距離・CO₂排出量などの計算・表示 (UI)

技術詳細

1. 地図描画・UI

MapLibre GL JS と Next.js を用いて、インタラクティブな地図UIを構築。

・初期表示: アプリケーション読み込み時、全拠点を地図上にアイコン（工場アイコン）で表示。

・ルート作成: ユーザーが拠点のアイコンをクリックすると、その地点が中継地点（relayMarkers）として追加。

・ルート可視化: 中継地点が2つ以上になると、それらを結ぶ線（LineString）が地図上にリアルタイムで描画。

・情報パネル: 画面右上に、計算結果を表示するためのUIが常に表示。

2.拠点データ

GeoJSON という標準的な地図データフォーマットを採用している。各データは Point ジオメトリを持ち、経度と緯度の座標情報を持っている。

こだわりポイント

• 港を使った移動は、現実に取引されていたルートのみ使えるようにした
• 陸地の移動は、直線距離でなく実際の道路を走った際の距離を測るようにした
• マップとゲームシステムの連携をGithub Copilotを活用して統合した