acts_as_static_maps

車椅子*バリアフリーグルメ情報検索Quuzu.jpの携帯版でモバイルQuuzuを作り中。で、google static maps APIを使ったので、その部分を練習がてらacts_as_static_mapsというRailsのプラグインにしました。

既存のアプリのDBにlongitude, latitude, lat, lon, lngなどそれらしい座標のカラムを持っていて、PC用のGoogle Mapsにデータ貼り付け等をおこなっている場合、簡単に携帯対応できます。

Google Static Maps APIとは、Google Mapsの利用においてJavascriptの知識が必須なのに対して、地図画像をURL指定で取ってくるだけのシンプルなAPIです。google static mapsはAPIの仕組み上（というかURLだけなのでAPIも何もないが...）地図を貼るのは簡単なんだけど、ズームや移動のナビゲーション用リンク作るのがかなりめんどくさいです。

たとえば、

あるズームの時、どれだけ移動すればいいか。
移動したあとにもう一回移動したいとき、どういうURLで取得すればいいか。

とまあ、微妙にパズルをしないといけない。そんなこんなで、めんどくさい部分を一度作ったので再利用できるようにとプラグイン化しました。特にめんどくさい移動、拡大縮小の部分をRailsのhelperとモデル拡張でサポートしています。

サンプルバリアフリーグルメ情報検索Quuzu(携帯版) (作りかけ)

どういう形式で配置すると「script/plugin install ...」でダウンロードできるようになるのかよくわかんないので、ファイルは暫定で以下のURLにzipでかためておいてあります。

ご利用は自己責任でお願いします。

置き場

http://cyslab.jp/files

解凍してRailsのvendor/plugins配下に置いて使ってください。

手順

以下、Shopモデル(shopsテーブル)が存在し、lat, lngというDB上のカラムが存在しており、ShopControllerにmapアクションを追加し、/shop/map/:idで地図表示ページを作成することを前提に話します。

入手

http://cyslab.jp/files
暫定置き場よりダウンロードして解凍してvendor/pluginsに配置してください。

Google API Key

あらかじめGoogle Mapsを使うためのAPIキーを取得しておいてください。

モデルの設定

app/models/shop.rb
以下のようにモデルに宣言を加えます。
longitude, latitude, lat, lon, lngなど座標用のカラムがあるモデル(テーブル)にacts_as_static_mapsが適用されます。

class Shop < ActiveRecord::Base
  acts_as_static_maps :google_api_key => GOOGLE_API_KEY, :latitude_column => 'lat', :longitude_column => 'lng'
end

定数GOOGLE_API_KEYはてきとうです。GoogleのAPI keyがセットされていると考えてください。
直接GoogleのAPI keyを入力しても構いません。latitude_columnとlongitude_columnは既存のDBのテーブル中の座標をあらわすカラム名をいれてください。

Controllerの作成

app/controllers/shop_controller.rb

class ShopController < ApplicationController
  def map
    @shop = Shop.find_by_id(params[:id])
  end
end

これだけです。特別なことは無し。

Viewの作成

app/views/shop/map.html.erb

<%= map_image @shop %>

地図を表示するだけならこれだけです。
map_imageメソッドはヘルパーです。

移動や拡大縮小対応

app/views/shop/map.html.erb
shift_navigationとzoom_in_navigation, zoom_out_navigationというヘルパーメソッドを用意しています。名前が長すぎとか嫌いなひとは別途作ってください。

    <div class="map" align="center">
    <%= map_image @shop %>
    </div>
    <div class="zoom" align="center">
    <%= zoom_in_navigation @shop, :accesskey=>'*', :link_text=>'拡大' %>
    <%= zoom_out_navigation @shop, :accesskey=>'#', :link_text=>'縮小' %>
    </div>
    <div class="move" align="center">
      <table cellpadding="0" cellspacing="0">
        <tr>
          <td>
            <%= shift_navigation @shop, :accesskey=>'1', :link_text=>'1', :x=>-1, :y=>1 %>
          </td>
          <td>
            <%= shift_navigation @shop, :accesskey=>'2', :link_text=>'2', :x=>0, :y=>1 %>
          </td>
          <td>
            <%= shift_navigation @shop, :accesskey=>'3', :link_text=>'3', :x=>1, :y=>1 %>
          </td>
        </tr>
        <tr>
          <td>
            <%= shift_navigation @shop, :accesskey=>'4', :link_text=>'4', :x=>-1, :y=>0 %>
          </td>
          <td>
            <%= shift_navigation @shop, :accesskey=>'5', :link_text=>'5', :x=>0, :y=>0 %>
          </td>
          <td>
            <%= shift_navigation @shop, :accesskey=>'6', :link_text=>'6', :x=>1, :y=>0 %>
          </td>
        </tr>
        <tr>
          <td>
            <%= shift_navigation @shop, :accesskey=>'7', :link_text=>'7', :x=>-1, :y=>-1 %>
          </td>
          <td>
            <%= shift_navigation @shop, :accesskey=>'8', :link_text=>'8', :x=>0, :y=>-1 %>
          </td>
          <td>
            <%= shift_navigation @shop, :accesskey=>'9', :link_text=>'9', :x=>1, :y=>-1 %>
          </td>
        </tr>
      </table>
    </div>

これらのヘルパーは移動や拡大縮小のためのparamsを提供しますので受け側のコントローラで受けてやります。

モデル(この場合shopモデル)に追加されたstatic_map_shiftメソッドとcurrent_zoomメソッドで受けます。
app/controllers/shop_controller.rb

class ShopController < ApplicationController
  def map
    @shop = Shop.find_by_id(params[:id])
    @shop.static_map_shift(:lat_to_shift=>params[:lat_to_shift], :lng_to_shift=>params[:lng_to_shift])
    @shop.current_zoom=params[:next_zoom]
  end
end

サンプルバリアフリーグルメ情報検索Quuzu(携帯版) (作りかけ)