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 サイトをガシガシ作っていってくださいー。

tags：API  Mashup  じゃらん