Smoking Spot Finderの設計・技術選定・コミット履歴を解説

01 / 概要

プロジェクトの概要と目的

静岡駅 喫煙所検索プロトタイプ /smoking にアクセスすると、静岡駅周辺半径1000m以内のコンビニ・飲食店をGoogle Places APIで検索し、口コミをClaudeで解析して喫煙可否を地図上に表示します。ダミーデータは使用せず、毎回APIから直接取得します。 事前準備 1. .env.local.example を .env.local にコピーし、キーを設定する。 GOOGLE MAPS API KEY / NEXT PUBLIC GOOGLE MAPS API KEY : Google Cloud で Places API と Maps JavaScript API を有効化して取得。 NEXT PUBLIC はブラウザに露出するため、HTTPリファラー制限を設定すること。 ANTHROPIC API KEY : Anthropic Consoleで発行したAPIキー。 2. npm install （インストール済みであれば不要）。 3. npm run dev で起動し、 http://localhost:3000/smoking を開く。 実装箇所 app/api/smoking spots/route.ts : Nearby Search → Place Details（口コミ取得）→ Claude（口コミから喫煙可否をツール呼び出しで抽出）の順に処理し、結果をJSONで返すAPI Route。 app/smoking/page.tsx : Google Maps JS APIをスクリプトタグで読み込み、マーカー色分け（緑=紙タバコOK / 青=電子タバコ限定 / 黄=コンビニ店外灰皿あり）とサイドバー一覧を表示するクライアントコンポーネント。 便利マップ（ve

本記事は公開されている構成と master ブランチのコミットを一次情報として整理しています。

02 / 使用技術

使用技術と役割

03 / 設計

構成から読み解く設計

主な項目は です。

• 単一アプリケーション構成
• 機能単位の責務分割

04 / 変更履歴

コミットから見る実装の変遷

以下は既定ブランチの直近の変更です。リンク先で原文と一次情報を確認できます。

1. 2026/08/27
   /smoking のタイトルと説明を、そのページのものにするab224f0をGitHubで確認 ↗
2. 2026/08/27
   重複ドメインを1本に寄せ、トップページの中身をHTMLに出す43aa9b6をGitHubで確認 ↗
3. 2026/08/20
   全テーブルで行レベルセキュリティを有効にする77bb381をGitHubで確認 ↗
4. 2026/08/17
   トップページに構造化データ(JSON-LD)を追加する5509e4aをGitHubで確認 ↗
5. 2026/08/15
   支援・購入への導線を追加するc0ccf4dをGitHubで確認 ↗
6. 2026/08/10
   機能・コンテンツを追加d1ae3b1をGitHubで確認 ↗
7. 2026/08/10
   機能・コンテンツを追加e016fc7をGitHubで確認 ↗
8. 2026/08/10
   機能・コンテンツを追加fffcd60をGitHubで確認 ↗
9. 2026/08/10
   機能・コンテンツを追加59b6d5fをGitHubで確認 ↗
10. 2026/08/10
    機能・コンテンツを追加6cbd386をGitHubで確認 ↗
11. 2026/08/09
    機能・コンテンツを追加2084194をGitHubで確認 ↗
12. 2026/08/08
    機能・コンテンツを追加06837b8をGitHubで確認 ↗

05 / 学び

このプロジェクトから得られる学び

• 変更を小さく記録する

  コミット単位で目的を分けると、実装の意図を追跡しやすくなります。

• 構成と技術選定を結び付ける

  TypeScriptの採用理由と各ディレクトリの責務を説明できることが保守性につながります。

• READMEと実装を同時に育てる

  説明とコードを近い状態に保つことが、再利用と振り返りを助けます。

06 / よくある質問

よくある質問