Google技術講演会 in 京都(7/6) 行くよ

Google Codeディスカッショングループにタイトルにある案内が届いたので行こうと思います。
7月6日に京都で開催ですよ。
http://services.google.com/events/kyoto-techtalk2008

先週末はFlex User GroupのFlex3勉強会で大阪、来週はGoogle Tech Talkで京都。
関西遠征が続きます。

私の顔に見覚えがある方/ない方、見かけたら気兼ねなく声かけてくださいませ。

Flex3勉強会行ってきたよ

大阪で勉強会があったから行ってきたよ。
懇親会でワイワイ飲んでたら楽しくって23時過ぎてた。
途中で抜けなくてはならなかったのが残念。

ダッシュで駅に向かったら、無事「きたぐに」に間に合った。
AM2時30分自宅着・・・。

懇親会がとても楽しかった！
Flex User Groupのみなさんありがとうございます。

FlexでGearsを使う

FlexでGoogle Gears(Gears)を使う方法がサンプル＆ソースコード付き紹介されてました。
やはり、ゴリゴリとJavaScriptを使わないといけないんですね。

Enhancing Flex applications with Google Gears
http://weblog.mrinalwadhwa.com/2008/06/27/flex-and-gears/

Flex3勉強会第45回＠大阪

これ行く！
大阪へ行こうじゃないか。

Flex3勉強会第45回＠大阪
http://www.fxug.net/modules/bwiki/index.php?Flex3%CA%D9%B6%AF%B2%F1%C2%E845%B2%F3%A1%F7%C2%E7%BA%E5%BB%B2%B2%C3%BC%F5%C9%D5

Flexの勉強会参加は初めて。

ログAPIの使用

Flex、AIRでのデバッグ時にはtrace()を使っていたけど、パフォーマンス的によろしくないのでログAPIでログ情報を出力するようにTRYしてみた。

ログ API の使用
http://livedocs.adobe.com/flex/3_jp/html/help.html?content=logging_09.html

ログカテゴリには完全修飾クラス名を指定するのが規則なんだけど、イチイチ書くのは面倒なのでターゲットのオブジェクトを渡すと、そのオブジェクトの完全修飾クラス名を内部で取得して、そのカテゴリに関連付けられたロガーを返してくれるユーティリティを作ってみた。
ちなみにLogTargetのフィルターを指定していて、汎用性に欠けていることには後で気がついた・・・。

それと疑問なのが、LogTargetのフィルターでmx.messaging パッケージと mx.rpc パッケージを指定していないんだけど、BlazeDSでRPCするとログ情報が山ほど出てきてしまう。
そのため、Log.flush()を呼んで関係のないロガーを削除しているんだけど、Log.flush()はデバッグ専用で使っちゃまずそうなので後でなんとかしよう。

package net.air_life.utils 
{
   import flash.utils.getQualifiedClassName;
   
   import mx.logging.ILogger;
   import mx.logging.Log;
   import mx.logging.LogEventLevel;
   import mx.logging.targets.TraceTarget;

   public class LogUtil 
   {
       private static var logTarget:TraceTarget;

       public static function getLogger(targetObj:Object):ILogger 
       {
           if(!logTarget) 
           {
               //デバッグ専用なのでここで使うのはまずいね
               //http://livedocs.adobe.com/flex/3_jp/langref/mx/logging/Log.html#flush()
               //mx.messaging パッケージと mx.rpc パッケージ配下のすべてのログ情報が出てしまうためにflushしている。
               Log.flush();
               
               var logTarget:TraceTarget = new TraceTarget();
               logTarget.level = LogEventLevel.WARN;
               //メッセージをログに出力するクラスを指定
               logTarget.filters = ["net.air_life.hoge.*"];
               logTarget.includeDate = true;
               logTarget.includeTime = true;
               logTarget.includeCategory = true;
               logTarget.includeLevel = true;
                
               Log.addTarget(logTarget);
            }
            
            //完全修飾クラス名は "net.air_life.hoge::Hoge"のような文字列なので、"::"をカテゴリ名に使える"."に置換している。
            var category:String = getQualifiedClassName(targetObj).replace("::", ".");
            var logger:ILogger = Log.getLogger(category);
            
            return logger;
        }
    }
}

使い方はこう。
flash.utils.getQualifiedClassName()を使って、thisからログカテゴリに指定する完全修飾クラス名を作っている。

    var logger:ILogger = LogUtil.getLogger(this);
    logger.debug(event.target.toString());

Mac OSX版Firefox3.0のFlash Player上での重大な問題

Mac OSX版Firefox3.0のFlash Player上で日本語入力は本当にできなかった・・・。
リリース前に各所で噂は聞いていたけど、本当にそのまま正式リリースを迎えるとは残念。
なんて致命的な問題を含んでいるんだろう。

