Embed Size (px)
DESCRIPTION
Citation preview
1時間で作るマッシュアップ
株式会社ワイズノット 増井 雄一郎
↓Macbook pro
↓Macbook proNot 防水
1時間以上かけてたらゆだっちゃう
Rails使ったことある人
自分でMashup
したことある人
サイトなんかも公開しちゃってる人
Mashupマッシュアップ
音楽用語
Remixとの違い
曲をいじったりくっつけるのが
Remix
歌詞はこっちメロディーはあっちで
Mashup
繋げるだけじゃなく変えるだけじゃなく
いろんなサイトをごちゃまぜにしちゃえ
携帯と地図のMashup
実は私なんかより有名なMashupな人が北海道にいる
元道庁の黒田さん
Sun × RECRUIT Mash Up Award 最優秀賞出張JAWS
今日は来られないらしい
残念!
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で何を作る？
今日のお題は「北海道温泉マップ」
YMOZE-Yさんのリクエスト
じゃらんが温泉情報をWebAPIで公開
これをマッピング
どっから初めるかな
まずは温泉情報を持ってこよう
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, :s_area => '010802').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([42.808783,140.684566], 11) 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> niseko = Geocoding.get(‘ニセコ駅’)
irb> niseko.first.latlon=> [40.34575, -3.816734]
Onsenクラスにコレをくっつける
class Onsen ～中略～ def latlon Geocoding.get(@address).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([42.808783,140.684566], 11)
Onsen.find(:count => 10, :s_area => '010802').each do |o| marker = GMarker.new( o.latlon, :title => o.name, :info_window => render_to_string(:partial => 'point', :locals => { :onsen => o })) @map.overlay_init(marker) end endend
吹き出しのHTMLも
<div><strong><%=h onsen.name %></strong></div><div><%=h onsen.address %></div>
できあがり
つまらない・・・
温泉の写真も貼ろう
写真と言えばFlickr
もちろんWebAPI公開
Ruby用バインドも複数公開
$ cd lib$ wget http://redgreenblu.com/flickr/flickr.rb$ vi flickr.rb # 57行目のAPIKEYを変更$ cd ..
試しに五色温泉の写真を取得
irb> flickr = Flickr.newirb> photo = flickr.photos(:text => ‘ニセコ五色温泉’).first
irb> photo.source('Thumbnail') =>http://farm1.static.flickr.com/136/328193836_725a658789_t.jpg
これもOnsenクラスにいれちゃう
class Onsen ～中略～ def photo(size='Thumbnail') Flickr.new.photos(:text => @name.gsub(/（.*/,'')).first.source(size)
endend
これで写真も取得できちゃう
最後にこれをマッピング
<div><strong><%=h onsen.name %></strong></div><div><%=h onsen.address %></div><%= image_tag(onsen.photo.source(‘Thumbnail’)) rescue ‘No photo’ %>
これで吹き出しに写真が出た
写真合ってない・・・
ひとまずこれで完成
不満点が沢山
遅い！
キャッシュで改善
ニセコ以外は？
選べるようにしましょう
コメントとかは？
acts_as_commentableで
携帯は？
jpmobileで
これを改善して自分温泉地図を作りませんか？
![[F4]deview2012 ncr mashup](https://img.pdfslide.tips/doc/110x75/5566ed4ed8b42a8e528b4608/f4deview2012-ncr-mashup.jpg)
