‘Flash’ カテゴリーのアーカイブ

Google Maps API For Flash

2010.07.30 07:37 PM

先日、某案件でGoogle Maps API For Flashを使ってごにょごにょしたので、
自分なりに感じたことや注意点をメモっとく。

APIキーに関して

Google Maps APIを使用するには、ここでGoogle Maps API For Flashを使用するサイト（またはアプリ）のドメインを指定してAPIキーを取得する。
取得したAPIキーは、Flashで開発する場合は以下のようにASのコード内で指定する。

map.key = “取得したAPIキー”;

APIキーはSWFファイルにコンパイルされ、SWFファイルがホストされているドメインと一致する必要がある。
なので、開発環境、テスト環境、本番環境など、各環境でドメインが違う際には、予め各ドメインごとにAPIキーを取得しておいて、ドメイン判別してそれぞれにAPIキーを設定してあげる作りにしておくと良いかもしれない。

var _url:String = loaderInfo.url;
if(_url.indexOf(”honban.jp”) >= 0) map.key = “honban.jp用のAPIキー”;
else if(_url.indexOf(”test.com”) >= 0) map.key = “test.com用のAPIキー”;
else if(_url.indexOf(”dev.co.jp”) >= 0) map.key = “dev.co.jp用のAPIキー”;
Map3Dに関して

※以下2010年7月現在の最新版であるVersion 1.18に対しての内容

・地図を3Dで見せたい時などはMap3Dクラスを使用する。
使い方はここを参考。
ただMapクラスに比べると、Map3Dクラスは地図画像の読み込みや描画が若干遅いようだ。
・Map3Dクラスは、デフォルトだと黄色の枠が表示されてしまう。これはAPI独自のキーボードイベントが有効になっていると出てしまう枠のようだ。黄色枠を消したければ、キーボードイベントを無効にする。

map.disableControlByKeyboard();

黄色枠は気になるけど、キーボード操作をさせたいのであれば、API独自のキーボードイベントを使わずに、Flashのネイティブキーボードイベントを使用して、自分でキーボード操作の仕組みを作った方がよさげ。

・地図にパースをつける。

地図にパースをつけたい時は、Map3DインスタンスのsetAttitudeメソッドに対してAttitudeクラスのインスタンスを指定する。

Attitude(yaw:Number, pitch:Number, roll:Number)

例えば、30度Pitch回転させたい時は以下のように指定する。

map.setAttitude(new Attitude(0, 30, 0));

ただ、傾ければ傾けるほど描画処理が重くなるようなので注意が必要。

・ドラッグを無効にする。

map.disableDragging();
・ダブルクリックを無効にする。

map.setDoubleClickMode(MapAction.ACTION_NOTHING);
・マウスホイールでのZOOM機能はAPI独自の機能を使わずに自分でZOOMの仕組みを作った方がいい。
理由は、Macのfirefoxで動作しないし、細かい動きの設定などができないから。
ちなみにAPI独自の機能を使う場合は以下のように指定する。

map.enableScrollWheelZoom(); //マウスホイールで拡大縮小できる
map.enableContinuousZoom(); //スムースな拡大縮小ができる
・地図上を滑らかに移動、寄り引きをさせる。
個人的な感覚だが、setCenterメソッドが、一番滑らかに移動できた。
panToやsetZoomなどメソッドは何種類か用意されているが、setCenterが一番良さげ。
このsetCenterメソッドをENTER_FRAMEイベントとかトィーンライブラリのUPDATEイベントの中で処理して、
アニメーションさせるとそれなりに滑らかに動く。

public function setCenter(latLng:LatLng, opt_zoom:Number, opt_mapType:IMapType = null):void

・Parameters
latLng:LatLng — Coordinates for the new center.
opt_zoom:Number — New zoom level.
opt_mapType:IMapType (default = null) — New map type.

・ズームの範囲。
ズームは0〜21くらい（すごいアバウトw）までの数値で指定できるようだ。0が一番引き、21が一番寄り。
Polylineに関して

Polylineオブジェクトは、地図上に線形のオーバーレイを作成する。
Polylineは一連の点で構成され、これらの点を指定された順序に結ぶ連続した線セグメントを作成する。
KMLデータを元にPolylineを描画することもできる。
点（緯度経度）が多すぎると画面描画処理が重くなるので注意が必要。
個人的な感覚では、20,000ポイントくらいがまともに動く限界の数といったところ。
エンコード化ポリラインを使用すると、描画処理も軽くなる。
これは地図のズームレベルによって、ラインの精度をコントロールできるらしい。詳細地図の場合は詳細なポイントを、粗い地図の場合はポイントも粗くして表示速度を得ているらしい。

注意点やもっとこうして欲しい点はあるけど、
やっぱりよくできてる、すごいぞGoogle Maps API！！

MacでFlex SDKを使用してswfをコンパイルする

2009.11.08 11:15 PM

MacでFlex SDKを使用してswfをコンパイルをすることは滅多にないけど、
いざやろうとする時、いつも忘れているので、一応メモっとく。

例えばHOMEディレクトリ/Works/にあるMain.asをコンパイルする場合。
1.ターミナルを起動。
2.ディレクトリをHOMEディレクトリ/Works/に移動 (cd ~/Works/と入力してreturn)。
3.mxmlcキーワードに続いてコンパイルしたいファイルを指定 (mxmlc Main.asと入力してreturn)。

