Download presentation
Presentation is loading. Please wait.
1
オペレーティングシステムⅡ 第５回 講師 松本 章代 VirtuaWin・・・仮想デスクトップソフト 2009/11/6
2
本日の内容（WebAPI） Web からのデータ・サービスの取得 データ形式 取得方法 2009/11/6
3
データ形式 XML JSON <students> <student> <id>5J01</id> <name>Amano</name> </student> <id>5J02</id> <name>Aruga</name> </students> [ { "id":"5J01" "name":"Amano" } "id":"5J02" "name":"Aruga" ] JavaScriptオブジェクトに 変換するのが容易！ 2009/11/6
4
データの取得方法 iframe XMLHttpRequest JSONP SOAP 専用 API 2009/11/6
5
データの取得方法 iframe XMLHttpRequest JSONP SOAP 専用 API 2009/11/6
6
iframe 特徴 利点: 欠点: Web ページの取得と表示が同時に可能
データ抽出だけの（表示しない）場合、 style='visibility: hidden' で対応可能 他サイトのページもそのまま見せられる （著作権に注意） 欠点: 他サイトの場合、データの抽出が不可能 同期がとりにくい 2009/11/6
7
一番簡単な例は・・・ なんといっても GoogleMaps ！！ 2009/11/6
8
2009/11/6
9
JavaScript を利用すれば・・・ <?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" <head> <script type="text/javascript"> <!-- function doubleSearch() { var keyword = document.getElementById('if_key').value; var uri_go = " + keyword; var uri_ya = " + keyword; document.getElementById('if_go').src = uri_go; document.getElementById('if_ya').src = uri_ya; } //--> </script> </head> 2009/11/6
10
<h1><code>iframe</code> でのデータ取得の例</h1>
<body> <h1><code>iframe</code> でのデータ取得の例</h1> <p>Enter a search term: <input type="text" id="if_key" /> <button onclick="doubleSearch()">Search now!</button></p> <p>検索の結果: google.com (左) と yahoo.co.jp (右)</p> <p><iframe id="if_go" style="float: left; width: 45%; height: 350px;"> Wait for something to appear here!</iframe> </p> <p><iframe id="if_ya" style="width: 45%; height: 350px;"> Wait for something to appear here, too!</iframe> </body> </html> 2009/11/6
11
2009/11/6
12
データの取得方法 iframe XMLHttpRequest JSONP SOAP 専用 API 2009/11/6
13
XMLHttpRequest JavaScript などのウェブブラウザ搭載の スクリプト言語で、サーバとの HTTP 通信を行うための組み込みオブジェクト（API） すでに読み込んだページからさらに HTTPリクエストを発することができ、 ページ遷移することなしにデータを 送受信できる Ajax の基幹技術 2009/11/6
14
Ajax JavaScript とダイナミック HTML を 使った非同期通信アプリケーション
画面遷移を伴わない動的な Web アプリケーションの製作が実現可能に 従来の技術の組み合わせ JavaScript DHTML XML CSS ・・・etc. 2009/11/6
15
ブラウザによってやり方が異なるので注意！
<script type="text/javascript"><!-- function loadTextFile() { httpObj = new XMLHttpRequest(); // 1. リクエストオブジェクトの取得 httpObj.onload = displayData; // 2. callback 関数の用意 httpObj.open("GET", "data.txt", true); // 3. リクエストの準備 httpObj.send(null); // 4. リクエストの実行 } function displayData() document.ajaxForm.result.value = httpObj.responseText; // --></script> ブラウザによってやり方が異なるので注意！ <body> <form name="ajaxForm"> <input type="button" value="読み込み" onClick="loadTextFile()"><br> <textarea name="result" cols="40" rows="5"></textarea> </form> </body> 2009/11/6
16
クロスドメイン制約 セキュリティ上、HTMLファイル（スクリプト）はそれが置かれているドメインのサーバとしか通信できないという制約がある
これを回避しなければ、スクリプトが置いてあるサーバ以外からファイルを読込めない 制約あり iframe XMLHttpRequest 制約なし 画像やスタイルシート スクリプト 解決策の１つ JSONPを使う 2009/11/6
17
データの取得方法 iframe XMLHttpRequest JSONP SOAP 専用 API 2009/11/6
18
JSONP 前提 問題点 スクリプトにクロスドメイン制約がない <script> 要素を追加すると実行される
データの提供者を信頼しなければならない 2009/11/6
19
データ形式 JSON JSONP {"students":[ { "id":"5J01" "name":"Amano" } "id":"5J02" "name":"Aruga" ]} callback( {"students":[ { "id":"5J01" "name":"Amano" } "id":"5J02" "name":"Aruga" ]} ); JSON に関数呼び出しの 仕組みを加えたもの！ 2009/11/6
![データ形式 JSON. JSONP. { students :[ { id : 5J01 name : Amano } id : 5J02 name : Aruga ]}](http://slidesplayer.net/slide/11376665/61/images/19/%E3%83%87%E3%83%BC%E3%82%BF%E5%BD%A2%E5%BC%8F+JSON.+JSONP.+%7B+students+%3A%5B+%7B+id+%3A+5J01+name+%3A+Amano+%7D+id+%3A+5J02+name+%3A+Aruga+%5D%7D.jpg "callback( { students :[ { id : 5J01 name : Amano } id : 5J02 name : Aruga ]} ); JSON に関数呼び出しの. 仕組みを加えたもの！ 2009/11/6.")
20
HTML ファイル <html> <head>
<script src="hoge.js"></script> </head> <body> <input type="button" value="OK" onclick="loadJsonp();" /> <div id="result"></div> </body> </html> 2009/11/6
21
kosen.jsonp result( {"kosen":[{ "prefecture":"北海道",
"school_name":"函館工業高等専門学校", },{ "prefecture":"東京都", "school_name":"東京工業高等専門学校", "prefecture":"沖縄県", "school_name":"沖縄工業高等専門学校", }] }); 2009/11/6
22
function loadJsonp() {
// hoge.js function loadJsonp() { var objScript = document.createElement("script"); objScript.src = " document.getElementsByTagName("head")[0].appendChild(objScript); } function result(retdata) { var target = document.getElementById('result'); var html = ''; var i = 0; html += "<table><tr><td>都道府県</td><td>高専名</td></tr>"; for (i = 0; i < retdata.kosen.length; i++) { html += "<tr><td>"; html += retdata.kosen[i].prefecture; html += "</td><td>"; html += retdata.kosen[i].school_name; html += "</td></tr>"; html += "</table>"; target.innerHTML = html; 2009/11/6
23
練習課題 ホットペッパーのAPIを利用して 検索サービスを作ってみよう ユーザ登録を行いAPIキーを取得する
まずはサンプルを改造してみては？ 2009/11/6
24
例 2009/11/6
25
データの取得方法 iframe XMLHttpRequest JSONP SOAP 専用 API 2009/11/6
26
SOAP IBM や Microsoft など大企業が支持 W3C で標準化 仕様が大掛かりで複雑
「Web Service = SOAP」だった時期も マッシュアップには向かない 2009/11/6
27
データの取得方法 iframe XMLHttpRequest JSONP SOAP 専用 API 2009/11/6
28
専用API Web サービスが URI のみで提供されるのでは なく専用の JavaScript のライブラリを使って データ交換を自動的にやってくれる 典型例: Google Maps 利点: データ交換を意識する必要が無く便利 欠点: 専用 API まで用意してあるところは まだまだ少数 2009/11/6
Similar presentations
