FlashMapsAPIを使ってみよう！

こんにちは、中村です。

マピオンではJavaScriptやFlash/FlexといったWebアプリケーションのクライアント側な開発を主にやっているエンジニアです。今回マピオンラボブログをリニューアルさせて頂いたついで（!?）に、当ラボで公開しておりますAdobe Flexで利用可能な地図API「FlashMapsAPI」についてエントリーを書かせて頂こうかと思います。どうぞよろしくお願い致します。

はじめに - FlashMapsAPIとは

FlashMapsAPIとはAdobe Flexで利用可能な地図コンポーネント、およびそれを操作するコンポーネント群のライブラリです。ドラッグ＆ドロップによるフリースクロール可能な地図をFlexアプリケーション内に埋め込むことができ、地図を操作したり、動的コンテンツを地図へ追加するためのAPIを利用することで、リッチな地図アプリケーションをすばやく作成することが可能です。

利用要件

FlashMapsAPIは以下の開発環境／実行環境にて利用することができます。

• 開発環境　...　FlexSDK2およびFlexSDK3
• 実行環境　...　Flash Player 9.0.28以降、Adobe AIR 1.5以降

APIキーを登録しよう！

さて、FlashMapsAPIを利用頂くにはAPIキーを登録する必要があります。APIページの右メニューよりAPIキーの発行ページへのリンクがあります。

必要な情報（Webアプリケーションにて利用するのであれば公開URLのみ）を入力し、

「利用規約に同意しAPIキーを生成」ボタンを押下することによりAPIキーが生成されます。同時にFlashMapsAPIを利用する最もシンプルなサンプルコードもいっしょに出力されます。

さぁこれでFlashMapsAPIを利用する用意が整いました！

サンプルコードを動かしてみよう！

さて実際のFlashMapsAPIはSDKとして配布されています。APIページの右メニューよりダウンロードできますので、Flexプロジェクトに取り込んでください。

配布ファイルを解凍しlibフォルダに含まれるswcがライブラリファイルとなります。FlexBuilderであればFlexプロジェクトのlibフォルダにつっこむだけで利用可能となりますね。

APIキー生成時に作成されるサンプルコードは以下の通りです。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
   xmlns:mapion="http://www.mapion.co.jp/mmap/flex">

   <mx:Panel title="sample of Flash Maps API" width="100%" height="100%">

      <mapion:FlexMapionMap
         width="100%" height="100%" mode="labs"
         key="bGFicy5tYXBpb24uY28uanAvZmxhc2htYXBhcGlfcG93ZXJlZGJ5bWFwaW9u"
         latitude="35.6800" longitude="139.7500"
         zoomLevel="7" />
   </mx:Panel>

</mx:Application>

たったこれだけでこのようなFlashアプリケーションが作成できます。どうですか？簡単ですよね。

まとめ

というわけで今回は導入編ということで、FlashMapsAPIを利用するのは簡単だ！という内容に留めさせて頂きます。APIの利用方法などはAPIドキュメントにもまとめられていますのでそちらもご参考ください。

現在マピオンではこのFlashMapsAPIを利用してマピオンドライブルートや箱庭マピオン／油マピオンといったサービスやアプリケーションをリリースしております。今後何回かにわたってそこらへんの開発で培ったTips的な内容で「FlashMapsAPI活用術」みたいな形でエントリーしたいと思います。

ご質問、ご要望などなどあればコメント欄に頂ければと思います。