SlideShare une entreprise Scribd logo
1  sur  145
Télécharger pour lire hors ligne
1時間で作る
マッシュアップ
株式会社ワイズノット 増井 雄一郎
↓Macbook pro
↓Macbook pro
Not 防水
1時間以上かけてたら
ゆだっちゃう
Rails使ったことある人
自分でMashup
したことある人
サイトなんかも
公開しちゃってる人
Mashup
マッシュアップ
音楽用語
Remixとの違い
曲をいじったり
くっつけるのが
Remix
歌詞はこっち
メロディーはあっちで
Mashup
繋げるだけじゃなく
変えるだけじゃなく
いろんなサイトを
ごちゃまぜにしちゃえ
携帯と地図のMashup
実は私なんかより
有名なMashupな人が
北海道にいる
元道庁の黒田さん
Sun × RECRUIT Mash Up
Award 最優秀賞
出張JAWS
今日は来られない
らしい
残念!
Mashupとは
アプリケーションの
再構築
昔は無理矢理
やっていた
HTML解析して・・・
自分で使う分には
良いけど公開できない
いまでもAPI公開して
ないサイトのデータを
使うときにやる
データが命!
勝手に使わせるなんて
もってのほか!
でもWeb2.0時代は
サイト側がある程度
自由にデータや
システムを使わせてくれる
なんで?
ビジネスモデルの変化
データを囲い込んでも
換金する方法がない
でもトラフィックは
広告で金になる
サイトに誘導するため
データを使おう
その使わせてくれる
口がWebAPI
色々なWebAPIが
提供されてきている
大別すると3種類
データ系
RSS
Amazon Web Service
ホットペッパー
Google検索
じゃらんnet
データを公開
ここの部分が多い
既存にデータを
持っているところは
容易に展開できる為
処理系
スクリーンショット
形態素解析
テキスト→MP3変換
データを投げると
何らかの処理を
してくれる
表示系
Google Maps
NIFTY 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
end
end
これで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)
end
end
<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
end
end
これで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
end
end
吹き出しの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.new
irb> 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)
end
end
これで写真も
取得できちゃう
最後にこれを
マッピング
<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で
これを改善して
自分温泉地図を
作りませんか?
スライドとソースは
http://blog.masuidrive.jp/

Contenu connexe

Plus de Yuichiro MASUI

マッシュアップ沖縄版 おまけ:OpenSocail
マッシュアップ沖縄版 おまけ:OpenSocailマッシュアップ沖縄版 おまけ:OpenSocail
マッシュアップ沖縄版 おまけ:OpenSocailYuichiro MASUI
 
OSC2007-niigata - mashup
OSC2007-niigata - mashupOSC2007-niigata - mashup
OSC2007-niigata - mashupYuichiro MASUI
 
2007/09/29 PHP to Rails - Webキャリアさん主催 ”PHPプログラマの為のRuby on Rails入門”
2007/09/29 PHP to Rails - Webキャリアさん主催 ”PHPプログラマの為のRuby on Rails入門”2007/09/29 PHP to Rails - Webキャリアさん主催 ”PHPプログラマの為のRuby on Rails入門”
2007/09/29 PHP to Rails - Webキャリアさん主催 ”PHPプログラマの為のRuby on Rails入門”Yuichiro MASUI
 
2007/09/29 PHP to Ruby - Webキャリアさん主催 ”PHPプログラマの為のRuby on Rails入門”
2007/09/29 PHP to Ruby - Webキャリアさん主催 ”PHPプログラマの為のRuby on Rails入門”2007/09/29 PHP to Ruby - Webキャリアさん主催 ”PHPプログラマの為のRuby on Rails入門”
2007/09/29 PHP to Ruby - Webキャリアさん主催 ”PHPプログラマの為のRuby on Rails入門”Yuichiro MASUI
 
Railsチュートリアル
RailsチュートリアルRailsチュートリアル
RailsチュートリアルYuichiro MASUI
 
1時間で作るマッシュアップサービス(関西版)
1時間で作るマッシュアップサービス(関西版)1時間で作るマッシュアップサービス(関西版)
1時間で作るマッシュアップサービス(関西版)Yuichiro MASUI
 
Masuidrive Working Style
Masuidrive Working StyleMasuidrive Working Style
Masuidrive Working StyleYuichiro MASUI
 

Plus de Yuichiro MASUI (14)

AIR+Blaze+Ruby
AIR+Blaze+RubyAIR+Blaze+Ruby
AIR+Blaze+Ruby
 
