AIRチュートリアル Dreamweaver 第２回　インターネット上の情報を使ってみよう！　～ SpryでじゃらんAPIを利用する～

その他の要件

Spryフレームワーク1.6.1

• ダウンロード

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

はじめに

第1回では、Dreamweaver CS3によるAIRアプリケーションの開発に必要な環境を整え、AIR制作の第一歩を踏み出しました。
DreamweaverでAIRアプリケーションを作成することがいかに簡単か、実感いただけたかと思います。

続く第2回からは、

• Spryフレームワーク
• jQuery
• リクルートWebサービスの「じゃらんWebサービス」
• Yahoo! Japanの「Yahoo!地図情報Webサービス」

などをDreamweaverと組み合わせ、【宿泊施設検索アプリケーション】を作ることを目的に、AIRアプリケーションの制作手法をご紹介します。「Webサービスの利用」と聞くと難しそうですが、Spryフレームワークの洗練された機能を使用することで、手間なく簡単に新しいテクノロジーを活用できます。

第2回となるこのチュートリアルでは、Spryフレームワークで動きのあるインターフェースを作成し、WebサービスとしてリクルートWebサービスの「じゃらんWebサービス」が提供するAPI情報（宿泊施設情報）を効果的に表示させます。WebサービスはAPI（Application Program Interface）と呼ばれる決まりに従って公開されていますが、Spryを利用すれば、複雑なコードを書くことなく情報を取得できます。

もちろんSpryはAIRアプリケーションにしても動作しますので、SpryとAIRを組み合わせることで、Dreamweaverだけで「ガジェット（デスクトップ上で動くプログラム、ウィジェットとも）」や「マッシュアップしたWeb2.0アプリケーション」を作成できます。AIRコンテスト略してエアコンと聞いて、『自分は関係ないや』と思っているDreamweaverユーザーの方、そんなことはありません！Dreamweaverとあなたのアイデアしだいで、優勝できる可能性はめちゃくちゃあります！

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

画面左側に、宿泊施設の名称一覧がリストアップされています。このデータは、じゃらんサイトから直接取得しています。そのため、制作者がリストを作る必要もなく、特殊なサーバーなどを用意する必要もありません。また、じゃらんからの最新情報がリアルタイムに取得されますので、更新の手間もありません。
画面右側では、一覧で選択した宿泊施設の情報が表示されます。「ホテル説明」と「ホテル詳細」の切り替えは、Spryフレームワークの「アコーディオン」機能を使用し、HTMLながらも動きのあるインターフェースとなっています。

大まかなステップ

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

1. Spryを使用して、Webサービス（じゃらんAPI）を取得する。
2. Spryを使用して、動きのあるダイナミックなインターフェースを作成する。
3. ユーザーの入力状況をもとに、文字や画像の情報を、画面上の適切な個所に表示させる。

じゃらんWebサービスに登録しよう！

まずは「じゃらんWebサービス」を利用するために、じゃらんWebサービスのWebサイトにてアカウントを登録し、「APIキー」を取得します。

• 【じゃらんWebサービス】

※利用規約等をお読みいただき、画面の手順に従ってご登録ください。

「APIキー」とは、そのサービスを実行する際の目印となる、利用者それぞれの固有の値（いわゆるID番号）です。お札の番号のようなものですね。固有のAPIキーを利用することで「このキーでどれぐらいのアクセス数があったのか」などを確認することもできます。

じゃらんWebサービスの場合は、登録すると「アカウント情報」に「APIキー」が表示されます。本チュートリアルで「APIキー：**************」と記載されていた場合、取得した値と入れ替えてご利用ください。

Spryフレームワークを最新バージョンにしよう！

Dreamweaver CS3のSpryフレームワークは、最新版をインストールしてますか？「Adobe Extension Manager CS3」を起動して[Dreamweaver CS3]を選択した際、「Spry 1.6.1 Updater」の項目があれば大丈夫です。

もし表示がない場合は、下記のサイトからダウンロードしてインストールする必要があります。

• 【Spry framework for Ajax】

※注意：Dreamweaver CS3日本語版への、Adobe Labsで配布されているSpry Framework for Ajaxの最新版はサポート範囲外となります。

「Downloads」に「Get the Spry Updater for Dreamweaver CS3 now」とありますので、クリックしてダウンロード画面へと進みます。ここでAdobe IDが必要となりますので、ログインします。

もしAdobe IDを所有していない場合は、利用規約をよくご確認のうえ、画面の指示に従い登録してください。

ログインすると、ダウンロードページへと進みます。

