Microsoft Word - ‚²Ÿ__MyRoom_mod_“Å‘I.doc

Transcription

1 My Room Web System 松 江 工 業 高 等 専 門 学 校 情 報 工 学 科 研 究 者 :スワット センサワート 指 導 教 員 : 越 田 高 志 2009 年 02 月 05 日 1

2 目 次 1.はじめに マッシュアップとは Web サービスについて SOAP 型 Web サービス Soap 型 とは 何 でしょう? 必 要 なソフトウェアと 確 認 方 法 について Axis サーバに WEB サービスを 登 録 する 方 法 REST 型 Web サービス REST 型 とは 何 でしょう? 必 要 なソフトウェアとその 設 定 について REST 型 Web サービス 実 行 例 スクリプト 言 語 について PHP 言 語 JavaScript 言 語 My Room Web System について My Room Web System の 研 究 目 的 システム 構 成 と 機 能 My Room Web System のプログラムについて 天 気 情 報 サービス Google サービス おわりに まとめ システム 評 価 中 間 期 末 卒 研 発 表 今 後 の 課 題...32 参 考 文 献 付 録 2

3 1. はじめに[1] 近 年,インターネットの 利 用 形 態 が 従 来 のサーバから 情 報 を 得 る 一 方 向 のみの 利 用 から,ユ ーザ 自 らがインターネットに 情 報 を 発 信 する 双 方 向 の 利 用 に 変 わりつつある.この 双 方 向 のイ ンターネット 利 用 を 核 とした 新 しい Web のあり 方 を Web2.0 [2]と 言 う.その Web2.0 時 代 において,Web サービスも 従 来 の SOAP 型 から,より 利 用 しやすい REST 型 に 移 行 し,その REST 型 Web サービスが Google,Yahoo,Amazon など 多 くの 企 業 から 提 供 されるようにな ってきた. 今 回, 我 々はこの REST 型 Web サービス API をマッシュアップして, 研 究 開 発 を 支 援 するための 新 しいサービスを 構 築 する. 2.マッシュアップとは マッシュアップ(Mash up)[3]とは, 複 数 の 異 なる 提 供 元 の 技 術 やコンテンツを 複 合 させて 新 しいサービスを 構 築 することをいう.より 具 体 的 には, 複 数 の 異 なる Web サービス API を 目 的 に 応 じて 結 合 し, 新 しいサービスとして 開 発 することをいう( 図 1 参 照 ). 図 1:マッシュアップのイメージ 図 本 システムの 開 発 を 始 める 前 に2 種 類 の Web サービス SOAP 型 と REST 型 Web サービス について, 実 際 にサーバとクライアントプログラムを 作 成 し, 動 作 確 認 を 行 った.それらにつ いて,まず 説 明 する. 3

4 3. Web サービスについて[2] まず Web サービスとは 何 だろうか.この 場 合 サービス とはプログラム 処 理 のことを 指 す. 通 常 のプログラムでは 入 力 を 受 け 取 り, 処 理 を 行 って 出 力 を 返 す. 同 様 の 流 れをイ ンターネットのサーバ 上 で 行 うのが Web サービスである.つまりインターネット 経 由 での リクエストメッセージを 入 力 とし, 処 理 を 行 い 出 力 をレスポンスメッセージとしてクライ アントに 返 すという 処 理 を 行 っている. 従 って,Web サービスとは 我 々が 普 段 利 用 してい る Web サイトに 限 られるわけではなく,Web 経 由 でアクセスできるあらゆるサービス(プ ログラム)と 捉 えることができる. Web サービスは, 大 きく SOAP 型 Web サービスと 最 近 利 用 が 増 えている REST 型 Web サ ービスに 分 類 できる. 3.1 SOAP 型 Web サービス SOAP とは 何 でしょう?[2] SOAP(Simple Object Access Protocol)とは,Web サービスとそれを 利 用 するクライア ント 間 の XML ベースのメッセージ 交 換 プロトコルである.SOAP を 利 用 する 事 によって Web サービスとクライアントプログラム 間 とのメッセージ 交 換 や RPC(Remote Procedure Call)を 容 易 に 実 現 できる. SOAP 仕 様 は,インターネット 上 での 分 散 処 理 を 実 現 する 仕 様 として 策 定 された.XML デ ータを 交 換 するため,システム 開 発 が 容 易 でオペレーティングシステムやプログラミング 言 語 に 関 して 完 全 に 中 立 であり,またプラットフォーム 独 立 でもある.SOAP は,より 複 雑 な 相 互 作 用 および 構 築 できるプロトコル 上 に 最 小 のレベルの 伝 送 を 提 供 するように 意 図 している.そ の SOAP プロトコルを 利 用 した Web サービスが SOAP 型 Web サービスである 必 要 なソフトウェアとその 開 発 方 法 について ここでは,SOAP 型 Web サービスのサーバ 上 への 実 装 とそれを 利 用 するクライアントプ ログラムの 構 築 について 具 体 的 に 説 明 する. 1 開 発 環 境 必 要 なソフトウェア Apache Axis1.1,TomCat4.1.37,J2SDK1.5,Xerces1.4.4 ( 全 てインターネットからダウンロード 可 能 ) ダウンロードをしてから 展 開,インストールする. 2 システム 環 境 変 数 の 設 定 利 用 するソフトウェアに 対 する 各 種 のシステム 環 境 変 数 を 指 定 する 必 要 がある.それら を 図 2と 表 1にまとめて 示 す. 詳 細 は 各 ソフトウェア 添 付 文 書 を 参 照 のこと. 4

5 図 2:システム 環 境 変 数 の 設 定 画 面 5

