たたみラボ

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

blog

RSS

ホットペッパー UIライブラリ 第一弾: フォーム用 地域エリア／お店ジャンル／予算 プルダウン生成ライブラリをリリース

icon January 28, 2007 2:50 AM by toshi_i このエントリーを含むはてなブックマーク

研究員の石橋利真です。
ホットペッパーWebサービスを利用したサイトを作る際に必要になる、ユーザインターフェース系のパーツを、まとめて Javascript ライブラリとして公開・共有してみます。Hotpepper APIを使ったサイトを作ろうとするエンジニアは、大抵似たような作業過程を通る事から、共通部分をライブラリ化することで彼らがよりアイディア実装の方に注力してもらえるようになる事を目的としています。

今回、第一弾として提供するのは、以下の３種類のフォーム用プルダウンです：

  • 地域エリア プルダウン
    大サービスエリア
    大エリア
    中エリア
    小エリア
    このライブラリを使うことで、以下の4つのプルダウンが自動生成されます：

        大サービスエリア (ex: 関東)
        大エリア (ex: 東京)
        中エリア (ex: 渋谷)
        小エリア (ex: マークシティ・道玄坂方面)

    大エリアを「東京」から「神奈川」に変更すると、中エリアの選択肢が「横浜」や「鎌倉」に自動的に変わる・・・といったような相互連動機能がついているため、ユーザにとって使いやすい、便利なU/Iを提供することができます。
  • お店ジャンル プルダウン
    お店ジャンル
    「和食」「洋食」「中華」といった、ジャンル選択用の検索フォームUI。特に他との連動動作は無く、単体で機能します。
  • 予算 プルダウン
    予算
    お店の平均予算選択用の検索フォームUI。特に他との連動動作は無く、単体で機能します。

これらライブラリを駆使することで、お店検索フォーム等を作る際に大幅な作業短縮が可能です。以下、詳細ドキュメントです：

目次

  1. 更新履歴
  2. 最新版ダウンロード
  3. アーカイブ内容
  4. 使い方: 地域・エリアプルダウン
  5. 使い方: お店ジャンルプルダウン
  6. 使い方: 予算プルダウン
  7. サンプルについて
  8. データの最新化について
  9. FAQ
  10. ライセンス

1. 更新履歴

2007.01.27
v0.01 初回リリース

▲目次に戻る

2. 最新版ダウンロード

download Hotpepper UI Library v0.01

▲目次に戻る

3. アーカイブ内容

ダウンロードしたZIPアーカイブの内容は以下の通りです：

hotpepper_ui/
  js/
    hotpepper/
      ui.js                  # コアモジュール
      ui/
        area_master.js       # 地域・エリアマスタ JSON
        budget_master.js     # 予算マスタ JSON
        genre_master.js      # お店ジャンルマスタ JSON
    prototype.js             # ui.js 動作に必須のライブラリ
  sample/
    area.html                # 地域・エリアプルダウンのサンプル
    budget.html              # 予算プルダウンのサンプル
    genre.html               # ジャンルプルダウンのサンプル
    combination.html         # 3種を同時に使用したサンプル
  update_script/
    update_area_master.pl    # area_master.js 最新化 script
    update_budget_master.pl  # 同上 budget_master.js 版
    update_genre_master.pl   # 同上 genre_master.js 版
    lib/                     # 必要 CPAN module 群
      *.*

▲目次に戻る

4. 使い方: 地域・エリアプルダウン

地域エリア プルダウン

目次

▲TOP目次に戻る

基本

HTMLのheadタグ内に下記のライブラリファイルを読み込ませた上で...

<head>
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/hotpepper/ui.js"></script>
<script type="text/javascript" src="js/hotpepper/ui/area_master.js"></script>
</head>

bodyタグ内の、プルダウンを設置したい場所に以下のようなselectタグを記述します:

<body>
地域：     <select id="hp-sel-lsa"></select>
大エリア： <select id="hp-sel-la"></select>
中エリア： <select id="hp-sel-ma"></select>
小エリア： <select id="hp-sel-sa"></select>
</body>

最後に、headタグ内等で以下のjavascriptコードを実行する事で相互連動するプルダウンが4つ自動生成されます。※画面読み込み完了と同時に生成する例

