YOLP Hacks： カセットサーチAPIの使い方
～拠点情報セットを活用する

Yahoo! Open Local Platform Hacks 第6回

1. カセットを検索する

　まずは、YOLPカセットサーチAPIでカセットを検索します。検索に必要なパラメータをjson形式で定義します。以下の例では検索キーワードに「牛丼」を指定しています。

    var url = http://cassette.search.olp.yahooapis.jp/OpenLocalPlatform/V1/cassetteSearch;  // APIのURL
    var param = {
        query  : "牛丼",           // 検索キーワード
        output : "jsonp",          // アウトプット形式にjsonpを指定
        appid  : "＜あなたのアプリケーションID＞"  // アプリケーションIDを指定
    };

2. カセットのレイヤーを生成

　カセット内の拠点情報を地図に描画するためには、Y.YolpSearchLayerオブジェクトをカセットごとに生成します。

　カセットごとに、カセットIDを指定してオブジェクトを追加します。生成した、各レイヤーはまとめてタブ表示を行うため（後述）、いったん配列に格納します。

    // カセット情報を取り出してY.YolpSearchLayerオブジェクトを生成
    var cid = "";
    var cids = new Array(); 
    var layers = new Array();                     // レイヤーをまとめる配列
    $.each(json.Feature, function(){
        // カセットIDを指定してYolpSearchLayerを生成する
        var layer = new Y.YolpSearchLayer({
                           chunk:true,            // 検索リストでチャンク表示を行うか
                           chunkCount:5,          // チャンク表示を行う場合のチャンク表示数
                           searchBox:true,        // 検索ボックスを表示するか
                           cid:this.Id            // カセットIDを指定する
        });
        // 生成したレイヤーを配列に追加
        layers.push({
               layer:layer,                       // 追加するオブジェクト
               name:this.Name,                    // タブの表示名
               default_query:''                   // デフォルトの検索キーワード
        });
        cids.push(this.Id);
    });

　また、カセットIDをカンマ区切りで連結してすることで、カセットをまとめて検索するレイヤーを定義することができます。すべてのカセットをまとめて検索するためのレイヤーも定義します。

    //　まとめて検索する用にカセットIDをすべてカンマ区切りで連結してYolpSearchLayerを生成
    cid = cids.join(",");
var layerall = new Y.YolpSearchLayer({
        chunk:true,
        chunkCount:5,
        searchBox:true,
        cid:cid
    });
    // 「すべて」レイヤーを先頭に追加
    layers.unshift({layer:layerall, name:'すべて', default_query:''});

3. カセットを取りまとめるタブを生成

　Y.ListingTabPluginを利用して、複数のレイヤーをタブにまとめて表示することができます。

　先に生成した、YolpSearchLayerオブジェクトの配列を指定して、Y.ListingTabPluginを生成します。生成したY.ListingTabPluginは、Y.Map.addPluginメソッドで地図に追加することができます。

    // リスティングタブプラグインの設定
    var listings = new Y.ListingTabPlugin({
        tab :'_tab',
        list:list,
        current:layerall,                         // 初期選択レイヤー
        layers:layers                             // レイヤーの配列
    });

    // プラグインの追加
    map.addPlugin(listings);