creating mashup service in yamaguchi
TRANSCRIPT
@MIKAGE014
2011 .07 .23
山 口 県 WEB 勉 強 会 ス ピ ン オ フ 3 回 目
マッシュアップサービスをつくろう
in 山口1
イ ン フ ラ エ ン ジ ニ ア 5 年 → 転 職Linux , So lar i s で イ ン タ ー ネ ッ ト シ ス テ ム の 設 計 ・ 構 築
プ ロ グ ラ マ 3 年 目PHP + Postgresq l で 業 務 系 WEB シ ス テ ム の 設 計 ・ 構
築
ブ ロ グhttp : / /d .hatena .ne . jp /mikage014/
Twi t ter : @mikage014← こ の アイ コ ン が 目 印 で す
About Me
１ ． マ ッ シ ュ ア ッ プ サ ー ビ ス って 何 ？
２ ． API の 使 い 方 を 調 べ る 方 法
３ ． API 利 用 の デ モATND, TWITTER, GOOGLE MAP
今日のお題
4
マッシュアップサービスって何？
マッシュアップサービスって何？5
WebAPIを組み合わせて作るサービス
API＝ Application Program Interface
WebAPIを提供しているWebサービスTwitter, Foursquare, ロケタッチ , GoogleMap, Frickr, Instagram, ATND, etc.
これらを組み合わせて便利なものを作る
作ったらMashup Awards 7に出してみたらいいんじゃない？
例えば・・・位置座標を活用6
Foursquare
GoogleMap
１．位置情報を集めて…
３．地図上に表示！２．加工して
例えば・・・画像認識を活用7
OpenCV
Bijostagram
１．画像データを取り出して…３．美女写真だけを一覧表示！
２．美女を抽出
猫画像を集めたNekostagram犬画像を集めた Inustagram
リスト表示に特化した Listagram
マッシュアップサービス作りのポイント8
・ APIを徹底的に活用して高速開発データはころがすだけ
・ APIと APIを組み合わせるEx. 地図上につぶやきを表示
・サービス単体で持っていない機能を追加するEx. ATND検索
・特定ジャンルの情報を集めるEx. 猫好き、犬好き、美女好き向け写真一覧
9
APIの使い方を調べる方法
参考サイト10
今どきのWebディレクターなら避けては通れない APIの勘どころhttp://blog.livedoor.jp/ld_directors/archives/51684623.html
Twitter API Viewerhttp://twitool-box.net/api-viewer/
ATND API リファレンスhttp://api.atnd.org/
GoogleMap API チュートリアルhttp://code.google.com/intl/ja/apis/maps/documentation/javascript/tutorial.html
11
ATND API
ATND API12
ATND API リファレンスhttp://api.atnd.org/
１．ブラウザから直接 APIのURLを叩いてみる
２．プログラムから APIを呼び出してみる
３．データを加工して表示
（デモ）
13
Twitter API
Twitter API14
Twitter API Viewerhttp://twitool-box.net/api-viewer/
１．欲しいデータの APIを叩いてみる
２．プログラムから APIを呼び出してみる
３．データを加工して表示
（デモ）
15
GoogleMap API
GoogleMap API16
GoogleMap API チュートリアルhttp://code.google.com/intl/ja/apis/maps/documentation/javascript/tutorial.html
１．チュートリアルをコピペ
２．他の APIから取ってきた位置情報にマーカーとかInfoWindowを表示してみる
（デモ）
17
ご静聴ありがとうございました
@MIKAGE014
2011 .07 .23
山 口 県 WEB 勉 強 会 ス ピ ン オ フ 3 回 目
使用画像http://piapro.jp/t/bvvK