卒論［PDF］ - www2.matsue

目次
１．はじめに ........................................................................................................... 2
１．１ 研究
研究の
の背景..................................................................................................................
2
背景
１．２ 研究の
2
研究の目的..................................................................................................................
目的
2
１．３ 卒論文の
卒論文の構成..............................................................................................................
構成
２．Web サービスについて ................................................................................... 3
２．１ SOAP 型 Web サービス ............................................................................................. 3
２．１．１ インストールと
インストールと環境変数の
環境変数の設定 ......................................................................... 3
２．１．２ Web サービス実行
サービス実行について
実行について ............................................................................. 7
２．２ REST 型 Web サービス............................................................................................
15
サービス
２．２．１ REST とは ........................................................................................................ 15
２．２．２ REST の特徴 ................................................................................................... 15
２．２．３ SOAP と REST の比較....................................................................................
15
比較
システムの
概要.......................................................................................................... 16
３．１ システム
の概要
３．２ システム要素技術..................................................................................... 16
３．２．１ Yahoo Web サービスについて
サービスについて ....................................................................... 16
３．２．２ Flickr Web サービスについて
サービスについて ........................................................................ 19
３．２．３ JavaScript について........................................................................................
20
について
３．２．４ マッシュアップについて
マッシュアップについて ................................................................................... 20
３．３ システム
システムの
開発.......................................................................................................... 21
の開発
３．３．１ IF 設計 ............................................................................................................. 21
３．３．２ 実装 .................................................................................................................. 22
システム実行結果
３．４ システム
実行結果 ..................................................................................................... 29
３．４．１ 検索 .................................................................................................................. 29
３．４．２ ショッピング ....................................................................................................... 30
４． おわりに ....................................................................................................... 31
４．１ まとめ
まとめ.......................................................................................................................... 31
４．２ 今後の
31
今後の課題................................................................................................................
課題
参考文献 ............................................................................................................. 31
付録
1
１．はじめに
１．１ 研究の
研究の背景
今，Web2.0 といわれる新しいインターネットの時代に入ってきている．Web2.0 はオレイリーが提唱した
言葉でその意味は，従来のサーバから情報を受け取るだけの受身のサービスから，ユーザ自らも情報を
発信する新しい発想と新しい技術によって実現される新しい Web のあり方をいう．その代表的なサービス
がブログやソーシャルネットワーキングサービス(SNS)である．
それにともない Web サービスも従来の SOAP ベースの Web サービスから，より利用しやすい REST
型の Web サービスへと移り変わりつつある．SOAP ベースの Web サービスは HTTP プロトコル上に soap
と言われる XML 形式のデータをのせて，Web サービスサーバとクライアント間でデータ交換を行う方式
である．この SOAP ベースの Web サービスを利用する際には，ユーザは一般的にスタブといわれるクライ
アントプログラムを作成する必要があり，Web サービス実行までの手続きが複雑で時間がかかるという問
題点があった．また目的に応じて複数の Web サービスを結合する際にも，BPEL などの言語を用いての
複雑な実行手順記述が要求され，かつ専用の実行フレームワークも必要だった．それに比べて，REST
型 Web サービスは HTTP プロトコルそのものを利用して XML データ交換を行うというシンプルな形式で，
実行のためのクライアントプログラムも必要なく、手軽に利用できる[1]．
Yahoo，Google，Amazon など様々な企業がその REST 形式の Web サービスを提供してきている．そ
れら REST 形式の Web サービスを組み合わせ，新しい Web サービスを開発することをマッシュアップと
いう．
つまり，目的に応じて，如何に最適に効率よく，ライブラリとしての Web サービス API を組み合わせる
か，という利用技術が重要になる．また，そのマッシュアップを実現するプログラミング技術も従来からの
Java を始め，PHP，JavaScript，Perl など複数の言語を使いこなす技術も必要になる．
１．２ 研究の
研究の目的
JavaScript 言語と REST 型 Web サービスを利用したマッシュアップを実現するシステム開発を通して
Web2.0 時代の Web アプリケーション開発技術を取得し，コスメティック検索システムを開発することを目
的とする．
１．３ 卒論文の
卒論文の構成
『１．はじめに』では、研究の背景と目的について述べる．『２．Web サービスについて』では、SOAP 型
Web サービスと REST 型 Web サービスに説明する．『３．コスメティック検索システムの開発』では、システ
ムの概要，システム設計及びシステム開発について詳細に述べる．『４．おわりに』では、本研究のまとめ
と、今後の課題について述べる．
2
２．Web サービスについて
サービスについて
Web サービスについて理解するために，まず従来から利用されている SOAP 型 Web サービスについ
て説明する．その後，REST 型 Web サービスについて説明する．
２．１ SOAP 型 Web サービス[2]
サービス
SOAP とは，XML や HTTP をベースにした他のコンピュータにあるデータやサービスを呼び出すため
のプロトコル（通信規約）のことである．SOAP による通信では，XML 文書にエンベロープ（封筒）と呼ば
れる付帯情報が付いたメッセージを HTTP などのプロトコルで交換する．サービスを提供するサーバ側と，
利用するクライアント側の双方が SOAP を生成・解釈するプログラムを作成することで異なる環境間での
オブジェクトの呼び出しを可能にしている．
SOAP 型 Web サービスの開発と運用には Apache-Axis（以下 Axis）というフレームワークを利用する．
Web サービスを利用するには，サーバ側で HTTP サーバを起動し，その上に Axis フレームワークをイン
ストールする必要がある．今回は HTTP サーバとして，Ｔｏｍｃａｔを利用した．Axis による Web サービスの
構築について以下に具体的に示す．
２．１．１ インストールと
インストールと環境変数の
環境変数の設定
まず HTTP サーバとなる Tomcat4.1.24 をインストールする．その際設定する環境変数を表１に示す．
OS は Windows XP Home である．
表１ 環境変数
CATALINA_HOME
D:\tomcat-4.1.24
JAVA_HOME
D:\j2sdk1.4.0
AXIS_HOME
D:\xml-axis-10
Path
%JAVA_HOME%\bin
.;%JAVA_HOME%\lib\
CLASSPATH
tools.jar;%CATALINA_HOME%\common\lib\servlet.jar
D:¥tomcat4.1.24¥bin>startup
として，Tomcat を起動する．起動画面を図１に示す．
3
図１ Tomcat 起動画面(MS-DOS)
その後，Web ブラウザを起動して， http://localhost:8080/ とし，図２のような画面が表示されれば，正常
に起動していることが確認できた．
図２ Tomcat 起動画面
その後に Axis をインストールする．Axis1.0 を解凍後、<AXIS_HOME>¥webapps にある axis フォルダ
全てを<CATALINA_HOME>¥webapps¥にコピーする．更に，tomcat4.0 バージョンでは，
4
<AXIS_HOME>¥webapps¥WEB-INF¥axis¥lib にあるライブラリ jaxrpc.jar と saaj.jar を
<CATALINA_HOME>¥common¥lib にコピーする必要がある．表２に利用したソフトウェアを示す．
表２ 必要なソフトウェア
ソフトウェア名
バージョン
Apache Axis
説明
1.0
SOAP エンジン
Tomcat
4.1.24
Java Servlet/JSP エンジン
j2sdk
1.4.0
Java パッケージ
指定した内容をコマンドプロンプトで確認する．環境変数の確認画面を図３に示す．
図３ 環境変数確認画面
D:¥tomcat4.1.24¥webapps¥axis に以下の内容を持つ Axis の環境変数を設定するバッチファイル
setenv.bat を作成しておき，Tomcat の startup.bat ファイル実行後，DOS プロンプト画面で下記を実行して
Axis 環境変数をセットする．
D:\tomcat4.1.24\webapps\axis>setenv.bat
5
【setenv.bat】
@echo off
set XERCES_HOME=D:\Xerces-J-tools.1.4.4\tools
set CLASSPATH=%CLASSPATH%;%AXIS_HOME%\lib\axis.jar
set CLASSPATH=%CLASSPATH%;%AXIS_HOME%\lib\axis-ant.jar
set CLASSPATH=%CLASSPATH%;%AXIS_HOME%\lib\jaxrpc.jar
set CLASSPATH=%CLASSPATH%;%AXIS_HOME%\lib\saaj.jar
set CLASSPATH=%CLASSPATH%;%AXIS_HOME%\lib\commons-logging.jar
set CLASSPATH=%CLASSPATH%;%AXIS_HOME%\lib\commons-discovery.jar
set CLASSPATH=%CLASSPATH%;%AXIS_HOME%\lib\log4j-1.2.4.jar
set CLASSPATH=%CLASSPATH%;%AXIS_HOME%\lib\wsdl4j.jar
set CLASSPATH=%CLASSPATH%;%XERCES_HOME%\xerces.jar
続いて，Tomcat の動作確認を行ったブラウザで Axis の起動を確認する．図４のような画面が表示された
ので，正常に起動していることがわかる．
図４ Axis 起動画面
以上で AxisWeb サービスを開発・運用する環境が整った．
6
２．１．２ Web サービス実行
サービス実行について
実行について
SOAP 型 Web サービスの理解を深めるために，実際に Web サービスとその Web サービスを利用す
るためのクライアントプログラムを開発し，動作確認を行った．
開発したプログラムは，サーバ側の Web サービスとクライアント側のクライアントプログラムである．その
処理内容を以下に示す．
クライアント（ホスト名：peak4）が自サイトにあるデータベースを用いて，指定された「商品名」からその商
品名に対応した「商品コード」を検索し，その「商品コード」を SOAP メッセージとして，サーバ側（ホスト
名：peak10）の商品検索 Web サービスに送信する．商品検索 Web サービスは，クライアントから受け取っ
たその「商品コード」を検索キーとしてサーバ側のデータベースを検索して，その商品の「取り扱いメーカ」
をクライアントに返信するというプログラムである．クライアント側及びサーバ側のデータベースを以下に示
す．
クライアント側(ホスト名：peak4)の PC 情報を図５に示す．
図５ クライアント側の PC 情報
クライアント側（peak4）に作成したデータベース （orosi テーブルと reg テーブル）を図６に示す．
7
図６ クライアント側のデータベース
Web サービスサーバ側（peak10）のデータベースを図７に示す．
図７ サーバ側のデータベース
8
Web サービスプログラム TestService のソースコードを示す．
【TestService】
import java.sql.*;
public class TestService{
public String getTempMaker(String code)throws Exception{
String dbUrl="jdbc:odbc:TEST_SDB",
driver="sun.jdbc.odbc.JdbcOdbcDriver";
String 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=rs.getString("maker");
//データベースから切断
rs.close();
prstmt.close();
con.close();
}catch(Exception e){
e.printStackTrace();
}
return ret;
}
}
■peak10 に登録されている Web サービスを実行
【TestClient1】
/*peak10 のパソコンの Web サービスを実行*/
import org.apache.axis.client.Call;
import org.apache.axis.client.Service;
import org.apache.axis.encoding.XMLType;
import javax.xml.rpc.ParameterMode;
import java.sql.*;
public class TestClient1{
public static void main(String[] args)throws Exception{
//引数の数が正しくない場合は、コンソールにヘルプメッセージを出力して処理を終了す
9
る
if(args.length==0){
System.err.println("Usage:java TestClient[商品名]");
System.exit(1);
}
try{
String dbUrl="jdbc:odbc:TEST_CDB",
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
syohin=?");
prstmt.setString(1,args[0]);
//クエリーを実行して結果セットを取得
ResultSet rs=prstmt.executeQuery();
//商品コードを取得
if(rs.next())
code=rs.getString("code");
System.out.println("商品名："+args[0]+",商品コード："+code);
//データベースから切断
rs.close();
prstmt.close();
con.close();
String endpoint="http://peak10:8080/axis/TestService.jws";
System.out.println("after endpoint");
Service service=new Service();
System.out.println("after service");
Call call=(Call)service.createCall();
//サービスを提供している URL を記述
//call.setTargetEndpointAddress(options.getURL());
call.setTargetEndpointAddress(new java.net.URL(endpoint));
//メソッドの引数の型を設定
call.setReturnType(XMLType.XSD_STRING);
call.setOperationName("getTempMaker");
call.addParameter("code1",XMLType.XSD_STRING,ParameterMode.IN);
//メソッドを実行
String ret=(String)call.invoke(new Object[]{code});
System.out.println("取り扱いメーカ："+ret);
}catch(Exception e){
e.printStackTrace();
}
}
}
10
【実行結果】
TestClient1 による Web サービス実行画面を図８に示す．
図８ Web サービス実行画面(TestClient1)
■Web サービスの配備
インターネット上の任意のクライアントから定常的に Web サービスが利用できるようにするためには，ブ
ラウザ上でサーバにある Web サービスが常に確認できる必要がある．そのためには，wsd ファイルを用い
て，Web サービスを配備しなければならない．そのファイル(deploy2.wsdd)の内容と配備コマンドを下記に
示す．
【deploy2.wsdd】
<deployment xmlns="http://xml.apache.org/axis/wsdd/"
xmlns:java="http://xml.apache.org/axis/wsdd/providers/java">
<service name="TestService2" provider="java:RPC">
<parameter name="className" value="TestService2" />
<parameter name="allowedMethods" value="getTempMaker" />
<beanMapping
xmlns:ns="urn:Data-types" languageSpecificType="java:Data"
qname="ns:TestService2"/>
</service>
</deployment>
さらに,この配備コマンドで Axis サーバに登録した．
D:\tomcat4.1.24\webapps\axis>java org.apache.axis.client.AdminClient deploy2.wsdd
登録を削除する場合には，次の undeploy2.wsdd を実行する．
11
【undeploy2.wsdd】
<undeployment xmlns="http://xml.apache.org/axis/wsdd/" >
<service name="TestService2" />
</undeployment>
D:\tomcat4.1.24\webapps\axis>java org.apache.axis.client.AdminClient undeploy2.wsdd
【wsdd の実行結果】
配備実行画面を図９に示す．
図９ 配備実行画面
登録された Web サービス表示画面を図１０に示す．これで、Web サービスがキチンと登録されているの
がわかる．
図１０ Web サービス表示画面
12
■Web サービスの実行と TCP モニタ
Web サービスへのリクエストとレスポンスの XML メッセージを確認できるモニタも実行できる．その TCP
モニタ実行画面を図１１に示す．
図１１ TCP モニタ画面
13
また、実際のリクエストとレスポンスメッセージを以下に示す．
■クライアントからのリクエストメッセージ
POST /axis/servlet/AxisServlet HTTP/1.0
Content-Type: text/xml; charset=utf-8
Accept: application/soap+xml, application/dime, multipart/related, text/*
User-Agent: Axis/1.0
Host: localhost
Cache-Control: no-cache
Pragma: no-cache
SOAPAction: ""
Content-Length: 444
<?xml version="1.0" encoding="UTF-8"?>
<soapenv:Envelope xmlns:soapenv="http://schemas.xmlsoap.org/soap/envelope/"
xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:xsi="http://www.w3.org/2001/XMLSchemainstance">
<soapenv:Body>
<ns1:getTempMaker soapenv:encodingStyle="http://schemas.xmlsoap.org/soap/encoding/"
xmlns:ns1="TestService2">
<arg0 xsi:type="xsd:string">1111</arg0>
</ns1:getTempMaker>
</soapenv:Body>
</soapenv:Envelope>
■サーバからのレスポンスメッセージ
HTTP/1.1 200 OK
Content-Type: text/xml; charset=utf-8
Date: Fri, 13 Jul 2007 05:05:39 GMT
Server: Apache Coyote/1.0
Connection: close
<?xml version="1.0" encoding="UTF-8"?>
<soapenv:Envelope xmlns:soapenv="http://schemas.xmlsoap.org/soap/envelope/"
xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:xsi="http://www.w3.org/2001/XMLSchemainstance">
<soapenv:Body>
<ns1:getTempMakerResponse soapenv:encodingStyle="http://schemas.xmlsoap.org/soap/encoding/"
xmlns:ns1="TestService2">
<getTempMakerReturn href="#id0"/>
</ns1:getTempMakerResponse>
<multiRef id="id0" soapenc:root="0"
soapenv:encodingStyle="http://schemas.xmlsoap.org/soap/encoding/" xsi:type="ns2:TestService2"
xmlns:soapenc="http://schemas.xmlsoap.org/soap/encoding/" xmlns:ns2="urn:Data-types">
<code xsi:type="xsd:string">1111</code>
<maker xsi:type="xsd:string">DAIHATU</maker>
</multiRef>
</soapenv:Body>
</soapenv:Envelope>
14
２．２ REST 型 Web サービス[3]
サービス
２．２．１ REST とは
先進的な Web 開発者の間で，REST(Representational State Transfer)という言葉が注目を集めている．
REST は，Apache 創始者の１人である Roy Fielding 氏が博士論文で提唱したネットワーク分散システム
のアーキテクチャスタイルで，特に WWW(World Wide Web)のアーキテクチャスタイルである．
アーキテクチャスタイル(Architectural style)とは，複数のアーキテクチャに共通する性質，様式，作法あ
るいは流儀を指す言葉である．REST はアーキテクチャスタイルの中でも，特にネットワークシステムの
アーキテクチャスタイルの一種になる．
REST とは，Representational State Transfer の略で，HTTP を使って通信をおこなう手法である．明確な
仕様がないために「どこまでを REST と呼ぶか」については様々な主張があるが，ここでは『HTTP の GET
メソッドを使ってある URL にアクセスすると，XML が返ってくる』ものを REST と呼ぶ．セッションや POST
を使えば複雑な事も実現可能だが，今回は GET を使ったシンプルな REST を想定している．
REST の，ある特定の URL にアクセスして XML を得るという動きは，Web ブラウザが URL にアクセスし
て HTML を得るのとまったく同じである．違いは，HTML の代わりに XML を返す点だけである．
２．２．２ REST の特徴
REST は，Web ブラウザの Ajax や，クライアントアプリから使う場合もあるが，サーバ間のシステム連携
でも使う．
REST の最大の特徴は「Web ブラウザに URL を入力すれば動作確認できる」事である．
Web ブラウザで容易に動作確認ができるため，すでに存在しているサービスに対しては「まずはアクセス
してみて必要な情報が得られるか確認し，実際に使うかどうかはそれから考える」という使い方ができる．
わざわざテスト用アプリを作る必要がない．
また，通常，クライアント／サーバを開発する場合には，「サーバが無ければ，クライアントを作っても動
作確認できない」「クライアントが無ければ，サーバを作ってもアクセスされない」ため，「どちらか一方だけ
を開発」する場合でも，開発やテストの効率を考えるともう一方のテスト版を準備する必要がでてきてしまう．
しかし，REST であれば，サーバを開発する側は Web ブラウザを使って動作確認ができるし，クライアント
を開発する側は想定しているレスポンスをファイルに準備すればテストでき，開発の本質ではない部分の
手間が省略できる．つまり REST は「利用し易い」「確認し易い」のである．
２．２．３ SOAP と REST の比較
SOAP は，高機能であるがゆえに，初期の学習コストが高くついてしまう．ミドルウエアが無いと手軽に使
えないので，使用するミドルウエアについても学習しなければならない．逆に，ミドルウエアに WSDL を読
み込ませる事によって，SOAP を呼び出すためのスタブ生成やスキーマに対応する Bean 生成などが自
動化されるというメリットがある．そうすれば「SOAP を使っている」という事を意識せずに開発が行える．
よって，SOAP では複雑な入力を必要としたり，入出力に対してチェックを必要とするようなサービス等で
の利用に向いている．また，大量のデータ登録，システム間連携や B2B などに向いている．
15
REST は，簡単に試せるし，初期の学習コストが低いというメリットがある．サーバ側は Web サイト開発と
同じ技術が使えるし，クライアント側は HTTP と XML を解析するための DOM API が使えれば，開発言
語を選ばず利用できる．
よって，REST では不特定多数を対象にした，入力パラメータが少ない情報配信や検索サービス等での
利用に向いている．
３．コスメティック検索
コスメティック検索システム
検索システムの
システムの開発
３．１ システムの
システムの概要
化粧品は多くの女性にとっての必需品であり，用途に応じた最適な化粧品の選択が必要であるが，そ
の選択は難しい．そこで本研究では，Yahoo の検索及びショッピング Web サービスと画像に関する Flickr
の photos.search を結合し，JavaScript を用いてシステム全体を開発し，その問題解決を図る．
（１） 年齢・予算・メイクスタイル・肌質・メーカなどの項目指定とキーワードによる検索を行う，さらにコス
メティック製品を検索する
（２） 検索結果で表示されたコスメティックの価格とレビューを表示する
（３） 検索キーワードに対応したコスメティック使用画像を表示する
３．２ システム要素技術
システム要素技術
本システムの開発に利用した要素技術について説明する．
３．２．１ Yahoo Web サービスについて
サービスについて[4]
について
（１）概要
今日，Yahoo，Google，Amazon など様々な企業が Web サービスを提供している．本システムでは，
Yahoo が提供している REST 型 Web サービスを利用する．しかし，日本の Yahoo Web サービスでは
output パラメータとして，JSON(JavaScript Object Notation)と callback 関数が使用出来ないため，今回は
米国 Yahoo が提供している Web サービスを利用することとし，検索に対応している WebSearchService と
ショッピングに対応している shoppingService の Web サービスを利用して開発を行った．
（２）Yahoo WebSearchService について[5]
検索キーワードや入力パラメータの内容を組み込ませて検索を行う Web サービスである．表３，４に入
力パラメータと出力パラメータについてまとめる．
16
表３ WebSearchService の入力パラメータ一覧
パラメータ
説明
Appied
アプリケーション ID
Results
返却結果の数
（UTF-8 エンコードされた）検索クエリーです． このクエリーは Yahoo!検索の全言語をサポート
Query
し， またメタキーワードも含みます．
指定検索の種類: all は全クエリー文字を含む検索結果を返す． any はクエリー文字のうちいず
Type
れかを含む検索結果を返す． Phrase はクエリー文字を文章として含む検索結果を返す．
Output
Web サービスの出力フォーマットを指定する
Callback
Web サービスからの出力結果を処理する関数名を指定する
Sentence
解析対象のテキストのこと
Format
検索するファイルの種類を指定します
表４
パラメータ
WebSearchService の出力パラメータ一覧
出力
説明
クエリーレスポンスのすべてを含み、次の属性を持ちます totalResultsAvailable: データ
内のマッチしたクエリー数です． totalResultsReturned: 返却され、かつマッチしたクエリー
ResultSet
の数です．もし有効な結果の合計が少ない場合、要求した結果の数より少ない場合があり
ます． FirstResultPosition: 全検索結果の最初のポジションです．
Result
各個別レスポンスを含みます
Title
ページのタイトルです
Summary
ページに関連するテキストサマリーです
Url
ページの URL です
Clickurl
ページのリンク URL です
MimeType
ページの MIME タイプです
ModificationDate ページが最後に修正された日付です
Cashe
キャシュ結果の URL です．サイズは byte です．
17
（３）Yahoo shoppingService について[6]
ショッピングを行う Web サービスである．その入出力パラメータ値について表５，６に示す．
表５ shoppingService の入力パラメータ一覧
入力
パラメータ
説明
Appied
アプリケーション ID
Results
返却結果の数
（UTF-8 エンコードされた）検索クエリーです． このクエリーは Yahoo!検索の全言語をサポート
Query
し， またメタキーワードも含みます．
指定検索の種類: all は全クエリー文字を含む検索結果を返す． any はクエリー文字のうちいず
Type
れかを含む検索結果を返す． Phrase はクエリー文字を文章として含む検索結果を返す．
Output
Web サービスの出力フォーマットを指定する
Callback
Web サービスからの出力結果を処理する関数名を指定する
Sentence
解析対象のテキストのこと
Format
検索するファイルの種類を指定します
表６ shoppingService の出力パラメータ一覧
出力
パラメータ
説明
クエリーレスポンスのすべてを含み，次の属性を持ちます．
totalResultsAvailable: データ内のマッチしたクエリー数です．
Products
totalResultsReturned: 返却され，かつマッチしたクエリーの数です．もし有効な結果の合計
が少ない場合，要求した結果の数より少ない場合があります．
FirstResultPosition: 全検索結果の最初のポジションです．
Product
各個別レスポンスを含みます
Title
ページのタイトルです
Summary
ページに関連するテキストサマリーです
Url
ページの URL です
Offer
商品 ID
ProductName
商品名
Price
商品の値段
18
３．２．２ Flickr Web サービスについて
サービスについて[7]
について
（１） 概要
個人で撮った写真をウェブ上で整理・分類・展示しておけるほか，見知らぬ人と共有して互いにコメント
を書き込むこともできる．こうした画像掲示板やソーシャル・ネットワーキング・サービスのようなコミュニティ
としてユーザーに人気が出ただけでなく，ブロガーの間で写真の共同保管・共同利用の場所としても広く
使われることで巨大化した．また誰でも編集に参加できる Web 2.0 の代表的なサイトとして取り上げられる
こともある．
（２） flichr.photos.search について
画像検索では Flickr API の提供するメソッドの中から，flickr.photos.search を利用する。この
flickr.photos.search メソッドは，以下のパラメータ引数を指定できる（REST 利用時のクエリー変数）。
Flickr のデータベースから，テキスト・投稿者・タグを指定して，写真を検索することが可能である．
入出力パラメータについて表７，８にまとめる．
表７
flichr.photos.search 入力パラメータ一覧
パラメータ名
api_key
method
text
user_id
tags
tag_mode
min_upload_data
min_taken_data
bbox
sort
extras
per_page
page
format
jsoncallback
説明
API アプリケーションキー
実行メソッド名
フリーワードの全文検索を行う
写真投稿者ユーザ ID で検索する
タグで検索する
複数指定時の検索モード
アップロード日時絞込み
撮影日時絞込み
エリア絞込み
並べ替え
追加出力項目
検索１回あたりの取得件数
出力ページ番号
出力フォーマット
JSON 形式出力時のコールバック関数名
表８ 出力パラメータ一覧
パラメータ
説明
Photos
検索キーワードに該当する写真データを示す
Photo
個々の写真データ
Id
写真の ID
Secret
写真の秘密鍵
Owner
写真所有者の ID
19
３．２．３ JavaScript について[8]
について
（１）概要
JavaScript は，Netscape 社の開発した HTML 内に埋め込めるオブジェクト指向スクリプト言語である．言
語形式は Java 言語や c，c++に似ている．JavaScript はブラウザがインタプリタとなり，スクリプトを実行す
る。JavaScript の特徴は，オブジェクトベースのスクリプト言語であることと，HTML に埋め込んだスクリプト
をブラウザが逐次実行するインタプリタ言語である，ということである．
JavaScript 言語で実現可能な処理を以下に示す．
・
FORM に対する操作をトリガとして，関数を実行すること
・
別のページ(URL)を読み込むこと．ただし，その内容を操作することは出来ない．
・
定期的にある処理を行うこと(時計のような処理)．
・
HTML の出力を行うこと．条件分岐で HTML の内容を変化させることが出来る．
（２）JSON について[9]
について
JSON(JavaScript Object Notation)は，構造化されたデータを記述するための，テキスト・ベースのデー
タ記述言語の一つである．
JSON は，JavaScript のサブセットでありデータの受信が軽快であるという特徴を持つ．JavaScript の改
良版として策定され多くの Web ブラウザでサポートされているスクリプト言語である「ECMAScript」の仕様
に基づいているため，多くのブラウザが JSON を扱うことができる．また，JSON は特定のプログラミング言
語に依存しない独立したテキスト形式であるが，C や C++をはじめとする多くのプログラミング言語の記述
方法に通じる記述形式が採用されている．このため，JavaScript だけでなく C や C++，C#，Java，Perl，
Python，といったプログラミング言語を使用するプログラマーにとって JSON は扱いやすい形式であるとい
われている．JSON は XML に比べてデータ量が少ないため，Web アプリケーションの記述のために適し
たデータ交換形式であるとされ，特に Ajax などでの活用が注目されている．
JavaScript でオブジェクト・リテラルを記述する構文をそのまま使っているため，人間が読んでわかりやす
く，プログラムでも容易に処理できるという特徴がある．
３．２．４ マッシュアップについて
マッシュアップについて[10]
について
マッシュアップとは，複数の Web サイトが提供する情報をまとめて，一つの Web ページを作ることを指
す用語である．もともとは，「複数の音楽を組み合わせて新たに音楽を作る」という意味の音楽用語である
ものを，これを Web の世界に当てはめて使われている．
これまでの Web では，提供する情報ごとに別々の Web サイトになっているのが普通だった．例えばグ
ルメ・サイトではレストラン情報，地図サイトでは地図情報，交通情報サイトでは時刻表情報を提供する，と
いった具合である．ただ，このままではユーザにとって，複数のサイトにまたがる関連情報を集めるのが大
変である．グルメ・サイトで検索したあとに，そこで得られた住所情報を基に地図サイトで地図を表示させ，
さらに交通情報サイトで行き方を調べる，といった手間がかかる．
そこで，サイト運営者側で情報をまとめた Web ページを作ることでユーザの手間を省き，Web サイトの
魅力を高めようとするアイデアが生まれた．一つの Web ページで，レストラン情報，地図，行き方といった
20
ユーザが求める情報をまとめて提供するイメージである．これを実現するのがマッシュアップである．今の
ところ，検索結果に地図を組み合わせる情報提供サイトを中心にマッシュアップを使った Web サイトが増
えている．
３．３ システムの
システムの開発
３．３．１ IF 設計
コスメティック検索システムの入力画面を図１２のように設計した．本システムでは，入力されたキーワー
ドと指定されたパラメータ値の組み合わせで検索を行う．今回，入力パラメータは年齢，価格，スタイル，
肌質，目，メーカーの６つの項目を使用した．化粧品は，年齢，肌質によって使うべきものが違う．一重か
二重かによっても，それぞれに合った化粧品があるし，化粧をして行く場所によっても，化粧の種類を変
えるものである．また，肌質の違いにより，同じ種類の化粧品でも肌に合うメーカーと合わないメーカーが
あるなど選択が難しい．本システムでは，よりユーザに適した化粧品を検索するために，上に述べたような
入力パラメータを使用し，検索表示を行うことを目的とする．
図１２
コスメテック検索システムの入力画面
21
３．３．２ 実装[4][8][11][12][13]
実装
JavaScript によるシステムの実装について具体的に説明する．
（１）システム立
システム立ち上げ時
window.onload = function() {
obj.init();
①
};
</script>
<div id="photos_here"></div>
②
① システムを立ち上げたら，まず関数 init が実行される．
② 画像を表示する．
（２）入力画面の
入力画面の作成
<input id="idata">
<button id="search">検索</button><br>
<input id="usa">
<button id="shopping">ショッピング</button><br>
①
年齢：<select name="year" id="year_i">
<option value="teens">10 代</option>
<option value="twenties">20 代</option>
<option value="thirties">30 代</option>
<option value="fourties">40 代</option>
</select><br>
②
価格：<select name="kakaku" id="kakaku_i">
<option value="27 dollars">3000 円台</option>
<option value="47 dollars">5000 円台</option>
<option value="67 dollars">7000 円台</option>
<option value="90 dollars">10000 円台</option>
</select><br>
③
スタイル：<input type="radio" name="style" value="natural make-up">ナチュラルメイク
<input type="radio" name="style" value="office make-up">オフィスメイク
<input type="radio" name="style" value="recruitment make-up">リクルートメイク<br>
④
肌質：<input type="radio" name="hada" value="natural skin">普通肌
<input type="radio" name="hada" value="dry skin">乾燥肌
<input type="radio" name="hada" value="lipid skin">脂性肌
<input type="radio" name="hada" value="sensitive skin">敏感肌
<input type="radio" name="hada" value="atopy skin">アトピー</br>
目：<input type="radio" name="eye" value="single eyelid">一重
<input type="radio" name="eye" value="double eyelid">二重<br>
22
⑤
⑥
メーカー：<input type="radio" name="cosme" value="Shiseido">資生堂
<input type="radio" name="cosme" value="Dior">クリスチャン・ディオール
<input type="radio" name="cosme" value="KOSE">コーセー
<input type="radio" name="cosme" value="Kanebo">カネボウ
<input type="radio" name="cosme" value="CHANEL">シャネル<br>
<input type=reset
⑧
value="取消">
<ul id="r"></ul>
⑦
⑨
HTML の入力フォームを使用し，検索システムの入力画面の作成を行う．
① テキスト入力欄．ここでは，検索キーワードを入力する．Id をそれぞれ，idata，usa とする．
② 回答選択メニュー．ここでは，年齢を選択する．Id を year_i とする．
③ 回答選択メニュー．ここでは，自分の希望の価格を選択する．Id を kakaku_i とする．
④ ラジオボタン．ここでは，希望のメイクスタイルを選択する．
⑤ ラジオボタン．ここでは，自分の肌質を選択する．
⑥ ラジオボタン．ここでは，自分の目の種類を選択する．
⑦ ラジオボタン．ここでは，希望の化粧品メーカーを選択する．
⑧ 取り消しボタン．
⑨<ul>は箇条書きを生成するためのタグである．その ID をｒという変数に格納する．
（３） 各パラメータの
パラメータの情報の
情報の取得
<script type="text/javascript" src="flickerSearchMod.js"></script>
<script type="text/javascript">
abc = new Object();
var memo=0;
var memo2=0;
var memo3=0;
var memo4=0;
②
23
①
var obj ={
init : function(){
obj.q = document.getElementById('idata');
obj.b = document.getElementById('search');
obj.shop = document.getElementById('shopping');
obj.usa = document.getElementById('usa');
obj.year1 =document.getElementById("year_i");
obj.kakaku1=document.getElementById("kakaku_i");
obj.style1 = document.getElementsByName('style');
//選択する前にここが最初に実行されてしまうので,
//pingSearch に飛んだ後で選択を確認する必要がある．
obj.style1 = document.getElementsByName('style');
for (var i=0; i<obj.style1.length; i++){
if(obj.style1[i].checked){
memo= i;
}
}
③
obj.hada1 = document.getElementsByName('hada');
obj.cosme1 = document.getElementsByName('cosme');
obj.eye1 = document.getElementsByName('eye');
obj.r = document.getElementById('r');
obj.b.onclick = obj.pingSearch;
obj.shop.onclick = obj.pingSearchUSA;
④
},
①flickerSearchMod.js を javascript の形式で呼び出す．
②新しいオブジェクト[abc]を生成する．変数 memo0～memo4 に 0 を代入する．
③関数 init を実行する．
「Function(){～}」として関数内に記述すると，ループ外に変数を参照させないので，より安全にコードを
記述できる．
「document.getElementById()」を使うと，特定の ID 名を持つページ上のエレメントにアクセスすることが
できる．パラメータは、取得したいエレメントの ID 名を指定する．後はエレメントごとのメソッドやプロパ
ティを参照・設定することで各種処理を行うことが出来る．ここでは，それぞれの ID 名のオブジェクト
情報への参照を変数に代入する．
「document.getElementsByName()」を使うと，ページ上にある同じ名前のエレメント（ラジオボタン）を取得
することが出来る．取得したラジオボタンの[checked]プロパティを調べることで，どのラジオボタンが ON
になっているかを取得することが出来る．取得した情報を変数に代入する．
④実行時に[検索ボタン]を押したら，関数 pingSearch を呼び出す．[ショッピングボタン]を押したら，関数
pingSearchUSA を呼び出す．
24
（４） pingSearch の部分(webSerarchService
部分
に入力パラメータ
入力パラメータ値
セットし，検索を
検索を実行する
実行する)
パラメータ値をセットし
する
pingSearch : function()
{
if(obj.q.value) {
①
obj.style1 = document.getElementsByName('style');
for (var i=0; i<obj.style1.length; i++){
if(obj.style1[i].checked){
memo= i;
}
}
②
obj.hada1 = document.getElementsByName('hada');
for (var i=0; i<obj.hada1.length; i++){
if(obj.hada1[i].checked){
memo2= i;
}
}
obj.cosme1 = document.getElementsByName('cosme');
for (var i=0; i<obj.cosme1.length; i++){
if(obj.cosme1[i].checked){
memo3= i;
}
}
obj.eye1 = document.getElementsByName('eye');
for (var i=0; i<obj.eye1.length; i++){
if(obj.eye1[i].checked){
memo4= i;
}
}
obj.year1 =document.getElementById("year_i");
obj.kakaku1=document.getElementById("kakaku_i");
③
④
obj.s = document.createElement('script');
obj.s.type ='text/javascript';
obj.s.charset ='utf-8';
obj.s.src='http://search.yahooapis.com/WebSearchService/V1/webSearch?
appid=ZovklnXV34G91UOUgioGBwBHe.lwcpqT96vROcqf7uZ0lri8enUgZ6Fy
RW5qp3_kCK6jLSo&output=json&callback=obj.pongSearch&results=10&type=all&query='+obj.q.value+'+'
+obj.hada1[memo2].value+'+'+obj.style1[memo].value+'+'+obj.cosme1[memo3].value+'+'
+obj.eye1[memo4].value+'+'+obj.year1.value;
document.getElementsByTagName('head')[0].appendChild(obj.s);
⑤
}
},
① 検索キーワードが入力されていたら，if 文の中のプログラムを実行する．
② 「document.getElementsByName()」を使い，選択されたラジオボタンを取得する．また，その選択され
25
たラジオボタンの配列の番号を変数 memo に代入する．
③ ②と同様．
④ 「document.getElementById()」を使い，特定の ID 名を持つページ上のエレメントにアクセスすること
が出来る．パラメータには，取得したいエレメントの ID 名を指定する．後はエレメントごとのメソッドや
プロパティを参照・設定することで各種処理を行うことが出来る．ここでは，ID 名[year_i]，[ kakaku_i]
を持つエレメントにそれぞれアクセスを行い，取得した情報を変数に代入する．
⑤JavaScriptｗｐタグを生成し、webSerarchService に入力パラメータ値をセットし，検索を実行する．
（５） pingSearchUSA の部分(webSerarchService
に入力パラメータ
部分
入力パラメータ値
パラメータ値をセットして
セットして検索
して検索を
検索を実行する
実行する)
する
pingSearchUSA : function(){
if(obj.usa.value){
①
obj.style1 = document.getElementsByName('style');
for (var i=0; i<obj.style1.length; i++){
if(obj.style1[i].checked){
memo= i;
}
}
②
obj.hada1 = document.getElementsByName('hada');
for (var i=0; i<obj.hada1.length; i++){
if(obj.hada1[i].checked){
memo2= i;
}
}
obj.ss = document.createElement('script');
obj.ss.type ='text/javascript';
obj.ss.charset ='utf-8';
obj.ss.src='http://shopping.yahooapis.com/ShoppingService/V3/productSearch?
appid=ZovklnXV34G91UOUgioGBwBHe.lwcpqT96vROcqf7uZ0lri8enUgZ6FyRW
5qp3_kCK6jLSo- &output=json&callback=obj.pongSearchUSA&results=10&type=all
&query='+encodeURIComponent(obj.usa.value)+'+'
+encodeURIComponent(obj.hada1[memo2].value)+'+'
+encodeURIComponent(obj.style1[memo].value)+'+'
+obj.cosme1[memo3].value;
document.getElementsByTagName('head')[0].appendChild(obj.ss);
③
}
},
① 検索キーワードが入力されていたら，if 文の中のプログラムを実行する．
② 「document.getElementsByName()」を使い，選択されたラジオボタンを取得する．また，その選択され
たラジオボタンの配列の番号を変数 memo に代入する．
③JavaScriptｗｐタグを生成し，webSerarchService に入力パラメータ値をセットし，検索を実行する．
26
（６） pongSearch の部分(webSerarchService
部分
の検索結果を
検索結果を解析して
解析して HTML 形式に
形式に整形する
整形する)
する
pongSearch : function(z){
abc.text = obj.q.value;
photo_search(abc);
①
obj.r.innerHTML = '';
for(var i = 0; i < z.ResultSet.Result.length; i++){
var li = document.createElement('li');
var a = document.createElement('a');
a.href = z.ResultSet.Result[i].ClickUrl;
a.innerHTML = z.ResultSet.Result[i].Title;
li.innerHTML = 'Summary : ' + z.ResultSet.Result[i].Summary+'<br> ';
li.appendChild(a);
obj.r.appendChild(li);
②
}
},
①[obj.q.value]に入っている検索キーワードを変数 abc に代入する．また，この変数 abc を引数にして
Flickr で画像検索を行う．
②「document.createElement()」でリストタグとアンカータグを生成する．
検索結果の URL やタイトル，商品情報を HTML データでリスト形式で表示する．
（７） pongSearchUSA の部分(shoppingService
の検索結果を
部分
検索結果を解析して
解析して HTML 形式に
形式に整形する
整形する)
する
pongSearchUSA : function(yy){
abc.text = obj.usa.value;
photo_search(abc);
①
obj.r.innerHTML = '';
for(var i = 0; i < yy.Products.Product.length; i++){
var li = document.createElement('li');
var a = document.createElement('a');
a.href = yy.Products.Product[i].Offer.Url;
a.innerHTML = yy.Products.Product[i].Offer.ProductName;
li.innerHTML = 'Price : ' + yy.Products.Product[i].Offer.Price +'<br> ';
li.innerHTML += 'Summary : ' + yy.Products.Product[i].Offer.Summary+'<br> ';
li.appendChild(a);
obj.r.appendChild(li);
}
}
};
27
②
①[obj.usr.value]に入っている検索キーワードを変数 abc に代入する．また，この変数 abc を引数にして
Flickr で画像検索を行う．
②「document.createElement()」でリストタグとアンカータグを生成する．
検索結果の URL やタイトル，値段，商品情報を HTML データでリスト形式で表示する．
（８） FlickrSearch へのパラメータ
へのパラメータ値
パラメータ値セット
function photo_search ( param ) {
param.api_key = '343d7c930d7bbe12acbfb20977484628';
param.method
= 'flickr.photos.search';
param.per_page = 10;
param.sort
= 'date-posted-desc';
param.format
= 'json';
param.jsoncallback = 'jsonFlickrApi';
// API リクエスト URL の生成(GET メソッド)
var url = 'http://www.flickr.com/services/rest/?'+ obj2query( param );
// script 要素の発行
var script = document.createElement( 'script' );
script.type = 'text/javascript';
script.src = url;
document.body.appendChild( script );
};
①
②
③
① Flickr で検索するために必要な情報を設定する．
② 検索キーワードを組み込ませた，画像検索のための URL を変数に代入する．
③ その変数を使用し，画像検索を行う．
28
３．４ システム実行結果
システム実行結果
検索 Web サービスとショッピング Web サービスの実行結果を画像出力表示とともに示す．
３．４．１ 検索
検索キーワードを lipstick とし，年齢・肌質などの各項目を指定して実行すると，図１３のような出力結
果が得られた．lip，natural，shiseido など，入力時に指定したパラメータが組み込まれているサイトが表示
される．また，lipstick に該当する画像も表示される．出力結果で表示されたサイトや画像をクリックすると
図１４のように，コスメティックのサイトや画像情報を閲覧できる．
入力箇所
検索 Web サ
ービスの出力
結果
Flickr の検索
結果
図１３ 出力結果（検索）
図１４ コスメティックサイト・画像情報
29
３．４．２ ショッピング
検索キーワードを eyeshadow とし，年齢・肌質などの各項目を指定して実行すると，図１５のような出力
結果が得られた．eyeshadow など，入力時に指定したパラメータが組み込まれているサイト，またその値
段や商品情報が表示される．また，eyeshadow に該当する画像も表示される．出力結果で表示されたサ
イトや画像をクリックすると図１６のように，コスメティックのサイトや画像情報を閲覧できる．
入力箇所
ショッピング Web
サービスの出力
結果
Flickr の検索
結果
図１５ 出力結果（ショッピング）
図１６ コスメティックサイト・画像情報
30
４． おわりに
４．１ まとめ
今回，JavaScript 言語を使って Yahoo と Flickr の REST 型 Web サービスをマッシュアップしたコスメ
ティック検索システムを開発した．JavaScript 言語の理解と習得，また Web サービス API と出力結果の解
析部分に苦労したが，何とか開発できた．しかし最適な検索結果を得ることは難しいと感じた．入力条件
が多くなると，全く検索されない場合があり，検索キーワードと検索入力条件の組み合わせが難しいと感
じた．
４．２ 今後の
今後の課題
検索キーワードと入力パラメータにうまく適合したサイト，またコスメティックが表示されるようにする．検
索キーワードと入力パラメータに対応したコスメティックの使用画像や関連画像を表示できるようにする．
今現在では，一応，検索キーワードや入力パラメータにヒットしたサイトや画像を表示することが出来るが，
まだおおまかにしか結果を絞り込めていない．より絞り込んだ結果が表示できるようにしたい．最適な検索
結果を得るには，データ・マイニングの知識が必要だと考えている．
参考文献
[1]大向一輝,橋本大也:Web2.0 について,情報処理,Vol.47 No.11(2006).
[2] Apach Axis : http://ws.apache.org/axis/
[3]荒本道隆:Web2.0 時代の Web サービス,http://www.xmlconsortium.org/wg/web2.0/teigensho/4-REST-SOAP.html
[4] yahoo Web サービス:http://developer.yahoo.co.jp/
[5]yahoo Web Service search:http://developer.yahoo.com/search/web/V1/webSearch.html
[6]yahoo Web Service shopping:http//developer.yahoo.com/shopping/V2/productSearch.html
[7] Flickr: http://www.flickr.com/
[8]古旗一浩:JavaScript テクニカルブック,C&R 研究所(2007).
[9]JSON:http://www.json.org/
[10]ITPro:http://itpro.nikkeibp.co.jp/article/COLUMN/20061101/252356/
[11]半場方人: JavaScript&DynamicHTML 辞典,秀和システム(2007).
[12]古旗一浩:改訂第３版 JavaScript ポケットリファレンス,株式会社技術評論社(2003).
[13]川崎 有亮，"JavaScript から Flickr API で画像検索",
http://itpro.nikkeibp.co.jp/article/COLUMN/20061101/252356/
31