この住所、読めますか？ 難読地名チャレンジ！ 四国・九州編

# 🏠 はじめに

✨ **四国・九州地方は、歴史と文化が詰まった魅力的な地域！** ✨  
そんな地域には、ちょっとクセのある **「難読地名」** がたくさん！📍💡

## 🗾 九州の難読地名のヒミツ 🤔
九州地方では、**奈良時代の和銅官命** により、地名が **「好字（縁起の良い字）」** で置き換えられたケースが多いんです！  
例えば…  
🟢 **「原」＝「はる」または「ばる」** になることが多い！  
➡ 「中原」＝ **「なかばる」**  
➡ 「原田」＝ **「はるだ」**  

## 🏯 四国の難読地名のナゾ 🤯
四国にも歴史的背景から生まれた **読みにくい地名** がたくさん！  
古語や方言に由来しているものも多く、**「えっ、こんな読み方!?」** と驚くこと間違いなし！  

## 🌴 琉球語の影響も!? 🎶
九州南部や奄美群島では、なんと **琉球語の影響** も！🌺  
例えば…  
🏯 **「城」＝「グスク」**  
🌅 **「東」＝「アガリ」**  
🌇 **「西」＝「イリ」**  

## 🗺 難読地名×地図×クイズ！🎉
でも、ただ地名の読み方を知るだけじゃ **物足りない！**  
**「実際にどの場所なのか地図で確認したい！」** って思いませんか？💭  

そこで **ZENRIN Maps API** を活用し、**クイズ形式で楽しく学べるWebアプリ** を作成しました！ 🎮✨  
📌 クイズに正解すると…その **住所の場所が地図上に表示** される！  

[🌍 ZENRIN Maps APIは２か月お試し無料！🚀](https://www.zenrin-datacom.net/solution/zenrin-maps-api/trial?fm_cp=6757baf3203e3a00bb118509&fm_mu=676396d11fd14c054ecd1065&utm_campaign=6757baf3203e3a00bb118509&utm_medium=else&utm_source=Qiita28)  

🎯 **さあ、あなたはいくつ読めるかな？** クイズに挑戦して、地名マスターを目指そう！ 💪🔥


## 🎯 アプリの概要
このアプリでは、以下の機能を提供します。

✅ 難読住所クイズ：複数の選択肢から正しい読み方を選ぶ
✅ 地図表示：正解すると、その住所の位置を地図上に表示
✅ ZENRIN Maps API 活用：住所検索と位置情報の取得をAPI経由で実現

## 🔥 実際に動かしてみよう
実際にクイズを楽しめます。
実際の動作は、以下のデモをご覧ください。
[YomiMap（読みマップ　九州・四国編）](https://goldiek24.github.io/address_quiz/address_quiz_kyushu_sikoku.html)
![zma_address_quiz._kyushu_sikokupng.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3965389/7c7b3ee3-9b41-48ab-9771-deb68d51fd4d.png)


## 🛠 開発の流れ
#### 1. クイズデータの作成
まず、難読住所クイズのデータを用意しました。JavaScriptのオブジェクト配列として、住所名とその選択肢を定義しています。

```javascript
const quizData = [
    { question: "「漁生浦」の読み方は？", options: ["ぎょせいうら", "いさりうら", "りょうせうら"], correctAnswer: "りょうせうら" },
    { question: "「薩摩川内」の読み方は？", options: ["さつませんだい", "さつまかわうち", "さつまがわない"], correctAnswer: "さつませんだい" },
    ...
];
```

#### 2. クイズ画面の作成
ユーザーが選択肢をクリックできるよう、HTMLとCSSでクイズのレイアウトを作成しました。
```html
<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 を利用して、住所を検索し、緯度経度情報を取得して地図を更新します。
```javascript
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を活用して面白い地図アプリを作ってみてください！

📢 ご意見・感想をコメントでお待ちしています！