個人的に使ってるtableの日本地図をjQueryで叩く

2012/12/12 2018/6/7

テーブル日本地図個人的に今でも現役で使うことがあるテーブル日本地図。手軽だし崩れる心配もないから結構好き。

画像に比べて表現が弱いけど、ユーザーが都道府県を選択するっていう基本的な仕事は十分に果たしてくれる。

数年前に色々なサイトを参考にして作ったオリジナルのテーブル日本地図ですが、今回ライセンスフリーで公開します。

海・陸・フレーム・都道府県・地域など、細かくクラス指定してあるので使いやすいと思います。jQueryとCSSを使って簡単に装飾してみたので、参考事例としてご覧ください。

 

オーソドックスな感じ

都道府県を選択するセレクタはJIS X0402準拠で並んでます。並び順などはしっかり規格に沿わないとUI的にダメです。セレクタだと東北や関東などの地域も選べます。

以下のクラスが各TDに指定されています

sea 海
land 陸
frame 枠
c01 – c47 都道府県
cr01 – cr08 地域

CSSはこちら。特に変わったことはしていません。CSS3はtext-shadowとtransitionです。これは必須という訳ではないですね。

#map1 a{
    font-size: 14px;
    color: #666;
    text-decoration: none;
    text-shadow: rgba(255,255,255,0.6) -1px 1px 0;
}

#map1 td{
    padding: 6px 3px;
    text-align: center;
}

#map1 td.frame{
    padding: 0;
    width: 20px;
    height: 10px;
}

#map1 td.land{
    background-color: #eef2bf;
}

#map1 td.sea{
    background-color: #f0f9ff;
}

#map1 td.selected{
    background-color: #fcc;
    -webkit-transition: background .5s ease-out;
    -moz-transition: background .5s ease-out;
    -o-transition: background .5s ease-out;
}

都道府県名はただのテキストですが、jQueryで一括でリンクにしています。もしJS使えない環境を想定するなら、面倒でも1つずつリンクにするべき。

jQuery('.land').each(function(){
    $(this).html( '<a href="javascript:void(0)" id="'+$(this).attr('class').split(' ')[1]+'">'+$(this).html()+'</a>' );
});

jQuery('.land a').click(function(){
    clickPrefectural( $(this).attr('id') );
});

function clickPrefectural( cls ){
    jQuery('.tablemap .land').removeClass('selected');
    jQuery('.tablemap .'+cls).addClass('selected');
}

 

ドラクエ風

こちらはドラクエ風。選択した場所が森になります。これもCSSで画像指定をしただけなので、特に変わったことはしていません。

#map2 td.land{
    background-image: url(land.png);
}

#map2 td.sea{
    background-image: url(sea.png);
}

#map2 td.selected{
    background-image: url(tree.png);
    -webkit-transition: background .5s ease-out;
    -moz-transition: background .5s ease-out;
    -o-transition: background .5s ease-out;
}

 

気温分布っぽいの

ざっくりと温度を色で表した感じ。これはjQueryならではの色指定を行なっています。CSSは特になにもしていません。

こちらがjQuery。ちとややこしいですが肝心なのは最初の2行だけです。下のほうの関数hsvとc16は「HSV→RGB色変換」の為の関数なので説明は省きます。

jQuery('.land','#map3').each(function(){
    var rate = parseInt($(this).attr('class').split(' ')[1].substr(1));
    $(this).css('background-color', hsv(220-220*rate/47, 0.5, 1));


    function hsv(h,s,v){
        var f=h/60,i=f^0,m=v-v*s,k=v*s*(f-i),p=v-k,q=k+m;
        return '#'+c16([v,p,m,m,q,v][i]*255^0)+c16([q,v,v,p,m,m][i]*255^0)+c16([m,m,q,v,v,p][i]*255^0);
    }    
    function c16( c10 ){
        var c16 = '0'+c10.toString(16);
        return c16.substr(c16.length-2);
    }
});

