コンビニトイレマップ

コンビニのトイレが利用可能かわかります！！！

デモ以外のアピールポイント

チーム全体 AWSを全員ほとんど触ったことが無い中でも、なるべく機能をふんだんに使うようにして成長できるようにしました。

FE 自作のルーターとUIライブラリを使用しました。 初めはNext.jsで描いてたのですが、1回の本番ビルドに7, 8分かかるのでvite+に移行しました。結果、7, 8秒まで縮みました。

BE 最初バックエンドは３人で、Go言語を用いて開発することに決めましたが、１日目はバックエンド側があいうえおの一人しかおらず、しかもGo言語での開発経験はありませんでした。あさひさんにバックにも協力してもらうことにして頑張ってなんとか最低限は動くものが作れました！！！ ２日目は木村さんがきてくれて一気に進みました。

成長 慣れているもののみに固執せずAWSのさまざまな技術を利用するように努力したため、成長度は誰にも負けないと思います！！

役割分担

asahi→フロントエンド、設計書 あいうえお → バックエンド、Topa'z ふぇふぇ→フロントエンド 木村　帆天(きむら　ほたか)→バックエンド

課題

「外出先でトイレに行きたい。でもどこにあるかわからない」

コンビニにトイレがあるかは入ってみないとわからない 店員への声掛けが必要かも事前にわからない Google Maps ではトイレの有無は検索できない

解決策

みんなでコンビニのトイレ情報を共有するマップアプリ

現在地周辺のコンビニを自動検索 トイレの有無・タイプ（男女共用/男女別）・声掛け要否をひと目で確認 ユーザーが情報を投稿して地図を育てる

デモ

実際のアプリを操作します。

地図上のマーカーをタップ → トイレ情報を確認 未登録のコンビニをタップ → その場でトイレ情報を登録 Google OAuth でワンタップログイン

URL: https://d337uiklw4m572.cloudfront.net/

作成までの流れ

①キックオフで次回ミーティングの日程とミーティングまでにいくつか案を考えておくことを決めた。 ②ミーティングでGoogle documentを用いて以下のことを決めた。 a. 案 ・他のチームと被らないように決めた。 ・誰を対象にするかから考える、どの技術を使いたいかから考えるなど、いろいろな視点から考案した。 ・コンビニ側としては、トイレが使われるのが嫌だと思うのでユーザーが登録するようにした。

b. スキーマファースト

c. 使用言語

d. 役割分担

e. 機能の優先順位

③ハッカソン当日までに設計を考えておく。

④ 1日目から設計書に沿って開発開始。

アーキテクチャ

技術スタック

フロントエンド

Vite+（ツールチェーン） Vite / Rolldown / Vitest / Oxlint を統合。ビルド 400ms 以下

Orbit Router（ルーター） ディレクトリベースルーティング。Next.js ライクな DX を Vite 上で実現

kasumi/ui（UI） shadcn/ui ベースの自作コンポーネント。プロジェクトに最適化

MapLibre GL JS + Amazon Location Service（地図） OSS 地図ライブラリ + AWS マネージドタイル。Google Maps API 不要

Amplify Auth（認証） Cognito SDK を直接利用。メール+パスワード & Google OAuth

Orval（API クライアント） OpenAPI 定義から TypeScript + React Query コードを自動生成

バックエンド

Go（言語） Lambda コールドスタートが速い。ARM64 で更にコスト削減

oapi-codegen（コード生成） OpenAPI → Go。フロントと同じスキーマから生成して型安全

DynamoDB（DB） サーバーレス。Geohash + GSI で位置検索

Rekognition AIによるトイレ判定に使用。トイレである確率を出し、70%以上なら認める。

インフラ

S3 + CloudFront（ホスティング） Amplify Hosting より高速（デプロイ 6 秒）。直接制御可能。 ユーザーが登録した画像の保存。

Cognito（認証） マネージド認証。Google OAuth もコンソール設定のみ

Amazon Location Service（地図） AWS 内完結。Cognito Identity Pool でゲストアクセスも可能

技術的なこだわり

OpenAPI 駆動開発

openapi.yml（単一の定義）
    ├── Orval → TypeScript + React Query（フロント）
    └── oapi-codegen → Go ハンドラ（バックエンド）

API 定義を 1 つ書けばフロント・バックエンド両方のコードが生成される 型の不整合が起きない

爆速デプロイ

pnpm deploy  # build + S3 sync + CloudFront invalidation

Vite+ ビルド: 400ms S3 同期 + キャッシュ破棄: 5 秒 合計 6 秒でプロダクション反映

ゲストアクセス

未ログインでも地図閲覧・コンビニ検索が可能 Cognito Identity Pool の Unauthenticated Role で Location Service にアクセス 投稿だけログインが必要 → 閲覧のハードルをゼロに

##　今後の展望 数回目以降はトイレの存在を投稿した人のみ検索できるようにする。(投稿のモチベのため)