CSS（スタイルシート）と画像の準備

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ライト】

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

ページ 3 / 8

前のページ

次のページ