アクセシビリティ
デベロッパーリソース

Dreamweaver記事

 

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


ガジェット王子氏 AIRプロジェクトチーム

【チュートリアルコース開発担当】

ガジェット王子氏

AIRプロジェクトチーム

鈴木 拓生氏

【サンプルアプリケーション開発担当】

鈴木 拓生氏

株式会社リクルート
メディアテクノロジーラボ

目次

  1. はじめに
  2. 第４回の完成画面
  3. 大まかなステップ
  4. レイアウトを作成する
  5. 絞り込み検索結果を表示させる
  6. さらにリッチに！
  7. もっと学ぶには
作成日:
2008年４月17日
ユーザレベル:
初心者, 中級
製品:
Dreamweaver CS3

はじめに

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

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

  • 検索結果の絞り込み機能

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

必要条件

このチュートリアルを完了するには、次のソフトウェアとファイルをインストールする必要があります。

Dreamweaver CS3

Spryフレームワーク1.6.1

サンプルファイル

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

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

前提条件

Dreamweaver CS3の基本操作（イメージの配置やCSSの設定など）ができることが前提となります。

ページ 1 / 3
次のページ

著者について

ガジェット王子
m-School（エムスクール）は、プロフェッショナルのためのアドビ認定トレーニングセンターです。"あなたが今、必要とするスキル"が即座にマスターできる、短期集中の講座を多数ご用意しています。法人研修や出張講座の実績も多数あり、すぐに業務で活用できるノウハウをご提供しています。運営は、教育関連事業で90年の実績がある学校法人駿河台学園（駿台予備学校）グループの、エスエイティーティー株式会社が行っています。
［AIRプロジェクトチーム ガジェット王子］
鈴木 拓生氏
株式会社リクルート　メディアテクノロジーラボ
1979年11月千葉県生まれ
2004年３月　慶応義塾大学院　政策•メディア研究科卒業
デザイン会社、フリーランスを経て2007年株式会社リクルートメディアコミュニケーションズ入社
現在、株式会社リクルートの実証・研究機関であるメディアテクノロジーラボにて研究員として活動中。メディアテクノロジーラボでは主にDESIGN SHOWCASE マッシュアップアワードの運営等を担当。