オペレーティングシステムⅡ 第５回 講師 松本 章代 VirtuaWin・・・仮想デスクトップソフト 2009/11/6
本日の内容（WebAPI） Web からのデータ・サービスの取得 データ形式 取得方法 2009/11/6
データ形式 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
データの取得方法 iframe XMLHttpRequest JSONP SOAP 専用 API 2009/11/6
データの取得方法 iframe XMLHttpRequest JSONP SOAP 専用 API 2009/11/6
iframe 特徴 利点: 欠点: Web ページの取得と表示が同時に可能 データ抽出だけの（表示しない）場合、 style='visibility: hidden' で対応可能 他サイトのページもそのまま見せられる （著作権に注意） 欠点: 他サイトの場合、データの抽出が不可能 同期がとりにくい 2009/11/6
一番簡単な例は・・・ なんといっても GoogleMaps ！！ 2009/11/6
2009/11/6
JavaScript を利用すれば・・・ <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <script type="text/javascript"> <!-- function doubleSearch() { var keyword = document.getElementById('if_key').value; var uri_go = "http://www.google.co.jp/search?q=" + keyword; var uri_ya = "http://search.yahoo.co.jp/search?p=" + keyword; document.getElementById('if_go').src = uri_go; document.getElementById('if_ya').src = uri_ya; } //--> </script> </head> 2009/11/6
<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
2009/11/6
データの取得方法 iframe XMLHttpRequest JSONP SOAP 専用 API 2009/11/6
XMLHttpRequest JavaScript などのウェブブラウザ搭載の スクリプト言語で、サーバとの HTTP 通信を行うための組み込みオブジェクト（API） すでに読み込んだページからさらに HTTPリクエストを発することができ、 ページ遷移することなしにデータを 送受信できる Ajax の基幹技術 2009/11/6
Ajax JavaScript とダイナミック HTML を 使った非同期通信アプリケーション 画面遷移を伴わない動的な Web アプリケーションの製作が実現可能に 従来の技術の組み合わせ JavaScript DHTML XML CSS ・・・etc. 2009/11/6
ブラウザによってやり方が異なるので注意！ <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
クロスドメイン制約 セキュリティ上、HTMLファイル（スクリプト）はそれが置かれているドメインのサーバとしか通信できないという制約がある これを回避しなければ、スクリプトが置いてあるサーバ以外からファイルを読込めない 制約あり iframe XMLHttpRequest 制約なし 画像やスタイルシート スクリプト 解決策の１つ JSONPを使う 2009/11/6
データの取得方法 iframe XMLHttpRequest JSONP SOAP 専用 API 2009/11/6
JSONP 前提 問題点 スクリプトにクロスドメイン制約がない <script> 要素を追加すると実行される データの提供者を信頼しなければならない 2009/11/6
データ形式 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
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
kosen.jsonp result( {"kosen":[{ "prefecture":"北海道", "school_name":"函館工業高等専門学校", },{ "prefecture":"東京都", "school_name":"東京工業高等専門学校", "prefecture":"沖縄県", "school_name":"沖縄工業高等専門学校", }] }); 2009/11/6
function loadJsonp() { // hoge.js function loadJsonp() { var objScript = document.createElement("script"); objScript.src = "http://www.sw.it.aoyama.ac.jp/akiyo/lesson/kosen.jsonp"; 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
練習課題 ホットペッパーのAPIを利用して 検索サービスを作ってみよう ユーザ登録を行いAPIキーを取得する まずはサンプルを改造してみては？ http://webservice.recruit.co.jp/hotpepper/reference.html https://webservice.recruit.co.jp/register/index.html http://mtl.recruit.co.jp/blog/2007/08/jsonp_code_sample.html 2009/11/6
例 2009/11/6
データの取得方法 iframe XMLHttpRequest JSONP SOAP 専用 API 2009/11/6
SOAP IBM や Microsoft など大企業が支持 W3C で標準化 仕様が大掛かりで複雑 「Web Service = SOAP」だった時期も マッシュアップには向かない 2009/11/6
データの取得方法 iframe XMLHttpRequest JSONP SOAP 専用 API 2009/11/6
専用API Web サービスが URI のみで提供されるのでは なく専用の JavaScript のライブラリを使って データ交換を自動的にやってくれる 典型例: Google Maps 利点: データ交換を意識する必要が無く便利 欠点: 専用 API まで用意してあるところは まだまだ少数 2009/11/6