ひよっこ。

I want to…

Posts Tagged ‘flash’

Flashのアクセシビリティに関する特集

Posted by hikaruworld : 2010 3月 27

表題に関して技評で特集をやっていますね。
http://gihyo.jp/design/serial/01/flash_accessibility/0001

個人的には、とてもタイムリーな話題です。
先日fxug@富山での発表用の資料を作ってる時に自分も色々調べていたのですが、
日本語の資料が少なくてびっくりしました。

英語の方では、Flashのアクセシビリティにおけるベストプラクティクスが
定義されていたりはするのですが。

思っている以上に、Flash(Flex)におけるアクセシビリティサポートは、
限定的なものが大きいのが現状です(Win限定、IE上のActiveXプラグインOnlyなど…)。

ただ、Flex3ではなんとアクセシビリティ機能がデフォルトFalseだったFlexですが、
Flex4からはアクセシビリティ機能がデフォルトTrue(有効)になっています。
このあたりの対応を今後本格的に行っていくのだろうと期待感があったりはします。

企業内アプリを作成していると、こういった部分はおろそかになりがちですが、
アクセシビリティ難民を作らないように心がけていきたいものです。

この連載は楽しみです。

以上。

Posted in program | タグ: , , | Leave a Comment »

GoogleMapAPI For Flashを試行中

Posted by hikaruworld : 2009 8月 12

いまさらながら、GoogleMapAPI For Flash を利用してみました 。
目的としては、逆ジオコーディング とルート検索を利用したかったのでその辺りを中心に試してみています。
とりあえず、インストールからの簡単な流れで説明をば。

なお、環境としてはFlexBuilder3 を利用してAdobeAirでサンプルを作成しています。

インストール

1. GoogleMapAPIのサイトに行き登録URLとAPIkeyを取得します。
2. GoogleMapAPI For Flash のSDKをダウンロードします。
3. SDKを展開して、FlexBuilderで作成されたAirプロジェクトのlibs以下にmap_flex_1_16.swcをコピーします。

地図を描画

メインとなる.mxmlに以下のようなコードを追記します。

urlはインストール時に登録したURL、keyはその際に取得したAPIkeyを指定します。
languagesに関しては基本的にはブラウザのデフォルト設定依存で良いと思いますが(ローカライズ参照)、
FlashDevelopなどを利用している場合はlocaleがenに設定されているはずなので、
明示的にjaを指定したほうが確実でしょう。

mapevent_mapreadyはマップオブジェクトの初期化が完了した際にディスパッチされるイベントハンドラの定義(詳細はイベントを参照)になります。

<mx:Script>
    <!&#91;CDATA&#91;
    import com.google.maps.MapEvent;

    private function onMapReady(event:MapEvent):void {
        trace("onMapReady...");
    }
    &#93;&#93;>
</mx:Script>
<maps:Map xmlns:maps="com.google.maps.*"
		id="map"
		languages="ja" 
		mapevent_mapready="onMapReady(event)" width="100%" height="100%" 
		url="https://prepro.wordpress.com/" key="hoegpiyo..."/>

Web版GoogleMap化

とりあえず上記の設定でGoogleMapは描画されますが、それだけだと面白くもなんともないので、
各種コントロールを追加して行きます。

GoogleMapAPI For Flashでいうところの標準コントロールに関しては、Mapオブジェクト初期化時に初期化されたインスタンスに対してaddControl()というメソッドを利用して行うことが可能です。

ためしに、Web版のGoogleMapが標準で持っている機能の一部を追加してみます。

<mx:Script>
    <!&#91;CDATA&#91;
    import com.google.maps.MapEvent;

    private function onMapReady(event:MapEvent):void {
        trace("onMapReady...");
        // 各種コントロールを定義
        this.map.addControl(new PositionControl());
        this.map.addControl(new MapTypeControl());
        this.map.addControl(new ZoomControl());
    }
    &#93;&#93;>
</mx:Script>

こんな感じで表示されます。

逆ジオコーディングサンプル

GoogleMapAPI For Flash のデベロッパガイドから抜粋。

ジオコーディングとは、住所 (「1600 Amphitheatre Parkway, Mountain View, CA」など) を地理座標 (緯度 37.423021、経度 -122.083739 など) に変換する処理のことです。地理座標を使用して、マーカーを配置したり地図の位置決めを行うことができます。

