知的 Web のためのマッシュアッププログラミング presentation data logic JavaScript JavaScript JavaScript 図 -1 マッシュアップの分類マッシュアップの分類 3-1 presentation, data logic 3 presentat

Size: px

Start display at page:

Download "知的 Web のためのマッシュアッププログラミング presentation data logic JavaScript JavaScript JavaScript 図 -1 マッシュアップの分類マッシュアップの分類 3-1 presentation, data logic 3 presentat"

あきみかんざとばる
7 years ago
Views:

1 解説知的 Web のためのマッシュアッププログラミング新谷虎松大囿忠親 ( 名古屋工業大学大学院情報工学専攻 ) 本稿では知的なユーザ支援のための知的 Web を実現するための Web アプリケーション開発技法として, マッシュアップに基づく Web プログラミングについて紹介する. ここでは, マッシュアップに基づく Web プログラミングをマッシュアッププログラミングと呼び, マッシュアッププログラミングの背景となる Web プログラミングの基礎,Web API, および, 既存のマッシュアッププログラミング支援ツールについて紹介する. さらに, 知的な Web アプリケーションを構築するための, マッシュアッププログラミングの具体例を示すことで, マッシュアッププログラミングにおける課題とその解決方法を説明する. また, マッシュアッププログラミングにおけるセキュリティ上の注意点と対策方法について述べる. 最後に, 今後のマッシュアッププログラミングに関する展望について紹介する. 知的 Web とマッシュアップ Web Web Web Web Web Intelligence Web2.0 Web Web Web Web Web XML Web 1 IEEE/WIC/ACM International Conference on Web Intelligence WIC Web Intelligence Consortium 1 Web Web Web Web API Web Web Web 1 Web Web Web Web API Web API Web Web HTML Web Web Web API Web JavaScript 情報処理 Vol.50 No.5 May 2009

2 知的 Web のためのマッシュアッププログラミング presentation data logic JavaScript JavaScript JavaScript 図 -1 マッシュアップの分類マッシュアップの分類 3-1 presentation, data logic 3 presentation Web igoogle My Yahoo! HTML data logic Web マッシュアップの実装方法 Web 2 Web Web Web Web JavaScript Web マッシュアップ支援環境 Web Web Yahoo!Pipes 2 Microsoft Popfly 3 Web Yahoo!Pipes Yahoo! Yahoo!Pipes Web API Pipes Editor 4 & -2 Yahoo!Pipes 2 Microsoft Popfly Microsoft -3 Yahoo!Pipes Popfly Silverlight Yahoo!Pipes のパイプは,UNIX のパイプと類似している.UNIX では 2 つのプログラム p と q を p q のように ( パイプ ) で接続することで,p の出力を q に入力できる. Web ブラウザ上でのマルチメディアコンテンツ再生環境. を参照. 情報処理 Vol.50 No.5 May

3 解説図 -2 Yahoo!Pipes の実行例図 -3 Microsoft Popfly の実行例 Web API Web API Web API マッシュアップの基礎知識 Web API 適切な Web API の発見 Google Amazon Yahoo! Web Web Web API Web API Web Google Google Maps 6 Amazon Amazon Web 7 Yahoo! Web API 8 YouTube Web API Web API Web API ProgrammableWeb ,154 Web API 3,718 Web API Web API Web API 10 2 Web API Web API 2 REST Representational State Transfer SOAP Simple Object Access Protocol Web API REST SOAP Web API REST REST HTTP GET Web API URL REST Web API XML JSON SOAP HTTP POST 11 SOAP XML SOAP1.0 では HTTP のみであったが,1.1 以降では SMTP,FTP を用いた送受信も可能である.1.2 以降では REST のような GET メソッドを使用した呼び出しも可能となった. Web API の利用 REST Web API API " cgis.biz/xml/zip.php?zn= " -4 URL zn= 情報処理 Vol.50 No.5 May 2009