6 表 1 のように 設 定 する. (Axis は C: ドライブにインストールして 置 いた.Xerces も C: ドライブにインスト ールして 置 いた) 表 1:システム 環 境 変 数 の 設 定 例 変 数 値 CATALINA_HOME C: Program Files Apache Software Foundation Tomcat 4.1 JAVA_HOME PATH C: Program Files Java jdk1.5.0_15.;%java_home% bin;%systemroot% system32;%systemroot%;%syst emroot% System32 Wbem CLASSPATH.;%JAVA_HOME% lib tools.jar;%catalina_home% common lib s ervlet.jar;%catalina_home% common lib jaxrpc.jar;%catalina _HOME% common lib saaj.jar;c: axis-1_1 axis-1_1 lib axis.jar;c: axis-1_1 axis-1_1 lib axis-ant.jar;c: axis-1_1 axis-1_1 lib jaxrpc.jar ;C: axis-1_1 axis-1_1 lib saaj.jar;c: axis-1_1 axis-1_1 lib commons -logging.jar;c: axis-1_1 axis-1_1 lib commons-discovery.jar;c: axis-1 _1 axis-1_1 lib log4j jar;c: axis-1_1 axis-1_1 lib wsdl4j.jar;c: xerces1_4 xerces-1_4_4 lib xerces.jar AXIS_HOME C: axis-1_1 axis-1_1 3 Axis の 構 築 C: axis-1_1 axis-1_1 webapps の 中 の axis というフォルダをコピーして, C: Program Files Apache Software Foundation Tomcat 4.1 webapps に 貼 り 付 け る. 次 に,C: axis-1_1 axis-1_1 webapps WEB-INF lib の 中 にある jaxrpc.jar と saaj.jar をコピーして,C: Program Files Apache Software Foundation Tomcat 4.1 common lib に 貼 り 付 ける. 4 サーバの 動 作 確 認 TomCat と Axis が 動 作 しているかを 確 認 する.まず,TomCat の 動 作 確 認 を 行 う. 図 3, 図 4に 示 す. 6

7 図 3:Tomcat 起 動 画 面 (MS-DOS) 図 3の 画 面 表 示 を 確 認 した 後 に,ブラウザ 上 で URL の 部 分 に 入 力 する. 以 下 の 画 面 が 表 示 されれば TomCat は 正 常 動 作 している. 図 4:TomCat 確 認 画 面 7