<script type="text/javascript">
window.onload = function (){
  var area = new Hotpepper.UI.Area.Pulldown();
  area.init();
};
</script>

それぞれのselectタグには任意のname属性をつけてOKですが、省略した場合はホットペッパーWebサービス用のパラメータ名 (LargeServiceAreaCD, LargeAreaCD, MiddleAreaCD, SmallAreaCD) が自動で付与されます。

△地域・エリアプルダウンの目次に戻る

プルダウンの初期値を指定する

あらかじめプルダウンの初期値を設定しておきたい（エラー遷移で検索 フォームの値を引継ぎたい、等）場合は init() に、任意のエリアコード を渡します：

// 小エリアを指定
area.init({
  sa  : 'X090'
});

これで小エリアのプルダウンはあらかじめ「道玄坂・マークシティ方面」 がセットされ、さらに他の上位３つのプルダウンも連動してそれぞれ 「関東」「東京」「渋谷」にセットされます。まあ便利。

同様に大エリアのみ指定、中エリアのみ指定なども可能です。その際、 下位のプルダウンの初期値は「指定なし」のままになります。

// 大サービスエリアを指定
area.init({
  lsa  : 'SS10'
});

// 大エリアを指定
area.init({
  la  : 'Z011'
});

// 中エリアを指定
area.init({
  ma  : 'Y030'
});

△地域・エリアプルダウンの目次に戻る

エリアコードからエリア名称、および親エリアのコード＆名称を取得する

任意のエリアコードを元に、該当エリアの名称および親プルダウンのコードと名称を調べることができます：

var hash = area.resolve_parent_areas({
    sa : 'X090'
});
alert( hash.lsa );      // SS10
alert( hash.lsa_name ); // 関東
alert( hash.la );       // Z011
alert( hash.la_name );  // 東京
alert( hash.ma );       // Y030
alert( hash.ma_name );  // 渋谷
alert( hash.sa );       // X090
alert( hash.sa_name );  // 道玄坂・マークシティ方面

△地域・エリアプルダウンの目次に戻る

selectタグのID属性を指定する

各selectタグのID属性、デフォルトでは 'hp-sel-lsa', 'hp-sel-ma' 等ですが、これを任意の値に変更するには以下のようにコンストラクタで指定します：

var area = new Hotpepper.UI.Area.Pulldown({
  id_lsa : 'my-own-lsa',
  id_la  : 'my-own-la',
  id_ma  : 'my-own-ma',
  id_sa  : 'my-own-sa'
});

△地域・エリアプルダウンの目次に戻る

デフォルトの選択肢「指定なし」の文言を変える

各プルダウン1つ目の選択肢の - 指定なし - という文言はコンストラクタの引数 first_opt_text で変更することができます：

var area = new Hotpepper.UI.Area.Pulldown({
  first_opt_text : '▼選択してください'
});

△地域・エリアプルダウンの目次に戻る

プルダウンは必ず４つ必要？

いいえ。大・中・小エリアのプルダウンは任意です。

また、途中の階層を省くと下位のプルダウンは無視されます。例）中エリアだけを省いた、大＋小エリアの組み合わせは動きません。この場合、小エリアプルダウンは無視されます。

△地域・エリアプルダウンの目次に戻る

▲目次に戻る

5. 使い方: お店ジャンルプルダウン

お店ジャンル プルダウン

目次

▲TOP目次に戻る

基本

以下のコードを記述することでプルダウンが自動生成されます：

<head>
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/hotpepper/ui.js"></script>
<script type="text/javascript" src="js/hotpepper/ui/genre_master.js"></script>
<script type="text/javascript">
window.onload = function (){
  var genre = new Hotpepper.UI.Genre.Pulldown();
  genre.init();
};
</script>
</head>
<body>
お店ジャンル： <select id="hp-sel-genre"></select>
</body>

△お店ジャンルプルダウンの目次に戻る

プルダウンの初期値を指定する

あらかじめプルダウンの初期値を設定しておきたい場合は init() に、任意のジャンルコード を渡します：

genre.init({
  default_value : 'G003' // 創作料理
});

△お店ジャンルプルダウンの目次に戻る

コードから名称を取得する

任意のジャンルコードを元に、そのジャンルの名称を調べることができます：