4 知的 Web のためのマッシュアッププログラミング <?xml version="1.0" encoding="utf-8"?> <ZIP_result> <result name="zipsearchxml" /> <result version="1.01" /> <result request_url="http%3a%2f%2fzip.cgis.biz%2fxml... <result request_zip_num=" " /> : <value company_kana=" " /> <value state=" " /> <value city="" /> <value address=" " /> <value company="" /> </ADDRESS_value> </ZIP_result> 1:<html><body> 2: <form method="get" action=" 3: <input name="q"> 4: <input type="submit"> 5: </form> 6:</body></html> 図 -4 郵便番号検索 API の実行結果図 -5 form を用いた Web アプリケーション Web API zn= 関数名機能 document.createelement(tag) 要素 tag を生成 x.appendchild(y) 要素 x に要素 y を追加 x.removechild(y) 要素 x から要素 y を除去 document.getelementbyid(id) ID が id である要素を取得表 -1 DOM 操作関数の一部 Web プログラミングの概要 JavaScript Web Web Web JavaScript JavaScript API DOM Document Object Model 12 Web XMLHttpRequest 13 Ajax 単純な Web アプリケーション <form> Web 興味のある読者は removechild 関数を使って検索結果を消すプログラムを作成してみるとよい. Web -5 <form> HTML HTML 2 5 <form> Google JavaScript DOM Web 効果的 Web アプリケーション HTML DOM API DOM DOM Web Web 情報処理 Vol.50 No.5 May

5 解説図 -6 1:<html><body> 2:<script type="text/javascript"> 3:function search() { 4: var q = document.getelementbyid("q"); 5: var x = document.createelement("iframe"); 6: x.width = "200"; x.height="250"; 7: x.src = " + q.value; 8: document.body.appendchild(x); 9:} 10:</script> 11:<input id="q"> 12:<input onclick="search();" type="button" value=" "> 13:</body></html> DOM を用いた Web アプリケーション Web presentation <iframe> iframe JavaScript Web -6 HTML JavaScript search search ID q Google 7 iframe 5 7 Web iframe 8 15 DOM Web Web , 5 行目の var は変数宣言を表し,6 行目の x.width はオブジェクト x の属性 width を表す実用的マッシュアップのための要素技術 JavaScript eval eval 16 JSON JavaScript Object Notation eval eval JavaScript XMLHttpRequest (XHR) XHR XML XHR XHR JSON JSON JSON JavaScript JSON JavaScript eval JSON key i, value i key 1 : value 1, key 2 : value 2, key i value i JSON var json = {"name": "Sano", "age": 20} ; var obj = eval("(" + json + ")"); obj.name = "Goto"; json JSON name Sano age 20 eval JSON obj name obj. name = "Goto" 448 情報処理 Vol.50 No.5 May 2009

6 知的 Web のためのマッシュアッププログラミングマッシュアップにおけるセキュリティ Web Web Web ブラウザのセキュリティモデル Same origin policy 17 XMLHttpRequest -2 <iframe> <img> <script> Web 17 タグメソッド利用法 <iframe> GET,POST 非表示状態で生成する. <img> GET 画像をサーバに要求すると, 画像の読み込み後に,onload イベントが発生するので, これにより受信完了を判定する. サーバは送信したいコンテンツをクッキーとして送り, ブラウザでは JavaScript でクッキーを読むことで送受信する. クッキーのデータ量の制約により送信可能なデータ量も制限される. <script> GET 動的に生成しスクリプトをサーバから読み込むことで送受信する. スクリプトの読み込み後,JavaScript が実行されることで受信完了を判定する. 表 -2 クロスサイト対応のタグ厳密には, ホスト名と URI スキームの対であり, ポート番号を含む場合もある. 本稿では, 単純にドメインと呼ぶ Web Web HTML HTML5 18 クロスサイトスクリプティングへの対策 XSS : cross-site scripting 2) XSS Web Web XML Web Web HTML Web API HTML JavaScript SQL iframe を用いた安全なマッシュアップ 4iframe Web iframe Web <iframe> <iframe> Web iframe iframe DOM Web 情報処理 Vol.50 No.5 May

7 解説図 -7 location 属性を利用した iframe 間通信 iframe Web Burke 19 location fragment identifier iframe 20 Web #identi fier 21 iframe JavaScript Dojo 22 IFrame Proxy location.hash iframe iframe URL location iframe location URL location iframe 23 location Web location.hash location.hash Web -7 iframe mashup.com/app.html Document Web servicea.com/api.html iframea window.name を利用した方法もある. blog/2008/07/22/windowname-transport/ 参照の #test 部分ただし, 読み込みはできない Google Maps API を利用するためには API キーが必要である. 本プログラム中では 2 行目の KEY が API キーを表す. serviceb.com/api.html iframeb iframe JavaScript JavaScript a, b, x, y JavaScript iframe iframe iframe mashup.com/tunnel.html iframeta iframetbiframe P iframe Q P Q P Q location -7 iframea iframeb iframeta iframetb JavaScript a b location a b location.hash JavaScript x y y JavaScript a b x Document iframea iframeb x iframe location x iframea iframeb location.hash a b location.hash iframe 知的 Web のためのマッシュアッププログラミング例 Web クライアントサイドマッシュアップ例 Google Maps API 24-8 Google Maps API 25 Google Maps API -8 8 GLatLng <div> 10 setcenter() Google Maps API JavaScript 450 情報処理 Vol.50 No.5 May 2009

