研究員のテライです。
マッシュアップの素材としてもよく使われる Google Maps ですが、JavaScript や PHP をやっているデベロッパーさん達が Google Maps API を楽しそうに使いこなしている一方、Flash メインの僕は悶々といじけておりました。Flash で Google Maps を読み込み&操作する方法がよく分からなかったのです。ひょっとしたら Flash 業界内でも確立してはいないのではないでしょうか?
Google Maps ページ(html)の上に、背景を透明にした全画面 swf レイヤーを重ねる方法はよく見ますが、透明化:wmode=tranceparent すると通常では IE で日本語が入力できなくなるなど、運用には癖があるので面倒といえば面倒。JavaScript との連携も必要なので、バイリンガルでない僕にはハードル高め。
理想は「Flash(SWF)ファイルの中に GoogleMap 画像をロードして、ActionScript の関数で操作」したいのです!僕は。
誰かなんとかしてくれないかなぁ〜と、ラボ研究員にあるまじき「待ちの姿勢」で待っていたら、なんと2つ4つもありました。
下準備:とりあえずは自分用の Google Maps API キーを取得(無料)しておきましょう。話はそれからです。
方法0:2008.5.19追記:Google Maps API for Flash
Flash(ActionScript3) から GoogleMaps API を操作するためのライブラリが、Google から正式に公開されました。今後使用事例が増えていくものと思います。
「Official Google Maps API Blog: Introducing the Google Maps API for Flash」
2008年11月さらに追記:5月のリリース時点ではswc配布のみのため、特別なことをしない限りはFlexユーザしか使えなかったのですが、最近FlashCS3用のmxpが配布され、これをインストールすればFlashのコンポーネントとして使えるようになりました。つまり Flash CS3 でGoogle Maps API for Flash が使えるということです。
方法1:google-maps-flash-interface
「google-maps-flash-interface」というプロジェクトが GoogleCode 上にありまして、今のところ ActionScript 2.0 用のみですが、これを使うと念願の「SWF 内に GoogleMap を展開&操作」が簡単にできます。操作のための関数も既に用意されていて、一例を挙げると:
- mc.moveNorth(); … いかにも北に移動してくれそうですね!
- mc.zoom+1; … おお〜。ズームしてくれそうですね。getter/setter として設定されているのでプロパティとして扱えます。
- mc.setMapSize(620, 380); … 地図を読み込んでいる mc を幅620px 高さ380px に拡大縮小。表示エリアを簡単に操作できるのです。
- mc.zoomOnPins(ピンの名前); … 指定したピンが中央にくるように(やってみたけどあんまり中央じゃないぞ?要調査)しつつ、地図をズームしてくれます。
等々、分かりやすい指定で簡単に操作できます。ピンの追加/削除用メソッドももちろん用意されています。
開発者でもあり、詳細解説もされている「Experience Matters」さんのブログでは、実際に Rolex のサイトにてこのライブラリを使ったとのことで、ライブラリが実働する様子を確認できます。というか、この案件のためにライブラリを作ったそうです。
なお、ActionScript 3.0 版は2008年登場予定とのこと。個人的に、Wii インターネットチャンネル用に使いたかったので、Flash Player 7 対応しているかと期待したのですが、Flash 8 以降の機能である geom パッケージを多用しているので、そのままでは動かない様子。ライブラリをいじるか、Wii×Opera ブラウザの Flash Player 8 対応を待つか、どっちが早いかな(笑)
方法2:Modest Maps
こちらは「Modest Maps」という別のライブラリ。サイトに掲載されている特徴をリストアップすると:
- OpenStreetMap, NASA Blue Marble, Google, Yahoo!, Microsoft といった「タイル(敷き)ベース」の地図ならだいたい対応している。
- タイル画像部分をデベロッパ側で自作することもできる。自作地図ですね。
- なめらかなパン&ズーム
- マーカーの追尾(トラッキング)もできます。
- FlashLite で動くそうです!
だそうで、逆にその下には、Modest Maps でできないことが列挙されていますが、このあたりは実際に使ってからコメントする方が良さそうですね。
Flash Lite 対応ということで Flash Player 7 対応かと期待して、サンプルを試しに 7形式でパブリッシュしてみましたが、こちらもやはり geom パッケージを使いまくっているようで駄目でした。Map 系のコア部分とは別のところで geom 使っているのかな?
以上、とにかく昨日見つけたところなので、調査はこれからなのですが、同じ悲願を達成したかったという Flasher さんは試しに遊んでみてはいかがでしょうか?
注目の追記!!
テライ個人ブログの方でさらに2個のライブラリ(コンポーネント)を教えていただきました。
方法3:SwfGmap
おお〜。日本語サイト!ActionScript 3.0 のみかな?ダウンロードはこちらのページからSVNで。
方法4:Advanced Flash COmponets G Map V. 2.6.1
ドキュメントが充実してますね。API リファレンスやチュートリアルが豊富で使いやすいかも。Flash8用コンポーネント形式です。ActionScript 3.0 にも対応しているそうです。これが一番使いやすいかも。でもコンポーネントがV2だろうからFla8以上だろうなぁ。。







コメント (3)
Flash内に用意した、球体に、航空写真を貼ったりできませんかねえ。
Wiiの地球儀が作れたらなあとおもっています。
Virtual Earthでも、いいのですが、Macで動かなかったり、ちょっと、重かったりするので、ライトな地球儀がほしいのですが、そういう、事例あったら教えてくださーい。
投稿者: フナミタカオ | 2007年12月20日 12:09
日時: 2007年12月20日 12:09
Flash の displacementMapFilter という機能を使うと、平面画像を湾曲させることができまして:
http://labs.zeh.com.br/blog/?p=128
みたいにできるのですが、実装するには GoogleMaps の画像をFlash上でビットマップとして取り扱えるように変換するのですが、その行為をGoogleがよく思っていないらしく、Google八分される可能性があるそうです。
ずばり
http://psyark.jp/?entry=20050925191451
みたいに作りまして、インタラクションも入れて
http://psyark.jp/?entry=20050929021834
みたいなのが出来ちゃうそうです。AS3だとさらに高速らしいです。
できあいのFlash地球儀ということでしたら、こんなのもあります。(紹介記事へのリンク)
http://www.nitenichiryu.org/archives/2007/05/15/1815.php
投稿者: テライ | 2007年12月20日 12:36
日時: 2007年12月20日 12:36
どうもありがとうございます。
画像の権利のクリアは必要そうですが、イメージできました。
近いうちに、挑戦してみます
投稿者: フナミタカオ | 2007年12月21日 13:10
日時: 2007年12月21日 13:10