というわけで、ここではジオコーディングの逆、逆ジオコーディング(地理座標を住所に変換する)を試してみます。
とりあえず、既存のサンプルを流用して任意の箇所をクリックした際にその座標を逆ジオコーディングするように実装しました。
主な流れは以下の通りです。

  1. ClientGeocoderをインスタンス化
  2. GeocodingEventに対するGeocodingEvent.GEOCODING_SUCCESS及び、GeocodingEvent.GEOCODING_FAILUREイベントのイベントハンドラを定義する。
  3. ClientGeocoder#reverseGeocode(LatLng)メソッドを実行する。
    以下はソースになります。
private function onMapReady(event:MapEvent):void
{
    // 各種コントロールを定義
    this.map.addControl(new PositionControl());
    this.map.addControl(new MapTypeControl());
    this.map.addControl(new ZoomControl());

    // Map上をクリックした際のイベントハンドラを定義
    this.map.addEventListener(MapMouseEvent.CLICK, onMapClick);
}
/**
  * マウスクリック時のイベントハンドラを定義
  */
private function onMapClick(e:MapMouseEvent):void
{
    trace("緯度:", e.latLng.lat(), "経度:", e.latLng.lng() );

    var cg:IClientGeocoder = new ClientGeocoder();
    cg.addEventListener(GeocodingEvent.GEOCODING_SUCCESS, function(success:GeocodingEvent):void {
        trace(e.response.name);
        trace(e.response.placemarks);
    });
    cg.addEventListener(GeocodingEvent.GEOCODING_FAILURE, function(fault:GeocodingEvent):void {
            trace(fault);
    });
    cg.reverseGeocode(e.latLng);
}

ルート検索

これが本題。
ルート検索はDirectionsをインスタンス化し、directions#load(String)を実行します。
loadに渡す引数はGoogleMapを検索するときのように、自由形式(ex)東京から大阪)でも解釈してくれます。
以下該当箇所だけ抜粋。

// Directionsに任意のOptionを渡す。travelModeでルート検索の行動方法?を指定可能
var options:DirectionsOptions = new DirectionsOptions( {
	language: 'jp',
	countryCode: 'ja',
	travelMode: DirectionsOptions.TRAVEL_MODE_DRIVING
});
// 1.インスタンス化
var dist:IDirections = new Directions(options);
var query:String = "福井市から富山市";

// 2.イベントリスナを定義
dist.addEventListener(DirectionsEvent.DIRECTIONS_SUCCESS, function(success:DirectionsEvent) {
	trace("directionHandler loaded...");
	var dir:Directions = e.directions;

	// ルートを地図上に描画する。
	map.clearOverlays();
	map.addOverlay(dir.createPolyline());

});
dist.addEventListener(DirectionsEvent.DIRECTIONS_FAILURE, function(e:DirectionsEvent):void {
	trace(e.directions.status);
});
// 3.実行
dist.load(query);

ここで問題発生。
上記のソースコードで指定されているルートだと正常に検索が実行されず、エラーStatus:604が返却されてしまいました。
(※まれに602のケースもあった)

APIリファレンスを見るとそれぞれのエラーコードは以下のようになっている。

名前 説明
GEO_UNKNOWN_ADDRESS 602 住所が未知または不正であることを示すステータス コード
GEO_UNKNOWN_DIRECTIONS 604 ルートが計算できなかったことを示すステータス コード

ようするに正しく名称が取得できなかったということかと推測。
では、ためしにジオコーディングした情報を渡してみました。上記のqueryを以下のように書き換えます。

//var query:String = "福井市から富山市";
var query:String = "from:36.0651779, 136.2215269 to:36.6952907, 137.2113383";

再実行したが604で落ちました。ためしにfrom-toにアメリカ国内の住所を指定してみます。

var query:String = "ニューヨークからサンフランシスコ";

うまくルート検索できました。

では、アメリカ-日本間で指定してみます。

var query:String = "東京からニューヨーク"			//OK.
var query:String = "大阪からニューヨーク"			//OK
var query:String = "名古屋からニューヨーク"		//NG
var query:String = "東京から大阪"		//NG

なんでだか、日本国内のみの検索が正常に動かないように見えます。
うーん、アメリカ国内でしか利用できないルート検索なんて使い道がない。
バグかなとおもってissueを検索したらこんなのを発見。
Issue 1553: The directions function doesn’t work in Japan.

むぅ、残念。
とりあえずStarは付けておきましたー。

# ちなみにjavascript版 & Webからだと正常に動くようです。なぜに?

Posted in program | タグ: , , | 6 Comments »