Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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 = 'phe11375af...
これで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
$ ....
さっきのOnsenクラスは
lib/onsen.rbに保存
class OnsenController < ApplicationController
def index
@map = GMap.new("map_div")
@map.control_init :large_map => true, :...
<html>
<head>
<%= GMap.header %>
<%= @map.to_html %>
</head>
<body>
<%= @map.div(:width => 600, :height => 400) %>
</body>...
これだけで地図表示
これにじゃらんで
ゲットした温泉を
ピンで打つ
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, :...
吹き出しの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.s...
これも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(‘Thumbnai...
これで吹き出しに
写真が出た
写真合ってない・・・
ひとまずこれで完成
不満点が沢山
遅い!
キャッシュで改善
ニセコ以外は?
選べるように
しましょう
コメントとかは?
acts_as_commentableで
携帯は?
jpmobileで
これを改善して
自分温泉地図を
作りませんか?
スライドとソースは
http://blog.masuidrive.jp/
How to build 1 hour mashup site
How to build 1 hour mashup site
How to build 1 hour mashup site
How to build 1 hour mashup site
How to build 1 hour mashup site
How to build 1 hour mashup site
How to build 1 hour mashup site
How to build 1 hour mashup site
How to build 1 hour mashup site
Upcoming SlideShare
Loading in …5
×

How to build 1 hour mashup site

3,151 views

Published on

Published in: Technology
  • Be the first to comment

How to build 1 hour mashup site

  1. 1. 1時間で作る マッシュアップ 株式会社ワイズノット 増井 雄一郎
  2. 2. ↓Macbook pro
  3. 3. ↓Macbook pro Not 防水
  4. 4. 1時間以上かけてたら ゆだっちゃう
  5. 5. Rails使ったことある人
  6. 6. 自分でMashup したことある人
  7. 7. サイトなんかも 公開しちゃってる人
  8. 8. Mashup マッシュアップ
  9. 9. 音楽用語
  10. 10. Remixとの違い
  11. 11. 曲をいじったり くっつけるのが Remix
  12. 12. 歌詞はこっち メロディーはあっちで Mashup
  13. 13. 繋げるだけじゃなく 変えるだけじゃなく
  14. 14. いろんなサイトを ごちゃまぜにしちゃえ
  15. 15. 携帯と地図のMashup
  16. 16. 実は私なんかより 有名なMashupな人が 北海道にいる
  17. 17. 元道庁の黒田さん
  18. 18. Sun × RECRUIT Mash Up Award 最優秀賞 出張JAWS
  19. 19. 今日は来られない らしい
  20. 20. 残念!
  21. 21. Mashupとは
  22. 22. アプリケーションの 再構築
  23. 23. 昔は無理矢理 やっていた
  24. 24. HTML解析して・・・
  25. 25. 自分で使う分には 良いけど公開できない
  26. 26. いまでもAPI公開して ないサイトのデータを 使うときにやる
  27. 27. データが命! 勝手に使わせるなんて もってのほか!
  28. 28. でもWeb2.0時代は サイト側がある程度 自由にデータや システムを使わせてくれる
  29. 29. なんで?
  30. 30. ビジネスモデルの変化
  31. 31. データを囲い込んでも 換金する方法がない
  32. 32. でもトラフィックは 広告で金になる
  33. 33. サイトに誘導するため データを使おう
  34. 34. その使わせてくれる 口がWebAPI
  35. 35. 色々なWebAPIが 提供されてきている
  36. 36. 大別すると3種類
  37. 37. データ系
  38. 38. RSS Amazon Web Service ホットペッパー Google検索 じゃらんnet
  39. 39. データを公開
  40. 40. ここの部分が多い
  41. 41. 既存にデータを 持っているところは 容易に展開できる為
  42. 42. 処理系
  43. 43. スクリーンショット 形態素解析 テキスト→MP3変換
  44. 44. データを投げると 何らかの処理を してくれる
  45. 45. 表示系
  46. 46. Google Maps NIFTY Timeline べつやくメソッドAPI
  47. 47. 色々なデータを表示 する基盤
  48. 48. ほとんどのAPIは MVCのMやVに相当
  49. 49. Controllerを どうやって作る?
  50. 50. 既存の手法と同じ
  51. 51. PHP, Perl, Ruby, Java....
  52. 52. ちゃんと作ると 非同期処理が多く PHPは不利
  53. 53. そこで我らが Ruby on Rails
  54. 54. 救世主
  55. 55. さすがはWeb2.0系 フレークワーク
  56. 56. WebAPIを楽にする ActiveResource
  57. 57. Rails2.0から標準添付
  58. 58. でもRails2.0が いつ出るかは謎
  59. 59. しかしActiveResourceは
  60. 60. Rails 対 Rails にしか 使えない
  61. 61. 別の方法を考えよう
  62. 62. さてMashupで 何を作る?
  63. 63. 今日のお題は 「北海道温泉マップ」
  64. 64. YMOZE-Yさんの リクエスト
  65. 65. じゃらんが温泉情報 をWebAPIで公開
  66. 66. これをマッピング
  67. 67. どっから初めるかな
  68. 68. まずは温泉情報を 持ってこよう
  69. 69. APIのページを読む
  70. 70. API使うには 登録がいる
  71. 71. APIキーをもらったら URLを叩くだけ
  72. 72. http://jws.jalan.net/APICommon/ OnsenSearch/V1/? key=**********&l_area=010802 &count=1&xml_ptn=1
  73. 73. XMLで帰ってくる
  74. 74. これをプログラムで ごにょごにょ・・・
  75. 75. Railsを使えば一発!
  76. 76. とは行かない・・・
  77. 77. 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
  78. 78. これでAPIを使える
  79. 79. ちょっと読めないよね
  80. 80. 詳細はWebで!
  81. 81. ニセコの温泉リストを 取り出す
  82. 82. irb> puts Onsen.find(:count => 10, :s_area => '010802').map{|o| o.name}.join(',') =>いわない温泉,雷電温泉,朝日温泉,ニセコワイス高原温泉 (ニセ コ),ワイス温泉 (ニセコ),ひらふ温泉 (ニセコ),ニセコアンヌプリ 温泉 (ニセコ),ニセコ昆布温泉 (ニセコ),ニセコ薬師温泉...
  83. 83. こっちはマシ
  84. 84. このリストを Google Mapに入れる
  85. 85. こっちはRubyの ライブラリがある
  86. 86. YM4R/GM
  87. 87. GoogleMaps APIを Railsで使うライブラリ
  88. 88. $ 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
  89. 89. さっきのOnsenクラスは lib/onsen.rbに保存
  90. 90. 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
  91. 91. <html> <head> <%= GMap.header %> <%= @map.to_html %> </head> <body> <%= @map.div(:width => 600, :height => 400) %> </body> </html>
  92. 92. これだけで地図表示
  93. 93. これにじゃらんで ゲットした温泉を ピンで打つ
  94. 94. Google Mapsでピンを 打つには緯度経度が 必要
  95. 95. じゃらんAPIでは 住所しか持ってない
  96. 96. そこで ジオコーディング
  97. 97. 住所から緯度経度を 割り出す
  98. 98. これもGoogle Maps API の一つ
  99. 99. YM4R/GMを使えば それも楽々
  100. 100. ニセコ駅の緯度経度 を調べる
  101. 101. irb> niseko = Geocoding.get(‘ニセコ駅’) irb> niseko.first.latlon => [40.34575, -3.816734]
  102. 102. Onsenクラスにコレを くっつける
  103. 103. class Onsen ∼中略∼ def latlon Geocoding.get(@address).first.latlon end end
  104. 104. これで2つのAPIを あっさりMashup
  105. 105. これを地図に 放り込む
  106. 106. 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
  107. 107. 吹き出しのHTMLも
  108. 108. <div><strong><%=h onsen.name %></strong></div> <div><%=h onsen.address %></div>
  109. 109. できあがり
  110. 110. つまらない・・・
  111. 111. 温泉の写真も貼ろう
  112. 112. 写真と言えば Flickr
  113. 113. もちろんWebAPI公開
  114. 114. Ruby用バインドも 複数公開
  115. 115. $ cd lib $ wget http://redgreenblu.com/flickr/flickr.rb $ vi flickr.rb # 57行目のAPIKEYを変更 $ cd ..
  116. 116. 試しに五色温泉の 写真を取得
  117. 117. irb> flickr = Flickr.new irb> photo = flickr.photos(:text => ‘ニセコ五色温泉’).first irb> photo.source('Thumbnail') =>http://farm1.static.flickr.com/136/328193836_725a658789_t.jpg
  118. 118. これもOnsenクラスに いれちゃう
  119. 119. class Onsen ∼中略∼ def photo(size='Thumbnail') Flickr.new.photos(:text => @name.gsub (/(.*/,'')).first.source(size) end end
  120. 120. これで写真も 取得できちゃう
  121. 121. 最後にこれを マッピング
  122. 122. <div><strong><%=h onsen.name %></strong></div> <div><%=h onsen.address %></div> <%= image_tag(onsen.photo.source(‘Thumbnail’)) rescue ‘No photo’ %>
  123. 123. これで吹き出しに 写真が出た
  124. 124. 写真合ってない・・・
  125. 125. ひとまずこれで完成
  126. 126. 不満点が沢山
  127. 127. 遅い!
  128. 128. キャッシュで改善
  129. 129. ニセコ以外は?
  130. 130. 選べるように しましょう
  131. 131. コメントとかは?
  132. 132. acts_as_commentableで
  133. 133. 携帯は?
  134. 134. jpmobileで
  135. 135. これを改善して 自分温泉地図を 作りませんか?
  136. 136. スライドとソースは http://blog.masuidrive.jp/

×