たたみラボ

  • about
  • member
  • r&d
  • blog
  • tatamicast

blog

RSS

じゃらんWebサービス用お手軽ライブラリ - 地域選択プルダウン - を作ってみた

icon June 29, 2006 7:38 PM by toshi_i このエントリーを含むはてなブックマーク

石橋です。こんにちは。

じゃらんWEBサービスを使ったWEBサイトを作ろうと思った際、以下のようなユーザインターフェイスが必要になる機会は多いのではないかと思います。

都道府県


大エリア


小エリア

シンプル宿検索の検索インターフェイスでも実装した、都道府県を選びなおす度に、大エリア・小エリアのプルダウン候補がグリグリ変化する、といったものです。

しかし現時点(2006年6月29日)では、じゃらんWEBサービス側で提供しているのはこのエリアコードXMLだけです。このXMLから、上記のような相互連動型プルダウンを作るのは、少々面倒くさいし、きっと誰もが同じような手順を踏んで実装させることでしょう。それって車輪の再開発じゃない?ということで、汎用的なライブラリとしてここで公開・配布してみたいと思います。機能面では上記のUIを実現させる以外に何も無い、シンプルなものですが、みんなの、とりあえずの取っ掛かりになれば幸いです。

ダウンロード

以下のリンクからZIPアーカイブをダウンロードしてください:

地域選択ライブラリをダウンロード

解凍すると中身はこんな感じになっています:

jalan_area_pulldown/
jalan_area_pulldown/area.html           # サンプルHTML
jalan_area_pulldown/area.js             # 関数もろもろ
jalan_area_pulldown/area_data.js        # JSONデータ
jalan_area_pulldown/make_area_json.plx  # 情報最新化スクリプト

サンプルHTML (area.html) でとりあえず動作確認ができます。さらにはHTMLソースを見てもらえば、使い方もすぐ把握できると思います。

詳細仕様

一応、動作させるのに必要な設定は以下のとおりです:

  • area.js と area_data.js を<script>タグで読み込んでおく
  • 各プルダウンに固定IDを付与しておく (サンプルHTMLを参照)
  • 各プルダウンの onchange イベントに関数を設定しておく (サンプルHTMLを参照)
  • initAreaPulldown 関数を実行するとプルダウンに値がセットされる

そんな感じです。

予め特定の値を設定しておきたい場合

フォーム送信後のエラー遷移で戻ってきた時等、予めプルダウンに値をセットしておきたい(前回ユーザが設定した値に戻したい)場合は、initAreaPulldown 関数に以下のような引数を渡すことで実現できます:

initAreaPulldown( 都道府県コード, 大エリアコード, 小エリアコード );

例えば 沖縄 > 那覇 > 首里 にしておきたいならば、以下のようになります:

initAreaPulldown('470000', '470200', '470205');

情報最新化スクリプトについて

じゃらんWEBサービスが提供しているエリアコードXMLを HTTP GET で取得、JSONオブジェクトに変換して area_data.js に書き出す為のPerlソースコードです。無いとは思いますが、万が一、このエリアコード体系に変更があった場合 (XMLが更新された場合)は、このスクリプトを実行する事で area_data.js を最新化させることができます。※実行させるには別途幾つかのCPANモジュールが必要になります (JSON, LWP::Simple, XML::Simple, Unicode::RecursiveDowngrade)

以上、これを使って余計な手間を省いた上で、ナイスな mash-up サイトをガシガシ作っていってくださいー。

COMMENTS

便利です。ありがとうございます。
「予め特定の値を設定しておきたい場合」は、
initAreaPulldown(470000, 470200, 470205)

initAreaPulldown('470000', '470200', '470205')
にした方が良いようです。

July 5, 2006 10:22 PM by 匿名  

ご指摘ありがとうございますー。

July 6, 2006 10:48 PM by いしばし  

とても便利に使わせていただいてます!
ちなみに、セレクトにMULTIPLEで使用可ですかね??

February 9, 2007 4:35 PM by hogehoge  

便利に使わせてもらっています。(別の用途で。。)
一点利用していて気がついたのですが、
連想配列の要素が1つのみの場合、make_area_json.plx
で生成されるJSONデータの構造が変ってしまうので、
XML::Simple::XMLin で
$area_ref オブジェクトを生成する際の
ForceArray => 1
オプションは必須ではないでしょうか。

↑のサンプルでも、大分→日田・天ヶ瀬・耶馬渓→[小エリア]が選べない
を選択すると再現しています。

see: http://search.cpan.org/~grantm/XML-Simple-2.16/lib/XML/Simple.pm#ForceArray_=%3E_1_%23_in_-_important

July 24, 2007 5:42 PM by kazu_o  

ForceArrayオプションは必須

#---
# xml to perl
my $area_ref = XML::Simple::XMLin(
$xml,
KeyAttr => ['cd'],
ForceArray => 1,#add
);
#---


JSONのverが2.xxの場合

#---
# perl to json (ver1.xx)
#my $json = JSON->new;
#$json->keysort(1);
#my $js = $json->objToJson($area_ref->{Prefecture});

# perl to json (ver2.xx)
my $js = JSON->new->canonical(1)->encode($area_ref->{Prefecture});
#---

http://search.cpan.org/~makamaka/JSON-2.07/lib/JSON.pm#Transition_ways_from_1.xx_to_2.xx.

February 27, 2008 5:47 PM by 匿名  

POST COMMENT




(書式を変更するような一部のHTMLタグを使うことができます)

必ず利用規約に同意いただいた上で送信ください。

ページトップへ



(C) RECRUIT MEDIA COMMUNICATIONS CO., LTD.