画面をスクロールすると、「Spry Update Extension for Dreamweaver CS3」がありますので、ファイルをダウンロードします。

「Spry Update Extension for Dreamweaver CS3」でダウンロードしたMXPファイルをダブルクリックすると「Adobe Extension Manager CS3」が起動して自動的にインストールされます。これでSpryの準備は完了です。

Webサイトを制作する上で、特にデザイン面ではCSS（カスケーディングスタイルシート）は重要な要素です。しかし本チュートリアルでは、AIRの開発がおもな学習内容となりますので、CSSに関しては言及しません。そのためCSSファイルは、Adobe Spry SDKのデモコンテンツ「プロダクト紹介」で使用されている、「screen.css」をそのまま使用します。

サンプルファイル「chapter2.zip」を開きます。ルートにある「screen.css」を、第１回で作成した「AIR_sample」サイトのルートにコピーしてください。さらに画像も利用しますので、「images」フォルダを、フォルダごとサイトのルートにコピーします。

※今回は製品情報のデモページを利用しているため、本チュートリアルのCSSセレクタ名などは「product」などになっています。実際にオリジナルで作成する場合は、名称を調整した方が適切でしょう。

Dreamweaverドキュメントの準備

それでは実際に作成していきましょう！

Dreamweaver CS3を起動します。サイトは、第1回で作成した「AIR_sample」を使用します。AIRアプリケーションの設定などをそのまま利用しますので、もし実行されていない方は、第1回の作業を行ってください。

起動したとき、下記のようなSpryからの「ようこそメッセージ」が表示されるかもしれません。その場合は、そのまま[OK]ボタンを押してください。

[ファイル]メニューから[新規...]を選択し、カテゴリ：「空白ページ」、ページタイプ：「HTML」、レイアウトは「<なし>」を選びます。ドキュメントタイプを「XHTML 1.0 Transitional（トランジショナル）」にして、[作成]ボタンをクリックします。

ページタイトルに「SpryでじゃらんAPIを利用する」と入力します。
ファイル名を「chapter2.html」として、保存します。

「CSSスタイル」パネルから[スタイルシートを添付]をクリックし、「screen.css」を指定して[OK]ボタンを押します。

これでページの準備ができました。

SpryでXMLのデータをセットしよう！

ファイルの準備ができたところで、早速Spryを使ってみましょう。
まずはWebサービスの情報（じゃらんAPI）を利用するために、あらかじめ「どこからどのようなデータを取得するか」をセットします。
[挿入]メニューから[Spry]を選び、[Spry XMLデータセット]を選択します。

「XML ソース」に
「http://jws.jalan.net/APILite/HotelSearch/V1/?key=**************&pref=130000」
と入力します。上記の*印には、先ほど取得した「APIキー」に入れ替えて入力してください。

[スキーマを取得]ボタンをクリックします。少しだけ待つと、「行エレメント」に何やらプログラムのデータっぽい項目がたくさん出てきます。

一瞬ひるんでしまいそうですが、大丈夫です！これらの項目は、取得されたデータを元に、Spryが自動的に判断して表示したものです。

…そもそも、取得した項目とはなんでしょうか？
実際のデータを見てみましょう。

先ほど「XML ソース」に入力した「http://…」のアドレスを（もちろん**************には、あなたが取得したAPIキーを入れて！）、そのままブラウザのアドレス欄に入力して表示してみましょう。
ブラウザになにやらツリーが出てきませんでしたか？これが、Webサービスから取得した情報です。

※ブラウザや設定によって、表示される内容が異なる場合があります。

ツリー状になったデータは、それぞれの宿泊施設の情報などです。これらの情報を、Spryが自動判断して「行エレメント」に型（構造、スキーマ）として当てはめてくれたのです。もしSpryがないと、『1行目はIDで2行目は宿泊施設名で、3行目は…』と、自力でプログラムコードを組んで、取得する仕組みを作らなくてはなりません。Spryを利用することで、ボタンひとつでそれらの手間を省くことができます。

ちなみに「pref=130000」は、「東京都の情報を取得する」という指定です。こういったパラメータを指定することで、いろいろな条件でデータを取得することができます。じゃらんWebサービスの場合、下記ページに解説があります。

• 【じゃらんWebサービス／じゃらん宿表示APIライト】

本チュートリアルでは、このままの指定で先へ進みます。

さて宿泊施設の構造を取得したので、次は「構造の中の、どの情報を実際に利用するか」を設定しましょう。取得した構造情報の中には、APIのバージョンなど、今回のチュートリアルでは不要な項目も含まれています。宿泊施設の情報のみ必要となりますので、その指定をします。

