View
4.029
Download
0
Category
Preview:
DESCRIPTION
OSC2007で話した内容
Citation preview
風呂でのぼせないうちに作るマッシュアップ株式会社ワイズノット 増井 雄一郎
↓Macbook pro
↓Macbook proNot 防水
1時間以上かけてたらのぼせちゃう
Rails使ったことある人
自分でMashup
したことある人
サイトなんかも公開しちゃってる人
Mashupマッシュアップ
音楽用語
Remixとの違い
曲をいじったりくっつけるのが
Remix
歌詞はこっちメロディーはあっちで
Mashup
繋げるだけじゃなく変えるだけじゃなく
いろんなサイトをごちゃまぜにしちゃえ
携帯と地図のMashup
Mashupとは
アプリケーションの再構築
昔は無理矢理やっていた
HTML解析して・・・
自分で使う分には良いけど公開できない
いまでもAPI公開してないサイトのデータを使うときにやる
データが命！勝手に使わせるなんてもってのほか！
でもWeb2.0時代はサイト側がある程度自由にデータや
システムを使わせてくれる
なんで？
ビジネスモデルの変化
データを囲い込んでも換金する方法がない
でもトラフィックは広告で金になる
サイトに誘導するためデータを使おう
その使わせてくれる口がWebAPI
色々なWebAPIが提供されてきている
大別すると3種類
データ系
RSSAmazon Web Service
Google検索ホットペッパーじゃらんnet
データを公開
ここの部分が多い
既存にデータを持っているところは容易に展開できる為
処理系
スクリーンショット形態素解析
テキスト→MP3変換
データを投げると何らかの処理をしてくれる
表示系
Google MapsNIFTY Timeline
べつやくメソッドAPI
色々なデータを表示する基盤
ほとんどのAPIはMVCのMやVに相当
Controllerをどうやって作る？
既存の手法と同じ
PHP, Perl, Ruby, Java....
ちゃんと作ると非同期処理が多く
PHPは不利
そこで我らがRuby on Rails
救世主
さすがはWeb2.0系フレークワーク
WebAPIを楽にするActiveResource
Rails2.0から標準添付
でもRails2.0がいつ出るかは謎
しかしActiveResourceは
Rails 対 Rails にしか使えない
別の方法を考えよう
さてMashupで何を作る？
OSC-Doではblogでリクエストを
募って
「北海道温泉マップ」
じゃらんが温泉情報をWebAPIで公開
これをマッピング
なのでKansaiでは
「京都府温泉マップ」
京都は温泉すくなくて焦った
まずは温泉情報を持ってこよう
APIのページを読む
API使うには登録がいる
APIキーをもらったらURLを叩くだけ
http://jws.jalan.net/APICommon/OnsenSearch/V1/?
key=**********&l_area=010802&count=1&xml_ptn=1
XMLで帰ってくる
これをプログラムでごにょごにょ・・・
Railsを使えば一発！
とは行かない・・・
require 'net/http'require 'cgi'require 'rexml/document'
class Onsen attr_accessor :address, :name, :id
KEY = 'phe11375af71ba' URL = 'http://jws.jalan.net/APICommon/OnsenSearch/V1/?' def self.find(params) results = [] get(params).elements.each('Results/Onsen') do |el| results << Onsen.new(el.elements["OnsenID"].text, el.elements["OnsenName"].text, el.elements["OnsenAddress"].text) end results end
def self.url(params) params[:key] = KEY URI.parse(URL+((params.map { |key,value| "#{key}=#{CGI::escape(value.to_s)}"}).join('&'))) end
def self.get(params) REXML::Document.new(Net::HTTP.get(url(params))) end def initialize(id, name, address) @id, @name, @address = id, name, address endend
これでAPIを使える
ちょっと読めないよね
詳細はWebで！
京都府の温泉リストを取り出す
irb> puts Onsen.find(:count => 10, :pref => '260000').map{|o| o.name}.join(',')=>丹後琴引温泉,夕日ヶ浦温泉,木津温泉,久美の浜温泉郷,岩滝温泉,
ゆらゆら温泉郷,くらま温泉,湯の花温泉,嵐山温泉,北白川天然ラジウム温泉
このリストをGoogle Mapに入れる
こっちはRubyのライブラリがある
YM4R/GM
GoogleMaps APIをRailsで使うライブラリ
$ rails onsen -d sqlite3$ cd onsen$ script/plugin install \ svn://rubyforge.org/var/svn/ym4r/Plugins/GM/trunk/ym4r_gm$ ./script/generate controller onsen index
さっきのOnsenクラスはlib/onsen.rbに保存
class OnsenController < ApplicationController def index @map = GMap.new("map_div") @map.control_init :large_map => true, :map_type => true @map.center_zoom_init([35.400245,135.42572], 9) endend
<html><head><%= GMap.header %><%= @map.to_html %></head><body><%= @map.div(:width => 600, :height => 400) %></body></html>
これだけで地図表示
これにじゃらんでゲットした温泉をピンで打つ
Google Mapsでピンを打つには緯度経度が
必要
じゃらんAPIでは住所しか持ってない
そこでジオコーディング
住所から緯度経度を割り出す
これもGoogle Maps API
の一つ
YM4R/GMを使えばそれも楽々
京都駅の緯度経度を調べる
irb> kyoto = Geocoding.get(‘京都駅’)
irb> kyoto.first.latlon=> [34.985458, 135.757755]
Onsenクラスにコレをくっつける
class Onsen ～中略～ def latlon Geocoding.get(@address).first.latlon endend
でもGoogleのジオコーディングは郡に対応していない
正規表現で「郡」を取り除けば大丈夫
class Onsen ～中略～ def latlon Geocoding.get(@address.gsub(/(北海道|府|県).{1,5}郡/,'¥¥1')).first.latlon
endend
これで2つのAPIをMashup
これを地図に放り込む
class OnsenController < ApplicationController def index @map = GMap.new("map_div") @map.control_init(:large_map => true, :map_type => true) @map.center_zoom_init([35.400245,135.42572], 9) return Onsen.find(:count => 50, :pref => '260000').each do |o| begin marker = GMarker.new( o.latlon, :title => o.name, :info_window => render_to_string( :partial => 'point', :locals => { :onsen => o }) ) @map.overlay_init(marker) rescue end end end
吹き出しのHTMLも
<div><strong><%=h onsen.name %></strong></div><div><%=h onsen.address %></div>
できあがり
つまらない・・・
温泉の写真も貼ろう
写真と言えばFlickr
もちろんWebAPI公開
Ruby用バインドも複数公開
でも京都の温泉の写真は全然ヒットしない
ほかに写真を公開しているAPIは・・・
Yahoo画像検索Webサービス
キーワードの写真が取得できる
すばらしい！
使い方も簡単
http://api.search.yahoo.co.jp/ImageSearchService/V1/
imageSearch?appid=YahooDemo&results=1&
query=天の橋立温泉
これもOnsenクラスにいれちゃう
class Onsen ～中略～ def photo Onsen.get({ :appid=>'kyotoonsen', :query=>@name.gsub(/ ¥(.*/,''),
:results => 1}, "http://api.searc........rch?" ).elements['/ResultSet/Result/Thumbnail/Url'].text endend
これで写真も取得できちゃう
最後にこれをマッピング
<div><strong><%=h onsen.name %></strong></div><div><%=h onsen.address %></div><div style="height: 120px"><%= image_tag(onsen.photo) rescue 'No photo' %></div>
これで吹き出しに写真が出た
写真合ってない・・・
ひとまずこれで完成
不満点が沢山
遅い！
キャッシュで改善
京都以外は？
選べるようにしましょう
コメントとかは？
acts_as_commentableで
携帯は？
jpmobileで
これを改善して自分温泉地図を作りませんか？
Recommended