8 続 いて Axis の 動 作 を 確 認 する. 同 じブラウザで URL 部 分 を 以 下 に 変 更 し,Enter を 押 す. 以 下 の 画 面 ( 図 5)のように 表 示 されれば Axis は 正 常 に 動 作 している. 図 5:Axis 確 認 画 面 Axis サーバに WEB サービスを 登 録 する 方 法 実 験 のために 開 発 したプログラムは,Java 言 語 で 開 発 した Data.java, サーバプログ ラム SotuService2.java, クライアントプログラム SotuClient2.java である. 各 々のプ ログラムについて 以 下 で 具 体 的 に 示 す. Data.java public class Data{ // code : 商 品 コード, maker : 商 品 コードを 取 り 扱 うメーカ String code, maker; // 引 数 なしのコンストラクタ(code, maker の 初 期 設 定 ) public Data(){ code = null; maker = null; // 引 数 に code, maker を 持 つコンストラクタ public Data( String code, String maker ){ setcode( code ); setmaker( maker ); 8

9 // code, maker にデータを 格 納 するための setter メソッド public void setcode( String code ) { this.code = code; public void setmaker( String maker ) { this.maker = maker; // code, maker からデータを 取 得 するための getter メソッド public String getcode() { return code; public String getmaker() { return maker; サーバプログラム SotuServices2.java import java.sql.*; public class SotuService2{ public TestData gettempmaker(string code) throws Exception{ String dburl = "jdbc:odbc:soap", driver = "sun.jdbc.odbc.jdbcodbcdriver"; TestData ret = null; try{ // ドライバクラスをロード Class.forName(driver); // データベースへ 接 続 Connection con = DriverManager.getConnection(dbUrl); // プリステートメントオブジェクトを 生 成 PreparedStatement prstmt = con.preparestatement( "select * from reg where code =?" ); prstmt.setstring( 1, code ); // クエリーを 実 行 して 結 果 セットを 取 得 ResultSet rs = prstmt.executequery(); // 取 り 扱 いメーカを 取 得 if ( rs.next() ) ret = new TestData( rs.getstring("code"), rs.getstring("maker") ); // データベースから 切 断 rs.close(); prstmt.close(); con.close(); catch (Exception e){ e.printstacktrace(); return ret; クライアントプログラム SotuClient2.java import org.apache.axis.client.call ; import org.apache.axis.client.service ; import org.apache.axis.encoding.ser.beandeserializerfactory ; 9

10 import org.apache.axis.encoding.ser.beanserializerfactory ; import org.apache.axis.encoding.xmltype ; import org.apache.axis.utils.options ; import javax.xml.rpc.parametermode ; import javax.xml.namespace.qname ; import java.sql.* ; public class SotuClient2 { public static void main(string[] args) throws Exception{ Options options = new Options( args ) ; args = options.getremainingargs() ; // 引 数 の 数 が 正 しくない 場 合 は,コンソールにヘルプメッセージを 出 力 して 処 理 を 終 了 する if ( ( args == null ) ( args.length!= 1 ) ){ System.err.println( "Usage: java SotuClient2 [ 商 品 名 ]" ) ; System.exit(1); QName qname = new QName("urn:Data-types", "SotuService2"); try{ String dburl = "jdbc:odbc:testdb", driver = "sun.jdbc.odbc.jdbcodbcdriver"; String code = null; Class.forName(driver); Connection con = DriverManager.getConnection(dbUrl); // プリステートメントオブジェクトを 生 成 PreparedStatement prstmt = con.preparestatement( "select code from orosi where shouhin =?" ); prstmt.setstring( 1, args[0] ); // クエリーを 実 行 して 結 果 セットを 取 得 ResultSet rs = prstmt.executequery(); if ( rs.next() ) code = rs.getstring("code"); System.out.println( " 商 品 名 : " + args[0] ); rs.close(); prstmt.close(); con.close(); Service service = new Service(); Call call = (Call)service.createCall(); // サービスを 提 供 している URL を 記 述 //call.settargetendpointaddress(options.geturl()); call.settargetendpointaddress(" s/sotuservice2"); // メソッド 名 を 設 定 call.setoperationname(new QName( "SotuService2", "gettempmaker" )); // メソッドの 引 数 の 型 を 設 定 call.registertypemapping(testdata.class, qname, new BeanSerializerFactory(TestData.class, qname), 10

11 new BeanDeserializerFactory(TestData.class,qName)); // メソッドを 実 行 TestData ret = (TestData)call.invoke( new Object[] {code ); System.out.println( " 商 品 コード : " + ret.getcode() + " 取 り 扱 いメーカ : " + ret.getmaker() ); catch (Exception e){ e.printstacktrace(); これらのプログラムの 処 理 は,クライアントは 自 らのPC 上 のデータベースを 検 索 して, 商 品 名 からそれに 対 応 した 商 品 コードを 抽 出 する.その 商 品 コードをリ クエストデータとして Web サービスに 送 付 する.Web サービスは,その 商 品 コー ドを 受 け 取 り,サーバにあるデータベースに 接 続 し,SQL 文 を 実 行 してその 商 品 コードに 対 応 した 商 品 名 を 抽 出 し,その 実 行 結 果 をクライアントに 返 すというも のである.ますサーバとクライアントは 同 一 PC 上 にある 場 合 (サーバは Local host として)で 動 作 確 認 を 行 った.ネットワーク 上 のコンピュータをサーバとし て 実 行 する 場 合 は,クライアントプログラムの 中 の call.settargetendpointaddress(" サ ー バ の IP ア ド レ ス:8080/axis/services/SotuService2"); この 部 分 を 変 えれば 良 い.サーバ 上 のデータベーステーブル(reg)とクライアント 上 のデータベーステーブル(oroshi)を 図 6,7 に 示 す 図 6:サーバの DB ファイル 図 7:クライアントの DB ファイル 11

12 まず 上 の Data.java, サーバプログラム SotuService2.java, クライアントプログ ラム SotuClient2.java をコンパイルする. コマンド: >javac Data.java >javac SotuService2.java >javac SotuClient2.java そして 出 来 上 がった Data.class と SotuService2.class をコピーし, C: ProgramFiles ApacheSoftwareFoundation Tomcat4.1 webapps axis WEB-INF classes のフォルダに 格 納 する. 次 に,deploy.wsdd というファイルを 作 成 する(Axis サーバに Web サービスを 配 備 するためのファイルである) コマンド: >java org.apache.axis.client.adminclient deploy.wsdd deploy.wsdd の 内 容 を 下 記 にしめす. <deployment xmlns=" xmlns:java=" <service name="sotuservice2" provider="java:rpc"> <parameter name="classname" value="sotuservice2" /> <parameter name="allowedmethods" value="gettempmaker" /> <beanmapping xmlns:ns="urn:data-types" languagespecifictype="java:data" qname="ns:sotuservice2"/> </service> </deployment> ここまで 実 行 した 後, 実 際 に Web サービスが 登 録 されているかを 確 認 する. 確 認 方 法 は 以 下 の URL をブラウザに 入 力 する. そして, 図 8 と 図 9 の 画 面 が 表 示 されていれば, 正 常 に 登 録 されていることが 分 かる. 12

13 図 8:Axis 確 認 画 面 図 9:Axis サービス 確 認 画 面 13

14 Web サービスの 登 録 は 完 全 であるので, 次 はその Web サービスを 実 行 するための クライアントプログラムを 確 認 する. コマンド: >java SotuClient2 Printer 実 行 結 果 商 品 名 :Printer 商 品 コード:568 取 り 扱 いメーカ:Canon サービスを 削 除 したい 場 合 は undeploy.wsdd を 実 行 すれば 良 い コマンド: >java org.apache.axis.client.adminclient undeploy.wsdd undeploy.wsdd ファイルの 内 容 を 下 記 に 示 す. <undeployment xmlns =" <service name ="SotuService2" /> </undeployment> 3.2 REST 型 Web サービス REST 型 とは 何 でしょう?[3] Web2.0 的 なサービスとして 注 目 されているのが,REST 型 の Web サービスである.デ ータを 複 数 の REST 型 Web サービスから XML で 受 け 取 り,それを 加 工 して 利 用 する 身 近 な 例 としては,RSS リーダーがあげられる.RSS 広 告 も,Web サービスの 仕 組 みを 使 って 配 信 されていることになる.ま た Java Script を 使 って 呼 び 出 す Google Maps などの 地 図 情 報 サービスも,REST 型 Web サービスの 一 種 である 必 要 なソフトウェアとその 設 定 について REST 型 Web サービスを 開 発 するためのフレームワークとして Restlet-1.0 があり,そのフ レームワークは Java で 作 成 されているので,プログラム 開 発 には Jdk1.5.0_15 が 必 要 である. Restlet を 展 開 したフォルダー 状 態 を 図 10 に 示 す.この 全 ての jar ファイルを 環 境 変 数 CLASSPATH に 設 定 する. 14

15 図 10:Restlet 解 凍 した 画 面 C: Program Files Noelios Restlet-1.0 lib にjar ファイルがある 環 境 設 定 変 数 RESTLET_HOME C: Program Files Noelios Restlet-1.0 javax.mail_1.4 などのフォルダー 内 にある 全 ての jar ファイルを 下 記 のようにコピーしてそ れらをクラスパス 指 定 に 追 加 した. 但 し,servlet のみは 2.4 と 2.5 で jar ファイル 名 が 同 じ なのでフォルダー 毎 の 指 定 とした. 15

16 図 11:ファイルを 追 加 した 後 の 画 面 C: Restlet(07) restrun.bat などのバッチファイルを 図 12 のように 作 成 する. 16

17 @echo off set CLASSPATH=%CLASSPATH%;%RESTLET_HOME% lib com.noelios.restlet.jar set CLASSPATH=%CLASSPATH%;%RESTLET_HOME% lib com.noelios.restlet.ext.asyncweb_0.8.jar set CLASSPATH=%CLASSPATH%;%RESTLET_HOME% lib com.noelios.restlet.ext.httpclient_3.1.jar set CLASSPATH=%CLASSPATH%;%RESTLET_HOME% lib com.noelios.restlet.ext.javamail_1.4.jar set CLASSPATH=%CLASSPATH%;%RESTLET_HOME% lib com.noelios.restlet.ext.jdbc_3.0.jar set CLASSPATH=%CLASSPATH%;%RESTLET_HOME% lib com.noelios.restlet.ext.jetty_6.1.jar set CLASSPATH=%CLASSPATH%;%RESTLET_HOME% lib com.noelios.restlet.ext.net.jar set CLASSPATH=%CLASSPATH%;%RESTLET_HOME% lib com.noelios.restlet.ext.servlet_2.4.jar set CLASSPATH=%CLASSPATH%;%RESTLET_HOME% lib com.noelios.restlet.ext.simple_3.1.jar set CLASSPATH=%CLASSPATH%;%RESTLET_HOME% lib org.restlet.jar set CLASSPATH=%CLASSPATH%;%RESTLET_HOME% lib org.restlet.example.jar set CLASSPATH=%CLASSPATH%;%RESTLET_HOME% lib org.restlet.ext.fileupload_1.2.jar set CLASSPATH=%CLASSPATH%;%RESTLET_HOME% lib org.restlet.ext.freemarker_2.3.jar set CLASSPATH=%CLASSPATH%;%RESTLET_HOME% lib org.restlet.ext.json_2.0.jar set CLASSPATH=%CLASSPATH%;%RESTLET_HOME% lib org.restlet.ext.spring_2.0.jar set CLASSPATH=%CLASSPATH%;%RESTLET_HOME% lib org.restlet.ext.velocity_1.5.jar set CLASSPATH=%CLASSPATH%;%RESTLET_HOME% lib org.apache.commons.codec.jar set CLASSPATH=%CLASSPATH%;%RESTLET_HOME% lib org.apache.commons.collections.jar set CLASSPATH=%CLASSPATH%;%RESTLET_HOME% lib org.apache.commons.dbcp.jar set CLASSPATH=%CLASSPATH%;%RESTLET_HOME% lib org.apache.commons.fileupload.jar set CLASSPATH=%CLASSPATH%;%RESTLET_HOME% lib org.apache.commons.httpclient.jar set CLASSPATH=%CLASSPATH%;%RESTLET_HOME% lib org.apache.commons.io.jar set CLASSPATH=%CLASSPATH%;%RESTLET_HOME% lib org.apache.commons.lang.jar set CLASSPATH=%CLASSPATH%;%RESTLET_HOME% lib org.apache.commons.logging.jar set CLASSPATH=%CLASSPATH%;%RESTLET_HOME% lib org.apache.commons.pool.jar set CLASSPATH=%CLASSPATH%;%RESTLET_HOME% lib org.apache.mina.jar set CLASSPATH=%CLASSPATH%;%RESTLET_HOME% lib org.apache.velocity.jar set CLASSPATH=%CLASSPATH%;%RESTLET_HOME% lib org.json.jar set CLASSPATH=%CLASSPATH%;%RESTLET_HOME% lib mail.jar set CLASSPATH=%CLASSPATH%;%RESTLET_HOME% lib org.safehaus.asyncweb.jar set CLASSPATH=%CLASSPATH%;%RESTLET_HOME% lib org.simpleframework.jar set CLASSPATH=%CLASSPATH%;%RESTLET_HOME% lib org.slf4j.jar set CLASSPATH=%CLASSPATH%;%RESTLET_HOME% lib org.springframework.beans.jar set CLASSPATH=%CLASSPATH%;%RESTLET_HOME% lib org.springframework.context.jar set CLASSPATH=%CLASSPATH%;%RESTLET_HOME% lib org.springframework.core.jar set CLASSPATH=%CLASSPATH%;%RESTLET_HOME% lib org.mortbay.jetty.jar set CLASSPATH=%CLASSPATH%;%RESTLET_HOME% lib org.mortbay.jetty.ajp.jar set CLASSPATH=%CLASSPATH%;%RESTLET_HOME% lib org.mortbay.jetty.https.jar set CLASSPATH=%CLASSPATH%;%RESTLET_HOME% lib org.mortbay.jetty.util.jar set CLASSPATH=%CLASSPATH%;%RESTLET_HOME% lib javax.servlet_2.4 javax.servlet.jar set CLASSPATH=%CLASSPATH%;%RESTLET_HOME% lib javax.servlet_2.5 javax.servlet.jar set CLASSPATH=%CLASSPATH%;%RESTLET_HOME% lib com.db4o.jar set CLASSPATH=%CLASSPATH%;%RESTLET_HOME% lib com.db4o.nativequery.jar set CLASSPATH=%CLASSPATH%;%RESTLET_HOME% lib edu.oswego.cs.dl.util.concurrent.jar set CLASSPATH=%CLASSPATH%;%RESTLET_HOME% lib edu.purdue.cs.bloat.jar 図 12:バッチファイルの 内 容 REST 型 Web サービス 実 行 例 沢 山 の 例 を 実 行 してみたが ここでは 一 つの 例 だけを 紹 介 する.この 例 はサーバとクライア ントのやり 取 りであり,POST プロトコルの 実 装 例 である. 17

18 サーバ 側 のプログラム:PostServer1.java import org.restlet.data.protocol; import org.restlet.data.request; import org.restlet.data.response; import org.restlet.data.form; import org.apache.commons.httpclient.*; public class PostServer1{ public static void main(final String[] args) throws Exception{ // Creating a minimal Restlet returning "Hello World" final Restlet restlet = new public void handle(request request, Response response){ // リクエストから Form を 取 得 する Form form = request.getentityasform(); // パラメータの 取 得 //Parameter a = form.getfirst( "a" ); //Parameter b = form.getfirst( "b" ); // 直 接 データを 取 得 する 場 合 String a1 = form.getfirstvalue( "a" ); String b1 = form.getfirstvalue( "b" ); // 複 数 のデータを 個 別 に 取 得 する 場 合 // String a2 = form.sublist( "a" ).get(1).getvalue(); // String b2 = form.sublist( "b" ).get(1).getvalue(); //... その 他 の 処 理... System.out.println("a=" + a1); System.out.println("b=" + b1); ; //Create the HTTP server and listen on port 8182 //new Server(Protocol.HTTP, 8182, restlet).start(); Server server = new Server(Protocol.HTTP, 8182, restlet); server.start(); サーバプログラムをコンパイルして 実 行 する コマンド: >javac PostServer1.java 18

19 図 13:サーバのプログラムの 実 行 画 面 クライアント 側 のプログラム PostClient1.java import org.restlet.restlet; import org.restlet.client; import org.restlet.server; import org.restlet.data.mediatype; import org.restlet.data.protocol; import org.restlet.data.request; import org.restlet.data.response; import org.restlet.data.form; import org.restlet.resource.representation; import org.apache.commons.httpclient.*; import java.io.*; public class PostClient1{ public static void main(string[] args){ // 投 稿 するデータ(パラメータ)をフォームに 追 加 Form form = new Form(); form.add( "a", "パラメータ 1" ); form.add( "b", "パラメータ 2" ); // クライアントを 準 備 する Client client = new Client( Protocol.HTTP ); String url = " Representation rep = form.getwebrepresentation(); // 文 字 コードを 指 定 する 場 合 Representation rep = form.getwebrepresentation( new CharacterSet( "Shift_JIS" ) ); // サーバにアクセス Response res = client.post( url, rep ); System.out.println("Client post OK!"); 19

20 クライアントプログラムをコンパイルして 実 行 する コマンド: >javac PostClient1.java 図 14:クライアント 実 行 画 面 4. スクリプト 言 語 について[4] スクリプト 言 語 とは 簡 単 なプログラム 言 語 であり,Web アプリケーションやツールの 動 作 内 容 を 簡 単 に 操 作 するための 言 語 である. 特 に Web ページに 良 く 使 われている.スクリプト 言 語 で 作 成 したプログラムはスクリプトと 呼 ばれる. 代 表 的 なものは PHP,JavaScript,Perl な どである. 次 に PHP 言 語 と JavaScript 言 語 について 説 明 する. 4.1 PHP 言 語 (PHP : Hypertext Preprocessor)[5] PHP 言 語 はスクリプト 言 語 の 一 つであり,Web アプリケーション スクリプトとも 呼 ばれ る.サーバプログラムに 良 く 使 われている.HTML(HyperText Markup Language)ソース コード 内 に PHP タグの 中 に PHP プログラムを 記 入 することができる.しかし,PHP プログ ラムを 実 行 するためには,Apache などの HTTP サーバが 必 要 である. 例 えば:TomCat や XAMMP などをインストールして,HTTP サーバを 構 築 すれば PHP プログラムを 実 行 できる. 4.2 JavaScript 言 語 JavaScript 言 語 はスクリプト 言 語 であり,リッチクライアント Web アプリケーションの 構 築 によく 使 われている.HTML ソースコードの script タグ 内 に 埋 め 込 めば Web ページの 動 作 を 操 作 することができて,HTML の 内 容 や Web アプリケーションなど 自 動 的 に 更 新 すること もできる.JavaScript プログラムの 実 行 は 簡 単 であり,Web ブラウザに JavaScript を 有 効 に 設 定 すれば JavaScript プログラムが 実 行 できる. 20

21 5. My Room Web System について 5.1 My Room Web System の 研 究 目 的 現 在, 日 常 的 にインターネットを 利 用 していて, 以 下 の 点 について 不 満 を 感 じた.それを 改 善 し, 今 後 の 研 究 開 発 をサポートする 効 率 的 でかつ 利 用 しやすい 検 索 システムを 開 発 したいと 強 く 感 じたのが 研 究 の 動 機 である. 必 要 な 情 報 を 検 索 抽 出 するために, 複 数 のサイト 毎 に 別 々の 検 索 ウィンドウを 起 動 し, 個 別 に 検 索 キーワードを 入 力 なければならず, 手 間 がかかる. その 問 題 を 解 決 するために,1ヶ 所 の 検 索 キーワード 入 力 で 同 時 に 複 数 のサイトにアクセス 可 能 にし, 効 率 良 く 必 要 情 報 を 入 手 可 能 にするシステムを 既 存 の Web サービスを 組 み 合 わせて 開 発 することと 画 面 構 成 にも 複 数 のサービスを 同 時 に 利 用 できるように 目 的 とする.あたかも, 自 分 の 室 にいるように, 必 要 なものが 必 要 なときにいつでも 手 に 取 って 使 えるような 感 覚 で 利 用 できる Web 検 索 サービスを 開 発 することが 目 的 である.それを 実 現 するシステムなので My room システムと 命 名 した. 5.2 システム 構 成 と 機 能 本 システムは, 次 の 3 機 能 1 検 索 機 能,2 動 画 検 索,3 機 能 マップ 表 示 機 能 をもち, 各 々をフレームに 分 けて 構 成 した. これらの 3 機 能 は 各 企 業 から 提 供 されている REST 型 Web サービス API をマッシュアップし た 開 発 した.マッシュアップしたサービスを 表 2に 示 す. 企 業 Google YouTube 表 2:サービス 一 覧 サービス Web, News, Blog, Book, Image, Local, Patent, PDF, Map 動 画 検 索 Livedoor(Weather Hacks) 天 気 情 報 検 索 Amazon Yahoo Amazon サービス 内 のキーワード 検 索 Yahoo サービス 内 のキーワード 検 索 また,システムの 実 行 画 面 を 図 15 に 示 す. 21

22 境 界 線 図 15:システム 全 体 の 実 行 画 面 My Room Web System は3つのフレームに 分 かれている.そうして, 黒 い 境 界 線 は 移 動 で きる. 本 システムは3つのフレームに 分 かれたことと 境 界 線 が 移 動 できることの 理 由 は 同 時 に 複 数 サービスを 利 用 できるようにしたいからだ. 例 えば: 右 側 の 上 のフレーム Youtube 動 画 検 索 を 聞 きたい 音 楽 検 索 してから 音 楽 を 聴 きなが ら 左 側 のフレームをサイト 検 索 などを 利 用 することができる. 次 は Youtube 動 画 検 索 の 音 楽 だけ 聴 きながら, 左 側 のフレームをローカル 検 索 などを 利 用 して,それでマップも 見 たいとき に 横 の 境 界 線 を 上 に 移 動 すればマップが 見 やすくなる.なので, 同 時 に 複 数 サービスを 利 用 で きるということである. 5.3 My Room Web System のプログラムについて My Room Web System プログラム 開 発 を 始 めたときは PHP 言 語 で 開 発 していたが, 途 中 で 全 部 を JavaScript に 変 更 した.JavaScript に 変 更 した 理 由 を 以 下 に 示 す. JavaScript はリッチクライアント Web アプリケーションの 構 築 によく 使 われており,Web ページが 動 的 に 更 新 できるためである. プログラム 実 行 が 簡 単 である. Google API が 提 供 している JavaScript のオブジェクトなど, 参 考 にできるサンプルが 多 くある. Java 言 語 による 開 発 にフレンドリであり,JavaScript と Java は 似 ている.しかし, 実 際 には 関 係 がなく, 別 のものである 本 システムは,2つのスタイルで Web サービスをマッシュアップした.そのスタイルを 下 記 で 説 明 する. 22

23 1 一 つ 目 はリクエスト URL と 指 定 パラメータ 一 緒 にサーバへ 送 り,サーバから 返 ってきた レスポンスは JSON(JavaScript Object Notation) 形 式 と XML(Extensible Markup Language) 形 式 で 返 ってきたので,それらをプログラムで 解 析 してマッシュアップする スタイル. 2 二 つ 目 は Google API が 提 供 してる JavaScript のクラスリファレンスを 利 用 して 簡 単 にマ ッシュアップができるスタイル 簡 単 にいうと Google API が 提 供 しているライブラリ コンストラクタ オブジェクト メッゾドなどを 利 用 してマッシュアップするスタイルと いってもいいでしょう 以 下 でマッシュアップした Web サービスについて 具 体 的 に 説 明 する 天 気 情 報 サービス[6] Weather Hacks-Livedoor が 提 供 している 天 気 情 報 Web サービスである. 現 在 日 本 全 国 142 カ 所 の 今 日 明 日 あさっての 天 気 予 報 予 想 気 温 と 都 道 府 県 の 天 気 概 況 情 報 を 提 供 して います.サーバから 帰 ってきたレスポンスは XML 形 式 である.XML 形 式 をそのままで 利 用 しても 構 わないが,ちょっと 見 にくいのでプログラムで XML 形 式 を 解 析 して 見 やすい 出 力 結 果 を 整 理 する 必 要 がある. 見 やすい 結 果 を 出 力 するために, 私 は CSS(Cascading Style Sheets) ファイルと 一 緒 にプログラムに 組 み 合 わせした. 天 気 情 報 プログラムを 説 明 する 前 にちょっとサーバとクライアントはどの 風 にデータをやり 取 りするかを 次 の 図 で 示 す. リクエス Http プロトコル クライアント レスポンス サーバ 図 16:クライアントとサーバのデータ 交 換 マッシュアップした 天 気 情 報 プログラムについて 全 部 のプログラムを 説 明 するのは 大 変 な んで, 時 間 もかかりすぎだと 思 う HTML ソース 内 に Script の 中 の 重 要 な 部 分 だけ 説 明 する. まず,クライアントがリクエスト URL と 指 定 パラメータを 一 緒 にサーバへ 送 る.リクエス ト URL と 指 定 パラメータは 以 下 の 図 で 示 す. 23

24 est/v1?city=92&day=today 一 つ 目 のパラメータ 二 つ 目 のパラメータ 図 17:リクエスト URL とパラメータ このURL に 対 するサーバからのレスポンスは XML 形 式 であるが,それを JSON 形 式 に 変 換 する.JSON 形 式 に 変 換 する 理 由 は,JSON 形 式 に 変 えた 方 が 出 力 しやすくなるからである. JSON に 変 換 してから,そのままの 結 果 で 利 用 できるといってもいいでしょう. 以 下 の 手 順 で 示 す. var proxy = ' XML を JSON に 変 換 する 図 18:XML を JSON に 変 換 する PROXY サーバ XML 形 式 レスポンスを JSON 形 式 に 変 換 を 行 う var url = proxy + 'var=' + name + '&url=' + escape(' + city + '&day=' + day); 図 19:XML を JSON に 変 換 する 変 換 した 後 の JSON 形 式 結 果 を url オブジェクトに 入 れる. 以 下 の 図 で 示 すのは XML 形 式 である. 24

25 <?xml version="1.0" encoding="utf-8"?> <lwws version="livedoor Weather Web Service 1.0"> <author>livedoor Weather Team.</author> <location area=" 中 国 " pref=" 島 根 県 " city=" 松 江 " /> <title> 島 根 県 松 江 - 今 日 の 天 気 </title> <link> <forecastday>today</forecastday> <day>saturday</day> <forecastdate>sat, 31 Jan :00: </forecastdate> <publictime>fri, 30 Jan :00: </publictime> <telop> 雨 </telop> <description> 島 根 県 では 31 日 にかけ 強 風 となり 海 岸 や 海 上 ではしける 見 込 みで す 強 風 高 波 に 注 意 して 下 さい また 松 江 地 区 雲 南 地 区 大 田 邑 智 地 区 益 田 地 区 の 山 地 の 積...</description> <image> <title> 雨 </title> <link> <url> <width>50</width> <height>31</height> </image> <temperature> <max> <celsius>8</celsius> <fahrenheit>46.4</fahrenheit> </max> <min> <celsius>6</celsius> <fahrenheit>42.8</fahrenheit> </min> </temperature> 図 20:XML 形 式 実 際 は JSON 形 式 を 利 用 するためにもう 一 つの 手 順 がある.Script の 上 に prototype.js とい うファイルをインポートした.そのファイルの 内 容 は 長 すぎので data というオブジェクト 部 分 だけ 示 す. 実 際 の prototype.js の 内 容 は 付 録 で 示 す. 25

26 var data = elements.inject({, function(result, element) { if (!element.disabled && element.name) { key = element.name; value = $(element).getvalue(); if (value!= null && element.type!= 'file' && (element.type!= 'submit' (!submitted && submit!== false && (!submit key == submit) && (submitted = true)))) { if (key in result) { // a key is already present; construct an array of values if (!Object.isArray(result[key])) result[key] = [result[key]]; result[key].push(value); else result[key] = value; return result; ); 図 21:data オブジェクト 次 はdata オブジェクトに 結 果 を 代 入 する( 図 22). var aream = data.location.pref; var areas = data.location.city; var telops = data.telop; var discs = data.description; var copy = data.copyright.title; 図 22: 結 果 を 各 オブジェクトに 代 入 する 最 後 に HTML ファイルに 登 録 して Web ページに 表 示 する. 見 やすい 結 果 を 表 示 するために, 私 は css.css というファイルをインポートして 利 用 した.css.css と 実 際 の 天 気 情 報 検 索 プログ ラムの 内 容 は 付 録 に 示 す. 26

27 図 23: 天 気 情 報 の 実 行 画 面 Google サービス[7] Google AJAX Search API は,Google Search をウェブ ページやその 他 のウェブ アプリ ケーションに 埋 め 込 むことを 可 能 にする Javascript ライブラリである.JSON エンコー ドされた 結 果 を 返 すサービスである. Google AJAX Search API を 利 用 するために,まず Google API の ID を 取 得 する.ID を 取 得 してから,Google AJAX Search API を 利 用 できる.HTML ソースの Script の 重 要 な 部 分 だけ 説 明 して 行 く. Google AJAX Search API を 利 用 するための 宣 言 部 分 である. Google API の ID 図 24:Google API の 利 用 するための 宣 言 次 はGoogle AJAX Search API が 提 供 しているサービスのバージョンは 今 Ver1.0 を 提 供 している.サービスバージョン 1.0 を 利 用 する 宣 言 も 必 要 である. 以 下 の 図 25 で 示 す. 27

28 google.load('search', '1.0'); バージョン 1.0 図 25:Google API サービスバージョン 次 は,tabbed オブジェクトを 作 成 し,GSearchControl() 検 索 コントロールを 登 録 する. var tabbed = new GSearchControl(); 図 26:GSearchControl() 登 録 次 は,サービスを 登 録 する. 以 下 の 図 で 示 すのは 一 つ 目 のサービスの 登 録 方 法 である. サイト 検 索 オブジェクト tabbed.addsearcher(new GwebSearch()); tabbed.addsearcher(new GnewsSearch()); ニュース 検 索 オブジェクト 図 27:サービス 登 録 方 法 次 Amazon と Yahoo Web サービスを 登 録 する. 以 上 の 登 録 方 法 と 違 って, 以 下 の 図 28 の ように 複 雑 になる. 二 つ 目 の 登 録 方 法 である. 一 つの Amazon Web サービスの 登 録 例 について 説 明 する.Yahoo Web サービスも 同 様 である. 28

29 amaz オブジェクトを 生 成 する var amaz = new GwebSearch() amaz.setuserdefinedlabel("amazon JP"); amaz.setuserdefinedclasssuffix("sitesearch"); amaz.setsiterestriction("amazon.co.jp"); tabbed.addsearcher(amaz); Amazon のドメイン 名 図 28:Amazon Web サービス 登 録 方 法 次 はPDF フィル 検 索 サービスを 登 録 する. 以 下 の 図 29 に 示 す. pdf オブジェクトを 生 成 する var pdf = new GwebSearch(); pdf.setuserdefinedlabel("pdf ファイル"); pdf.setqueryaddition("filetype:pdf"); tabbed.addsearcher(pdf); PDF ファイル 検 索 を 指 定 する 図 29:PDF ファイル 検 索 登 録 方 法 次 は,Web ページに 検 索 結 果 を 表 示 するモードは 2 つのモードがある. 検 索 結 果 をタブモ ードまたはリニアモードで 描 画 するよう 検 索 コントロールに 指 示 することができる. 本 シ ステムではタブモードで 指 定 した. var drawoptions = new google.search.drawoptions(); drawoptions.setdrawmode(google.search.searchcontrol.dr AW_MODE_TABBED); タブモード 図 30: 検 索 結 果 表 示 モード 29

30 最 後 の Script に 定 義 した 関 数 をイベントハンドラとして 登 録 する. google.setonloadcallback(onload, true); 図 31:イベントハンドラ 登 録 図 32: 本 研 究 メインの 実 行 画 面 本 システムの 全 てのソースコードは 付 録 にまとめて 示 す. 30

31 6. おわりに 6.1 まとめ 本 システムは 全 部 で 4 企 業 から 提 供 されている 14 種 類 の Web サービスをマッシュアップし た. 全 て JavaScript と CSS で 開 発 した. 本 システムに PHP 言 語 で 開 発 してみたが, 途 中 で JavaScript に 変 えていても PHP の 勉 強 は 将 来 に 役 に 立 ち, 無 駄 の 時 間 ではなかったと 思 う. 今 まで My Room Web System を 開 発 してきたが, 完 全 に 完 璧 ではないと 思 う. 改 良 点 はた くさんあると 思 う. 来 年,もし 続 けたい 後 輩 が 居 たら 最 後 の 今 後 の 課 題 に 対 して 完 璧 して 欲 し いなと 思 っている. 私 でも 大 学 でこの My room Web System を 発 展 させて 行 きたいと 思 う. いつか 完 璧 にしてインターネット 上 で 公 開 したいと 思 っている. 6.2 システム 評 価 10 人 に 本 システムを 利 用 してもらい,3つの 項 目 について 評 価 してもらった. 以 下 の 表 で 示 す. 表 3:システム 評 価 アンケート 10 人 の 平 均 点 キーワード 入 力 が 1 回 で, 複 数 の 検 索 サービスが 利 用 できるので 便 利 で 効 率 的 であるか? 4.5 このシステムがインターネット 上 にあれば 貴 方 は 使 いたいと 思 う? 4.2 このシステムがインターネット 上 に 実 現 すれば 役 に 立 つと 思 う? 3.4 一 つの 質 問 は 5 点 満 点 である. この10 人 の 平 均 点 からみると, 良 い 評 価 をもらえたのがわかった. 凄 く 嬉 しかった コメ ントと 感 想 も 貰 えた. 以 下 の 通 りで 示 す. 2つのマップを 互 いに 対 応 してほしい 天 気 情 報 の 選 択 リストをもっと 選 択 しやすい 本 システムにもっと 機 能 や 新 しいサービスを 追 加 してほしい など コメントと 感 想 に 関 しては 今 後 に 課 題 にさせたいと 思 う.アンケートはシンプルだし, 取 り 方 もちょっと 悪 かったかなと 思 った.もう 一 つのアンケートに 気 づいたのは 本 システムに 関 す る 良 くない を 答 えた 人 にもうちょっとどうしたらいいか アドバイスなどを 書 いてもらい たかった. 31

32 6.3 中 間 期 末 卒 研 発 表 について 中 間 の 卒 研 発 表 では 特 に 何 もなかった. 質 問 もされなかった.よかったのか 悪 かったか, 自 分 でも 分 からなかった. 期 末 の 卒 研 発 表 では4つ 質 問 された.それらの 質 問 に 対 する 回 答 を 以 下 に 示 す. 質 問 1:マッシュアップして 新 しいサービスを 作 ったわけではないのか? 既 存 の Web サービスをマッシュアップして 新 規 のシステムを 開 発 した. 新 たな Web サービスを 作 ったのではない. 質 問 2: 拡 張 性 は? ある 質 問 3: 一 つ 一 つが 独 立 しているか? 連 動 は 考 えていたか? 一 つ 一 つが 独 立 している. 連 動 性 については 検 討 したが, 設 計 実 装 するには 時 間 が 不 足 した. 連 動 性 は 今 後 の 課 題 にしたい. 質 問 4: 連 動 はできるのか? 多 分 できると 思 う 質 問 3と 質 問 4は 凄 くいい 質 問 だったと 思 った. 今 後 の 課 題 にしたくて My Room Web System の 開 発 に 役 に 立 つと 思 う. 6.4 今 後 の 課 題 今 後 の 課 題 としては 期 末 に 質 問 された 内 容 とアンケートのコメントと 私 が 追 加 したい 項 目 を 今 後 の 課 題 にしたいと 思 う. 以 下 で 示 す. 一 つのキーワード 全 てのフレーム,サービスを 連 動 したいと 思 う. YouTube 動 画 検 索 で, 選 択 した 動 画 を 同 じフレームの 空 いているスペース 部 分 に 動 画 を 表 示 する. 本 システムに 新 たなサービスまたは, 社 会 に 役 に 立 つサービスを 検 討 し,できたら 追 加 したいと 思 う. 以 上 の 課 題 を 達 成 するために,プログラム 言 語 をもっと 勉 強 する 必 要 があると 考 える. 参 考 文 献 [1] 加 藤 智 明, 永 島 穂 波 著 :Web2.0 最 前 線 エクスメディア (2006/08). [2] [3] [4] 言 語.html [5] [6] 天 気 Web サービスのリクエストパラメータ, レスポンスフィールドなど [7] Google のクラスリファレンス 32

33 33