もう誰も迷わない_優しいアプリ_team5_NOT_A_HOTEL.pdf

Transcript

1. sys-hackathon-fy25-team-5
2. もう誰も迷わない、優しいアプリ
3. チーム紹介 Takagi Data / Lead Nunokawa Map / UI Sano Frontend Yaguchi microCMS / Backend Kamikawa Frontend Alyssa Frontend / Illustration
4. 初めて⾏ったみんなが思う 「⻘島のLDKってどこ？」
5. 実現したいこと • 予約した後に、プレイス内や周辺情報が分かるマップが 閲覧できる • マップのピンをタップすると各情報にアクセスできる
6. UIイメージ 予約完了後に予約したハウスの エリアマップが表⽰される
7. 構成要素 × × ⼒作作るも、 今回は時間切れ😭
8. microCMS • エンジニア以外でもカンタンにピン情報を追 加できるようにmicroCMSを採用 • ピン情報📍を登録 ◦ タイトル ◦ サムネイル画像 ◦ 位置情報（緯度・経度） etc.. • microCMSが提供するAPI(*) でフロントエンド データ連携 * https://document.microcms.io/content-api/introduction
9. Frontend • Google Mapsの上に画像を重ねて表示する(*1) ◦ 透過PNGの施設画像を、背景のマップと馴 染ませるように配置 • Google Mapsのstyle(*2) をカスタマイズする • microCMSのデータ受取→マーカー表示 • マーカーのクリックで詳細表示 • ズームインのアニメーション (*1) https://developers.google.com/maps/documentation/javascript/examples/groundoverlay-simple (*2) https://developers.google.com/maps/documentation/javascript/json-styling-overview?hl=ja
10. demo
11. END