絞り込み検索結果を表示させる。

現在、プルダウンリストからホテルの種別を選択する以外は、すべて固定の条件を用いて「じゃらん」からのデータを表示していますが、絞り込み検索エリアができましたので、チェックボックスから施設やサービスで絞り込みできるようにしていきましょう。「じゃらん」のAPIでは、これら絞り込み条件のデータも一緒に出力されていますから、それを利用すればいいわけです。
では、実際のjQueryについて話を進めていきましょう。

処理の流れとしては

• プルダウンリストからホテルの種別を選択する
• 絞り込み検索エリアから絞り込み条件を選択する
• 「SEARCH」ボタンをクリックして、「じゃらん」から情報を取得
• 一覧および詳細の情報を更新表示

となります。

この際、絞り込み検索エリアの値を動的にURLに組み込み、「じゃらん」からの情報を抽出するのにjQueryを使用します。まずは、jQueryをHTMLにインクルードしましょう。今回必要になるのは、本稿執筆時点で最新版のjquery-1.2.3.jsとjQueryを使ってフォームデータを扱うためのプラグインjquery.form.jsです。

【ページ先頭のscriptタグを以下の内容に更新してください】

<script src="SpryAssets/SpryEffects.js" type="text/javascript"></script>
<script src="SpryAssets/xpath.js" type="text/javascript"></script>
<script src="SpryAssets/SpryData.js" type="text/javascript"></script>
<script src="SpryAssets/SpryAccordion.js" type="text/javascript"></script>
<script src="SpryAssets/SpryNestedXMLDataSet.js" type="text/javascript"></script>
<script src="SpryAssets/SpryValidationSelect.js" type="text/javascript"></script>
<script src="jquery-1.2.3.js" type="text/javascript"></script>
<script src="jquery.form.js" type="text/javascript"></script>
<script type="text/javascript">

【コードビュー】

次に、チェックボックスで選択された値をクエリとしてURLに組み込むスクリプトを記述しましょう。あくまでAIRアプリの開発が目的ですから、JavaScriptの詳しい説明は省きます。

【ページ先頭のscriptタグを以下の内容に更新してください】

<script type="text/javascript">
<!--
var dsProducts = new Spry.Data.XMLDataSet("", "Results/Hotel");

var handler = function(){
	var d = dsProducts.getCurrentRow();
};
dsProducts.addObserver({
	onCurrentRowChanged: handler,
	onDataChanged: handler
});
  
function thisMovie(movieName) {
	if (navigator.appName.indexOf("Microsoft") != -1) {
		return window[movieName]
	}else {
		return document[movieName]
	}
}

function get_option_selected ( form ) {
	var queryString = $(form).formSerialize(); 
	//alert(queryString);
	var url = "http://jws.jalan.net/APILite/HotelSearch/V1/?key=**************&pref=130000&count=20&" + queryString;
	dsProducts.setURL(url);
	dsProducts.loadData();
	hotel_title_in();
	return false;
}

function validateonsubmit(form){
	if (Spry.Widget.Form.validate(form) == true){
		get_option_selected( form );
	}
	return false;
}

【コードビュー】

さらに、formタグでnameとmethodを指定していますが、この部分を削除します。また、selectタグのnameとidの属性を「じゃらん」のリクエストパラメーターに沿ったものに変更します。

【formタグを以下の内容に更新してください】

<div id="menu">
<form id="form1" onsubmit="return validateonsubmit(this);">
　<div style=" width:770px;float:left;" id="formregion">
　　<span id="spryselect1">
　　　<label>
　　　<select name="hotel_type" id="h_type">
　　　<option value="">選んでください</option>
　　　<option value="0">指定しない</option>
　　　<option value="1">旅館</option>
　　　<option value="2">ペンション・民宿</option>
　　　<option value="3">貸別荘</option>
　　　</select>
　　　</label>
　　　<span class="selectRequiredMsg">項目を選択してください。</span>
　　　</span>
　</div>

【コードビュー】

では、ここまでの内容でAIRでプレビューしてみましょう。
プルダウンリストから、「貸別荘」を選んで「SEARCH」ボタンをクリックしてください。
データが１件だけ表示されます。（2008/4/15時点の登録データ）

次に「旅館」を選択し、「SEARCH」ボタンをクリックしてみましょう。多くの候補がピックアップされますが、たとえば「貸切風呂」と「チェックアウト11時以降」を選択し、再度「SEARCH」ボタンをクリックしてください。どうですか？候補が2つまで絞り込まれましたね。

このように、jQueryを使うことで、通常は多くのコーディングを必要とする部分を、簡単にかつ短時間で開発できます。このように外部のオープンソースライブラリも問題なく扱えるのもDreamweaver CS3の特徴のひとつです。

ちなみにjQueryには今回使用したプラグインjquery.form.jsだけでなく、実に多くのプラグインが用意されています。これらのプラグインとDreamweaver CS3を合わせて活用することでさらに充実したAIRアプリケーションの構築が可能になるでしょう。

さらにリッチに！

次回は、さらにRIA（リッチインターネットアプリケーション）にするためにYahoo!Mapとのマッシュアップを展開していきます。お楽しみに。

もっと学ぶには

Dreamweaverの基本しっかりとおさえたい方にオススメのトレーニングコースです。
基本的なWebサイト構築における手順、サイトのナビゲート、CSS（カスケーディングスタイルシート）を使ったWebページのレイアウト、大規模なサイトの構築や維持管理の手法など、サイト制作に欠かせない要素を多数ご説明します。

• Adobe Dreamweaver CS3: Fundamentals Webサイト構築の基礎

本チュートリアルのような画面のレイアウトを行いたい方はCSS（カスケーディングスタイルシート）の講座がおすすめです。こちらでは、CSSを使用したWebサイトデザインの制作を目標に、必要な知識とテクニックを習得することができます。各種ブラウザーでの見え方の違いや、Web標準化などの話題もご紹介します。

• レイアウト自由自在！Dreamweaver CS3 CSSデザイン手法

ページ 3 / 3

前のページ