Nagame 眺め — Japan Travel Companion
เว็บแอปเที่ยวญี่ปุ่นแบบ "เห็นหน้างานจริง" — เลือกเมืองแล้วเช็คอากาศ ฝุ่น กล้องสด อีเวนต์
แผ่นดินไหว เรทเงิน และไอเดียกิน-เที่ยว-นอน ครบในหน้าเดียว พร้อมผู้ช่วย AI
Production: https://nagame.vercel.app · Repo: https://github.com/Kokonattp/nagame
ฟีเจอร์หลัก
| ฟีเจอร์ | รายละเอียด |
|---|
| 🏙️ 41 เมืองทั่วญี่ปุ่น | ข้อมูล config เต็มรูปแบบ + ค้นหาเมืองอื่นนอกลิสต์ได้ผ่าน geocoding |
| 🌤️ อากาศสด | อุณหภูมิ, feels like, สูงสุด/ต่ำสุด, โอกาสฝน, ลม (Open-Meteo) |
| 😮💨 คุณภาพอากาศ | AQI พร้อมป้ายระดับภาษาไทย (OpenAQ / OpenWeather) |
| 📹 กล้องสด | กล้อง YouTube คัดมือ 19 ตัวใน 12 เมืองหลัก + Windy อีก 12 ตัว/เมือง เล่นสดในแอป สลับวิวจากแถบ thumbnail หรือแผนที่ (Leaflet + OSM) |
| 🗾 เมืองใกล้เคียง | เรียงตามระยะทางจริง (haversine) พร้อมรูปและระยะ กม. |
| 🍜 ไอเดียทริป 5 หมวด | ไปไหนดี / กินอะไรดี / นอนไหนดี / ของฝาก & คาเฟ่ / กิจกรรมน่าทำ — เมืองหลักคัดมือ เมืองรองมีชุด fallback พร้อมรูปจริงจาก Wikipedia |
| 🚨 แผ่นดินไหว | เหตุการณ์รอบ 72 ชม. รัศมี 350 กม. + เหตุรุนแรงทั่วประเทศ พร้อมป้ายเตือนสึนามิ (P2PQuake / ข้อมูล JMA) |
| ⛑️ เตือนภัยอากาศ | ประกาศ JMA รายภูมิภาค (พายุ/ฝนหนัก/หิมะ/ขั้นวิกฤต) แปลไทย 3 ระดับ + แบนเนอร์แดงเมื่อรุนแรง refresh ทุก 10 นาที |
| 🚉 สายรถจากสถานี | เส้นทางคัดมือ 11 เมืองหลักบนแผนที่ กดไฮไลต์สาย + ตั๋ว pass แนะนำ + ลิงก์ Google Maps transit |
| 🚗 ขับรถ & mapcode | จุดขับรถ 8 เมือง (Hokkaido, Fuji, Alps) พร้อม mapcode กด copy ใส่ car navi หรือเบอร์โทรค้นใน navi + กฎจอดรถสำคัญ เช่น โควตารถ Shirakawa-go |
| 🌸 Season radar | ช่วงพีคซากุระ/ใบไม้แดง/เทศกาล 20 เมือง พร้อมป้าย "กำลังพีค / อีก X วัน" + แบนเนอร์เตือนช่วง Golden Week, Obon, ปีใหม่ |
| 🗺️ POI อัตโนมัติ | จุดน่าสนใจรอบเมืองรัศมี 10 กม. จาก Wikipedia GeoSearch — ครอบทุกเมืองรวมเมืองนอกลิสต์ ไม่ต้องคัดมือ |
| 💴 เรทเงินเยน-บาท | 100 / 1,000 / 10,000 เยนเป็นบาท อัปเดตทุก 6 ชม. |
| 🤖 AI Insight | แชทถามแผนเที่ยวอิง context ของหน้า (Gemini Flash-Lite หรือ OpenAI) + สรุปสั้นรายเมือง |
| 📰 ข่าว/อีเวนต์ | RSS feed รายเมือง |
| 📱 PWA | ติดตั้งเป็นแอปได้ทั้ง Android / iOS / Desktop |
| 🔗 OG Image | ภาพแชร์สไตล์ญี่ปุ่น (眺め + พระอาทิตย์แดง + เงาภูเขา) สร้างอัตโนมัติรายเมือง |
เริ่มพัฒนา
npm install
npm run dev # http://localhost:3000
npm run build # ตรวจ type + build production
Environment Variables (.env.local หรือ Vercel)
OPENWEATHER_API_KEY= # อากาศสำรอง (มี free tier)
OPENAQ_API_KEY= # คุณภาพอากาศ
WINDY_WEBCAMS_API_KEY= # กล้อง Windy รายเมือง
ANTHROPIC_API_KEY= # Claude Haiku 4.5 — ตัวเลือกแรกของแชท (กร๊วก voice ดีสุด)
AI_API_KEY= # OpenAI (gpt-4o-mini) — fallback แชท
GEMINI_API_KEY= # Gemini 2.5 Flash-Lite — fallback แชท + AI summary
ไม่มี key ตัวไหนแอปก็ยังทำงาน: อากาศใช้ Open-Meteo (ฟรีไม่ใช้ key), กล้องใช้ลิสต์ YouTube
คัดมือ, AI ตอบด้วยกฎสำเร็จรูปภาษาไทย
สถาปัตยกรรมย่อ
app/
page.tsx # Landing: ค้นหา + การ์ด 41 เมืองพร้อมรูป (ISR 1 วัน)
city/[slug]/page.tsx # หน้าเมือง: ดึงทุก signal แบบ parallel (ISR 30 นาที)
city/[slug]/opengraph-image # OG รายเมือง (ImageResponse + Noto Serif JP subset)
api/assistant # แชท AI พร้อมเกราะกันคอสต์
api/{weather,aqi,webcams,events,geocode,summary}
manifest.ts # PWA manifest
lib/
cities/city-configs.ts # ข้อมูล 41 เมือง: พิกัด, livecams (YouTube), คำแนะนำ 5 หมวด
cities/travel-meta.ts # intro/mood, เมืองใกล้เคียง, fallback recommendations
services/ # weather, aqi, webcams, quakes, fx, events, geocode,
# ai-summary, city-images (Wikipedia)
components/
travel-dashboard.tsx # หน้าเมืองทั้งหมด (client)
city-search.tsx # ช่องค้นหา + suggestion
webcam-map.tsx # แผนที่เลือกกล้อง (Leaflet, dynamic import)
การไหลของการค้นหาเมือง
ช่องค้นหา → /api/geocode → ลำดับ: (1) 41 เมืองใน config → (2) seed list →
(3) Nominatim (OSM) สำหรับเมืองใดก็ได้ในญี่ปุ่น → redirect ไป /city/[slug]
ทุก signal ดึงตามพิกัดจริงของเมืองนั้น
ระบบรูปภาพ (Wikipedia)
- รูปเมือง/สถานที่ดึงจาก Wikipedia pageimage API แบบ batch (≤50 ชื่อ/คำขอ)
ผ่านคิวกลางเว้นจังหวะ 300ms + retry เมื่อโดน 429 (Wikipedia ลิมิต ~10 req รัว ๆ)
- ชื่อที่แมตช์ต้องตรง ≥ 50% ของคำสำคัญ ไม่งั้นไม่แสดงรูป (กันรูปผิดสถานที่)
- รายการ fallback ที่เป็นชื่อสมมุติติดธง
generic — ไม่ค้นรูปเลย
- ผล fail ชั่วคราวไม่ถูก cache → หน้าเติมรูปเองตอน ISR revalidate
เกราะกันคอสต์ AI (/api/assistant)
- จำกัดคำถาม 300 ตัวอักษร (client + server)
- Rate limit ต่อ IP: เรียกโมเดล 6 ครั้ง/นาที — เกินแล้วตอบกฎ fallback ฟรี
- Cache คำตอบ 15 นาที ต่อ (เมือง + คำถาม + ช่วงโอกาสฝน) — ปุ่ม quick prompt ชนโมเดลแค่ครั้งแรก
- ตัด context ก่อนส่ง: อีเวนต์ 3 รายการ, คำแนะนำ 4 รายการ/หมวด, note ตัดที่ 120 ตัวอักษร
- AI summary: cache 45 นาที/เมือง, จำกัด 120 token
ประเมินคอสต์รวม: ~$0–2/เดือน (ทุก API ภายนอกฟรี, AI โดน cache เกือบหมด,
Vercel Hobby ฟรี) — จุดจ่ายจริงมีแค่โดเมน (~$9–11/ปี)
บทเรียน/การตัดสินใจที่บันทึกไว้
| เรื่อง | การตัดสินใจ |
|---|
Custom fr grid (grid-cols-[1.45fr_0.95fr]) | ต้องครอบ minmax(0,…) เสมอ ไม่งั้น min-content ของลูก (เช่น แถบ thumbnail) ระเบิดคอลัมน์จน hero เหลือเส้นเดียว |
| แถบเลื่อนแนวนอน | ใช้ w-0 min-w-full กัน intrinsic width ดันการ์ด — พฤติกรรม scroll container ต่างกันตาม Chrome เวอร์ชัน |
| กัน overflow ทั้งหน้า | overflow-x-clip ที่ <main> (ใช้ clip ไม่ใช่ hidden เพื่อไม่ทำ sticky พัง) |
| รูป hero เมือง | ห้าม hardcode URL จาก Wikimedia (ไฟล์โดนลบ/เปลี่ยนชื่อได้) — ดึงผ่าน API แล้ว cache แทน |
| Windy webcams | ส่วนใหญ่เป็นกล้องเฝ้าระดับน้ำ มุมไม่สวย → คัด YouTube live (ตรวจ oEmbed ว่ายังออนไลน์) ขึ้นก่อนเสมอ |
| Windy embed | ฝัง iframe ได้ (ไม่มี X-Frame-Options) — อย่าแบนทั้งโดเมน |
| ฟอนต์ใน OG image | satori ไม่รองรับไทย/ญี่ปุ่นโดย default — โหลด Noto Serif JP subset จาก Google Fonts ด้วย UA Mozilla/4.0 เพื่อให้ได้ TTF (woff2 ใช้ไม่ได้) |
| PWA | ใส่แค่ manifest ไม่ใส่ service worker — กัน cache ค้าง ผู้ใช้ได้เวอร์ชันใหม่เสมอ |
| ตรวจ UI | ทุกการแก้ layout ให้ถ่าย screenshot จริงด้วย Chrome headless (มี puppeteer-core เป็น devDependency) ที่ 390/768/1280/1905px ก่อน push |
เช็คลิสต์หลัง deploy / สิ่งที่ค่อยทำต่อ
Data Sources (ฟรีทั้งหมด)
Open-Meteo · OpenAQ ·
Windy Webcams · Wikipedia/Wikimedia ·
Nominatim (OSM) · P2PQuake (JMA) ·
open.er-api.com · YouTube Live embeds · Google Fonts
