ArcGIS API for Flex を使って iOS や Android 用の地図アプリを作ってみよう！

2024/8/22
ヒント／テクニック ArcGIS API for Flex

みなさんは Flex（Flash）で iOS や Android 用のアプリが作成できることをご存じでしょうか？今回は、Web ブラウザ上で実行される Flash Player ではなく、Adobe AIR ランタイムを使用して iOS や Android 用のアプリを作成する方法をご紹介します。Adobe AIR を使うと、Flex で作成したアプリケーションを iOS や Android デバイス用のネイティブ アプリにパッケージ化することができます。

BasicMap サンプル

もちろん、iOS や Android のアプリを開発する場合、ArcGIS Runtime SDK for iOS や ArcGIS Runtime SDK for Android を使ってネイティブ アプリを作成することもできます。
これらのネイティブの開発環境に対して、Flex を使った場合の最大のメリットは、同じソースコードで iOS と Android の両方のアプリを作れてしまう点です。

一方で、プラットフォーム固有の機能（電話帳や各種センサー、アプリ内課金など）を実装する際には、ネイティブ拡張という仕組みが必要で多少難易度が上がります。また、現状ではマップの操作感がネイティブ アプリと比較して多少劣ることも考慮に入れる必要があります。

iOS や Android のネイティブ アプリ開発はハードルが高すぎるという場合や、iOS と Android の両方に対応するアプリを作成する必要がある場合に、ArcGIS API for Flex を使うという方法も検討してみてください。

それでは実際にサンプル アプリケーションを作成してみましょう。ArcGIS API for Flex には、BasicMap と WebMap という名前の 2 つのサンプルが含まれています。ここでは BasicMap を例に手順をご紹介します。このサンプルは ArcGIS Online のベースマップを表示し、デバイスの GPS 機能で現在地にズームするシンプルなアプリケーションです。必要な開発ツールは Flex の統合開発環境である Adobe Flash Builder のみです。Flash Builder を初めてお使いの方は体験版でも検証可能です。

※以下の手順では、ArcGIS API for Flex のライブラリは取得済みであることを前提としています。
※ArcGIS API for Flex の基本的な使い方は、スタートアップ ガイドをご参照ください。

  1. Flash Builder を起動し、[ファイル] メニューから [インポート] を選択します。
    Step1:インポート
  2. [Flash Builder] → [Flash Builder プロジェクト] を選択し、[次へ] をクリックします。
    Step2:Flash Builder プロジェクト
  3. [プロジェクトを読み込み] で [プロジェクトフォルダー] を選択し、サンプルコードのパスを [参照] ボタンを使用して指定します。BasicMap のソースコードは、「\arcgis_api_for_flex_3_0ArcGIS_Flexmobile」に入っています。
    Step3:プロジェクトフォルダー
  4. プロジェクト フォルダ―を指定したら [終了] をクリックします。
    BasicMap プロジェクトが作成されるので、次にライブラリの設定を行います。Flash Builder のパッケージエクスプローラー上で、作成されたプロジェクト（BasicMap）を右クリックし、プロパティを開きます。
  5. [Flex ビルドパス] で [SWC の追加] ボタンをクリックしてライブラリを選択します。ライブラリは「\arcgis_api_for_flex_3_0ArcGIS_Flexlibs」にある、「agslib-3.0-2012-06-06.swc」を選択し、[OK] をクリックします。
    Step5:SWC の追加
  6. これでアプリを実行する準備が整いました。まずは Flash Builder に付属するシミュレータで実行してみます。BasicMap.mxml を右クリックして [実行] → [実行の構成] を選択します。
    Step6:実行の構成
  7. [モバイルアプリケーション] を選択して左上の [新規] ボタンをクリックします。
    Step7:[新規] ボタン
  8. 作成された起動構成「BasicMap」を選択し、ターゲットプラットフォームと起動方法を選択します。ここでは、ターゲットプラットフォームを「Apple iOS」、起動方法をデスクトップ上の「Apple iPad」に設定しています。
    Step8:ターゲットプラットフォームと起動方法
  9. 実行ボタンをクリックするとシミュレータが起動します。ネイティブの開発環境に付属するシミュレータ（エミュレータ）に比べると見た目がシンプルですが、その分、起動も早く、軽いので開発においては十分かもしれません。（このシミュレータでは GPS の機能は使えません）
    Step9:iPad シミュレータ
  10. 実機で実行する場合は、実行構成の起動方法で「デバイス上」を選択します。実際の端末で実行すると画面下にボタンが表示され、端末の GPS 機能を使って現在地にズームできます。下図は iPad で動作させたときのキャプチャです。また、指を使ったピンチイン / ピンチアウト、スワイプなどでマップの拡大 / 縮小、移動が可能です。
    Step10:iPad Basic Map サンプル

    なお、iOS デバイスで実行する場合は、証明書やプロビジョニングファイルが必要になります。詳細は、アドビ システムズ社のヘルプをご参照ください。また、Adobe AIR や iOS のバージョンによっては現在地にズームするボタンが表示されないかもしれません。その場合は、BasicMapHomeView.mxml の31行目から始まる if 文をコメントアウトしてみてください。
    Step10-2:ボタンが表示されない場合

今回は背景図を表示するだけの簡単なサンプルの紹介でしたが、ArcGIS API for Flex の様々な機能が iOS や Android デバイス上でも実現できますので、ぜひ一度お試しください。


■関連リンク
・ESRIジャパン Web サイト
　ArcGIS API for Flex：http://www.esrij.com/products/arcgis/developer/arcgis-web-mapping/arcgis-api-for-flex/
・Esri 社 Web サイト
　ArcGIS API for Flex：http://resources.arcgis.com/en/communities/flex-api/index.html

類似の記事がありません

フォローする