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.

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

4,586 views

Published on

Published in: Technology
  • Be the first to comment

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

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

×