オペレーティングシステム Ⅱ 第５回

講師　松本章代 オペレーティングシステムⅡ第５回

本日の内容（WebAPI） • Web からのデータ・サービスの取得 • データ形式 • 取得方法

データ形式 XML JSON <students> <student> <id>5J01</id> <name>Amano</name> </student> <student> <id>5J02</id> <name>Aruga</name> </student> </students> [ { "id":"5J01" "name":"Amano" } { "id":"5J02" "name":"Aruga" } ] JavaScriptオブジェクトに変換するのが容易！

データの取得方法 • iframe • XMLHttpRequest • JSONP • SOAP • 専用 API

iframe • 特徴 • 利点: • Web ページの取得と表示が同時に可能 • データ抽出だけの（表示しない）場合、style='visibility: hidden' で対応可能 • 他サイトのページもそのまま見せられる（著作権に注意） • 欠点: • 他サイトの場合、データの抽出が不可能 • 同期がとりにくい

一番簡単な例は・・・ • なんといっても GoogleMaps ！！

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">  </script> </head>

<body> <h1><code>iframe</code> でのデータ取得の例</h1> <p>Enter a search term: <input type="text" id="if_key" /> <buttononclick="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> </p> </body> </html>

XMLHttpRequest • JavaScript などのウェブブラウザ搭載のスクリプト言語で、サーバとの HTTP通信を行うための組み込みオブジェクト（API） • すでに読み込んだページからさらにHTTPリクエストを発することができ、ページ遷移することなしにデータを送受信できる Ajaxの基幹技術

Ajax • JavaScript とダイナミック HTML を使った非同期通信アプリケーション • 画面遷移を伴わない動的な Webアプリケーションの製作が実現可能に • 従来の技術の組み合わせ • JavaScript • DHTML • XML • CSS • ・・・etc.

<script type="text/javascript"></script> ブラウザによってやり方が異なるので注意！ <body> <form name="ajaxForm"> <input type="button" value="読み込み" onClick="loadTextFile()"><br> <textarea name="result" cols="40" rows="5"></textarea> </form> </body>

クロスドメイン制約 • セキュリティ上、HTMLファイル（スクリプト）はそれが置かれているドメインのサーバとしか通信できないという制約がある • これを回避しなければ、スクリプトが置いてあるサーバ以外からファイルを読込めない • 制約あり • iframe • XMLHttpRequest • 制約なし • 画像やスタイルシート • スクリプト解決策の１つ　　　　JSONPを使う

JSONP • 前提 • スクリプトにクロスドメイン制約がない • <script> 要素を追加すると実行される • 問題点 • データの提供者を信頼しなければならない

データ形式 JSON JSONP {"students":[ { "id":"5J01" "name":"Amano" } { "id":"5J02" "name":"Aruga" } ]} callback({"students":[ { "id":"5J01" "name":"Amano" } { "id":"5J02" "name":"Aruga" } ]} ); JSON に関数呼び出しの仕組みを加えたもの！

HTML ファイル <html> <head> <script src="hoge.js"></script> </head> <body> <input type="button" value="OK" onclick="loadJsonp();" /> <div id="result"></div> </body> </html>

kosen.jsonp result( {"kosen":[{ "prefecture":"北海道", "school_name":"函館工業高等専門学校", },{ "prefecture":"東京都", "school_name":"東京工業高等専門学校", },{ "prefecture":"沖縄県", "school_name":"沖縄工業高等専門学校", }] });

// hoge.js function loadJsonp() { varobjScript = 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 = ''; vari = 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; }

練習課題 • ホットペッパーの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

SOAP • IBM や Microsoft など大企業が支持 • W3C で標準化 • 仕様が大掛かりで複雑 • 「Web Service = SOAP」だった時期も • マッシュアップには向かない

専用API • Web サービスが URI のみで提供されるのではなく専用の JavaScript のライブラリを使ってデータ交換を自動的にやってくれる • 典型例: Google Maps • 利点: データ交換を意識する必要が無く便利 • 欠点: 専用 APIまで用意してあるところは　　　まだまだ少数

オペレーティングシステム Ⅱ 第５回

オペレーティングシステム Ⅱ 第５回

Presentation Transcript