創造的ウェブサービス構築基礎論
ニフティ株式会社寄付講座
第五回 (2009年10月22日)
Martin J. Dürst, 松本
章代
(X)HTML と JavaScript の基礎
http://www.sw.it.aoyama.ac.jp/2009/Mashup/lecture5.html
© 2009 Martin J.
Dürst 青山学院大学
今日の目的
- Web からのデータの取得
- JavaScript の勉強の続き
- Idea Camp の準備
今日の目次
- 前回の宿題について
- Web からのデータ・サービスの取得
- Idea Camp の準備
- 今週の演習
先週の宿題について
データの形式
- HTML: Web ページしかない場合に必要
- XML: 文書とデータの両側面を持つ場合に最適
- JSON: JavaScript の初期化のデータ形式
- その他
データの取得方法
- iframe
- XMLHttpRequest (XHR)
- JSONP
- SOAP
- 専用 API
iframe でのデータ取得の例
Enter a search term:
検索の結果: google.com (左) と yahoo.co.jp (右)
iframe の記述
iframe の特徴
- 利点:
- Web ページの取得と表示が同時に可能
- データ抽出だけの場合、
style='visibility:
hidden' で対応可能
- 他サイトのページもそのまま見せられるが、著作権に注意
- 欠点:
- 他サイトの場合、データの抽出が不可能
- 同期がとりにくい
XMLHttpRequest
作業の順番:
- リクエストオブジェクトの取得 (ブラウザ依存)
- callback 関数の用意
- .open 関数を呼ぶ (リクエストの準備)
- .send 関数を呼ぶ (リクエストの実行)
参考資料: JavaScriptとAjax、稲積宏誠、講義資料、2008
クロスドメイン制約
- ブラウザ内のある文書 (
document)
が複数のサーバとやり取りするとデータの漏洩などの恐れがある
- そのため、ブラウザの一部の機能で制限がある
- 制約あり:
- 制約無し:
- 画像やスタイルシート
- スクリプト (理由: 歴史)
JSON
- JavaScript から「初期化」の形式を独立
- 書式が簡単で、手造りも可能、読みやすい
- 詳細はJavaScript: The Good Parts, Douglas Crockford, O'Reilly 2008
に参照
- プログラムとプログラムの間のデータ交換に最適
- 構造化文書の交換に不向き
- データ取得の仕方:
- テクストとして取得、JSON パーサで評価
- JSONP
JSONP
- 前提:
- スクリプトにクロスドメイン制約がない
- <script> 要素を追加すると実行される
- 問題点:
参考資料: クロスドメイン JSON
JSONP、稲積宏誠、講義資料、2008
SOAP
- IBM や Microsoft など大企業が推薦した
- W3C で標準化
- 仕様が大掛かりで複雑
- 一時期「Web Service = SOAP」と思われた
- マッシュアップに向かない
専用 API
- Web サービスが URI だけで提供されるのではなく
- 専用の JavaScript のライブラリを使って、
- データ交換を自動的にやってくれる
- 典型例: Google Maps
- 利点: データ交換を意識しなくて便利
- 欠点: 用意されたところが少ない
Idea Camp の準備
今週の演習
- JSONP 又は XMLHttpRequest
で簡単な作品を作ってください
- データはウェブサービスから取ってもいいし (例:
@Nifty)、自分の
~/public
にファイルとしておいても良い
- 自分の
index.html
から分かりやすい様にする
- 提出期限: 10月26日 (月) 22:00