「データセット名」に「dsHotels」と入力します。次に「行エレメント」の真ん中あたりに「Hotel」という項目があるので、クリックします。

すると、下の「XPath」欄が「Results/Hotel」に変わります。これで、「dsHotels」という名前で、宿泊施設の情報を参照できるようになりました。[OK]ボタンをクリックして、ダイアログボックスを閉じます。

Spryとは、JavaScriptファイルの集まりです！

せっかく設定したのですから、ひとまずHTMLファイルを保存します。

おっと！何かダイアログボックスが出てきました。

「依存ファイルのコピー」と出ています。これは、Spryで利用するためのファイルをサイトにコピーしました、というメッセージです。標準では、サイトルートの「SpryAssets」フォルダが自動的に作成され、いくつかのJavaScriptが置かれています。これがSpryの正体です。SpryはJavaScriptの集まり（ライブラリ）ですので、これらのファイルがないと動作しません。HTMLを公開するときには、『なんか知らないフォルダーがあるな～』といって、Webサイトにアップロードし忘れないようにしましょう！

ページをレイアウトしよう！

さてここまでの作業でできたソースコードを見てみましょう。

ヘッダーに何行か追加されただけで、あまり代わり映えがないですね。おいおい大丈夫か、と思ってしまうかもしれませんが、すでにじゃらんの情報を利用できる準備が完了しています。Spryを利用することで、こんなにもシンプルなソースになります。

次に、取得した情報を表示するため、レイアウトを作成する必要があります。本チュートリアルはSpryやAIRを中心としたものですので、3分間クッキングのようなスタイルでこの部分はショートカットさせていただきます。

【HTMLヘッダー部分にコピーしてください（</head>のすぐ上の行に挿入します）】

【HTMLボディ部分にコピーしてください】

【コードビュー】

それではまず、画面左側に表示される宿泊施設の一覧を作成しましょう。「HOTELS」と書いてある画像の右側にカーソルを合わせ、[挿入]メニューの[Spry]から[Spry領域]を選びます。

「Spry領域の挿入」ダイアログボックスが表示されます。そのまま[OK]ボタンをクリックします。「ここにSpry領域のコンテンツを挿入」という文字列が表示されましたか？これで、Spryで扱うデータをこの中で利用しますよ、というdiv領域ができあがりました。
このdiv領域に、IDを指定します。今作成したdivを選択して、「Div ID」から「content」を選択します。領域が縦に伸びましたか？ソースコードでは、下記のようになります。

それでは、一覧を表示するためのテーブルを作成しましょう。先ほどの文字列「ここにSpry領域のコンテンツを挿入」という文字列のみ削除して、そのまま[挿入]メニューの[Spry]から[Spryテーブル]を選択します。

「Spryテーブルの挿入」ダイアログボックスが表示されました。「列」という項目がありますが、これは一覧に表示する項目となります。今回は宿泊施設名（HotelName）のみ表示するので、「HotelName」だけを残して、左上にある[―]ボタンをクリックしてそれ以外を削除します。結構行数がありますが、思いっきり削除してください。

次に、[偶数行クラス]コンボボックスから「EvenRow」を選択します。これは、偶数行のデザインと奇数行のデザインで差を付けることによって、行を交互に色違いにさせ、視認性をよくするためです。
[Hoverクラス]コンボボックスには「rowHover」を、[クラスの選択] コンボボックスには「rowSelected」をそれぞれ指定します。[Hoverクラス]は行の上にマウスカーソルが移動されたとき、[クラスの選択]は行が選択されたときに適用されるスタイルです。もちろん、独自にCSSセレクタを作成して指定することもできます。

最後に、[行がクリックされたときに詳細領域を更新]チェックボックスをオンにします。これは、一覧の行がクリックされた際、画面右側に表示させる詳細情報などを即座に更新させるために必要です。このチェックボックスをオフにすると、宿泊施設をクリックしても何の反応もないようになってしまいます。

[OK]ボタンをクリックします。デザインビューに、小さなテーブルができましたか？

ここでまた、IDの設定をします。テーブルを選択して、「テーブルID」から「products」を選択します。テーブルが横に伸びましたか？次に、一番上に表示されている「HotelName」は、テーブルヘッダー（th）で今回は必要ないので行ごと削除します。

またもやそっけない見た目になってしまいました…。

でもちょっと待ってください！

実はこの段階で、じゃらんからの情報を取得できるようになりました。HTMLには何もないって？それでは、[ファイル]メニューの[ブラウザでプレビュー]から、お好きなブラウザで表示してみてください。

