また、このチュートリアルでは、オープンソースライブラリjQueryを使用します。jQueryとは「Write less, Do more」をコンセプトに開発されたJavaScriptライブラリです。またファイル容量が軽く、プラグインを追加することで必要な機能を追加していくことが可能という特徴も持ち合わせています。このチュートリアルでは、jQuery本体に加え、Form Pluginを使用します。

また、インターネット上の情報を利用するため、インターネットに接続する環境が必要になります。

はじめに

第２回、第３回では、Dreamweaver CS3からSpryフレームワークを利用し、「じゃらんWebサービス」の情報（宿泊施設情報）を表示するための説明をしました。すっかりRIAのインタフェースらしい動きになってきましたね。

続く第４回では、Spry以外にオープンソースのJavaScriptライブラリjQueryを用いて

検索結果の絞り込み機能

を追加する方法をご紹介していきます。Dreamweaver CS3というと、どうしてもSpryに目が行きがちですが、外部のライブラリを使うことで、Dreamweaver CS3を使ったRIA開発をさらに短時間で行えるようになります。ここではjQueryを使って絞り込みの機能を加えることで、よりユーザの嗜好に合わせたデータを提供できるAIRアプリケーションを、Dreamweaver CS3でも簡単に作成する方法をみていきましょう。

第４回の完成画面

制作に入る前に、まずは今回のチュートリアルの完成画面を見てみましょう。

第３回からの変更点として、ホテルの種類を選択するプルダウンの下に、施設やサービスで絞り込みできるようチェックボックスが配置されています。
AIRアプリケーションを起動すると、タイトルおよび絞り込み条件のエリアが表示効果付きで表示されます。
「SEARCH」をクリックすると、“HOTELS”と“DETAILS”のエリアが順次表示され、検索結果が確認できるようになります。もちろん絞り込み条件を選択することで、表示結果も変わってきます。

大まかなステップ

第４回の大まかなステップとしては、以下の2つとなります。

レイアウトを作成する。
jQueryを使って絞り込み条件から情報を抽出させる。

jQueryを使ってデータの連係を図るには、スクリプトのコーディングを必要としますが、今回は難しく捉えるのはやめましょう。本チュートリアルでは、AIRアプリケーションの開発がおもな学習内容となりますので、タグやJavaScript、CSSに関しては言及しません。

早速、チュートリアルを始めるとしましょう！

レイアウトを作成する

まずは、絞り込み条件のフォームをレイアウトします。第3回で作成したプルダウンと「SEARCH」ボタンをdivタグのstyle属性を使って再配置します。

【div id=”menu”以下のHTMLを以下のように変更してください。】

        <div id=”menu”>
<form id="form1" name="form1" method="post" onsubmit="return validateonsubmit(this);">
　<div style=" width:770px;float:left;" id="formregion">
　　<span id="spryselect1">
　　　<label>
　　　　<select name="hotel_type" id="hotel_type2">
　　　　<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>
　<div style=" width:100px;text-align:center;float:left;border-left:1px dotted #1a1a1a;">
　　<input type="submit" value="SEARCH">
　</div>
</form>
</div>
    

【コードビュー】

divタグの扱いに慣れている方は、どのような外観になったか容易に想像がつくと思いますが、とりあえずAIRにパブリッシュして、プレビューしてみましょう。

プルダウンと「SEARCH」ボタンがエリアの左右に分かれましたね。
次に今回の目玉となる絞り込み条件のチェックボックスを配置します。

【submit以下にあらたなdivタグを挿入してください】

        <div style=" width:100px;text-align:center;float:left;border-left:1px dotted #1a1a1a;">
	<input type="submit" value="SEARCH">
</div><div style="float:left;width:880px;">

<div style="float:left;width:880px;">
<table style="width:100%;border-top:1px dotted #1a1a1a;">
   <tr >