今は問題のバグにパッチを当ててくれたバージョンを使っています。
それだけで、Firefoxをいつまでも2のまま3へ移行しないなんて嫌ですから。

Firefox lzyc build
http://fox.lazycat.info/archives/13

ImageコントロールでアニメーションGIFが動いてくれない

昨日、画像のロード中にLoadingイメージを表示するよう試みた。
まずは楽しようと、下記のジェネレータでLoadingイメージのアニメーションGIFを作成した。

Ajax loading gif generator
http://www.ajaxload.info/

作ったアニメーションGIFはこんな感じで使おうとした。
imageのvisibleとloadingのvisibleにはloadingData:Boolean(初期値true)をバインディングしておいて、imageの画像データの読み込みが完了したらfalseに値が切り替わり、ロード中から画像の表示へと切り替えるというもの。

       <mx:Image id="image" source="{imageUrl}" visible="{!loadingData}"
               complete="loadingData=false;"
               width="120" height="120" horizontalCenter="0"/>
       <mx:Image id="loading" source="@Embed('/assets/loading.gif')"
               visible="{loadingData}" horizontalCenter="0" top="30" width="32" height="32"
               showEffect="Fade" hideEffect="Fade"/>

しかし、loading.gifがちらっと一瞬表示されたけど動いていないような気が・・・。
確認したところ確かに動いていない。
どうやらFlexのImageコントロールはアニメーションGIFに対応していないようだ。
一応、静止画像は表示される。

調べたところアニメーションGIFに対応したLoaderは作られているようだ。
見つけたのはこれら。

Animated Gif Loader Component
http://www.adobe.com/cfusion/exchange/index.cfm?event=extensionDetail&extid=1103970

How to load animated GIFs using Adobe Flex 2.0(上記コンポーネントの作者)
http://dougmccune.com/blog/2007/01/19/how-to-load-animated-gifs-using-adobe-flex-20/

as3gif
http://code.google.com/p/as3gif/

しかし、使用するライブラリは増やしたくないので素直にFlashを使ってアニメーションを作ることにした。
それも楽をしたいのでAjax loading gif generatorで作成したアニメーションGIFをFlashで読み込んでムービークリップとしてSWFに書き出すことにした。
なんて怠け者なんだろう。

loading.gifからloading.swfは作れたので、先ほどのコードもちょっと修正して下記のような感じにした。
１カ所、mx:Imageを使っていたところをmx:SWFLoaderに書き換えたくらい。

       <mx:Image id="image" source="{imageUrl}" visible="{!loadingData}"
               complete="loadingData=false;"
               width="120" height="120" horizontalCenter="0"/>
       <mx:SWFLoader id="loading" source="@Embed('/assets/loading.swf')"
               visible="{loadingData}" horizontalCenter="0" top="30" width="32" height="32"
               showEffect="Fade" hideEffect="Fade"/>

これでファイルサイズの大きな画像ファイルを読み込むときはNow Loadingのくるくるしたアニメーションが表示されるようになった。

必要そうだったらファイル一式載せておこう。

FileReference.upload()の宛先がhttpsだとFirefoxでは失敗する

この前判明したこと。
下記のように、FileReference.upload()の宛先がhttpsだとFirefoxではサーバにリクエストが届かない。
IEでは問題なかった。

    private var fileRef:FileReference;
    //略
    private function upload():void {
        var req:URLRequest = new URLRequest("https://xxxx/FileUploader");
        req.method = URLRequestMethod.POST;
        fileRef.upload(req);
    }

どうやらFirefox環境でのバグのようだ。
今のところはhttpで素直に送るか、JavaScriptを使った代替手段で回避するしかなさそう。

FileReference.upload() from Firefox over SSL is problematic
http://bugs.adobe.com/jira/browse/SDK-13196

dispatchEvent(event:Event)のオーバライドメモ

ふむふむ。

override public function dispatchEvent(event:Event):Boolean
{
    var handlerName:String = event.type + "Handler";

    if(this.hasOwnProperty(handlerName))
    {
      var method:Function =  this[handlerName] as Function;
      method.apply(this, [event.clone()]);
    }
    return super.dispatchEvent(event);
}

Vistaのアドレスバーちっくなコンポーネント

BreadCrumb Navigator
http://blog.smashedapples.com/2008/06/flex-breadcrumb.html

これイイな。
Windows Vistaのエクスプローラのアドレスバーっぽい。

ナビゲーションパスのそれぞれにドロップダウンがあって、簡単に階層間の移動が可能に。
欲しかったコンポーネントなんだけど、Degrafaってライブラリを使っているのか・・・。

ソースを眺めてみよう。