使用技術

  • Claude API
  • Google Maps API
  • Next.js
  • NextAuth.js
  • PostgreSQL
  • React
  • TypeScript
  • Vercel AI SDK

デモ

URL
https://wandering-log-jp.vercel.app
デモアカウント
メールアドレス: demo@example.com
パスワード: demo1234
データを数件登録してあります。

概要

訪問先での記録を残すためのアプリです。Google Maps API を使って地図上で場所を指定し、その場所の記録を残せます。

場所の情報は Google から取得して使えますが、Google に情報がない場所でも、自分で情報を入力して記録できます。

当初はテレビ番組をイメージして開発を始めたため、それにちなんだアプリ名になっていますが、地域や用途は問わず、営業活動での訪問記録や、旅行の日記代わりなど、さまざまな場面で使えます。

英語版のデモ動画: https://vimeo.com/1202006446/8ded730eec

スクリーンショット

地図に訪問先のマーカーが並んだ画面
パソコンで訪問先を閲覧(地図とマーカー)
訪問先の情報、訪問履歴、メモの画面を並べたところ
パソコンで訪問先を閲覧(訪問履歴とメモ)
スマホの幅で訪問先を登録する画面
スマホで新規訪問先を登録

主な機能

  • ユーザー登録、ログイン、ログアウト
  • 訪問先の登録(位置、名称、コメント)
  • Google の情報の取得と保存(名称、住所、カテゴリなど)
  • 訪問履歴の表示と、訪問日ごとのメモ
  • 場所名による検索
  • AI(Claude API)による訪問場所の説明の自動生成
  • 画面の移動(現在地、登録した Home 地点、マーカーを画面中央へ)
  • 情報ウィンドウの操作(移動、同じ訪問先どうしの整列、最前面への表示)

工夫した点

  • Claude API を使ったストリーミングのチャットを実装しました。Vercel AI SDK を使い、送る履歴は直近 5 件までに絞っています。
  • 地図上のマーカーと情報ウィンドウの動きを工夫し、使いやすさにこだわりました。特に情報ウィンドウは重なり制御とウィンドウのグループ管理を行いながら、なめらかな動きを実現しました。

制作の経緯

2026 年 3〜5 月に、企画・設計・実装・デプロイまで一人で開発しました。