　　<td>
　　　<input type="checkbox" name="o_pool" id="ck_o_pool" value="1">
　　　<label for="ck_o_pool">屋外プール</label>
　　</td>
　　<td>
　　　<input type="checkbox" name="parking" id="ck_parking" value="1">
　　　<label for="ck_parking">駐車場無料</label>
　　</td>
　　<td>
　　　<input type="checkbox" name="pub_bath" id="ck_pub_bath" value="1">
　　　<label for="ck_pub_bath">内湯・大浴場</label>
　　</td>
　　<td>
　　　　<input type="checkbox" name="onsen" id="ck_onsen" value="1">
　　　　<label for="ck_onsen">温泉</label>
　　</td>
　　<td>
　　　<input type="checkbox" name="prv_bath" id="ck_prv_bath" value="1">
　　　<label for="ck_prv_bath">貸切風呂</label>
　　</td>
　　<td>
　　　<input type="checkbox" name="v_bath" id="ck_v_bath" value="1">
　　　<label for="ck_v_bath">展望風呂</label>
　　</td>
　　<td>
　　　<input type="checkbox" name="sauna" id="ck_sauna" value="1">
　　　<label for="ck_sauna">サウナ</label>
　　</td>
　　<td>
　　　<input type="checkbox" name="jacz" id="ck_jacz" value="1">
　　　<label for="ck_jacz">ジャグジー</label>
　　</td>
　　<td>
　　　<input type="checkbox" name="mssg" id="ck_mssg" value="1">
　　　<label for="ck_mssg">マッサージ</label>
　　</td>
　　<td>
　　　<input type="checkbox" name="r_ski" id="ck_r_ski" value="1">
　　　<label for="ck_r_ski">貸しスキー</label>
　　</td>
　　<td>
　　　<input type="checkbox" name="r_brd" id="ck_r_brd" value="1">
　　　<label for="ck_r_brd">貸しボード</label>
　　</td>
　</tr>
　<tr>
　　<td>
　　　<input type="checkbox" name="pet" id="ck_pet" value="1">
　　　<label for="ck_pet">ペットOKの宿</label>
　　</td>
　　<td>
　　　<input type="checkbox" name="esthe" id="ck_esthe" value="1">
　　　<label for="ck_esthe">エステ設備</label>
　　</td>
　　<td>
　　　<input type="checkbox" name="p_pong" id="ck_p_pong" value="1">
　　　<label for="ck_p_pong">卓球あり</label>
　　</td>
　　<td>
　　　<input type="checkbox" name="limo" id="ck_limo" value="1">
　　　<label for="ck_limo">送迎あり</label>
　　</td>
　　<td colspan="3">
　　　<input type="checkbox" name="late_out" id="ck_late_out" value="1">
　　　<label for="ck_late_out">チェックアウト11時以降</label>
　　</td>
　</tr>
</table>
</div>
    

【コードビュー】

jQueryとの連携は、後のステップで定義します。
では、ここで記述した内容を再びAIRでプレビューしてみましょう。

16項目のチェックボックスが先ほどのプルダウンと「SEARCH」ボタンの下に配置されましたね。これで第4回のチュートリアルで必要になるレイアウトは完成しました。

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

現在、プルダウンリストからホテルの種別を選択する以外は、すべて固定の条件を用いて「じゃらん」からのデータを表示していますが、絞り込み検索エリアができましたので、チェックボックスから施設やサービスで絞り込みできるようにしていきましょう。「じゃらん」の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デザイン手法

ご購入方法

ダウンロード

会社情報

国・地域および言語の選択

利用条件 | プライバシーポリシーとCookie （更新）

AIR チュートリアル Dreamweaver 第４回オープンソースを使ってみよう！～ jQueryを利用する～

著者ガジェット王子氏

著者鈴木拓生氏

Content

作成日

ページツール

タグ

必要条件

この記事に必要な予備知識

ユーザーレベル

必要な製品

サンプルファイル

その他の要件

Spryフレームワーク1.6.1

はじめに

第４回の完成画面

大まかなステップ

レイアウトを作成する

【div id=”menu”以下のHTMLを以下のように変更してください。】

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

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

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

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

さらにリッチに！

もっと学ぶには

製品

ソリューション

業種別ソリューション

サポート

ラーニング

ご購入方法

ダウンロード

会社情報

AIR チュートリアル Dreamweaver 第４回 オープンソースを使ってみよう！～ jQueryを利用する～

著者 ガジェット王子氏

著者 鈴木 拓生氏

Content

作成日

ページ ツール

タグ

必要条件

この記事に必要な予備知識

ユーザーレベル

必要な製品

サンプルファイル

その他の要件

Spryフレームワーク1.6.1

はじめに

第４回の完成画面

大まかなステップ

レイアウトを作成する

【div id=”menu”以下のHTMLを以下のように変更してください。】

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

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

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

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

さらにリッチに！

もっと学ぶには

製品

ソリューション

業種別ソリューション

サポート

ラーニング

ご購入方法

ダウンロード

会社情報

AIR チュートリアル Dreamweaver 第４回オープンソースを使ってみよう！～ jQueryを利用する～

著者ガジェット王子氏

著者鈴木拓生氏

ページツール