JP  |   US  |   TW  |   世界地図版 (New!)

jsmapは、県名や州名の選択をするためのポップアップを表示するスクリプトです。(入力補助スクリプト)

まずは、下のインプットフィールドをクリックしてみて下さい。

都道府県1:
都道府県2:

使い方

ポップアップ内でクリック、またはカーソル移動(↑↓キー) & 地方の切り替え(←→キー)

ダウンロード

jsmap095.zip

組み込み方法

ヘッダで map.js を読み込みます。「?」以下を指定することで、ロケールとテーマを変更できます。
(※"path/to"の部分は適宜書き換えてください)

<script type="text/javascript" src="path/to/jsmap/map.js?locale=ja&theme=simple"></script>

入力補助したいINPUTタグに、次の2つの属性を加えます。
autocomplete="off"
class="jsmap"
(INPUTタグにはname,id属性が同じ内容で指定されている必要があります)

<input type="text" name="sample1" id="sample1" value="東京都" autocomplete="off" class="jsmap" />

注意事項

ダウンロードすると、フォルダ名は「jsmap0xx」といったバージョン付き表記になっていますが、導入の際には「jsmap」とリネームして下さい。

スクリプト本体は、多バイト文字を含まないため、文字コードに依存しません(コメント削除+圧縮済み)。しかし、地図データを格納したjsmap/locale/ja/data.jsはHTMLの文字コードと揃えておく必要があります。UTF-8以外を利用の場合は、予め変換しておいて下さい。

テーマ

jsmapは外観をテーマによって変えることが出来ます。(0.9.5〜)

simple classic blue
半透明・シンプル
→サンプル
不透明・既存GUIと合わせやすい
→サンプル
不透明・青系統
→サンプル

FAQ

よく聞かれる項目について、簡単なコメントを。プロジェクトの方向性を示す一助として。

Q - なぜ、全国地図にしないのですか?

4つほど理由があります。

  1. ポップアップが場所をとりすぎるから
    現在、地図部分は185x120pxにおさめていますが、標準的なモニタ解像度ではこの辺が限界です。
  2. キーボード操作時の押下回数を減らすため
    jsmapがフォーカスするのはSugarCRMなどのWEBアプリです。使い切りのWEBフォームと違い、慣れによるスピードアップが望めるUIである必要があります。
  3. 多言語対応のため
    日本は47都道府県なので、かろうじて可能だと思う方もいるかもしれませんが、これがイギリス(現在製作中)とかでは100を超えます。
  4. 認知的限界のため
    これも重要。ぱっと見て探せる数というのは、15や20がせいぜいです。

ただ、上記の話とは別に、地方選択用の全国図はあってもいいと考えていますので、それは将来のバージョンで。

Q - 地図はもっと詳細化/単純化しないのですか?

詳細化する、つまりもっとリアルな地図にすることは、イメージマップを使ったり、Flashを組み込んだりすれば出来なくはありません。が、重くなるので今のところNGです。都道府県選択だけのために、アプリのレスポンスが落ちるのは許されません。リアルな地図だと県や州の大小がありすぎて実は使いにくい、という理由もあります。

単純化については、すでに隣接関係をなるべく保持しながらギリギリをせめています。これ以上単純化すると、逆に「プルダウンでいいのでは?」という話にも。

SVGがもう少し一般的になれば、改良の余地があると思います。現状では、CSSの限界と「デザイン」とのバランスになります。

Q - 郵便番号検索で十分ではないか?

おっしゃる通りです:-)
そこまで個人情報がとれないケースや、番号不明のケースもありますので(電話口で聞き取れないなど..)。ユーザビリティの観点からは、ぜひZIP検索とjsmap両方つけて下さい。

Q - なぜテキストボックス?

他の国の州名を入れるケースがあるので、自由度を確保しています。入力内容を制限するオプションは将来のバージョンで。

Q - 自動補完(オートコンプリート)ではダメなのか?

海外の人から突っ込まれがちな点ですが、日本語は漢字変換があるので、JavaScriptでの自動補完は無理なのです(カナ打ちの人もいますし)。それに、地理を学ぶのも楽しいですよ!

バージョン履歴

ver 0.9.6: 台湾のデータを加えました →サンプル

ver 0.9.5: テーマ対応。地域の切換えをループするように変更。→ダウンロード

ver 0.9.3: USのデータに間違いがあったので修正しました。→ダウンロード

ver 0.9.2: Apache License Version 2.0としました。中身は変わってません。

ver 0.9.1: マウスイベントの扱いを修正しました。

ver 0.9.0: スクリプトの組み込み方法を見直しました。

ver 0.8.1: アメリカ合衆国の州データを加えました →サンプル

ver 0.8: 公開

ライセンス

このスクリプトをApache License Version 2.0のもとで、フリーで公開します。
商用・非商用を問わず、サイトに組み込んで構いませんが、無保証です。

jsmapについて

フォームで都道府県を選択する際のイライラがかなり解消されるはず!
jscalendarのような感じで使ってもらえると良いと思います。
SugarCRMへの組み込みが当初目的ですが、Sugarに限らず利用可能です。
マップデータさえ用意すれば、他の国へも対応できます。

phpspot開発日誌で紹介いただきました。ありがとうございます。(2008/6/4)
Asiajinで取り上げていただきました。ありがとうございます。(2008/6/10)
ASCII.jpで紹介いただきました。ありがとうございます。(2008/6/24)
建築知識WEBで紹介いただきました。ありがとうございます。(2008/7/2)
web creators (2008年10月号)の「Webデザインスタイルアップ Tips 第3回」で紹介いただきました。ありがとうございます。(2008/8/29発売)

ご意見・要望は kawamura (at) cognitom.com まで。