8 知的 Web のためのマッシュアッププログラミング 1: <head> 2: <script src=" pi&v=2&key=key" type="text/javascript"> 3: </script> 4: </head> 5: <body> 6: <div id="map" style="width:640px;height:480px"/> 7: <script type="text/javascript"> 8: p=new GLatLng( , ); 9: m=new GMap2(document.getElementById("map")); 10: m.setcenter(p,13); 11: </script> 12: </body> 1: <?xml version="1.0" encoding="utf-8"?> 2: <result> 3: <version>1.1</version> 4: <address> 東京タワー </address> 5: <coordinate> 6: <lat> </lat> 7: <lng> </lng> 8: <lat_dms>35,39,30.913</lat_dms> 9: <lng_dms>139,44,43.53</lng_dms> 10: </coordinate> 11: <url> 東京タワー </url> 12: <needs_to_verify>no</needs_to_verify> 13: <google_maps> 東京タワー </google_maps> 14: </result> 図 -8 Google Maps の使用例図 -10 Geocoding API の返り値サーバの結果 XML) のの要求の生成からり API にを要求ブラウザのを表示サーバサイドマッシュアップ例ランドマークの名 XML Geocoding API にを要求 XML の名 -9 Web Web logic data Geocoding API 26 Google Maps API にを要求図 -9 最寄り駅マップにおけるマッシュアップ結果 XML) を JSON に変 JSON の名 Web API API 27 Web API Google Maps API Google Maps API Geocoding API API XML Web Geocoding API API REST Web API Geocoding API URL REST 東京タワー -10 XML <lat> <lng> XML API XML XML Google Maps Google Maps JavaScript JavaScript JSON JSON 情報処理 Vol.50 No.5 May

9 解説図 -11 最寄駅マップの実行例 -11 JavaScript Google Maps 知的なマッシュアップ支援に向けて Web API Web API の発見 Web API Web API Web API Web API Web API Web API Web API Web API Geocoding API API Geocoding API API Web API XML latitude lat Web API Web API Web API Web API Web API Web API Web API Web API Web API UDDI Universal Description, Discovery and Integration WSDL Web Services Description Language Web UDDI Web WSDL XML Web Web Web Web 1 Web API の利用 Web API Web API 100 WSDL Web API Web API Web Web API Web API XML RSS Atom REST SOAP XML- RPC 452 情報処理 Vol.50 No.5 May 2009

10 知的 Web のためのマッシュアッププログラミング Web API Web API Web API Web API Web API Web API Web API Web API Web API 1 Web API Web API 1 Web API Web Web API 参考文献 1) McIlraith, S. A. et al. : Semantic Web Services, IEEE Intelligent Systems, pp (2001). 2) Web2.0 Vol.50, No.1, pp (Jan. 2009). 3) Dornan, A. : Mashup Basics : Three for the Money, Network Computing, (2007). 4) Keukelaere, F. D. et al. : SMash : Secure Component Model for Cross- Domain Mashups on Unmodified Browsers, WWW2008, pp (2008) 今後の展望 Web API HTML Web API 新谷虎松 tora@nitech.ac.jp Web 大囿忠親 ozono@nitech.ac.jp Wisdom Web 情報処理 Vol.50 No.5 May

Webプログラミング演習

Webプログラミング演習 Web プログラミング演習 STEP9 Ajax を利用した RSS フィードのタイムライン表示 Ajax Asynchronous JavaScript + XML クライアントサイド ( ブラウザ内 ) で非同期サーバ通信と動的ページ生成を組み合わせる技術の総称ウェブアプリケーションの操作性向上 ( ページ遷移を伴わない ) サーバとの小刻みな通信 = 必要なデータを必要な時に要求 ( リクエスト

知的 Web のためのマッシュアッププログラミング presentation data logic JavaScript JavaScript JavaScript 図 -1 マッシュアップの分類 マッシュアップの分類 3-1 presentation, data logic 3 presentat

知的 Web のためのマッシュアッププログラミング presentation data logic JavaScript JavaScript JavaScript 図 -1 マッシュアップの分類マッシュアップの分類 3-1 presentation, data logic 3 presentat