表示されましたか？OSやブラウザによっては、警告が表示される場合があります。

その際は、「ブロックされているコンテンツを許可...」を選択肢、アクティブコンテンツを実行するように[はい]をクリックして進んでください。

いかがですか！？HTMLには存在しない情報が、「じゃらんWebサービス」を通じて画面に表示されました。Spryを使用すれば、ダイアログボックスから項目を選択していくだけで、Web2.0（っぽいもの）を開発できるのです。

左側の一覧はひとまず完成しました。それでは次に、右側の詳細情報を作成しましょう。

まずは宿泊施設の写真表示です。

「DETAILS」と書いてある画像の右側にカーソルを合わせ、[挿入]メニューの[Spry]から[Spry領域]を選びます。ここで先ほどと違うのは、「タイプ」を[詳細領域]にすることです。これにより、一覧で選択された情報の詳細だと指定できます。

[OK]ボタンをクリックします。先ほどと同様に「ここにSpry領域のコンテンツを挿入」と表示されました。このdivを選択して、「Div ID」から「boxshot」を選択します。
次に「ここにSpry領域のコンテンツを挿入」という文字列のみ削除して、そのまま[挿入]メニューの[イメージ]を選択します。

「イメージソースの選択」ダイアログボックスが表示されました。ここでファイルを選びたいところですが、今回はダイアログボックス上部にある[データソース]ラジオボタンを選択します。

すると、「フィールド」欄にホテル情報の項目がリストアップされています。写真を表示したいので、「PictureURL」を選択して[OK]ボタンを押します。「イメージタグのアクセシビリティ属性」ダイアログボックスが出る場合がありますが、今回はそのまま[OK]ボタンを押してください。

イメージのソース欄に、「{PictureURL}」と入力されていますか？これで画像の表示設定は終了です。これだけで自動的に表示されるようになります。プレビューしてみましょう。

一覧をクリックすると、写真も自動的に切り替わります。この写真は、じゃらんからの情報を元に、インターネット上の画像を表示しています。環境によっては、プレビューで画像が表示されない場合があります。その場合はいったん保存して、HTMLファイルを直接ブラウザで開いてください。

ついに第2回のチュートリアルも終盤にさしかかりました。最後に残っている、宿泊施設の個別情報を表示してみましょう。概要と詳細の2種類の情報を表示したいので、ここでは「Spryアコーディオン」を利用します。

先ほど作成した「boxshot」のdivの後ろにカーソルを合わせます。デザインビューでは難しいかもしれませんので、コードビューで移動しても構いません。

<div id="boxshot" spry:region="dsHotels"><img src="{PictureURL}" /></div>■←ここにカーソル

[挿入]メニューの[Spry]から[Spryアコーディオン]を選びます。

ここでHTMLファイルを保存してみましょう。
…また「依存ファイルのコピー」ダイアログボックスが表示されましたか？

アコーディオンは、SpryAccordion.jsなどのファイルを使用しているので、これがコピーされました。そのまま[OK]ボタンをクリックしてください。
このように、Spryは必要なファイルを必要な分だけコピーするので、余計なファイルで煩雑になることはありません。

ではプレビューしてみましょう。

アコーディオンの動きができました。「ラベル2」をクリックすると、すっと動いて「コンテンツ2」が表示されます。あとは、中身を整えるだけです。こんなに簡単にアコーディオンが完成してしまうのも、Spryのすごいところです。

Dreamweaver CS3のデザインビューに戻り、「ラベル1」の文字列を消して「ホテル説明」と入力します。入力したら、そのまま[テキスト]メニューの[フォーマット]の[見出し3]を選びます。ラベルに▼が表示され、いい感じの見た目になってきました。同じく「ラベル2」の文字も「ホテル詳細」に変更し、[見出し3]とします。

アコーディオンが開いたときの内容を入れていきましょう。文字列「コンテンツ1」を削除します。そのまま、[挿入]メニューの[Spry]から[Spry領域]を選びます。「タイプ」を[詳細領域]にして、[OK]ボタンをクリックします。

おなじみの「ここにSpry詳細領域のコンテンツを挿入」という文字列を削除します。宿泊施設のキャッチフレーズを表示するように設定するのですが、ここで新しいパネルの登場です。

[ウィンドウ]メニューから[バインディング]を選択します。「バインディング」パネルが表示され、これまたおなじみのホテル情報の項目がリストアップされています。

