AIRチュートリアル Dreamweaver 第５回 アプリケーションを完成させよう！～Yahoo!Mapとマッシュアップ～
作成日
22 April 2008
ページ ツール |
必要条件
この記事に必要な予備知識
Dreamweaver CS3の基本操作（イメージの配置やCSSの設定など）ができることが前提となります。
ユーザーレベル
初級
必要な製品
- Dreamweaver CS3 (Download trial)
サンプルファイル
- ダウンロード（.zip、958KB） (959 KB)
その他の要件
じゃらん AIR サンプルアプリケーション
のインストール
画像をクリックしてください。
インストールが開始されます。
AIRのシームレスインストールの方法についてはこちらを参考にしてください。
第５回の完成画面
制作に入る前に、まずは今回のチュートリアルの完成画面を見てみましょう。
第4回で追加した、「SEARCH」ボタンをクリックすると、施設の一覧が表示され、さらに施設名をクリックすると、施設の詳細情報と「Yahoo!地図」が表示されるようになります。
大まかなステップ
第5回の大まかなステップとしては、以下の4つとなります。
- Yahoo!地図情報Webサービスを登録する
- 地図情報を表示する場所を作成する
- 検索した施設の位置情報を取得し地図情報を表示する
- 表示効果を追加する
Yahoo!地図情報Webサービスに登録しよう！
まずは「Yahoo!地図情報Webサービス」を利用するために、Webサービスのサイトにてアカウントを登録し、「アプリケーションID」を取得します。
※Yahooでは「APIキー」を「アプリケーションID」と呼びます。
Yahoo! JAPAN Webサービスでは、Yahoo!サイトの各種サービス利用されている「Yahoo! JAPAN ID」を入力後、登録ができるようになります。
※Yahoo! JAPAN IDをお持ちでない方は、Webサービスを利用する前に登録が必要となります。
※利用規約等をお読みいただき、画面の手順に従ってご登録ください。
「Yahoo! JAPAN ID」をお持ちの方は、下記よりアプリケーションIDを登録します。
※利用規約等をお読みいただき、画面の手順に従ってご登録ください。
「APIキー（アプリケーションID）」は、第2回でも利用しましたね。利用方法は同じです。
「アプリケーションID」を登録しそのIDを控えておいて下さい。本チュートリアルでは「アプリケーションID：**************」と記載されていた場合、取得した値と入れ替えてご利用ください。
ファイルの準備
第4回のサンプルファイルをDreamweaverで、サイト定義します。
※第2回から作成している場合は、第2回からのファイルをサイト定義してください。
「chapter4.html」の名前を変更し「chapter5.html」として保存します。これで準備が整いました。さあここからAIRアプリを完成させていきましょう！
地図情報を表示する場所を作成しよう！
まずは、「Yahoo!地図」を表示する場所をdivタグで定義し、Map画像（map.gif）を追加します。
【div id="right"の終了位置の下にHTMLを以下のように追加してください。】
<div id="map">
<div id="map-title"><img src="images/map.gif" /></div>
<div id="mapdiv"></div>
</div>
【コードビュー】
Yahoo!地図を表示してみよう！
これで地図を配置する場所はできました。あとは、Yahoo!地図を表示するだけです。
今回使用する地図は「Flash版地図API」となります。
Flash地図コンテンツのページ内での地図の位置や大きさなどは、<object>タグを囲む<div>タグのCSSで指定します。<object>タグのidと<embed>タグのnameは同じ値を設定します。
ここで使用される値は、メソッド呼び出しの際に使用します。
それでは、「Flash版地図API」の内容を元に外部APIを呼び出すコードを記述していきます。
【div id=”mapdiv”内のHTMLを以下のように変更してください。】
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/
swflash.cab#version=8,0,0,0"
width="100%" height="100%" id="YFMap" align="middle">
<param name="allowScriptAccess" value="always" />
<param name="movie" value="http://map.yahooapis.jp/MapsService/Flash/V2/?appid=**********" />
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
<embed src="http://map.yahooapis.jp/MapsService/Flash/V2/?appid=**********"
quality="high" bgcolor="#ffffff" width="100%" height="100%"
name="YFMap" align="middle" allowScriptAccess="always"
type="application/x-shockwave-flash"
pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
【コードビュー】
では、AIRでプレビューしてみましょう。
これだけで、地図が表示されます。完成に近づいてきましたね。
Yahoo!地図の位置情報を取得しよう！
次は、検索した施設の地図を正しい位置に表示しましょう。検索した施設の位置情報の値を取得するスクリプトと、地図に表示枠を付けるスクリプトを記述します。
※ JavaScriptの詳しい説明は省きます。
【ページ上のscriptタグに以下の内容を追加してください】
var handler = function(){
var d = dsProducts.getCurrentRow();
clickk( d["X"], d["Y"] );
var thirdFade = new Spry.Effect.Fade('mapdiv', {duration: 500, from: 0, to: 100, toggle:false});
var thirdFade2 = new Spry.Effect.Fade('sidebar', {duration: 500, from: 0, to: 100, toggle:false});
thirdFade.start();
thirdFade2.start();
};
【コードビュー】
次に、施設名をクリックしたときに地図の位置情報を更新するため、下記の内容を追加します。
【ページ上のscriptタグに以下の内容を追加してください】
function clickk(x,y){
var jx = x /3600000.0;
var jy = y / 3600000.0;
thisMovie('YFMap').moveTo(jy,jx);
}
【コードビュー】
AIRでプレビューしてみましょう。
施設名を選択すると、地図もちゃんとその施設の住所に変更されましたね。
表示効果を追加してみよう！
これで動きは完成です。後は、第3回で行った表示効果と同様に、Mapの画像が正しい順番で表示されるように設定してきます。現在では、Hotels画像→DETAILS画像→contentの順番で表示効果を呼び出していましたが、DETAILS画像とcontentの間に、Map画像を表示する効果を適用してみましょう。
【ページ下のscriptタグを以下の内容に更新してください】
function detail_title_in以降をすべて上書きします。
function detail_title_in(){
var detail_title_fade = new Spry.Effect.Fade('detail-title', {duration: 1000, from: 0, to: 100, finish:map_title_in ,toggle:false});
detail_title_fade.start();
}
function map_title_in(){
var map_title_fade = new Spry.Effect.Fade('map-title', {duration: 1000, from: 0, to: 100,finish:content_in , toggle:false});
map_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();
}
【コードビュー】
AIRプレビューで確認してみましょう。
「→Map」の画像もちゃんと表示されました。
アクティブコンテンツの変換
今回作成したchapter5.htmlは、AIRアプリケーション用として作成しているため、Windows OSのInternet ExplorerでFlashファイルを閲覧すると表示されるアクティブコンテンツは表示されません。
アクティブコンテンツについてはこちらをご覧ください。
ただし、再度chapter5.htmlをDreamweaverで開くと下記のような画面が表示されます。
これは、挿入したYahoo!地図（Flashファイル）に、アクティブコンテンツ回避の設定ができていないことを表示しています。
ここで、「はい」ボタンをクリックすると<object>タグの内容がアクティブコンテンツを回避する記述に変更されます。
【コードビュー】
今回作成したAIRアプリでは、アクティブコンテンツ回避設定の有無に関わらずどちらでも動作します。
さぁ、これですべてが完成です！Dreamweaverで作るAIRアプリケーションのチュートリアルはいかがでしたでしょうか。AIRアプリは、FlashやFlexだけのものではありません。SpryやCSSを活用すれば、Dreamweaverでもリッチなアプリケーション制作を行うことができます。
このチュートリアルを制覇したあなた！
今こそエアコンに参加して、あっと驚く作品を応募してみてはいかがですか。
現在Dreamweaverで制作したAIRアプリの事例は少ないため、優勝するチャンスも大いにあります。あなたのアイデア次第で時代の最先端を切り開くことができるかもしれませんよ。
最後までチュートリアルをご覧頂きありがとうございました！
