連載 :
  Flash×AIR

FlashデザイナだってFlex!

2008年6月20日(金)
舛原 盛元

MapAPIとの連携

 Google社から「Google Maps API for Flash」というActionScriptからGoogle Mapを操作するためのAPIが公開されましたが、AIRに直接組み込むのではなく、Flexで上記APIを利用したマップサイトを作成して、前ページまでで作成したブラウザを利用して住所検索をさせてみましょう。

 まず、「Google Maps API for Flash」のSDKを取得します。SDKはZIPで圧縮されているので解凍して利用してください。SDKは「Google Maps API for Flash(http://code.google.com/apis/maps/documentation/flash/)」からダウンロードが可能です。なお、ダウンロードにはGoogle Accountが必要になります。

 続いて、Maps APIを利用するためのキーを取得します。以下のページにマップサイトを設置するURLを入力して、キーを発行します。キーは忘れないように保管しておいてください。これで、必要なものはそろいました。新規プロジェクトを「Webアプリケーション」として作成して、libsディレクトリにSDKを展開したライブラリ(map_flex_1_3.swc)を格納します。

 まず、マップを表示するためのコンポーネントを用意します。今回はUIComponentクラスを利用します。UIComponentはすべてのビジュアルコンポーネントの基本クラスです。このUIComponentの子としてMapクラスを追加していきます(リスト4)。

 Mapクラスのkeyプロパティに取得したキーを入力します。リスト4には記載していませんが、実際に表示するには、Mapインスタンスの表示サイズを設定する必要があります。Flexマップアプリケーションのソースはこちらからダウンロード(http://www.thinkit.co.jp/images/article/88/3/8833.zip)できます(8833.zip/0.916 KB)。

 住所検索を行うためには、ClientGeocoderクラスを利用します。検索キーワードはAIRで作成したブラウザからURLにクエリを付与したものが与えられます。クエリをFlexのマップアプリケーションに渡すために、Javascriptでクエリを解析して、検索キーワードを取得し、Flexが生成したSWFへFlashVars経由で与えます。

 続いてAIRのブラウザに変更を加えていきます。検索キーワードを入力するためのTextInputコンポーネントと検索ボタンのButtonコンポーネントを追加します。ボタンアクションには、HTMLコンポーネントのlocationプロパティをFlexで作成したマップサイトのURLに検索クエリを追加したものに変更するようにします。

 AIR1.0の仕様上の問題で、TextInputコンポーネントで日本語入力を可能にした場合、HTMLコンポーネント中でSWFが表示できない問題があるため、検索はアルファベットでのみ行うことができます。AIR1.1では日本語入力は問題なく動くようになるはずです。修正したAIRのブラウザアプリケーションはこちらからダウンロード(http://www.thinkit.co.jp/images/article/88/3/8834.zip)できます(8834.zip/0.667 KB)。

日本語版リリースについて

 突然ですが、6月17日に、とうとう、AIR1.1日本語対応版が正式にリリースされました。リリースの記者会見が19日に行われ、その情報を弊社サイト(http://www.pluslu.jp/pages/press)にUPしておりますので、ご覧ください。

 今回のリリースでは、以下のとおり発表されました。

 「Adobe AIRは、パブリックベータ版が公開されて以来、世界中のWebデベロッパーコミュニティに非常に大きな影響を与え、多くの業界先進企業はAdobe AIRの支持を表明しました。今回、Adobe AIRで日本語環境が正式に対応されたことにより、より多くの魅力的なRIAの開発とデスクトップへの導入が加速されるでしょう(アドビ システムズ 株式会社 代表取締役社長 ギャレット イルグ氏)」

 日本市場に関連したAdobe AIR 1.1の主な改良点は下記の6つになります。

 1つ目は、日本語のHTMLがAdobe AIR上のアプリケーションで表示される際、日本語セットの自動判別がサポートされ、最適な日本語セットを表示する。

 2つ目は、日本語IMEのサポートにより、HTMLフォームでの日本語入力が可能になる。

 3つ目は、JavaScriptとActionScriptの間における、日本語文字列の受け渡しが可能になる。

 4つ目は、日本語のファイル(ファイルパス)名を取り扱う際、ファイル(ファイルパス)名に日本語が使用されていても正しく指定が可能になる(対象となるAPI:display.load() / Sound.load() / URLLoader.load() / URLStream.load())。

 5つ目は、AIRランタイムのインストーラのユーザインターフェイスが日本語で表示できる。

 6つ目は、AIRランタイムをアンインストールする際に、ランタイムに依存し、正常に動作しなくなるAIRアプリケーションのリストを警告表示する。

 今回では書ききれませんので、次回は、Adobe社を取材し、AIR1.1の最新情報と今後の展開についてご紹介します。お楽しみに!

株式会社ティーケーラボ
チーフアーキテクト。ティーケーラボにて、Javaエンジニアから、Flexエンジニアにめでたく転身。大手メーカーでのエンタープライズシステムの開発経験を生かし、Flexでのエンタープライズシステム開発に邁進中。http://www.tk-lab.com/

Think ITメルマガ会員登録受付中

Think ITでは、技術情報が詰まったメールマガジン「Think IT Weekly」の配信サービスを提供しています。メルマガ会員登録を済ませれば、メルマガだけでなく、さまざまな限定特典を入手できるようになります。

Think ITメルマガ会員のサービス内容を見る

他にもこの記事が読まれています