AIRチュートリアル Dreamweaver 第３回 リッチなUIを作ってみよう！～ Spryエフェクトと入力チェックを利用する～
作成日
15 April 2008
ページ ツール |
必要条件
この記事に必要な予備知識
Dreamweaver CS3の基本操作（イメージの配置やCSSの設定など）ができることが前提となります。
ユーザーレベル
初級
必要な製品
- Dreamweaver CS3 (Download trial)
サンプルファイル
- ダウンロード（.zip 形式、909KB） (910 KB)
第２回では、「インターネット上の情報を使ってみよう！」ということでDreamweaver CS3からSpryフレームワークを利用し、「じゃらんWebサービス」の情報（宿泊施設情報）を表示するチュートリアルをご紹介しました。
続く第３回では、Spryフレームワークの機能を用いて下記の方法をご紹介していきます。
- 表示効果
- 値の検査
表示効果を加えることでDreamweaver CS3でも動きのあるリッチなAIRアプリケーションを作成することができます。
第３回の完成画面
制作に入る前に、まずは今回のチュートリアルの完成画面を見てみましょう。
第２回からのレイアウトの変更点として画面上部にアプリケーションのタイトルを配置し、その下に条件指定エリアとしてホテルの種類を選択するプルダウンリストと、検索を開始するための「SEARCH」ボタンを配置しています。
AIRアプリケーションを起動すると、タイトルおよび条件指定のエリアが表示効果付きで表示されます。
「SEARCH」をクリックすると、“HOTELS”と“DETAILS”のエリアが順次表示され、検索結果が確認できるようになります。
大まかなステップ
第３回の大まかなステップとしては、以下の４つとなります。
- レイアウトを作成する。
- 検索結果を表示させる。
- 表示効果を設定する。
- プルダウンリストで選択された情報をチェックする。
データの連係のために、スクリプトをコーディングしますが、難しくはありません。大丈夫！
本チュートリアルでは、AIRアプリケーションの開発がおもな学習内容となりますので、タグやCSSに関しては言及しません。
第３回のチュートリアルで新たに使用する画像やスクリプトファイルが追加されていますので、事前にサンプルファイル{サンプルファイルのリンク}から、「images」「SpryAssets」フォルダをローカルサイトにコピーしてください。
準備が出来たら、チュートリアルを始めるとしましょう！
レイアウトを作成する
タイトルおよびプルダウンリストのためのフォームをレイアウトします。
【HTMLボディ以下にコピーしてください】
<div id="title" style="margin:10px;">
<img src="images/title.gif" />
</div>
<div id="menu">
<form id="form1" name="form1" method="post">
<div id="formregion">
<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>
</div>
<input type="submit" value="SEARCH">
</form>
</div>
【コードビュー】
また後の手順で表示効果を追加するための準備として、divタグを追加します
HOTELSの画像をdivタグで囲みます。
【<div id="box">以下を差し替えてください】
<div id="hotel-title"><img src="images/hotels.gif" /></div>
詳細表示を変更します。文字画像と、詳細情報部分にdivタグを追加します。
【<div id="right">をタブセレクタで選択して差し替えてください】
<div id="right">
<div id="detail-title"><img src="images/details.gif" /></div>
<div id="sidebar">
<div id="boxshot" spry:detailregion="dsHotels"><img src="{PictureURL}" /></div>
<div id="Accordion1" class="Accordion" tabindex="0">
<div class="AccordionPanel">
<div class="AccordionPanelTab">
<h3>ホテル説明</h3>
</div>
<div class="AccordionPanelContent">
<div spry:detailregion="dsHotels">
<p class="hotelCaption">{HotelCatchCopy}</p>
<p>{HotelCaption}</p>
</div>
</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">
<h3>ホテル詳細</h3>
</div>
<div class="AccordionPanelContent">
<div spry:detailregion="dsHotels">
<p>{HotelName}</p>
<p>{PostCode}</p>
<p>{HotelAddress}</p>
<p>{AccessInformation}</p>
</div>
</div>
</div>
</div>
</div>
</div>
【コードビュー】
追加したクラスは、後のステップで定義します。
では、ここまでの内容をAIRでプレビューしてみましょう。
タイトルと、検索エリアが表示されてますか？
検索結果を表示させる
現在、固定の条件を用いて「じゃらん」から検索表示していますが、検索エリアが出来上がりましたので、プルダウンリストからホテルの種別を選択して情報を検索できるようにしてみましょう。
処理の流れとしては
- プルダウンリストからホテルの種別を選択する
- 「SEARCH」ボタンをクリックして、「じゃらん」から情報を取得
- 一覧および詳細の情報を更新表示
となります。
プルダウンリストから選ばれた値を、取得するためにスクリプトを記述します。（本チュートリアルではKeyの値を伏せてあります。このままでは動作しませんので、コーディングする際にはKeyの値を第２回のチュートリアルで取得した値に置き換えてください。）
【ページ先頭のscriptタグを以下の内容に更新してください】
<script type="text/javascript">
<!--
var dsHotels = new Spry.Data.XMLDataSet("", "Results/Hotel");
function get_option_val ( elem ) {
for( var i=0; i<elem.options.length; i++ ) {
if ( elem.options[i].selected ) return elem.options[i].value;
}
};
function get_option_selected ( form ) {
var elem = document.getElementById('hotel_type2');
var val = get_option_val(elem);
var url = "http://jws.jalan.net/APILite/HotelSearch/V1/?key=**************&pref=130000&h_type=" + val;
dsHotels.setURL(url);
dsHotels.loadData();
return false;
}
//-->
</script>
【コードビュー】
formタグのonsubmitイベントを追加します。
【formタグを以下の内容に更新してください】
<form id="form1" name="form1" method="post" onsubmit="return get_option_selected(this);">
【コードビュー】
検索した内容で画面表示させるためSpry.Data.XMLDataSetの初期として値を固定していたものを空欄としています。「SEARCH」ボタンが押されて(submitされて)から、プルダウンリストで選択された値を調べ、DataSetにその値をパラメータとして追加してセットします。そして新しいデータをロードさせています。
formにはsubmitしてからプルダウンの内容を取り出し、自身のプログラム内でデータ処理するためにonsubmitイベントにスクリプトを追加しています。
では、ここまでの内容でAIRのプレビューをしてみます。
プルダウンリストから、「貸別荘」を選んで「SEARCH」ボタンをクリックしてください。
データが１件だけ表示されます。（2008/4/15時点の登録データ）
条件検索により表示する情報も変わるようになり、だいぶアプリケーションとして形が出来上がってきました。ただ表示に関してはちょっとおとなしいので、表示効果を追加して見栄えを改善していくことにします。
Spryで表示効果をセットしよう！
Spryフレームワークには表示効果（エフェクト）が用意されています。JavaScriptを使用してhtmlドキュメントのエレメントに対して表示効果をつけることができます。この際、エレメントにはIDの指定が必須となります。
表示効果には、エレメントの透明度、拡大／縮小率、スライドやブラインドなどの設定ができます。
Dreamweaver CS3を使うことで簡単にイベントに合わせて表示効果を設定できます。
表示効果を設定するには、対象となるエレメントを選択し、ビヘイビアパネルから「ビヘイビアの追加」をクリックし、「効果」のグループから選択します。
このチュートリアルでは、起動時のアニメーションと情報更新時のアニメーションを設定しますのでビヘイビアによる表示効果は使わずにスクリプトを入力して表示効果を設定していきます。
表示の流れは次のようになります。
- タイトルをフェード表示。
- 検索エリアをスライド表示。検索条件がsubmitされるまでホテルの情報は表示しない。
- 検索条件がsubmitされたら、「HOTELES」タイトル、「DETAILS」タイトル、「ホテル一覧」「詳細」の順にフェードイン表示されます。
Spryの表示効果を使用するために、jsファイルを読み込みます。
【headタグ以下にコードを追加してください】
<script src="SpryAssets/SpryEffects.js" type="text/javascript"></script>
【コードビュー】
順次エレメントが表示されるようにするため、表示効果の対象となるエレメントは初期状態では見えないように設定しておきます。
cssファイルの次のクラス #menu、#mapdiv、#content、#sidebar について
opacity:0;
filter:alpha(opacity=0);
を追加し透明度を０とし、見えないようにします。
#menu {
float: left;
width:880px;
height:90px;
background:url('images/menu_bg.jpg') ;
border:0px dotted orange;
color:#000;
clear:both;
opacity:0;
filter:alpha(opacity=0);
}
#mapdiv {
float: left;
width:290px;
height:412px;
opacity:0;
background:#1a1a1a;
padding:4px;
filter:alpha(opacity=0);
border:1px dotted orange;
}
#content, #sidebar {
float: left;
text-align: left;
opacity:0;
filter:alpha(opacity=0);
}
また、新たに表示効果制御のためクラスを追加し、同様に透明度を０とします。
#hotel-title{
opacity:0;
filter:alpha(opacity=0);
}
#detail-title{
opacity:0;
filter:alpha(opacity=0);
}
#map-title{
opacity:0;
filter:alpha(opacity=0);
}
#jara{
opacity:0;
filter:alpha(opacity=0);
}
【pタグにidを追加してください】
<p id="jara" style="color:#999999;">Powered by <a href="http://jws.jalan.net/" target="_blank">じゃらん Web サービス</a></p>
続いて、表示効果を実行するためのスクリプトを作成します。
【ページ下のscriptタグを以下の内容で更新してください】
<script type="text/javascript">
<!--
var Accordion1 = new Spry.Widget.Accordion("Accordion1");
//アニメーション設定
var title_in = new Spry.Effect.Fade('title', {duration: 1000, from: 0, to: 100, finish:menu_in ,toggle:false});
title_in.start();
function menu_in(){
var menu_fade = new Spry.Effect.Fade('menu', {duration: 500, from: 0, to: 100, toggle:false});
var menu_slide = new Spry.Effect.Slide('menu', {horizontal: true,duration: 1500, from: '0px', to: '850px', finish:power_in ,toggle: false});
menu_fade.start();
menu_slide.start();
}
function power_in(){
var power_fade= new Spry.Effect.Fade('jara', {duration: 1000, from: 0, to: 100, toggle:false});
power_fade.start();
}
function hotel_title_in(){
var hotel_title_fade = new Spry.Effect.Fade('hotel-title', {duration: 1000, from: 0, to: 100, finish:detail_title_in ,toggle:false});
hotel_title_fade.start();
}
function detail_title_in(){
var detail_title_fade = new Spry.Effect.Fade('detail-title', {duration: 1000, from: 0, to: 100, finish:content_in ,toggle:false});
detail_title_fade.start();
}
function content_in(){
var content_fade = new Spry.Effect.Fade('content', {duration: 500, from: 0, to: 100,finish:detail_in,toggle:false});
content_fade.start();
}
function detail_in(){
var detail_fade = new Spry.Effect.Fade('sidebar', {duration: 500, from: 0, to: 100, toggle:false});
detail_fade.start();
}
//-->
</script>
【コードビュー】
スクリプトが大量に追加されましたが、よく見ていただくと２つの関数の呼び出しのであることに気づいていただけるかと思います。
【表示効果フェードを設定する関数 Spry.Effect.Fade】
例）
Spry.Effect.Fade('title', {duration: 1000, from: 0, to: 100, finish:menu_in ,toggle:false});
引数は２つで、第１引数が、対象となるエレメント、第２引数がオプション指定となります。オプションは以下の通りです。
| duration | 効果の継続時間をミリ秒単位で指定します。 デフォルト値は 1000 です。 |
|---|---|
| from | 透明度の開始値を % で指定します。 デフォルト値は 0 です。 |
| to | 透明度の終了値を % で指定します。 デフォルト値は 100 です。 |
| finish | 効果の終了後に呼び出す関数を定義できます。 |
| toggle | 切り替え効果を生成します。 デフォルト値は false です。 |
【表示効果スライドを設定する関数 Spry.Effect.Slide】
例）
Spry.Effect.Slide('menu', {horizontal: true,duration: 1500, from: '0px', to: '880px',toggle: false});
引数は２つで、第１引数が、対象となるエレメント、第２引数がオプション指定となります。オプションは以下の通りです。
| horizontal | 水平方向に描画する場合にはtrueを、垂直方向に描画する場合にはfalseを指定します。 |
|---|---|
| duration | 効果の継続時間をミリ秒単位で指定します。 デフォルト値は 1000 です。 |
| from | 描画開始位置を指定します。 デフォルト値は 0 です |
| to | 描画終了位置を指定します。 |
| finish | 効果の終了後に呼び出す関数を定義できます。 |
| toggle | 切り替え効果を生成します。 デフォルト値は false です。 |
これらの関数を使って、オブジェクトを作成し、start()メソッドを使って実行します。
連続した動作となるように、finishオプションを使って関数を呼び出します。
title_in ⇒ menu_in ⇒ power_in
の順で実行されます。
また、submitされたら、検索した情報が更新表示されるように
hotel_title_in
を呼び出す必要があります。
Submitの際にget_option_selected関数を呼び出していますのでこの関数の中から呼び出すようにします。
【funcion get_option_selectedを以下の内容で置き換えます】
function get_option_selected ( form ) {
var elem = document.getElementById('hotel_type2');
var val = get_option_val(elem);
var url = "http://jws.jalan.net/APILite/HotelSearch/V1/?key=**************&pref=130000&h_type=" + val;
dsHotels.setURL(url);
dsHotels.loadData();
hotel_title_in();
return false;
}
【コードビュー】
ではAIRでプレビューしてみましょう。
タイトルと検索エリアが表示効果付きで表示できたでしょうか。
プルダウンから、「貸別荘」を選択して、「SEARCH」ボタンをクリックしてください。
どうです。詳細情報まで順次表示されましたか。
画面に動きがついて、印象がかなり良くなったのではないでしょうか。
プルダウンリストで選択された情報をチェックする
プルダウンリストから何も選ばすに、submitされてしまった場合にメッセージを表示して値を選んでもらうようにナビゲーションのメッセージを表示させましょう。
Spryの検査機能を使えば簡単に実装できます。
デザインビューからプルダウンリストを選択します。
[挿入]メニューの[Spry]から[Spry選択検査]を選びます。
以下のようなアラートが表示されますが、OKをクリックしてください。
SpryAssets/SpryValidationSelect.js
SpryAssets/SpryValidationSelect.css
がリンクされ
Scriptタグに
var spryselect1 = new Spry.Widget.ValidationSelect "spryselect1" ;
が挿入されます。
本アプリケーションではsubmitされた時点で未選択なら、メッセージを表示するようにしますのでチェックのための関数を作成します。
【ページ先頭のscriptタグ内に追加】
function validateonsubmit(form){
if (Spry.Widget.Form.validate(form) == true){
get_option_selected( form );
}
return false;
}
【コードビュー】
フォームタグを変更し、先ほど追加した関数を呼び出すようにします。
【コードビュー】
Spry.Widget.Form.validateを使い、値判定を行います。プルダウンリストでvalueがセットされていればtrueとなります。
選択肢「選んでください」はvalueが空ですので、選択肢を選びなおしていない場合には処理結果がfalseとなりメッセージが表示されます。
プレビューしてみましょう。
プルダウンリストを未選択のまま、「SEARCH」ボタンをクリックしてみてください。
メッセージが表示されましたか。
Spryの検査機能を用いれば、値の判定や、ナビゲーションに利用することが可能ですのでユーザビリティーの高いアプリケーションの開発ができます。
さらにリッチに！
次回以降は、さらにRIA（リッチインターネットアプリケーション）にするためにオープンソースのjqueryを利用していきます。多くの関数が用意されていますので、可能性は無限大！お楽しみに。
もっと学ぶには
Dreamweaverの基本しっかりとおさえたい方にオススメのトレーニングコースです。
基本的なWebサイト構築における手順、サイトのナビゲート、CSS（カスケーディングスタイルシート）を使ったWebページのレイアウト、大規模なサイトの構築や維持管理の手法など、サイト制作に欠かせない要素を多数ご説明します。
本チュートリアルのような画面のレイアウトを行いたい方はCSS（カスケーディングスタイルシート）の講座がおすすめです。こちらでは、CSSを使用したWebサイトデザインの制作を目標に、必要な知識とテクニックを習得することができます。各種ブラウザーでの見え方の違いや、Web標準化などの話題もご紹介します。