var name = genre.resolve_value( 'G004' );
alert( name ); // 和食

△お店ジャンルプルダウンの目次に戻る

selectタグのID属性を指定する

selectタグのID属性はデフォルトだと 'hp-sel-genre' 等ですが、これを任意の値に変更するには以下のようにコンストラクタで指定します：

var genre = new Hotpepper.UI.Genre.Pulldown({
  id : 'my-own-genre'
});

△お店ジャンルプルダウンの目次に戻る

デフォルトの選択肢「指定なし」の文言を変える

プルダウン1つ目の選択肢の - 指定なし - という文言はコンストラクタの引数 first_opt_text で変更することができます：

var genre = new Hotpepper.UI.Genre.Pulldown({
  first_opt_text : '▼選択してください'
});

△お店ジャンルプルダウンの目次に戻る

▲目次に戻る

6. 使い方: 予算プルダウン

予算 プルダウン

基本

以下のコードを記述することでプルダウンが自動生成されます：

<head>
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/hotpepper/ui.js"></script>
<script type="text/javascript" src="js/hotpepper/ui/budget_master.js"></script>
<script type="text/javascript">
window.onload = function (){
  var budget = new Hotpepper.UI.Budget.Pulldown();
  budget.init();
};
</script>
</head>
<body>
予算： <select id="hp-sel-budget"></select>
</body>
使い方

その他使い方はすべてお店ジャンルプルダウンと同じです。

用意はしたものの...

予算プルダウンも作れるようにしたものの、2007.01.27時点では、ホットペッパーWebサービスが予算を検索パラメータとして受け付けてくれません。どうやらマスタ提供しているだけのようです（理由は判りません^^;）。

▲目次に戻る

7. サンプルについて

アーカイブの sample ディレクトリ下に、各プルダウンを使った簡単なサンプルHTMLがあります。基本的な使い方のほかにも、javascript記述のコメントアウト部分に、各種詳細な使い方の実装例も記してありますので、ざっと目を通して or 実際に試してみてください。すぐに使い方がわかると思います。

▲目次に戻る

8. データの最新化について

しばらくは無いとは思いますが、ホットペッパー Webサービスが提供している各種マスタ情報もいずれ更新されます。その際、シンプル飲食検索で使っているマスタ情報JSONファイル (area_master.js / budget_master.js / genre_master.js ) を最新化する為のperlスクリプトを update_script ディレクトリ下に用意してあります。

→update_area_master.pl, update_budget_master.pl, update_genre_master.pl

これらスクリプトは、実行すると最新版のJSONデータを標準出力に返します。なので、使い方はこんな感じです (shell prompt にて実行)：

$ cd hotpepper_ui
$ perl update_script/update_area_master.pl > js/hotpepper/ui/area_master.js

▲目次に戻る

9. FAQ

プルダウン (select タグ) 以外のUIを使いたい

ごめんなさい、このライブラリは現在のところプルダウンのみ対応しています。

UTF-8以外の文字コードでも動きますか？

そのままでは使えません。UTF-8以外で使う場合は ui.js や area_master.js 等、使用するjavascriptファイルを任意の文字コードで保存しなおせば問題無く使えます (Shift_JISに変換したものが正常動作することを windows IE6.0 と windows Firefox で確認済み)。

マスタデータだけ別用途で使いたい

ui/area_master.js, ui/genre_master.js, ui/budget_master.js はそれぞれ単体で使うことができます。これらを読み込むとそれぞれ HP_AREA_MASTER, HP_GENRE_MASTER, HP_BUDGET_MASTER という変数名のHASH TABLEがロードされますので、後は自由に加工利用してください。

▲目次に戻る

10. ライセンス

GNU General Public Licenseで配布します。

Copyright (C) 2007 Toshimasa Ishibashi.
This program is free software; you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation; either version 2 of the License, or (at your option) any later version.

※Wikipedia - GNU GPL の解説

▲目次に戻る

tags：      

TRACKBACK URL：

TRACKBACKS

? 「シンプル飲食検索」＋HotPepper UIライブラリ第一弾 by BIコラボレーション委員会ブログたたみラボが、マッシュアップアワードの対象APIのひとつである「HotPeppe...

ページトップへ

(C) RECRUIT MEDIA COMMUNICATIONS CO., LTD.