以上。

Pixel Benderメモ

2009.10.05 10:05 PM

Flash Player 10でサポートされているカスタムフィルタ（ピクセルシェーダ）を作成できるツール、Pixel Bender Toolkitのメモ。

Pixel Benderは、Adobe Flash Player 10、Adobe After Effects等がサポートするグラフィックス処理エンジン。
Pixel Benderの言語は、3Dレンダリングピクセル描画処理の最適化に用いられる、フラグメントシェーダ言語（GLSL：OpenGL Shading Languageなど）に基づいて開発されているとのこと。Flash Playerでは、このPixel Benderのプログラムを利用してフィルタやブレンド、面または線の塗りを独自に作成することができる。

Pixel Bender Toolkitで新規Filterファイルを作成すると、以下のようなデフォルトのソースが生成される。

kernel NewFilter
<   namespace : "Your Namespace";
    vendor : "Your Vendor";
    version : 1;
    description : "your description";
>
{
    input image4 src;
    output pixel4 dst;

    void
    evaluatePixel()
    {
        dst = sampleNearest(src,outCoord());
    }
}

以下、ざっくりメモ。
・Parameterを定義すると、実行したときにツールの右側エリアにスライダーが表示されて動的にパラメータを変更できるようになる。
・inputは入力画像を宣言するキーワード。
・outputは出力するピクセル色を宣言するキーワード。
・実際のシェーダーの処理はevaluatePixelメソッド内に記述。このメソッドで指定した処理が、
描画領域の全ピクセルに対して実行される仕組みになっている。
・outCoordメソッド : 処理中のピクセルのグローバル座標を返す。
・sampleNearestメソッド : サンプリングメソッド。入力画像の所定の座標に最も近いピクセルのチャンネル値が含まれたベクトルを返す。戻り値はfloat4型で、それぞれrgbaにてアクセスできる。第一引数に入力画像、第二引数で位置を指定。戻ってきた値をoutput変数に割り当てるのが一般的な処理の流れ。
・distanceメソッド: 2点間の距離を算出。
・float3×3型は行列データ型。asのMatrixクラスみたいなもの。
・Flashで使用する場合、ループ処理、配列、カスタム関数は使用できない。
・浮動小数点数を記述する際には、必ず小数点まで記述しなければならない。
・Flashで使用するには、.pbjという形式のバイトコードデータとして書き出してFlashで読み込むもしくは埋め込む。
・どうやらFlash Player 10ではまだGPU機能が有効になってない模様。なんじゃそれって感じ。早く対応してほしい。

Flashでのクロスドメインに関して

2009.09.25 01:04 PM

久々にクロスドメインになりそうなFlash案件があったのだが、
そういえばFlash Player 10になって、セキュリティの扱いに変更があったことを思い出したので調べてみた。
いくつか有効な手段があった。ので備忘録的メモ。

Flash Player 10 におけるセキュリティ変更はakihiro kamijo: Flash Player 10 におけるセキュリティ変更を参照。

要は、クロスドメイン間のデータのやりとりをしたければ、
参照される側のサーバールートにポリシーファイル（crossdomain.xml）を設置し、
ポリシーファイル内で、メタポリシーを設定してくれっていう内容。

サーバーのルートに、ポリシーファイルの設置が可能であれば、特に問題はないのだが、
共有サーバーなどを使用しているケースでは、
基本的にはサーバーのルートにポリシーファイルを設置できないことが多い。
実際にこの問題に直面している記事があったので、以下参照。
RIAトピック: 【trick7】crossdomain.xml 格納場所を変更しても外部ドメインのルートからも呼び出そうとする問題

で、この問題の有効な対処法が以下。
FLASH-japan: サイトルートにポリシーファイルを置けない環境下でのクロスドメイン運用について

上記の記事はHTTPヘッダーを使って解決するという方法。

別ドメインからのアクセスを許可するファイルと同じ階層かそれ以上のディレクトリに、ポリシーファイルを設置。
Flash側では、loadPolicyFileメソッドで、設置したポリシーファイルを予め読み込んでおく。

Security.loadPolicyFile(”http://www.hoge.com/hoge/hoge/crossdomain.xml”);

さらに、ポリシーファイルと同じディレクトリにHTTPヘッダーを設定した.htaccessを設置。
こうすることでサーパーのルートにあるはずのポリシーファイルよりも、
.htaccessと同じディレクトリにあるポリシーファイルの読み込みが優先されるので、
サーパーのルートのポリシーファイルを読みにいかなくなり、セキュリティエラーが出なくなるということのようだ。
gaienboy様、ありがとうございます。

 

上記のようにサーバーにポリシーファイルが置ける場合はいいとして、
ポリシーファイルを絶対に設置できない場合はどう対処したらいいだろうか？
例えば外部のWebAPIサービスを利用する際などは、ポリシーファイルを設置していないサービスも多い。
こういったケースでは、Flashからの（ActionScriptからの）外部APIへのアクセスができない。

このケースでの有効な対処法がこれ↓
YOPPA BLOG: Flash(AS3)でcrossdomain.xml無しにクロスドメインにアクセスする

要は、PHPでProxyを設定して、Proxy経由で外部APIから情報を引っ張ってくるという方法。
この方法を用いれば、ポリシーファイルを設置していないサービスでも情報を引っ張ってこれる。
YOPPA BLOG様、あざーす！