• HELP
  • SHOP CART




 x-knowledge news Head line

エクスナレッジの本を検索


ニュース&トピックス

cognitom1.jpgCogniTom Academic Designが開発し、無償公開している「jsmap」は、都道府県名を選択するためのポップアップを表示するJavaScriptライブラリ。jsmapをHTMLに組み込むと簡易の地図がポップアップ表示され、目的の都道府県の位置をクリックするだけで、都道府県名を入力できるようになる。
各種の会員登録や応募サイト、ネットショッピングの入力フォームでは、都道府県名をプルダウンリストから選択するようになっていることが多い。選択に迷うことはまずないが、47もの選択肢があると、目的の県名をうっかり見過ごしたり、前後の都道府県名を誤って選択してしまうことがある。
こうした都道府県名の選択画面をグラフィカルに変えてくれるのがjsmapだ。
cognitom2.jpg「百聞は一見にしかず」ということわざにならい、まずはjsmapのサンプルページ(http://jsmap.cognitom.com/)を見てみた。ページ中央にある都道府県名の入力欄をクリックすると、地方単位の簡易地図が表示される。[都道府県1]欄(「東京都」が表示されている)をクリックしたところ、東京都が含まれる関東/甲信越/中部/北陸地方の地図が表示される。ポップアップされた地図内で任意の都道府県をクリックすると、入力欄にその都道府県名が入力される。キーボードの[↑][↓]キーを押して選択することも可能だ。キーボードの[←][→]キーを押すと、ほかの地方の地図に瞬時に切り替わる。
詳しい組み込み方法はサンプルページを参照してもらいたいが、JavaScriptライブラリはサンプルページからダウンロードできる。大まかな組み込み手順は、HTMLのヘッダで「map.js」というファイルを読み込むように指定し、入力補助したい「INPUT」タグに2つの属性を付け加えるだけだ。HTMLの知識がある人なら難しくはないだろう。テーマによって地図の外観を変更することも可能だ。

実際に使ってみて、地方別に分けるより全国地図にしたほうが選択しやすいのではないかという疑問も生じた。これについてCogniTom Academic Designの河村奨氏は、「全国地図にするとポップアップが場所を取りすぎる。標準的なモニタの解像度ではこの程度が適当」と話す。また、目的の都道府県を一瞬で探すため、数が多すぎるとかえって視認性が落ちるというわけだ。
jsmapは、Webブラウザに負担をかけずキビキビと動作する。地図は簡易ながらデフォルメ具合は絶妙で、都道府県同士の隣接関係が的確に表現されているため、都道府県の位置関係が頭に入っていれば、プルダウンリストより数倍早く選択できそうだ。なお、jsmapのサンプルページでは、jsmapの米国版として、米国の州名を地図で入力できるJavaScriptライブラリも公開されている。
(CAD&CGマガジン ● 高橋寛行)

■問合せ
CogniTom Academic Design

■URL
http://www.cognitom.com/

■URL(Jsmapのサンプルページ)
http://jsmap.cognitom.com/