ID:75076さん

# プロジェクト概要 小さな子供を連れて清潔なトイレを探す際に困った経験から、同じ悩みを抱える人々のために「Quick Clean Restroom Map」を開発しました。このアプリは、ユーザーが清潔なトイレの情報を共有し、迅速に最適なトイレを見つけられるようにすることを目的としています。具体的には、ユーザーが自分の現在地から最寄りの清潔なトイレを迅速に特定し、他のユーザーが共有した評価をもとに、どのトイレが最も清潔かを判断できるように設計されています。 # チーム情報 個人プロジェクト # URL [https://quickcleanrestrooms.com/](https://quickcleanrestrooms.com/) # Githubリポジトリ [https://github.com/JZ8xNeXY/quickcleanrestroommap](https://github.com/JZ8xNeXY/quickcleanrestroommap) # アプリ紹介記事 Qiitaに記載 [https://qiita.com/JZ8xNeXY/items/b51ffd9f10986861c83b](https://qiita.com/JZ8xNeXY/items/b51ffd9f10986861c83b) [https://qiita.com/JZ8xNeXY/items/7a386beda7b5bd61d011](https://qiita.com/JZ8xNeXY/items/7a386beda7b5bd61d011) # 開発・実装内容1: Google Mapsを活用したオリジナルマップの作成 - **概要** Google Maps APIを使用して、ユーザーが現在地から最寄りの清潔なトイレを迅速に見つけられるオリジナルマップを作成しました。この機能は、ユーザーの位置情報を取得し、最適なルートを提供することで、移動時間を短縮し、緊急時でも迅速に対応できるようにします。 - **課題** ユーザーの現在地から目的地への正確で効率的なルート案内が必要でした。特に、トイレを探す際には時間が重要な要素であり、間違ったルート案内や不正確な位置情報はユーザーにとって大きなストレスとなります。 - **使用した技術** Google Maps API, Directions API - **打ち手** 独自のアイコンをトイレの位置とユーザーの現在地に表示し、視覚的に分かりやすいマップを提供しました。Directions APIを使用して、ユーザーが現在地から目的のトイレまでの最適なルートをリアルタイムで表示することで、迅速な移動をサポートしました。また、スマートフォンではGoogle Mapsアプリが自動で開くように設定することで、アプリ間のシームレスな連携を実現しました。 # 開発・実装内容2: OpenAI APIを活用したトイレの清潔度評価 - **概要** ユーザーが投稿するトイレの写真やコメントから、OpenAI APIを利用してトイレの清潔度を自動的に評価するシステムを構築しました。このシステムは、投稿内容を解析し、トイレの清潔度をスコア化することで、他のユーザーが利用する際の参考にできるようにしています。 - **課題** ユーザー数が少ないため、投稿される評価データの信頼性が低く、トイレの清潔度を客観的に評価することが難しかった。 - **使用した技術** OpenAI GPT-4, Omni, Base64 - **打ち手** ユーザーが投稿する写真をBase64形式でテキスト化し、そのデータをOpenAI APIに送信して解析を行いました。この方法により、コストを抑えつつ、AIによる高精度かつ迅速な清潔度評価を実現しました。また、評価結果をスコアとしてユーザーにフィードバックすることで、他のユーザーが利用する際の参考情報として提供しました。これにより、ユーザーが自分の判断で清潔なトイレを選べるようになりました。 # 開発・実装内容3: 写真の緯度経度を活用したアップロード機能の追加 - **概要** スマートフォンのGPS機能を利用して、ユーザーがトイレの写真を撮影する際に、写真に埋め込まれた緯度経度情報を活用して、マップ上にトイレのアイコンを自動的に追加する機能を実装しました。この機能により、ユーザーが撮影した写真の位置情報を簡単にマップに反映できるようになりました。 - **課題** PC上では、右クリックを使用して「ここを登録」とすることで緯度経度情報を取得し、アイコンを確実に追加することができましたが、スマートフォンでは右クリックが使用できないため、長押しで対応しましたが、この方法では使い勝手が悪く、ユーザー体験が低下していました。 - **使用した技術** Exif情報, JavaScript - **打ち手** 写真に埋め込まれた緯度経度情報を取得するために、Exif情報をJavaScriptで解析する方法を採用しました。これにより、スマートフォン上でも右クリックを使わずに、写真をアップロードするだけで自動的に位置情報がマップに反映されるようにしました。これにより、ユーザーは外出先でトイレの写真を撮影し、その場ですぐにアップロードして情報を共有できるようになり、全体的なユーザー体験が向上しました。 # 開発・実装内容4: Supabaseの活用によるコスト最適化 - **概要** フロントエンドはNext.js (React TypeScript)、バックエンドはRails API、インフラはECS、S3、RDS、ALBを使用して開発していましたが、個人プロジェクトとしては高コストで運用が難しかったため、インフラのコスト最適化を目指しました。 - **課題** AWSを利用したインフラ構成は、個人プロジェクトには過剰な機能とコストがかかりすぎており、特に維持費が大きな負担となっていました。このままでは、プロジェクトを継続的に運用することが難しいと判断しました。 - **使用した技術** Supabase - **打ち手** バックエンドのAPIとインフラをSupabaseに置き換えることで、コストを大幅に削減しました。Supabaseは、Firebaseと同様のリアルタイムデータベース機能や認証機能を提供しており、これにより高コストなAWSの代替として、ほぼ同等の機能を低コストで提供できるようになりました。これにより、アプリのパフォーマンスを維持しながらも、プロジェクトの持続可能性を確保しました。また、Supabaseを採用することで、インフラ管理の手間が減り、開発に専念できる環境を整えました。