マッシュアップ沖縄版 おまけ:OpenSocail
マッシュアップ沖縄版 おまけ:OpenSocailマッシュアップ沖縄版 おまけ:OpenSocail
マッシュアップ沖縄版 おまけ:OpenSocail
 
OSC2007-niigata - mashup
OSC2007-niigata - mashupOSC2007-niigata - mashup
OSC2007-niigata - mashup
 
Rails 1H
Rails 1HRails 1H
Rails 1H
 
2007/09/29 PHP to Rails - Webキャリアさん主催 ”PHPプログラマの為のRuby on Rails入門”
2007/09/29 PHP to Rails - Webキャリアさん主催 ”PHPプログラマの為のRuby on Rails入門”2007/09/29 PHP to Rails - Webキャリアさん主催 ”PHPプログラマの為のRuby on Rails入門”
2007/09/29 PHP to Rails - Webキャリアさん主催 ”PHPプログラマの為のRuby on Rails入門”
 
2007/09/29 PHP to Ruby - Webキャリアさん主催 ”PHPプログラマの為のRuby on Rails入門”
2007/09/29 PHP to Ruby - Webキャリアさん主催 ”PHPプログラマの為のRuby on Rails入門”2007/09/29 PHP to Ruby - Webキャリアさん主催 ”PHPプログラマの為のRuby on Rails入門”
2007/09/29 PHP to Ruby - Webキャリアさん主催 ”PHPプログラマの為のRuby on Rails入門”
 
Railsチュートリアル
RailsチュートリアルRailsチュートリアル
Railsチュートリアル
 
InstantRails how to
InstantRails how toInstantRails how to
InstantRails how to
 
Rubyの基礎
Rubyの基礎Rubyの基礎
Rubyの基礎
 
PukiWiki
PukiWikiPukiWiki
PukiWiki
 
1時間で作るマッシュアップサービス(関西版)
1時間で作るマッシュアップサービス(関西版)1時間で作るマッシュアップサービス(関西版)
1時間で作るマッシュアップサービス(関西版)
 
Masuidrive Working Style
Masuidrive Working StyleMasuidrive Working Style
Masuidrive Working Style
 
Ruby de Rails
Ruby de RailsRuby de Rails
Ruby de Rails
 
Furo Grammer
Furo GrammerFuro Grammer
Furo Grammer
 

Dernier

新人研修 後半 2024/04/26の勉強会で発表されたものです。
新人研修 後半        2024/04/26の勉強会で発表されたものです。新人研修 後半        2024/04/26の勉強会で発表されたものです。
新人研修 後半 2024/04/26の勉強会で発表されたものです。iPride Co., Ltd.
 
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptxsn679259
 
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアルLoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアルCRI Japan, Inc.
 
Utilizing Ballerina for Cloud Native Integrations
Utilizing Ballerina for Cloud Native IntegrationsUtilizing Ballerina for Cloud Native Integrations
Utilizing Ballerina for Cloud Native IntegrationsWSO2
 
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Gamesatsushi061452
 
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...Toru Tamaki
 
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。iPride Co., Ltd.
 
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
論文紹介:Selective Structured State-Spaces for Long-Form Video UnderstandingToru Tamaki
 
Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)
Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)
Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)Hiroshi Tomioka
 
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。iPride Co., Ltd.
 
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
LoRaWANスマート距離検出センサー  DS20L  カタログ  LiDARデバイスLoRaWANスマート距離検出センサー  DS20L  カタログ  LiDARデバイス
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイスCRI Japan, Inc.
 

Dernier (11)

新人研修 後半 2024/04/26の勉強会で発表されたものです。
新人研修 後半        2024/04/26の勉強会で発表されたものです。新人研修 後半        2024/04/26の勉強会で発表されたものです。
新人研修 後半 2024/04/26の勉強会で発表されたものです。
 
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
 
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアルLoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
 
Utilizing Ballerina for Cloud Native Integrations
Utilizing Ballerina for Cloud Native IntegrationsUtilizing Ballerina for Cloud Native Integrations
Utilizing Ballerina for Cloud Native Integrations
 
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
 
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
 
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
 
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
 
Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)
Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)
Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)
 
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
 
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
LoRaWANスマート距離検出センサー  DS20L  カタログ  LiDARデバイスLoRaWANスマート距離検出センサー  DS20L  カタログ  LiDARデバイス
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
 

How to build 1 hour mashup site