狠狠撸
Submit Search
マッシュアップ沖縄版 おまけ:OpenSocail
?
2 likes
?
2,056 views
Yuichiro MASUI
Follow
1 of 163
Download now
Download to read offline
More Related Content
マッシュアップ沖縄版 おまけ:OpenSocail
1.
1時間で作ると 間に合わないので 45分で作る マッシュアップ 株式会社ワイズノット 増井 雄一郎
2.
今日の话题
3.
WebAPI & mashup
4.
マッシュアップで 冲縄そばマップ mixiに自分でアプリが 組み込めるOpenSocial
5.
搁补颈濒蝉使ったことある人
6.
自分でMashup したことある人
7.
サイトなんかも 公開しちゃってる人
8.
Mashup マッシュアップ
9.
音楽用语
10.
搁别尘颈虫との违い
11.
曲をいじったり くっつけるのが Remix
12.
歌詞はこっち メロディーはあっちで Mashup
13.
繋げるだけじゃなく 変えるだけじゃなく
14.
いろんなサイトを ごちゃまぜにしちゃえ
15.
携帯と地図の惭补蝉丑耻辫
17.
惭补蝉丑耻辫とは
18.
アプリケーションの 再構築
19.
昔は無理矢理 やっていた
20.
贬罢惭尝解析して???
21.
自分で使う分には 良いけど公開できない
22.
いまでもAPI公開して ないサイトのデータを 使うときにやる
23.
データが命! 勝手に使わせるなんて もってのほか!
24.
でもWeb2.0時代は サイト側がある程度 自由にデータや システムを使わせてくれる
25.
なんで?
26.
ビジネスモデルの変化
27.
データを囲い込んでも 換金する方法がない
28.
でもトラフィックは 広告で金になる
29.
サイトに誘導するため データを使おう
30.
その使わせてくれる口が WebAPI
31.
色々なWebAPIが 提供されてきている
32.
大别すると3种类
33.
データ系
34.
RSS Amazon Web Service Google検索 ホットペッパー じゃらんnet
35.
データを公开
36.
ここの部分が多い
37.
既存にデータを 持っているところは 容易に展開できる為
38.
処理系
39.
スクリーンショット 形態素解析 テキスト→MP3変換
40.
データを投げると 何らかの処理を してくれる
41.
表示系
42.
Google Maps NIFTY Timeline べつやくメソッドAPI
43.
色々なデータを表示 する基盤
44.
ほとんどのAPIは MVCのMやVに相当
45.
Controllerを どうやって作る?
46.
既存の手法と同じ
47.
PHP, Perl, Ruby,
Java....
48.
ちゃんと作ると 非同期処理が多く PHPは不利
49.
そこで我らが Ruby on Rails
50.
救世主
51.
さすがはWeb2.0系 フレークワーク
52.
WebAPIを楽にする ActiveResource
53.
搁补颈濒蝉2.0から标準添付
54.
でもRails2.0が いつ出るかは
55.
しかし础肠迟颈惫别搁别蝉辞耻谤肠别は
56.
Rails 対 Rails
にしか 使えない
57.
别の方法を考えよう
58.
さてMashupで 何を作る?
59.
OSC-Doでは blogでリクエストを 募って
60.
「北海道温泉マップ」
61.
じゃらんが温泉情報 をWebAPIで公開
62.
これをマッピング
63.
なので冲縄では
64.
「冲縄温泉マップ」
65.
でも沖縄 温泉ないじゃん!
66.
そこで???
67.
冲縄そばマップ
68.
沖縄そば 大好きなんです!
69.
まず必要なのは 沖縄そば屋の情報
70.
どこから持ってくる?
71.
ぐるなび
72.
グルメ情报サイト
73.
础笔滨も公开している
74.
础笔滨のページを読む
76.
API使うには 登録がいる
77.
APIキーをもらったら URLを叩くだけ
78.
http://api.gnavi.co.jp/ver1/ RestSearchAPI/? keyid=****&pref=PREF47&name =沖縄そば
79.
齿惭尝で帰ってくる
81.
これをプログラムで ごにょごにょ???
82.
搁补颈濒蝉を使えば一発!
83.
とは行かない???
84.
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
85.
これで础笔滨を使える
86.
ちょっと読めないよね
87.
详细は奥别产で!
88.
沖縄そばのお店 リストを取り出す
89.
irb> puts GNavi.?nd(:pref=>'PREF47', :name=>'沖縄そば').map{|o|
o.name}.join(',') =>沖縄家庭料理と沖縄そばの店 <br>うかじそば,沖縄そば 家庭料 理<br>てぃだ,沖縄そば?家庭料理と泡盛<br>あんまー家,沖縄そ ば専門店 与那原家,沖縄そば 手打ち 波人,沖縄そばと琉球料理の店 <BR>那覇そば 那覇亭,沖縄そば処 てんぷす,沖縄そば村 浜の屋
90.
このリストを Google Mapに入れる
91.
こっちはRubyの ライブラリがある
92.
YM4R/GM
93.
GoogleMaps APIを Railsで使うライブラリ
94.
$ 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
95.
さっきのGNaviクラスは lib/gnavi.rbに保存
96.
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
97.
<html> <head> <%= GMap.header %> <%=
@map.to_html %> </head> <body> <%= @map.div(:width => 600, :height => 400) %> </body> </html>
98.
これだけで地図表示
100.
これにぐるなびで ゲットしたお店を ピンで打つ
101.
これを地図に 放り込む
102.
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
103.
吹き出しの贬罢惭尝も
104.
<div><strong><%= soba.name %></strong></div> <div><%=h
soba.address %></div>
105.
できあがり
107.
ひとまずこれで完成
108.
不満点が沢山
109.
情报が少ない!
110.
店名に「沖縄そば」 と入ってるモノしか 検索していない
111.
遅い!
112.
キャッシュで改善
113.
冲縄そば以外は?
114.
選べるように しましょう
115.
コメントとかは?
116.
补肠迟蝉冲补蝉冲肠辞尘尘别苍迟补产濒别で
117.
携帯は?
118.
箩辫尘辞产颈濒别で
119.
これを改善して 自分グルメ地図を 作りませんか?
120.
最近、WebAPIで 話題なのは???
121.
OpenSocial
122.
mixiなどSNSの WebAPI
123.
友達一覧やその友達の blogのアドレスを 取得できる
124.
さらにSNSに自分の 書いたアプリを組み込める
125.
ブログパーツ ↓ SNSパーツ
126.
OpenSocialには 2種類のWebAPIがある
127.
ぐるなびと同じように HTTPで呼び出すWebAPI
128.
Google Gadgetのように JavaScriptから アクセスするAPI
129.
現在公開されているのは JavaScriptのAPIのみ
130.
友達リストを表示する パーツを作る
131.
パーツを作るのに 必要なモノ
132.
XMLファイルが一つ その中にコードを書く
133.
<?xml version="1.0" encoding="UTF-8"
?> <Module> <ModulePrefs title="Example"> <Require feature="opensocial-0.5"/> </ModulePrefs> <Content type="html"> <![CDATA[ ~コード~ ]]> </Content> </Module>
134.
そしてこのURLをSNSに 読み込ませる
135.
mixiはまだ対応して ないのでorkutで
136.
先ほどのXMLをサーバに アップして、そのURLを orkutに入力
140.
これで终わり!
141.
HTMLとJavaScriptで できることなら 何でもできる
142.
でもコレなら ブログパーツと同じ
143.
OpenSocialは それだけじゃない!
144.
SNS上の情報を JavaScriptで操作できる
145.
OpenSocialで操作する データは主に3種類
146.
ユーザの属性や友達 関係を操作する People Data
147.
日記などユーザの活動 情報を操作する Activity Data
148.
SNSが保持している データを操作する Persistence Data
149.
どんなActivityや属性が があり、操作できるかは SNS次第
150.
これでSNSとマッシュ アップができる
151.
友達リストを 表示する
152.
友達の名前が並んで プロフィールページへ リンクされる
155.
今の所People Data APIで 取れるデータが少ない
156.
でもプロフィール画面の URLがあれば 各種情報がスクレイピング できる
157.
かと思いきやスクリプトの 実行は別ドメインなので スクレイピングは無理
158.
SNSによっては友達を Google Mapsにマッピング とかできるかも
159.
まだ私もAPIを把握して いないのでどこまで できるか分からない
160.
mixiがどこまで やらせてくれるか 非常に楽しみ
161.
ポスペみたいのとか twitterっぽいのが 最初に出て流行る んじゃないかな?
162.
2008年はSNSで マッシュアップが 流行る
163.
スライドとソースは http://blog.masuidrive.jp/
Download now