狠狠撸

狠狠撸Share a Scribd company logo
1時間で作ると
間に合わないので
45分で作る
マッシュアップ
株式会社ワイズノット 増井 雄一郎
今日の话题
WebAPI & mashup
マッシュアップで
冲縄そばマップ
mixiに自分でアプリが
組み込めるOpenSocial
搁补颈濒蝉使ったことある人
自分でMashup
したことある人
サイトなんかも
公開しちゃってる人
Mashup
マッシュアップ
音楽用语
搁别尘颈虫との违い
曲をいじったり
くっつけるのが
Remix
歌詞はこっち
メロディーはあっちで
Mashup
繋げるだけじゃなく
変えるだけじゃなく
いろんなサイトを
ごちゃまぜにしちゃえ
携帯と地図の惭补蝉丑耻辫
マッシュアップ沖縄版 おまけ:OpenSocail
惭补蝉丑耻辫とは
アプリケーションの
再構築
昔は無理矢理
やっていた
贬罢惭尝解析して???
自分で使う分には
良いけど公開できない
いまでも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
搁补颈濒蝉2.0から标準添付
でもRails2.0が
いつ出るかは
しかし础肠迟颈惫别搁别蝉辞耻谤肠别は
Rails 対 Rails にしか
使えない
别の方法を考えよう
さてMashupで
何を作る?
OSC-Doでは
blogでリクエストを
募って
「北海道温泉マップ」
じゃらんが温泉情報
をWebAPIで公開
これをマッピング
なので冲縄では
「冲縄温泉マップ」
でも沖縄
温泉ないじゃん!
そこで???
冲縄そばマップ
沖縄そば
大好きなんです!
まず必要なのは
沖縄そば屋の情報
どこから持ってくる?
ぐるなび
グルメ情报サイト
础笔滨も公开している
础笔滨のページを読む
マッシュアップ沖縄版 おまけ:OpenSocail
API使うには
登録がいる
APIキーをもらったら
URLを叩くだけ
http://api.gnavi.co.jp/ver1/
RestSearchAPI/?
keyid=****&pref=PREF47&name
=沖縄そば
齿惭尝で帰ってくる
マッシュアップ沖縄版 おまけ:OpenSocail
これをプログラムで
ごにょごにょ???
搁补颈濒蝉を使えば一発!
とは行かない???
require 'net/http'
require 'cgi'
require 'rexml/document'
class GNavi
attr_accessor :address, :name, :id, :lat, :lon
KEY = '4e900eb4fa92d4765040993687cdfe53'
URL = 'http://api.gnavi.co.jp/ver1/RestSearchAPI/?'
def self.?nd(params)
results = []
get(params).elements.each('response/rest') do |el|
results << self.new(el.elements["id"].text, el.elements["name"].text, el.elements["address"].text,
el.elements["latitude"].text, el.elements["longitude"].text)
end
results
end
def self.url(params)
params[:keyid] = 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, lat, lon)
@id, @name, @address, @lat, @lon = id, name, address, lat, lon
end
end
これで础笔滨を使える
ちょっと読めないよね
详细は奥别产で!
沖縄そばのお店
リストを取り出す
irb> puts GNavi.?nd(:pref=>'PREF47',
:name=>'沖縄そば').map{|o| o.name}.join(',')
=>沖縄家庭料理と沖縄そばの店 <br>うかじそば,沖縄そば 家庭料
理<br>てぃだ,沖縄そば?家庭料理と泡盛<br>あんまー家,沖縄そ
ば専門店 与那原家,沖縄そば 手打ち 波人,沖縄そばと琉球料理の店
<BR>那覇そば 那覇亭,沖縄そば処 てんぷす,沖縄そば村 浜の屋
このリストを
Google Mapに入れる
こっちはRubyの
ライブラリがある
YM4R/GM
GoogleMaps APIを
Railsで使うライブラリ
$ rails okinawa -d sqlite3
$ cd okinawa
$ script/plugin install 
svn://rubyforge.org/var/svn/ym4r/Plugins/GM/trunk/ym4r_gm
$ ./script/generate controller soba index
さっきのGNaviクラスは
lib/gnavi.rbに保存
class SobaController < ApplicationController
def index
@map = GMap.new("map_div")
@map.control_init :large_map => true, :map_type => true
@map.center_zoom_init([26.21332,127.689843], 12)
end
end
<html>
<head>
<%= GMap.header %>
<%= @map.to_html %>
</head>
<body>
<%= @map.div(:width => 600, :height => 400) %>
</body>
</html>
これだけで地図表示
マッシュアップ沖縄版 おまけ:OpenSocail
これにぐるなびで
ゲットしたお店を
ピンで打つ
これを地図に
放り込む
class SobaController < ApplicationController
def index
@map = GMap.new("map_div")
@map.control_init(:large_map => true, :map_type => true)
@map.center_zoom_init([26.21332,127.689843], 12)
GNavi.?nd(:pref=>'PREF47', :name=>'沖縄そば').each do |o|
begin
marker = GMarker.new(
[o.lat, o.lon], :title => o.name,
:info_window => render_to_string( :partial => 'point', :locals
=> { :soba => o })
)
@map.overlay_init(marker)
rescue
end
end
end
吹き出しの贬罢惭尝も
<div><strong><%= soba.name %></strong></div>
<div><%=h soba.address %></div>
できあがり
マッシュアップ沖縄版 おまけ:OpenSocail
ひとまずこれで完成
不満点が沢山
情报が少ない!
店名に「沖縄そば」
と入ってるモノしか
検索していない
遅い!
キャッシュで改善
冲縄そば以外は?
選べるように
しましょう
コメントとかは?
补肠迟蝉冲补蝉冲肠辞尘尘别苍迟补产濒别で
携帯は?
箩辫尘辞产颈濒别で
これを改善して
自分グルメ地図を
作りませんか?
最近、WebAPIで
話題なのは???
OpenSocial
mixiなどSNSの
WebAPI
友達一覧やその友達の
blogのアドレスを
取得できる
さらにSNSに自分の
書いたアプリを組み込める
ブログパーツ
↓
SNSパーツ
OpenSocialには
2種類のWebAPIがある
ぐるなびと同じように
HTTPで呼び出すWebAPI
Google Gadgetのように
JavaScriptから
アクセスするAPI
現在公開されているのは
JavaScriptのAPIのみ
友達リストを表示する
パーツを作る
パーツを作るのに
必要なモノ
XMLファイルが一つ
その中にコードを書く
<?xml version="1.0" encoding="UTF-8" ?>
<Module>
<ModulePrefs title="Example">
<Require feature="opensocial-0.5"/>
</ModulePrefs>
<Content type="html">
<![CDATA[
~コード~
]]>
</Content>
</Module>
そしてこのURLをSNSに
読み込ませる
mixiはまだ対応して
ないのでorkutで
先ほどのXMLをサーバに
アップして、そのURLを
orkutに入力
マッシュアップ沖縄版 おまけ:OpenSocail
マッシュアップ沖縄版 おまけ:OpenSocail
マッシュアップ沖縄版 おまけ:OpenSocail
これで终わり!
HTMLとJavaScriptで
できることなら
何でもできる
でもコレなら
ブログパーツと同じ
OpenSocialは
それだけじゃない!
SNS上の情報を
JavaScriptで操作できる
OpenSocialで操作する
データは主に3種類
ユーザの属性や友達
関係を操作する
People Data
日記などユーザの活動
情報を操作する
Activity Data
SNSが保持している
データを操作する
Persistence Data
どんなActivityや属性が
があり、操作できるかは
SNS次第
これでSNSとマッシュ
アップができる
友達リストを
表示する
友達の名前が並んで
プロフィールページへ
リンクされる
マッシュアップ沖縄版 おまけ:OpenSocail
マッシュアップ沖縄版 おまけ:OpenSocail
今の所People Data APIで
取れるデータが少ない
でもプロフィール画面の
URLがあれば
各種情報がスクレイピング
できる
かと思いきやスクリプトの
実行は別ドメインなので
スクレイピングは無理
SNSによっては友達を
Google Mapsにマッピング
とかできるかも
まだ私もAPIを把握して
いないのでどこまで
できるか分からない
mixiがどこまで
やらせてくれるか
非常に楽しみ
ポスペみたいのとか
twitterっぽいのが
最初に出て流行る
んじゃないかな?
2008年はSNSで
マッシュアップが
流行る
スライドとソースは
http://blog.masuidrive.jp/

More Related Content

マッシュアップ沖縄版 おまけ:OpenSocail