🗾 はじめに❄️
近畿・中国地方には、日本の歴史や文化を色濃く反映した 独特の地名 が数多く存在します！✨
近畿地方では、 京都や奈良の古都 に由来する 由緒ある地名 が今も残り、
中国地方では 方言や地域特有の言い回し が地名に影響を与えています。
例えば…
📍 京都：「帷子ノ辻（かたびらのつじ）」
📍 奈良：「畝傍（うねび）」
📍 大阪：「天満橋（てんまばし）」
📍 兵庫：「舞子（まいこ）」
一見すると 読み方が想像できない 地名ばかり！🤔
でも、実はその 地形や歴史、文化 が由来になっているんです！
💡 あなたはいくつ読める？
今週は、そんな 近畿・中国地方の難読地名クイズ に挑戦！🏆
地名を通じて、この地域の 奥深い歴史と文化 に触れてみましょう！
📢 ぜひ挑戦した感想をコメントで教えてください！
🔍 住所検索で使ったAPIはこちら！ 🚀
今回の YomiMap で使用したAPIはコチラ👇
🌍 ZENRIN Maps APIは２か月お試し無料！🚀
🎯 アプリの概要
このアプリでは、以下の機能を提供します。
✅ 難読住所クイズ：複数の選択肢から正しい読み方を選ぶ
✅ 地図表示：正解すると、その住所の位置を地図上に表示
✅ ZENRIN Maps API 活用：住所検索と位置情報の取得をAPI経由で実現
🎯 さあ、あなたも難読地名に挑戦しよう！
実際にクイズを楽しめます。
実際の動作は、以下のデモをご覧ください。
YomiMap（読みマップ 近畿・中国編）
🛠 開発の流れ
1. クイズデータの作成
まず、難読住所クイズのデータを用意しました。JavaScriptのオブジェクト配列として、住所名とその選択肢を定義しています。
const quizData = [
{ question: "「祝園」の読み方は？", options: ["ほうその", "いわいぞの", "ほうぞの"], correctAnswer: "ほうその" },
{ question: "「太秦」の読み方は？", options: ["たいしん", "ふとはた", "うずまさ"], correctAnswer: "うずまさ" },
...
];
2. クイズ画面の作成
ユーザーが選択肢をクリックできるよう、HTMLとCSSでクイズのレイアウトを作成しました。
<div id="quiz-container">
<h2>問題 1</h2>
<p>「祝園」の読み方は？</p>
<div class="button-group">
<button onclick="checkAnswer('ほうその')">ほうその</button>
<button onclick="checkAnswer('いわいぞの')">いわいぞの</button>
<button onclick="checkAnswer('ほうぞの')">ほうぞの</button>
</div>
</div>
3. ZENRIN Maps API を使った地図表示
クイズに正解したら、その住所の位置を地図上に表示します。
ZENRIN Maps API を利用して、住所を検索し、緯度経度情報を取得して地図を更新します。
async function searchAddress(address) {
const response = await fetch('https://test-web.zmaps-api.com/search/address', {
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
'x-api-key': 'YOUR_API_KEY',
'Authorization': 'referer'
},
body: new URLSearchParams({ word: address, word_match_type: '3', address_level: 'SHK,OAZ', sort: 'address_read' })
});
const data = await response.json();
if (data.status === "OK" && data.result.info.hit > 0) {
const location = data.result.item[0].position;
const latLng = new ZDC.LatLng(location[1], location[0]);
map.setCenter(latLng);
} else {
alert("住所の位置情報が見つかりませんでした");
}
}
🚀 今後の展望
問題の追加： 近畿・中国地方ならではの難読地名をさらに充実！
エリア別モード： 京都・奈良・山陽・山陰など地域ごとに挑戦できる機能を追加
ご当地ヒント機能： その地名にまつわる歴史や名産をヒントとして表示
ZENRIN Maps API を活用すれば、正確な地図データとともに、より楽しく学べるコンテンツが作れます！
ぜひ皆さんも、APIを活用して面白い地図アプリを作ってみてください！
📢 ご意見・感想をコメントでお待ちしています！