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