ここでは宿のキャプション（キャッチコピー）とサムネールを表示させてみます。まずキャプションから表示させてみましょう。キャプションは各宿の情報に含まれています。キャプション情報もHotelタグ内に格納されています。キャプションはHotelタグ内にあるHotelCaptionタグの最初のノードの値を読み出す事で取得できます。（実際の
サンプルを実行する）
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>じゃらん Ajaxサンプル</title>
<style type="text/css"><!--
.hTitle {
background-color:#afe1ee;
color:white;
font-size:11pt;
border:1px solid gray;
width:628px;
margin:0px 0px 20px 0px;
padding:0px 4px 4px 4px;
}
.hInfo {
background-color:#eee;
color:#333;
font-size:9pt;
}
--></style>
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript"><!--
function getList()
{
var pref = "160000"; // 160000は長野県
var reqURL = "http://jws.jalan.net/APILite/HotelSearch/V1/?key=guest&pref="+pref;
new Ajax.Request("getXML.rb?"+reqURL, { method: "get", onComplete: displayData });
}
function displayData(httpObj)
{
var xmlObj = httpObj.responseXML;
var n = xmlObj.getElementsByTagName("NumberOfResults")[0].firstChild.nodeValue;
var txt = "合計"+n+"件見つかりました<br><br>";
var hotel = xmlObj.getElementsByTagName("Hotel");
for (var i=0; i<hotel.length; i++)
{
var hName = hotel[i].getElementsByTagName("HotelName")[0].firstChild.nodeValue;
var url = hotel[i].getElementsByTagName("HotelDetailURL")[0].firstChild.nodeValue;
var cap = hotel[i].getElementsByTagName("HotelCaption")[0].firstChild.nodeValue;
txt += "<div class='hTitle'><a href='"+url+"' target='hotel'>"+hName+"</a>";
txt += "<div class='hInfo'>"+cap+"</div></div>";
}
$("result").innerHTML = txt;
}
// --></script>
</head>
<body>
<h1>じゃらん Ajaxサンプル（キャプション）</h1>
<a href="http://jws.jalan.net/">じゃらん Web サービス</a>
<form>
<input type="button" value="宿検索" onClick="getList()">
</form>
<div id="result"></div>
</body>
</html>
次にサムネール画像を表示します。サムネール画像は、いくつかサイズがあります。何も指定しない場合のサムネール画像では少し大きすぎるので、やや小さめのものにします。これは送信する際にpict_sizeパラメータに取得したいサムネールサイズの番号を指定します。サムネール画像はURLとして返されます。サムネール画像のURLはHotelタグ内にあるPictureURLタグの最初のノードの値になります。このURLをimgタグのsrc属性の値として設定します。あとは、スタイルシートなどで見た目を設定すればできあがりです。（実際の
サンプルを実行する）
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>じゃらん Ajaxサンプル</title>
<style type="text/css"><!--
.hTitle {
background-color:#afe1ee;
color:white;
font-size:11pt;
border:1px solid gray;
width:628px;
margin:0px 0px 20px 0px;
padding:0px 4px 4px 4px;
}
.hInfo {
background-color:#eee;
color:#333;
font-size:9pt;
}
.thumb {
float:left;
margin:2px;
border:0px solid blue;
}
.bClear {
clear:left;
}
--></style>
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript"><!--
function getList()
{
var pref = "160000"; // 160000は長野県
var pict = "2"; // サムネール画像のサイズ
var reqURL = "http://jws.jalan.net/APILite/HotelSearch/V1/?key=guest&pref="+pref+"&pict_size="+pict;
new Ajax.Request("getXML.rb?"+reqURL, { method: "get", onComplete: displayData });
}
function displayData(httpObj)
{
var xmlObj = httpObj.responseXML;
var n = xmlObj.getElementsByTagName("NumberOfResults")[0].firstChild.nodeValue;
var txt = "合計"+n+"件見つかりました<br><br>";
var hotel = xmlObj.getElementsByTagName("Hotel");
for (var i=0; i<hotel.length; i++)
{
var hName = hotel[i].getElementsByTagName("HotelName")[0].firstChild.nodeValue;
var url = hotel[i].getElementsByTagName("HotelDetailURL")[0].firstChild.nodeValue;
var cap = hotel[i].getElementsByTagName("HotelCaption")[0].firstChild.nodeValue;
var pictURL = hotel[i].getElementsByTagName("PictureURL")[0].firstChild.nodeValue;
txt += "<div class='hTitle'><a href='"+url+"' target='hotel'>"+hName+"</a>";
txt += "<div class='hInfo'><img src='"+pictURL+"' class='thumb'>";
txt += cap+"<br class='bClear'></div></div>";
}
$("result").innerHTML = txt;
}
// --></script>
</head>
<body>
<h1>じゃらん Ajaxサンプル（サムネール画像表示）</h1>
<a href="http://jws.jalan.net/">じゃらん Web サービス</a>
<form>
<input type="button" value="宿検索" onClick="getList()">
</form>
<div id="result"></div>
</body>
</html>
[
目次へ]
(2006.6.18)