マッシュアップ沖縄版 おまけ:opensocail
Post on 19-Jan-2015
4.181 Views
Preview:
DESCRIPTION
TRANSCRIPT
1時間で作ると間に合わないので
45分で作るマッシュアップ株式会社ワイズノット 増井 雄一郎
今日の話題
WebAPI & mashup
マッシュアップで沖縄そばマップ
mixiに自分でアプリが組み込めるOpenSocial
Rails使ったことある人
自分でMashup
したことある人
サイトなんかも公開しちゃってる人
Mashupマッシュアップ
音楽用語
Remixとの違い
曲をいじったりくっつけるのが
Remix
歌詞はこっちメロディーはあっちで
Mashup
繋げるだけじゃなく変えるだけじゃなく
いろんなサイトをごちゃまぜにしちゃえ
携帯と地図のMashup
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で何を作る？
OSC-Doではblogでリクエストを
募って
「北海道温泉マップ」
じゃらんが温泉情報をWebAPIで公開
これをマッピング
なので沖縄では
「沖縄温泉マップ」
でも沖縄温泉ないじゃん！
そこで・・・
沖縄そばマップ
沖縄そば大好きなんです！
まず必要なのは沖縄そば屋の情報
どこから持ってくる？
ぐるなび
グルメ情報サイト
APIも公開している
APIのページを読む
API使うには登録がいる
APIキーをもらったらURLを叩くだけ
http://api.gnavi.co.jp/ver1/RestSearchAPI/?
keyid=****&pref=PREF47&name=沖縄そば
XMLで帰ってくる
これをプログラムでごにょごにょ・・・
Railsを使えば一発！
とは行かない・・・
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.find(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 endend
これでAPIを使える
ちょっと読めないよね
詳細はWebで！
沖縄そばのお店リストを取り出す
irb> puts GNavi.find(: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) endend
<html><head><%= GMap.header %><%= @map.to_html %></head><body><%= @map.div(:width => 600, :height => 400) %></body></html>
これだけで地図表示
これにぐるなびでゲットしたお店をピンで打つ
これを地図に放り込む
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.find(: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
吹き出しのHTMLも
<div><strong><%= soba.name %></strong></div><div><%=h soba.address %></div>
できあがり
ひとまずこれで完成
不満点が沢山
情報が少ない！
店名に「沖縄そば」と入ってるモノしか検索していない
遅い！
キャッシュで改善
沖縄そば以外は？
選べるようにしましょう
コメントとかは？
acts_as_commentableで
携帯は？
jpmobileで
これを改善して自分グルメ地図を作りませんか？
最近、WebAPIで話題なのは・・・
OpenSocial
mixiなどSNSのＷebAPI
友達一覧やその友達の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に入力
これで終わり！
HTMLとJavaScriptでできることなら何でもできる
でもコレならブログパーツと同じ
OpenSocialはそれだけじゃない！
SNS上の情報をJavaScriptで操作できる
OpenSocialで操作するデータは主に3種類
ユーザの属性や友達関係を操作する
People Data
日記などユーザの活動情報を操作する
Activity Data
SNSが保持しているデータを操作する
Persistence Data
どんなActivityや属性ががあり、操作できるかは
SNS次第
これでSNSとマッシュアップができる
友達リストを表示する
友達の名前が並んでプロフィールページへリンクされる
今の所People Data APIで取れるデータが少ない
でもプロフィール画面のURLがあれば
各種情報がスクレイピングできる
かと思いきやスクリプトの実行は別ドメインなのでスクレイピングは無理
SNSによっては友達をGoogle Mapsにマッピング
とかできるかも
まだ私もAPIを把握していないのでどこまでできるか分からない
mixiがどこまでやらせてくれるか非常に楽しみ
ポスペみたいのとかtwitterっぽいのが最初に出て流行るんじゃないかな？
2008年はSNSでマッシュアップが
流行る
top related