YOLP Hacks：API群を組み合わせてオリジナルWebアプリケーションを作る

Yahoo! Open Local Platform Hacks 第5回

すべての機能を1つのプラグインとして統合する

　これまでYOLPのAPI群を利用して、一つ一つの機能を実現する方法を確認してきました。

　今度は、JavaScriptマップAPIから利用しやすいように、これらの機能を1つのプラグインとして統合してみます。プラグイン化することで、JavaScriptマップAPI本体との結合が疎になり、誰でもY.Map.addPlugin()インターフェースを通して使うことができるようになります。実際に、Yahoo!ロコやLatLongLabといったYahoo! JAPANのサービスでは、JavaScriptマップAPI本体にない機能をプラグイン化しておくことで、各サービスで独立した機能追加を実現しています。

　JavaScriptマップAPIのプラグインは、Y.Pluginというオブジェクトを継承して定義します。load()メソッドとunload()メソッドの実装が必須になります。さらにプラグインが提供するインターフェースとして、任意の場所クエリを受け取って周辺のショップ情報分布のヒートマップを描画するrender()メソッドを定義することにします。

　汎用的に使えるよう、アプリケーションIDとカセットIDは任意の値を渡せるようにしておきます。

// Y.Pluginを継承したCassetteHeatmapPluginを定義します
var CassetteHeatmapPlugin = Y.extend(Y.Plugin , function(appId, cassetteId) {
    this.geoCoder = new Y.GeoCoder();
    this.heatmapLayer = null;
    this.urlBase = "http://search.olp.yahooapis.jp/OpenLocalPlatform/V1/localSearch"
                 + "?appid=" + appId
                 + "&cid=" + cassetteId
                 + "&sort=dist"
                 + "&results=100"
                 + "&dist=5";
});

// load()メソッドを実装します
CassetteHeatmapPlugin.prototype.load = function(map) {
    // プラグイン自身が関連付けられたY.Mapオブジェクトを保持します
    this.map = map;
};

// 受け取ったqueryの周辺ショップ情報をヒートマップ表示します
CassetteHeatmapPlugin.prototype.render = function(query) {
    // 表示済みのヒートマップレイヤーがあったときは事前に削除します
    if (this.heatmapLayer) {
        this.map.removeLayer(this.heatmapLayer);
        this.heatmapLayer = null;
    }

    // ジオコーダAPIへの問い合わせを実行します
    var self = this;
    var request = {
        "query": query
    };
    this.geoCoder.execute(request, function(ydf) {
        var hasResult = ydf.result.count > 0;
        if (hasResult) {
            // ジオコーディング結果を使って地図上にヒートマップを追加します
            var latlng = ydf.features[0].latlng;
            self.addHeatmapLayer(latlng);
        }
    });
};

CassetteHeatmapPlugin.prototype.addHeatmapLayer = function(latlng) {
    // ローカルサーチAPIのURLを作成します
    var cassetteUrl = this.urlBase
                    + "&lat=" + latlng.lat()
                    + "&lon=" + latlng.lng();

    // ヒートマップレイヤーを追加します
    this.heatmapLayer = new Y.GeoXmlHeatmapLayer(cassetteUrl);
    this.map.addLayer(this.heatmapLayer);
    this.map.panTo(latlng);
};

// unload() メソッドを実装します
CassetteHeatmapPlugin.prototype.unload = function() {
    if (this.heatmapLayer) {
        this.map.removeLayer(this.heatmapLayer);
    }
};

　これで個々に作成してきた機能がCassetteHeatmapPluginというプラグインに統合されました。

　このプラグインを使うには、以下のようにします。

var appId = "＜あなたのアプリケーションID＞";
var cassetteId = "d115e2a62c8f28cb03a493dc407fa03f";
var myPlugin = new CassetteHeatmapPlugin(appId, cassetteId);

map.addPlugin(myPlugin);
myPlugin.render("東京都港区");