ソースコード公開 - Lite版

概要

ホットペッパーWebサービスを使ったプログラムのサンプルとして、本サイトの基本機能を構成するソースコードを公開しています。マッシュアップサイトを作る際の参考にしてもらえれば幸いです。なお、「基本機能」とは以下の機能を指しています：

  1. フリーワードによる検索
  2. エリアプルダウンによる検索
  3. 検索結果の一覧表示
  4. 候補のお店追加
  5. 候補のお店を一覧で比較
  6. 候補のお店一覧を友達と共有

プログラムの実装は、9割がクライアントサイド（ブラウザ上）のJavascript、残りの1割がサーバサイドの Perl CGI という構成になっています。レンタルサーバ等の環境でも簡単に動くような作りになっているはずですので、ぜひ自分の環境に導入した上で、中身の実装を覗いてみてください。

※サイト機能のすべてを含んだ通常版ソースコードもこちらで公開しています。

配布アーカイブの内容

公開している配布アーカイブ（画面右側のダウンロードリンクから入手可能）の内容／フォルダ構成は以下になっています：

simple_hotpepper/
  index.html                 # これをブラウザで開く
  js/
    app.js                   # メインプログラム
    hotpepper/
      ui.js                  # プルダウン生成ライブラリ
      ui/
        area_master.js       # エリアマスタ JSON
        budget_master.js     # 予算マスタ JSON
        genre_master.js      # お店ジャンルマスタ JSON
    prototype.js             # ui.js 動作に必須のライブラリ
    yahoo/                   # Yahoo UI Library (タブUI用)
      *.js
  perl/
    search.cgi               # お店検索用 CGI
    load_shared_shops.cgi    # 友達共有用 CGI
    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 群
      *.*
  css/
    style.css                # デザインレイアウト CSS
    yahoo/                   # タブUI用 CSS
      *.css
  image/                     # 各種画像
      *.gif

なお、お問い合わせや利用規約などの一部のコンテンツは含まれていません。ご了承ください。

インストール方法

  1. アーカイブの中身をサーバ上にアップする
    直接サーバ上にてアーカイブを解凍してもよし、ローカルPC上で解凍した上でFTPクライアントを使ってアップロードしてもよし。
  2. CGIファイルの実行権限を変更する
    サーバの設定にもよりますが、apache等からCGIが起動できるように、perl ディレクトリ下にある2つのCGIファイル - search.cgiとload_shared_shops.cgi - の実行権限を 755 に変更しておきます。
  3. CGIの動作確認をする
    ブラウザで perl/search.cgi を開いてみましょう。{"pager":{ で始まる何やら怪しげな文字列(JSON文字列)が返ってきたら動作確認OK、準備は完了です。

後は index.html をブラウザで開けば、シンプル飲食検索があなたの環境で動作するはずです。

動作ブラウザ環境

実際にテストをして、正常動作を確認しているのは以下のブラウザです：

  • Windows Internet Explorer 6.0
  • Windows Mozilla Firefox 1.5.0.4
  • MacOS X Mozilla Firefox 2.0
  • MacOS X Safari 2.0.4

これらより以前のバージョンのブラウザでは何かしらの問題が出ると思われます。特に MacOS X Safari 1.3.4 では残念ながらまったく動作しませんでした。また、Windows IE5.x ではおそらく表示レイアウトが崩れるはずです。

パーツ単位で手軽に使いまわしが可能

プログラム全体を参考にせずとも、以下の2つのパーツに関しては、一部ソースコードを流用するだけで簡単に使えるものになっています。

FORMプルダウン ライブラリ

  • 4つが相互連動する地域・エリア選択プルダウン
  • 料理ジャンルプルダウン
  • 予算選択プルダウン

お店検索機能を作る際に、必ず必要になってくる条件選択用のプルダウンを、自動生成してくれるライブラリです。使い方は以下の通り：

<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>
<script type="text/javascript" src="js/hotpepper/ui/genre_master.js"></script>
<script type="text/javascript" src="js/hotpepper/ui/budget_master.js"></script>
<script type="text/javascript">
Event.observe(window, 'load', function (){
  new Hotpepper.UI.Area.Pulldown().init();
  new Hotpepper.UI.Genre.Pulldown().init();
  new Hotpepper.UI.Budget.Pulldown().init();
});
</script>
</head>
<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>
料理ジャンル： <select id="hp-sel-genre"></select>
予算：         <select id="hp-sel-budget"></select>
</body>

これで各プルダウンの値が自動セットされます。後は各selectタグに任意のname属性をつけてあげればOKです。

Hotpepper API Perl ラッパーモジュール

ホットペッパー Webサービスが提供しているAPIを、Perlから簡単に呼び出す為のモジュールです。まだきちんと仕様を確定していないことや、テストコードも書いていないことから、モジュール名を仮に

WebService::Recruit::Alpha::Hotpepper

としています。使い方はこんな感じです：

use WebService::Recruit::Alpha::Hotpepper;
my $api = WebService::Recruit::Alpha::Hotpepper->new(
  api_key => 'guest' );
$api->gourmet_search(
  Keyword => '銀座',
  Start   => 11,
  # その他 API リファレンスにあるパラメータを指定
);
if($api->is_success){
  my $res = $api->get_result();
  print "$res->{Shop}[0]{ShopName}\n";
  my $pager = $api->get_paging_info();
  print "$pager->{disp_page_num} / $pager->{total_pages}"
    . " ページを表示中\n";
}else{
  die $api->get_error_msg();
}

APIが返すXMLをPerlネイティブなデータ構造に変換してくれたり、面倒なページング処理用のデータを自動生成してくれたりと、中々便利なモジュールのはずです。使い方の詳細は実際のサンプルコードを参考にしてください。

FORMプルダウン用マスタデータの最新化方法

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

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

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

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

ライセンス

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 の解説

不具合・バグ報告

不具合・不備・バグ報告などありましたら、各画面右最下部の「お問い合わせ」からお願いします。

目次

概要

配布アーカイブの内容

インストール方法

動作ブラウザ環境

パーツ単位で手軽に使いまわしが可能

FORMプルダウン用マスタデータの最新化方法

ライセンス

不具合・バグ報告

更新履歴

2007.02.16
v0.3 - ホットペッパー Webサービスのバージョンアップに伴って、比較表の表示項目追加などの機能拡張を施す
2007.01.26
v0.2 - update_budget_master.pl, update_genre_master.pl の不具合を修正
2007.01.23
v0.1 - 初回リリース

最新版をダウンロード

simple_hotpepper_lite.zip v0.3