# プロジェクト概要 「都知事杯 Open Data Hackathon (2024)」において、三鷹市から以下の課題が示されました。 熱中症の危険度やクーリングシェルターの情報発信に関する課題です。気候変動により、熱中症のリスクが年々深刻化しており、位置情報や過去の気象情報、救急搬送に関するオープンデータを活用して、リアルタイムに危険情報を発信する仕組みや、年齢等による危険度判定を行うツールが求められています。また、区市町村では、危険な暑さから避難できる場所をクーリングシェルター（指定暑熱避難施設）として指定し、熱中症特別警戒アラートの発令期間中、一般に開放しています。これらのクーリングシェルターや、類似の暑さを避けられる施設の情報、施設ごとのウォーターサーバー等の設備情報、混雑度合いなど、利用者に役立つ情報を一元的に発信する仕組みを構築することが本プロジェクトの目的です。この仕組みにより、利用者は危険な暑さに対する適切な対応を迅速に行うことができ、安全を確保するための重要なツールとなります。 # チーム情報 個人プロジェクト # URL [https://coolingspotsfinder.com/](https://coolingspotsfinder.com/) # Github リポジトリ [https://github.com/JZ8xNeXY/coolmap](https://github.com/JZ8xNeXY/coolmap) # 開発・実装内容1: Google Mapsを活用したオリジナルマップの作成 - **概要** Google Maps APIを使用して、ユーザーが現在地から最寄りの休憩所やウォーターサーバーを迅速に見つけられるオリジナルマップを作成しました。このマップは、三鷹市民が熱中症リスクを回避するために、近くのクーリングシェルターや他の避難施設へのアクセスを容易にすることを目的としています。 - **課題** ユーザーの現在地から最寄りの休憩所またはウォーターサーバーへの正確で迅速なルート案内が求められました。特に、ユーザーが危険な暑さから迅速に避難できるよう、地図上の情報が正確であることが重要です。 - **使用した技術** Google Maps API, Directions API - **打ち手** Google Maps APIをカスタマイズし、休憩所やウォーターサーバーの位置を示す独自アイコンを地図上に表示しました。さらに、Directions APIを使用して、ユーザーの現在地から目的の施設までの最適なルートをリアルタイムで提供する機能を実装しました。これにより、ユーザーはスマートフォンからGoogle Mapsアプリを自動的に開き、迅速に目的地へと誘導される仕組みを構築しました。 # 開発・実装内容2: サーバーサイドから環境省APIへリクエスト - **概要** 環境省APIを通じて提供される熱中症警戒情報や気象データを活用し、リアルタイムでユーザーに危険度を知らせるシステムを構築しました。 - **課題** クライアントサイドから直接環境省APIにアクセスしようとした際にCORSエラーが発生しました。これは、環境省APIがクライアントサイドからの直接リクエストを許可しておらず、またデータがCSVファイル形式で提供されているため、リアルタイムでのデータ取得が困難だったためです。 - **使用した技術** Next.jsのサーバーサイド機能（API Routes）を使用して、環境省APIへのリクエストを管理。 - **打ち手** クライアントサイドで発生したCORSエラーを回避するために、Next.jsの`pages/api`フォルダにサーバーサイド用のAPIリクエスト処理を実装しました。このアプローチにより、クライアントサイドからのリクエストはまずサーバーサイドに送信され、そこから環境省APIにリクエストが転送されるようにしました。これにより、CORSエラーを回避し、必要なデータを安全かつ効率的に取得できるようにしました。また、CSV形式のデータをサーバー側で解析し、必要な情報を抽出してクライアントに返す処理を実装することで、ユーザーがリアルタイムで更新された情報を取得できるようにしました。