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

講師　松本章代講師　松本章代

2009/11/6 1

Web からのデータ・サービスの取得データ形式取得方法

2009/11/6 2

2009/11/6 3

<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" }]

XML JSON

iframeXMLHttpRequestJSONPSOAP専用 API

2009/11/6 4


2009/11/6 5

特徴利点 :

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

欠点 : 他サイトの場合、データの抽出が不可能同期がとりにくい

2009/11/6 6

なんといっても GoogleMaps ！！

2009/11/6 7

2009/11/6 8

2009/11/6 9

<?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>

2009/11/6 10

<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></p></body></html>

2009/11/6 11


2009/11/6 12

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

2009/11/6 13

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

JavaScriptDHTMLXMLCSS・・・ etc.

2009/11/6 14

2009/11/6 15

<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 ファイル（スクリプト）はそれが置かれているドメインのサーバとしか通信できないという制約があるこれを回避しなければ、スクリプトが置いてあるサーバ以外からファイルを読込めない

2009/11/6 16

解決策の１つ　　　　 JSONPを使う

制約ありiframeXMLHttpRequest

制約なし画像やスタイルシートスクリプト


2009/11/6 17

前提スクリプトにクロスドメイン制約がない<script> 要素を追加すると実行される

問題点データの提供者を信頼しなければならない

2009/11/6 18

2009/11/6 19

{"students":[ { "id":"5J01" "name":"Amano" } { "id":"5J02" "name":"Aruga" }]}

callback( {"students":[ { "id":"5J01" "name":"Amano" } { "id":"5J02" "name":"Aruga" }]} );

JSON JSONP

2009/11/6 20

<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

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

2009/11/6 22

// hoge.jsfunction 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;}

ホットペッパーの API を利用して検索サービスを作ってみよう

ユーザ登録を行い API キーを取得する

まずはサンプルを改造してみては？

2009/11/6 23

http://webservice.recruit.co.jp/hotpepper/reference.html

http://mtl.recruit.co.jp/blog/2007/08/jsonp_code_sample.html

https://webservice.recruit.co.jp/register/index.html

2009/11/6 24


2009/11/6 25

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

2009/11/6 26


2009/11/6 27

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

2009/11/6 28

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

Documents