こんにちは、実はダーツも好きな綾祢です！
今回はVibe-Codingシリーズ第3弾として作成したWebアプリ、「全世界ダーツの旅 | あなたの名前で世界を旅しよう」を紹介します🎯
日本国内の47都道府県はもちろん、世界各国にも対応したこのアプリ。名前と国名を入力するだけで、どこかにバーチャル旅行できる新しい体験を提供しています！
ちなみに前回のVibe-Coding第2弾はこちら：
👉モテ期、いつ来るの？っていうあなたへ（？）「モテ期予報 💘」をVibe Codingで作ってみた
🌍「全世界ダーツの旅」ってなに？
「全世界ダーツの旅」は、簡単に言えば名前と行きたい国を入力するだけで、世界中のランダムな場所に“ダーツで刺さったかのように”旅に出られるWebアプリです！
選んだ国の中からどこに行くかがその瞬間に決まり、Google Maps上で目的地がズームインしながら表示され、その土地に関する紹介文も自動生成されます。
日本国内の場合、47都道府県すべてに対応しており、さらに関東・中部・近畿は15市町村以上、その他の地域も最低5市以上の詳細なデータが収録されています。
もしかしたらあなたの街が目的地に出るかも！？そんなワクワク感も楽しめます✨
✨こだわりポイントと苦労話
🎯「ダーツっぽさ」をどう再現する？
このアプリで一番こだわったのは、やはり「ダーツっぽさ」。Google Maps APIのズーム機能を使って、ズームレベル5→10と段階的にズームしていくことで、ダーツが刺さる瞬間のような緊張感とワクワク感を演出しました！
さらに、結果情報はフェードインで表示されるなど、ちょっとした演出も工夫しています。絵文字も多用して、見た目も親しみやすくなるようにしました🎉
📍全世界対応でデータ整理が大変！
対応地域はアジアからヨーロッパ、アフリカ、南米、オセアニアまで多岐に渡ります。そのため、地域データを一つ一つ整理するのが大変でした…。
日本についても、47都道府県それぞれに複数の市町村データを用意したので、全体のバランスを取るのもひと苦労💦
でも、結果的に「こんな場所もあるんだ！」と発見できる仕様になったので満足しています。
🛠️ 技術的な話（ちょこっと）
- フロントエンド：HTML, CSS, JavaScript
- バックエンド：PHP
- 地図表示：Google Maps API（ズームアニメーションあり）
- 画像生成：html2canvas
- SNS共有：X.com対応、同じ結果を再表示可能なURL付き
- 広告：Google Adsense
📱ぜひ触ってみてください
スマホからでもしっかり動作します📱
外出先でも、電車の中でも、ちょっとしたスキマ時間にバーチャル旅が楽しめます！
気に入った場所が出てきたら、X.comでシェア！同じ結果を友達に送って、「私ここだったよ！」って盛り上がるのも楽しいです🎉
🎥 動画もあります！アプリの動きが気になる方はこちら👇
✍️まとめ
- 🎲 名前と国名を入力するだけでランダムな旅行先を決定！
- 🗾 日本47都道府県＋世界中の観光地に対応！
- 🔍 Google Mapsのズーム演出でワクワク感アップ！
- 📝 自動紹介文で旅先の魅力がわかる！
- 🔗 X.comシェア機能で友達と旅を共有できる！
さて、次はどんなものを作ろうかな～？
またなにか、楽しくてちょっと便利な何かを作ってみたいと思います。お楽しみに✨️
続き
さっそくアップデートしました！
コメント