@mikage014<br />2011.07.23<br />山口県WEB勉強会スピンオフ 3回目<br />マッシュアップサービスをつくろうin 山口<br />1<br />
インフラエンジニア 5年->転職<br />Linux, Solarisでインターネットシステムの設計・構築<br />プログラマ 3年目<br />PHP + Postgresqlで業務系Webシステムの設計・構築<br />ブログ<br /...
1.マッシュアップサービスって何?<br />2.APIの使い方を調べる方法<br />3.API利用のデモ<br />ATND, Twitter, Google Map<br />今日のお題<br />
4<br />マッシュアップサービスって何?<br />
マッシュアップサービスって何?<br />5<br />WebAPIを組み合わせて作るサービス<br />API=Application Program Interface<br />WebAPIを提供しているWebサービス<br />Twit...
例えば・・・位置座標を活用<br />6<br />Twitter<br />1.位置情報を集めて…<br />3.地図上に表示!<br />2.加工して<br />Instagram<br />GoogleMap<br />Foursquar...
例えば・・・画像認識を活用<br />7<br />1.画像データを取り出して…<br />3.美女写真だけを一覧表示!<br />2.美女を抽出<br />Instagram<br />Bijostagram<br />OpenCV<br /...
マッシュアップサービス作りのポイント<br />8<br />・APIを徹底的に活用して高速開発<br />データはころがすだけ<br />・APIとAPIを組み合わせる<br />Ex. 地図上につぶやきを表示<br />・サービス単体で持っ...
9<br />APIの使い方を調べる方法<br />
参考サイト<br />10<br />今どきのWebディレクターなら避けては通れないAPIの勘どころ<br />http://blog.livedoor.jp/ld_directors/archives/51684623.html<br />T...
11<br />ATNDAPI<br />
ATNDAPI<br />12<br />ATNDAPI リファレンス<br />http://api.atnd.org/<br />1.ブラウザから直接APIのURLを叩いてみる<br />2.プログラムからAPIを呼び出してみる<br />...
13<br />TwitterAPI<br />
TwitterAPI<br />14<br />TwitterAPIViewer<br />http://twitool-box.net/api-viewer/<br />1.欲しいデータのAPIを叩いてみる<br />2.プログラムからAPI...
15<br />GoogleMapAPI<br />
GoogleMapAPI<br />16<br />GoogleMapAPI チュートリアル<br />http://code.google.com/intl/ja/apis/maps/documentation/javascript/tuto...
17<br />ご静聴ありがとうございました<br />@mikage014<br />2011.07.23<br />山口県WEB勉強会スピンオフ 3回目<br />使用画像<br />http://piapro.jp/t/bvvK<br />
Upcoming SlideShare
Loading in …5
×

Creating Mashup service in Yamaguchi

1,579 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,579
On SlideShare
0
From Embeds
0
Number of Embeds
522
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Creating Mashup service in Yamaguchi

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

×