講師松本章代

Transcript 講師松本章代

オペレーティングシステムⅡ
第５回
講師
2009/11/6
松本章代
1
本日の内容（WebAPI）
Web からのデータ・サービスの取得
データ形式
取得方法
2009/11/6
2
データ形式
XML
JSON
<students>
<student>
<id>5J01</id>
<name>Amano</name>
</student>
<student>
<id>5J02</id>
<name>Aruga</name>
</student>
</students>
[
2009/11/6
{
"id":"5J01"
"name":"Amano"
}
{
"id":"5J02"
"name":"Aruga"
}
]
3
データの取得方法
iframe
XMLHttpRequest
JSONP
SOAP
専用 API
2009/11/6
4
データの取得方法
iframe
XMLHttpRequest
JSONP
SOAP
専用 API
2009/11/6
5
iframe
特徴
利点:
Web ページの取得と表示が同時に可能
データ抽出だけの（表示しない）場合、
style='visibility: hidden' で対応可能
他サイトのページもそのまま見せられる
（著作権に注意）
欠点:
他サイトの場合、データの抽出が不可能
同期がとりにくい
2009/11/6
6
一番簡単な例は・・・
なんといっても GoogleMaps ！！
2009/11/6
7
2009/11/6
8
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
9
<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
10
2009/11/6
11
データの取得方法
iframe
XMLHttpRequest
JSONP
SOAP
専用 API
2009/11/6
12
XMLHttpRequest
JavaScript などのウェブブラウザ搭載の
スクリプト言語で、サーバとの HTTP
通信を行うための組み込みオブジェクト
（API）
すでに読み込んだページからさらに
HTTPリクエストを発することができ、
ページ遷移することなしにデータを
送受信できる Ajax の基幹技術
2009/11/6
13
Ajax
JavaScript とダイナミック HTML を
使った非同期通信アプリケーション
画面遷移を伴わない動的な Web
アプリケーションの製作が実現可能に
従来の技術の組み合わせ
JavaScript
DHTML
XML
CSS
・・・etc.
2009/11/6
14
<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
15
クロスドメイン制約
セキュリティ上、HTMLファイル（スクリプト）
はそれが置かれているドメインのサーバとしか
通信できないという制約がある
これを回避しなければ、スクリプトが置いてあ
るサーバ以外からファイルを読込めない
制約あり
iframe
XMLHttpRequest
解決策の１つ
2009/11/6
制約なし
画像やスタイルシート
スクリプト
JSONPを使う
16
データの取得方法
iframe
XMLHttpRequest
JSONP
SOAP
専用 API
2009/11/6
17
JSONP
前提
スクリプトにクロスドメイン制約がない
<script> 要素を追加すると実行される
問題点
データの提供者を信頼しなければならない
2009/11/6
18
データ形式
JSON
JSONP
{"students":[
{
"id":"5J01"
"name":"Amano"
}
{
"id":"5J02"
"name":"Aruga"
}
]}
callback( {"students":[
{
"id":"5J01"
"name":"Amano"
}
{
"id":"5J02"
"name":"Aruga"
}
]} );
2009/11/6
19
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
20
kosen.jsonp
result( {"kosen":[{
"prefecture":"北海道",
"school_name":"函館工業高等専門学校",
},{
"prefecture":"東京都",
"school_name":"東京工業高等専門学校",
},{
"prefecture":"沖縄県",
"school_name":"沖縄工業高等専門学校",
}]
});
2009/11/6
21
// 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;
22
} 2009/11/6
練習課題
ホットペッパーのAPIを利用して
検索サービスを作ってみよう
http://webservice.recruit.co.jp/hotpepper/reference.html
ユーザ登録を行いAPIキーを取得する
https://webservice.recruit.co.jp/register/index.html
まずはサンプルを改造してみては？
http://mtl.recruit.co.jp/blog/2007/08/jsonp_code_sample.
html
2009/11/6
23
例
2009/11/6
24
データの取得方法
iframe
XMLHttpRequest
JSONP
SOAP
専用 API
2009/11/6
25
SOAP
IBM や Microsoft など大企業が支持
W3C で標準化
仕様が大掛かりで複雑
「Web Service = SOAP」だった時期も
マッシュアップには向かない
2009/11/6
26
データの取得方法
iframe
XMLHttpRequest
JSONP
SOAP
専用 API
2009/11/6
27
専用API
Web サービスが URI のみで提供されるのでは
なく専用の JavaScript のライブラリを使って
データ交換を自動的にやってくれる
典型例: Google Maps
利点: データ交換を意識する必要が無く便利
欠点: 専用 API まで用意してあるところは
まだまだ少数
2009/11/6
28

講師 松本 章代

Transcript 講師 松本 章代

Directory

講師松本章代

Transcript 講師松本章代