ウェブアプリケーション勉強会 ~マッシュアップ~ id:seiryo
目次 <ul><ul><li>今日の目標 </li></ul></ul><ul><ul><li>おねがいマッシュアップ </li></ul></ul><ul><ul><li>なぜなに API </li></ul></ul><ul><ul><li...
目標 <ul><li>マッシュアップ で 僕だけの Web アプリ! </li></ul>
マッシュアップ? <ul><li>ポテト   と  ソーセージ ↓ 最強 のご飯! </li></ul>Photo by   http://www.flickr.com/photos/glamhag/1355460965/
マッシュアップ! WebAPI   と  WebAPI ↓ 最強 の Web アプリ! Via  http://www.raymay.biz/ittekitter/
API ? <ul><ul><li>あるプラットフォーム (OS やミドルウェア ) 向けのソフトウェアを開発する際に使用できる 命令や関数の集合 のこと。 </li></ul></ul><ul><ul><li>また、それらを利用するためのプロ...
    Photo by  http://www.flickr.com/photos/hatayanorg/976025933/
API ! <ul><ul><li>命令や関数の集合 (面倒なこと) を </li></ul></ul><ul><ul><li>規約 に従って </li></ul></ul><ul><ul><li>「呼び出す」 だけで </li></ul></...
API の例(ファイル選択 API ) <ul><li>ファイル選択 API 呼び出し                     </li></ul>Photo by  http://www.flickr.com/photos/vinuesa/2...
WebAPI   の例( 0 ) <ul><li>PHP   に関するニュースを  1  件 ください </li></ul>Photo by   http://www.flickr.com/photos/kenanderson/25907159...
WebAPI   の例(1)
WebAPI   の例( 2 ) <ul><li>  </li></ul>
WebAPI   の使用例(0) <ul><li>http://api.oshira.se/news? q=PHP & l=1 </li></ul><ul><ul><li>q=PHP </li></ul></ul><ul><ul><ul><li...
WebAPI   の使用例(1) <ul><li>(前略) </li></ul><ul><li>< entry > </li></ul><ul><li>     < title > 華麗な Flash ベースのグラフライブラリ「 PHP/SWF...
今日やること <ul><ul><li>API を使ってみる </li></ul></ul><ul><ul><ul><li>API を呼び出す </li></ul></ul></ul><ul><ul><ul><li>XML の操作(必要な部分を抜...
サンプル? <ul><li>http://raymay.biz/mashup.zip </li></ul><ul><ul><ul><li>oshira.html  と  se.php  が入っています </li></ul></ul></ul><...
サンプル! <ul><li>  </li></ul>
検索語を指定して API を呼び出す <ul><li>se.php 1 行目~ 10 行目くらい $ url  =  &quot;http://api.oshira.se            /news?l=10&q= 検索語 &quot; ...
ニュースのタイトルと URL を抜き出す <ul><li>se.php ( http://api.oshira.se/news?q=php ) 44 行目~ 49 行目くらい </li></ul><ul><li>foreach ( $ xml ...
もっと ○○ する! <ul><ul><li>もっと Go ○gle っぽく する </li></ul></ul><ul><ul><ul><li>例えば </li></ul></ul></ul><ul><ul><ul><ul><li>summa...
まとめ <ul><ul><li>API  を呼び出すだけでデータを操作できる </li></ul></ul><ul><ul><li>規約は重要 </li></ul></ul><ul><ul><li>いっぱいありすぎる </li></ul></u...
ありがとうございました。  
Upcoming SlideShare
Loading in …5
×

マッシュアップ勉強会

756 views

Published on

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

  • Be the first to like this

No Downloads
Views
Total views
756
On SlideShare
0
From Embeds
0
Number of Embeds
10
Actions
Shares
0
Downloads
6
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

マッシュアップ勉強会

  1. 1. ウェブアプリケーション勉強会 ~マッシュアップ~ id:seiryo
  2. 2. 目次 <ul><ul><li>今日の目標 </li></ul></ul><ul><ul><li>おねがいマッシュアップ </li></ul></ul><ul><ul><li>なぜなに API </li></ul></ul><ul><ul><li>やってみれぅ </li></ul></ul><ul><ul><li>まとめ </li></ul></ul>
  3. 3. 目標 <ul><li>マッシュアップ で 僕だけの Web アプリ! </li></ul>
  4. 4. マッシュアップ? <ul><li>ポテト と ソーセージ ↓ 最強 のご飯! </li></ul>Photo by http://www.flickr.com/photos/glamhag/1355460965/
  5. 5. マッシュアップ! WebAPI と WebAPI ↓ 最強 の Web アプリ! Via http://www.raymay.biz/ittekitter/
  6. 6. API ? <ul><ul><li>あるプラットフォーム (OS やミドルウェア ) 向けのソフトウェアを開発する際に使用できる 命令や関数の集合 のこと。 </li></ul></ul><ul><ul><li>また、それらを利用するためのプログラム上の手続きを定めた 規約の集合 。 </li></ul></ul><ul><ul><li>個々の開発者は規約に従ってその機能を 「呼び出す」 </li></ul></ul>Via http://e-words.jp/w/API.html
  7. 7.     Photo by http://www.flickr.com/photos/hatayanorg/976025933/
  8. 8. API ! <ul><ul><li>命令や関数の集合 (面倒なこと) を </li></ul></ul><ul><ul><li>規約 に従って </li></ul></ul><ul><ul><li>「呼び出す」 だけで </li></ul></ul><ul><ul><li>結果が得られるようにしたもの </li></ul></ul>
  9. 9. API の例(ファイル選択 API ) <ul><li>ファイル選択 API 呼び出し                    </li></ul>Photo by http://www.flickr.com/photos/vinuesa/2643190861/ ファイルのパス                D:images エロエロ げき☆やば .jpg          
  10. 10. WebAPI の例( 0 ) <ul><li>PHP に関するニュースを 1 件 ください </li></ul>Photo by http://www.flickr.com/photos/kenanderson/2590715957/ PHP に関するニュース 1 件を XML で返す
  11. 11. WebAPI の例(1)
  12. 12. WebAPI の例( 2 ) <ul><li>  </li></ul>
  13. 13. WebAPI の使用例(0) <ul><li>http://api.oshira.se/news? q=PHP & l=1 </li></ul><ul><ul><li>q=PHP </li></ul></ul><ul><ul><ul><li>PHP のニュースを </li></ul></ul></ul><ul><ul><li>l=1 </li></ul></ul><ul><ul><ul><li>1 件チョウダイ! </li></ul></ul></ul>Photo by http://www.flickr.com/photos/nats/2630564593/
  14. 14. WebAPI の使用例(1) <ul><li>(前略) </li></ul><ul><li>< entry > </li></ul><ul><li>     < title > 華麗な Flash ベースのグラフライブラリ「 PHP/SWF Charts 」 </ title >     < link rel = &quot;alternate&quot; href = &quot;http://web-tan.forum.impressrd.jp/e/2008/07/04/3283&quot; />     < id >tag:oshira.se,2008-07-04:news/2797037</ id >     < updated >2008-07-04T14:00:00+09:00</ updated >     < summary type = &quot;text&quot; >GPLv2 動作環境: PHP の動作するウェブサーバー (以下略) </ summary >     < osh:kind ></ osh:kind > </ entry > </li></ul><ul><li>(後略) </li></ul>Photo by id:seiryo
  15. 15. 今日やること <ul><ul><li>API を使ってみる </li></ul></ul><ul><ul><ul><li>API を呼び出す </li></ul></ul></ul><ul><ul><ul><li>XML の操作(必要な部分を抜く) </li></ul></ul></ul><ul><ul><li>なんの API ? </li></ul></ul><ul><ul><ul><li>おしらセ 検索 API </li></ul></ul></ul><ul><ul><ul><li>http://api.oshira.se/#news </li></ul></ul></ul>
  16. 16. サンプル? <ul><li>http://raymay.biz/mashup.zip </li></ul><ul><ul><ul><li>oshira.html と se.php が入っています </li></ul></ul></ul><ul><ul><ul><li>2つのファイルを配置して </li></ul></ul></ul><ul><ul><ul><li>Apache を起動して </li></ul></ul></ul><ul><ul><ul><li>oshira.html を開いてみてください </li></ul></ul></ul>
  17. 17. サンプル! <ul><li>  </li></ul>
  18. 18. 検索語を指定して API を呼び出す <ul><li>se.php 1 行目~ 10 行目くらい $ url = &quot;http://api.oshira.se            /news?l=10&q= 検索語 &quot; ; $ xml = simplexml_load_file ( $ url ) </li></ul>
  19. 19. ニュースのタイトルと URL を抜き出す <ul><li>se.php ( http://api.oshira.se/news?q=php ) 44 行目~ 49 行目くらい </li></ul><ul><li>foreach ( $ xml -> entry as $ entry ) {   echo &quot; <li><a                href=&quot; &quot; .$ entry -> link [ &quot; href &quot; ] . &quot;            &quot;> &quot; .$ entry -> title . &quot; </li> &quot;; } </li></ul>
  20. 20. もっと ○○ する! <ul><ul><li>もっと Go ○gle っぽく する </li></ul></ul><ul><ul><ul><li>例えば </li></ul></ul></ul><ul><ul><ul><ul><li>summary 要素の表示 </li></ul></ul></ul></ul><ul><ul><li>もっと マッシュアップ する </li></ul></ul><ul><ul><ul><li>他の API 使ってみる </li></ul></ul></ul><ul><ul><ul><ul><li>例えば </li></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>Yahoo 検索 API (画像などでも)と連動 </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>瞬コレ!からキーワードを持ってくる </li></ul></ul></ul></ul></ul>Photo by http://flickr.com/photos/hugo-pauline/2644702077/
  21. 21. まとめ <ul><ul><li>API を呼び出すだけでデータを操作できる </li></ul></ul><ul><ul><li>規約は重要 </li></ul></ul><ul><ul><li>いっぱいありすぎる </li></ul></ul><ul><ul><ul><li>API を調べてみる </li></ul></ul></ul><ul><ul><ul><ul><li>Web API まとめ </li></ul></ul></ul></ul><ul><ul><ul><li>マッシュアップ事例を見る </li></ul></ul></ul><ul><ul><ul><ul><li>過去のマッシュアップアワード受賞作 </li></ul></ul></ul></ul>
  22. 22. ありがとうございました。  

×