最初にrateに都道府県のclass名の番号を入れます。これは北から北海道が1で沖縄が47です。で、HSVという色空間でバックグラウンド色を指定します。hsv関数はHSV指定をいつものRGB(#8fcc44とか)に変換してくれます。今回は、

色相 220度(北海道)青 ～ 0度(沖縄)赤
彩度 0.5 (1で最も鮮やか)
明度 1 (1で最も明るい)

という感じ。都道府県が南にうつるに従い色相が赤に近づきます。HSV色空間を覚えると、こんな風に自由にグラデを使えるようになります。HSVのもう少し詳しい説明は、好きな色は何ですか?カラーバスで新発想にもあります。

日本地図が必要になったとき、カスタマイズしやすいのでサクッと使えるかと思います。もしよかったら使ってみて下さい。

 

テーブル日本地図

<table class="tablemap">
<tr>
<td colspan="1" rowspan="16" class="sea frame"> </td>
<td colspan="16" class="sea frame"> </td>
<td colspan="1" rowspan="16" class="sea frame"> </td>
</tr>
<tr>
<td colspan="14" rowspan="4" class="sea"></td>
<td colspan="2" class="land c01 cr01" style="height: 5em;">北海道</td>
</tr>
<tr><td class="sea"> </td><td class="sea"></td></tr>
<tr>
<td colspan="2" class="land c02 cr01">青森</td>
</tr>
<tr>
<td class="land c05 cr01">秋田</td>
<td class="land c03 cr01">岩手</td>
</tr>
<tr>
<td colspan="10" rowspan="2" class="sea"></td>
<td rowspan="2" class="land c17 cr03">石川</td>
<td colspan="3" class="sea"></td>
<td class="land c06 cr01">山形</td>
<td class="land c04 cr01">宮城</td>
</tr>
<tr>
<td class="land c16 cr03">富山</td>
<td colspan="2" class="land c15 cr03">新潟</td>
<td colspan="2" class="land c07 cr01">福島</td>
</tr>
<tr>
<td colspan="9" class="sea"></td>
<td colspan="2" class="land c18 cr03">福井</td>
<td rowspan="2" class="land c21 cr04">岐阜</td>
<td rowspan="2" class="land c20 cr03">長野</td>
<td class="land c10 cr02">群馬</td>
<td class="land c09 cr02">栃木</td>
<td rowspan="2" class="land c08 cr02">茨城</td>
</tr>
<tr>
<td colspan="4" class="sea"></td>
<td class="land c35 cr06">山口</td>
<td class="land c32 cr06">島根</td>
<td class="land c31 cr06">鳥取</td>
<td rowspan="2" class="land c28 cr05">兵<br />庫</td>
<td class="land c26 cr05">京都</td>
<td colspan="2" class="land c25 cr05">滋賀</td>
<td colspan="2" class="land c11 cr02">埼玉</td>
</tr>
<tr>
<td rowspan="2" class="land c42 cr08">長<br />崎</td>
<td rowspan="2" class="land c41 cr08">佐<br />賀</td>
<td colspan="2" class="land c40 cr08">福岡</td>
<td rowspan="5" class="sea"></td>
<td class="land c34 cr06">広島</td>
<td class="land c33 cr06">岡山</td>
<td class="land c27 cr05">大阪</td>
<td class="land c29 cr05">奈良</td>
<td rowspan="2" class="land c24 cr04">三重</td>
<td class="land c23 cr04">愛知</td>
<td rowspan="2" class="land c22 cr04">静岡</td>
<td class="land c19 cr03">山梨</td>
<td class="land c13 cr02">東京</td>
<td rowspan="2" class="land c12 cr02">千葉</td>
</tr>
<tr>
<td rowspan="3" class="land c43 cr08">熊<br />本</td>
<td class="land c44 cr08">大分</td>
<td colspan="3" class="sea"></td>
<td colspan="2" class="land c30 cr05">和歌山</td>
<td class="sea"></td>
<td class="land c14 cr02">神奈川</td>
<td class="sea"></td>
</tr>
<tr>
<td colspan="2" rowspan="3" class="sea"></td>
<td rowspan="2" class="land c45 cr08">宮崎</td>
<td class="land c38 cr07">愛媛</td>
<td class="land c37 cr07">香川</td>
<td rowspan="3" colspan="9" class="sea"></td>
</tr>
<tr>
<td class="land c39 cr07">高知</td>
<td class="land c36 cr07">徳島</td>
</tr>
<tr>
<td colspan="2" class="land c46 cr08">鹿児島</td>
<td colspan="2" class="sea"></td>
</tr>
<tr>
<td colspan="2" class="land c47 cr08">沖縄</td>
<td colspan="14" class="sea"></td>
</tr>
<tr>
<td colspan="16" class="sea frame"> </td>
</tr>
</table>

 

JIS X0402準拠 都道府県セレクタ

<select class="prefecturals">
<option value="">都道府県を選んでね</option>
<optgroup label="地域">
    <option value="r01">北海道・東北</option>
    <option value="r02">関東</option>
    <option value="r03">甲信越・北陸</option>
    <option value="r04">東海</option>
    <option value="r05">関西</option>
    <option value="r06">中国</option>
    <option value="r07">四国</option>
    <option value="r08">九州・沖縄</option>
</optgroup>
<optgroup label="北海道・東北">
    <option value="01">北海道</option>
    <option value="02">青森県</option>
    <option value="03">岩手県</option>
    <option value="04">宮城県</option>
    <option value="05">秋田県</option>
    <option value="06">山形県</option>
    <option value="07">福島県</option>
</optgroup>
<optgroup label="関東">
    <option value="08">茨城県</option>
    <option value="09">栃木県</option>
    <option value="10">群馬県</option>
    <option value="11">埼玉県</option>
    <option value="12">千葉県</option>
    <option value="13">東京都</option>
    <option value="14">神奈川県</option>
</optgroup>
<optgroup label="甲信越・北陸">
    <option value="15">新潟県</option>
    <option value="16">富山県</option>
    <option value="17">石川県</option>
    <option value="18">福井県</option>
    <option value="19">山梨県</option>
    <option value="20">長野県</option>
</optgroup>
<optgroup label="東海">
    <option value="21">岐阜県</option>
    <option value="22">静岡県</option>
    <option value="23">愛知県</option>
    <option value="24">三重県</option>
</optgroup>
<optgroup label="関西">
    <option value="25">滋賀県</option>
    <option value="26">京都府</option>
    <option value="27">大阪府</option>
    <option value="28">兵庫県</option>
    <option value="29">奈良県</option>
    <option value="30">和歌山県</option>
</optgroup>
<optgroup label="中国">
    <option value="31">鳥取県</option>
    <option value="32">島根県</option>
    <option value="33">岡山県</option>
    <option value="34">広島県</option>
    <option value="35">山口県</option>
</optgroup>
<optgroup label="四国">
    <option value="36">徳島県</option>
    <option value="37">香川県</option>
    <option value="38">愛媛県</option>
    <option value="39">高知県</option>
</optgroup>
<optgroup label="九州・沖縄">
    <option value="40">福岡県</option>
    <option value="41">佐賀県</option>
    <option value="42">長崎県</option>
    <option value="43">熊本県</option>
    <option value="44">大分県</option>
    <option value="45">宮崎県</option>
    <option value="46">鹿児島県</option>
    <option value="47">沖縄県</option>
</optgroup>
</select>