Asial Blog

Recruit! Asialで一緒に働きませんか?

GoogleMapsAPI for FlashとJavscript版のGoogleMapsAPIを比べてみた

カテゴリ :
フロントエンド(HTML5)
タグ :
Tech
GoogleMap
Flash
Flex
こんちわ。松田です。
つい最近GoogleMapsAPIを触る機会があったので、今まで使ったことのなかったFlash版のGoogleMapsAPIをいじってみました。
Flash版のFlex SDK、FlexBuilder、Flash CS3の場合のチュートリアルがそれぞれ公開されていますが、今回は最近良く使っているFlexBuilder上で実装しました。

以下、FlexBuilder使用時のGoogleMap表示までの大体の道筋を記述しておきます。

1. GoogleMapsAPI Keyの取得
GoogleMapsAPIを使用するために必要なAPI Keyを取得します。
http://code.google.com/intl/en/apis/maps/signup.html
すでにJavascript版のGoogleMapsAPIでキーを取得済みの場合はそれをそのまま使用できます。

2. GoogleMapsAPI for Flash SDKのダウンロード
ここのページの右中央部分、「How do start?」の2番、「Download the Google Maps API for Flash SDK」のリンクからSDKをダウンロードします。
このファイルを解凍し、適当な場所においておきます。

3. FlexBuilderで新規プロジェクトを作成
FlexBuilderを立ち上げ、「ファイル」→「新規」→「Flexプロジェクト」を選択。
「ライブラリパス」の設定タブが現れる画面まで「次へ」をクリック。
そのタブ内の「SWCの追加」ボタンをクリックし、先ほどダウンロードしたSDK内のswcファイルを指定します。
map_flex_1_9.swcとmap_1_9.swcの二つがありますが(2009年4月13日現在)、flex用のmap_flex_1_9.swcを選択します。

↑こんな状態になります。
これで「終了」をクリックしてプロジェクトを作成。

4. ActionScriptコードの記述
生成されたmxmlファイルに、
http://code.google.com/p/gmaps-samples-flash/source/browse/trunk/samplecode/MarkerDrag.mxml
この辺のサンプルコードをコピペ。
mapオブジェクトの生成直後に、
  1. map.key = '取得したAPI Key';
を入力。これで実行すれば完了です。あとはリファレンスページを眺めながら欲しい機能を追加していきます。



上記のサンプルだと特に面白くなかったので、こっちの記事で作った機能をFlash版で実装してみました。
ソースコードは、Flash内で右クリックして「ソースの表示」をすれば見ることができます。



Javascript版と比べてどうなの?
あれ・・・なんかFlash版のほうが速い?となんとなく感じたので、Javascript版とFlash版の速度を比較してみました。

マーカーを表示させる数を100個、200個、300個・・・と増やしていき、何秒かかるか計測しています。すべてIE7で計測してます。念のため毎回ブラウザを終了させてやってます。
ちなみに計測開始はそれぞれの最初のメソッドが呼び出された箇所で、ページ表示時からの時間ではないので、そのあたりで多少の差はあるかもしれません。

個数:表示までにかかった時間(ミリ秒)
マーカー数Javascript版Flash版
100個21251109
200個38281531
300個59072187
400個82192781
500個101413391
1000個228907453
Flash版がすんごい速いですね。
単純計算で描画の速度は3倍近くになってます。あっとうてきじゃないか。


Javascript版とFlash版で使用できる機能に差があるのかどうかはいまいち不明なのですが、ストリートビューは使用できないようです。
ですがこちらのmotuLogさんの記事によるとJavascript版との連携によりFlash内に表示させることは可能なようです。すげー。
http://plug.heteml.jp/motulog/


開発中の感想としては、これまではGoogleMapAPIを使用すると必ずJavascript開発がくっついてきてたわけですが、その周辺の問題を特に気にしなくて良くなったので、ブラウザの違いによる(IEによる)ストレス・心労負担が軽減されること間違い無しです。
また、FlexBuilder等の入力補完機能が使えたりデバッグが楽になるのもありがたいです。

これで機能も一通りそろっているのであれば、これからGoogleMapsAPIを使った開発はFlash版でもアリかもしれません。
今後地図アプリを作る予定のある方、Javascriptアレルギーのある方はぜひ使ってみてはいかがでしょうか。


参考:Flex BuilderでGoogle Maps API for Flash [ちょこっと]