読者です 読者をやめる 読者になる 読者になる

ポジティブ心理学研究所

幸福度(EQ)アップの研究所です。ポジティブ心理学に出会う前の古い記事はネガティブなので注意。

都道府県をグラフィカルで簡単に選択できるjQueryプラグイン「est47.js」を公開しました。

f:id:lettuce0831:20140122154101p:plain

est47とは easy select todofuken 47 の略です。AKBにあやかって名づけました。

探したけれど理想のものが見当たらなかったので作りました。
都道府県選択って結構な頻度で使うと思うんですけど、むしろなぜこれがなかったのか不思議です。

(一応、jsmapというのもあるにはあるのですが、地方ごとに分離されてて一覧性が低くて手間があるのが不満でした。)

デモページ

http://retasretas.github.io/est47.js/

使い方

使い方はいたってバリバリに簡単。jQueryと本プラグインを読み込んだら、est47.jsを発動したい要素に対してest47()メソッドを実行するだけです。

<!-- target element -->
<a href="#" class="map_select">地図から選択</a>

<!-- load jquery and est47 -->
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="jquery.est47.js"></script>
<!-- run -->
<script>
    $(function () {
        // defaults run
        $(".map_select").est47();
        
        // [option] set callback in hash. callback arg 1:index 2:value
        $(".map_select").est47({ callback: function(i, v){ alert("wahaa"+i+v); } });
    });
</script>

コールバックには引数で JIS X0401 に準拠した都道府県の番号と名前が返ってきますので、コールバックを利用してHTML側の <select> 要素等に反映することを想定しています。

苦労した点

そもそもjQuery自体不慣れなので、あまり素早いコーディングはできないのですが、それでも構想から3日ほどで完成することができました。
もっとも苦労した点は実はスクリプト部分ではなく、大本となる地図の作成です。

地図はIllustratorで作成したのですが、そもそもこれを自前で作らなければいけなかった原因が日本地図の簡略図のフリー素材がなかったからでした。
できればこれを自作するのは避けたかったので、wikiにあったライセンスがCCの日本地図のSVG画像を使おうとも思ったのですが、ちょっと形が詳細すぎて、離島とか琵琶湖とかもあるし、これは選択する対象としてはスクリプトで扱いづらい部分があるだろうと思って結局自作するハメになりました。

f:id:lettuce0831:20140122155722p:plain

形を整えたり、隙間ができないようにしたり、大きさがの比があまり実物の比と差を少なくしたりと大変でした。(それでもやはり密な部分ほど小さく、疎な部分ほど大きくなってる。東北とか)
あと、Illustratorで吐き出したSVGのタグがあまりにも不統一で汚かったのでそれを揃えるのにも一苦労ありました。

ということで、こういうライセンスフリーなSVGの地図素材は必要だろうと思うので、そのうちこのプラグインで使っているSVGの簡略日本地図も単体で配布する予定です。

ダウンロードはGitHubから

https://github.com/retasretas/est47.js

ライセンスはMITとなっております。

流行れ!

est47流行ればいいなあ、便利だと思うんだけど流行るかなあ