Your SlideShare is downloading. ×
マッシュアップ勉強会
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

マッシュアップ勉強会

613
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
613
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

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