Dreamweaver記事

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

第2回の完成画面

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

画面左側に、宿泊施設の名称一覧がリストアップされています。このデータは、じゃらんサイトから直接取得しています。そのため、制作者がリストを作る必要もなく、特殊なサーバーなどを用意する必要もありません。また、じゃらんからの最新情報がリアルタイムに取得されますので、更新の手間もありません。
画面右側では、一覧で選択した宿泊施設の情報が表示されます。「ホテル説明」と「ホテル詳細」の切り替えは、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の準備は完了です。

ページ 2 / 8

前のページ

次のページ