「HotelCatchCopy」を選択して、[挿入]ボタンをクリックします。デザインビューに、「{dsHotels::HotelCatchCopy}」もしくは「{HotelCatchCopy}」と表示されましたか？その文字の右にカーソルを移動し、Enterキーを押して、段落にします。「バインディング」パネルから「HotelCaption」を選択し、[挿入]ボタンをクリックします。最後に、「HotelCatchCopy」の段落のクラスを「hotelCaption」に変更します。もう一度「HotelCatchCopy」にカーソルを合わせ、[プロパティ]パネルの「スタイル」から「hotelCaption」を選びます。

下記のようなソースコードになります。

次に残りのアコーディオンの内容を編集したいところですが、デザインビューには1つ目の内容しか見えていません。表示するには、「ホテル詳細」にカーソルを移動してください。
パネルの右側に、“目”が表示されました。このアイコンをクリックすると、もうひとつのコンテンツが表示されます。

先ほどと同じように「コンテンツ2」を削除して、詳細領域の「Spry領域」を追加し、「バインディング」パネルから下記の項目を挿入します。それぞれの項目は段落（p）にしておいてください。

追加する項目：
{HotelName}
{PostCode}
{HotelAddress}
{AccessInformation}

ここは自由に項目を追加しても構いません。意外な宿泊施設の情報があるかもしれませんよ…？

最後に、宿泊施設の詳細ページを開くリンクを作成しましょう。先ほど追加した項目に続けて<p></p> をEnter キーで挿入し、[挿入]メニューから[ハイパーリンク]を選びます。

「ハイパーリンク」ダイアログボックスで、[テキスト]に「詳細を見る」と入力します。[リンク]コンボボックスの右側にあるフォルダアイコンをクリックし、「ファイルの選択」ダイアログボックスを開きます。宿泊施設の画像を設定したのと同じように、[データソース]コンボボックスを選択し、「HotelDetailURL」を選びます。

[OK]ボタンをクリックして「ハイパーリンク」ダイアログボックスに戻り、[ターゲット]コンボボックスから「_blank」を選びます。

これで宿泊施設の詳細ページを開く設定が完了したので、[OK]ボタンをクリックしてダイアログボックスを閉じます。

ソースコードは以下のようになります。

完成！

これで完成です！プレビューしてみましょう！

文章に書くと長い道のりでしたが、作業自体はラクラクで簡単ではありませんでしたか？Spryの機能で、ソースコードを直接操作した部分はありません。デザインビューだけで開発できるのです。HTMLをまったく知らない方でもWeb2.0の仲間入りができてしまう、そんなすぐれものがSpryなのです。

そしてAIRへ！

それでは、完成したHTMLファイルをAIRで見てみましょう。
まずはDreamweaver CS3上で、AIRをプレビューしてみます。[ファイル]メニューの[ブラウザでプレビュー]から、[Preview in Adobe AIR]を選択します。

動きましたか？AIRにしても、Spryの機能は問題なく動作しています。もしエラーが表示された場合は、Spryのバージョンが古い可能性があります。チュートリアルの始めに戻って、最新のバージョンをインストールしてください。

それではAIRファイルをパブリッシュして、本チュートリアルを完成させましょう。

[サイト]メニューから[AIR Application Settings...]を選択し、「AIR Application and Installer Settings」ダイアログを表示します。
「Initial content」が設定されていない、またはほかのファイルの場合は、[Browse...]ボタンをクリックして「chapter2.html」を選択してください。
また、パッケージされたAIRファイルに必要なファイルを含めるため、「Included files」の右にある[フォルダのアイコン]をクリックし、「images」と「Spry Assets」のフォルダをそれぞれ選択します。

[Create AIR File]ボタンをクリックします。もしエラーが出る場合は、

• 電子証明書（Digital signature）が設定されていない
• 最新のJavaがインストールされていない
• 最新のSpryフレームワークがインストールされていない

AIRファイルができあがりましたか？AIRアプリケーションのインストール方法などは、第1回に掲載されていますので、実行してみてください。

これで、Dreamweaver CS3だけでデスクトップアプリケーションが作成できました。じゃらん以外のWebサービスでも、基本はほとんど同じスタイルですので、今回のチュートリアルで手法を学べばいくらでも応用がききます。アイデアひとつで、AIRコンテスト略してエアコンの優勝も夢ではないですよね！

もっとRIAなAIRへ！

次回以降は、よりいっそうRIA（リッチインターネットアプリケーション）らしいAIRアプリケーションを作成していきます。例えば、Spryのもうひとつの機能「Spryエフェクト」を使ってさらにリッチなインターフェースを追加したり、宿泊施設の地図情報と連携します。Dreamweaver CS3で、マッシュアップのスタートです！

もっと学ぶには

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

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