AIR/Flexの最近のブログ記事

アプリケーションのインストール中にエラーが発生しました：

adb server is out of data. killing...

ADB server didn't ACK

* faild to start daemon *

error:

C:\Program Files (x86)\ASUS\ASUS Sync\adb.exe

C:\usr\local\adt-bundle\sdk\platform-tools\adb.exe

C:\Program Files\Adobe\Adobe Flash Builder 4.7 (64 Bit)\eclipse\plugins\com.adobe.flash.compiler_4.7.0.349722\AIRSDK\lib\android\bin

C:\Program Files\Adobe\Adobe Flash Builder 4.7 (64 Bit)\sdks\4.6.0\lib\android\bin\adb.exe

C:\Program Files (x86)\Adobe\Adobe Flash Builder 4.6\sdks\4.6.0\lib\android\bin\adb.exe

Q.Flash Builder 4.7には、Flash Builder 4.6に含まれていたFlexアプリケーション用のビジュアルデザインコンポーネントが含まれていますか？

A.Flash Builder 4.7は、Flash Builder 4.6以前のバ-ジョンで利用できたビジュアルデザイン機能をサポートしていません。Flexのビジュアルデザイン機能が必要な場合は、Flash Builder 4.6をアドビビライセンスストアでお買い求めください。

例えば、社内システムを Web アプリ化してんだけど、一部のプログラムだけはローカルマシンのリソースを使うので、それぞれのマシンに EXE ファイルとして置いてるんですわ・・・というケースはあるよね。
その時に、そのローカルマシン上のプログラムの起動も、Web アプリのメニュー上から行いたいんですわ・・・という要望もあると思う。

でも、例えば

<a href="C:\Program Files (x86)\apps\apps.exe">Ａ業務システム起動！！</a>

なんてリンクを書いてブラウザからクリックしても（多分）EXE は起動しないよね。
したらセキュリティ的に大変なことだ。

つーことで、普通のプログラムをブラウザから起動するのはなかなか厳しいと思うんだけど、Adobe Flex の AIR アプリなら可能だ。

1. ローカルマシン上の業務アプリ（Adobe Flex の AIR アプリ）を、allowBrowserInvocation を true にして作成。
2. AIR アプリを起動するための Flash を作成。
3. その Flash をセットした HTML を作成。（Flash Builder でリリースビルドのエクスポートをしたら、自動で作成されるけどね。それを自分のサイトにあったデザインに修正すれば良し）

というこれだけだ。

上記 2 で作成した Flash をブラウザに表示して、ボタン（これは Flash の作り方次第だから、文字列でも画像でもボタンでもなんでもいいんだけど）を押せばローカルマシン上で AIR アプリが起動する。

翻訳の微妙な Adobe 本家のサイトより、
http://hakuhin.jp/air/install.html Adobe AIR プログラミング講座
このサイトが非常に参考になった。

Flash 自体は、↓こんな感じで。（ホント、これは起動させるだけのものだけど(^^;）

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="1024" minHeight="720" initialize="initProc()">
    <fx:Script>

        <![CDATA[

            public var air_app_id:String = "hogehoge.app"; // アプリケーションID
            public var air_app_publish:String = "";
            public var air_swf:Object = null;

            private function initProc():void {

                var airSWFLoader:Loader = new Loader(); //Used to load the SWF
                var loaderContext:LoaderContext = new LoaderContext();  
                loaderContext.applicationDomain = ApplicationDomain.currentDomain;

                airSWFLoader.contentLoaderInfo.addEventListener(Event.INIT, onInit);
                airSWFLoader.load(new URLRequest("http://airdownload.adobe.com/air/browserapi/air.swf"),  
                    loaderContext);

            }

            private function onInit(e:Event):void {
                air_swf = e.target.content;

                air_swf.getApplicationVersion(air_app_id, air_app_publish, function(version:String):void {
                    
                    if(version == null) {
                        // アプリケーションがインストールされてない時の処理＜省略＞
                    }

                });

            }

            private function airAppStart():void{

                // AIR アプリケーションを起動する
                air_swf.launchApplication(air_app_id, air_app_publish);

            }

        ]]>
       
    </fx:Script>

    <s:Button x="60" y="58" label="起動" click="airAppStart()"/>
</s:Application>

詳しくは、上記のサイトや、
http://help.adobe.com/ja_JP/air/build/WSfffb011ac560372f-1c6efe05128cca667e7-8000.html AIR.SWF ブラウザー API
この辺りのサイトをどうぞ。

Adobe Flex は、画像ファイルとして扱えるのは、PNG, JPEG, GIF, SVG の４種類だけ。

例えば、インターネット上の TIFF ファイルを URLLoader で取得して、それを Loader で、

bmp:Bitmap = Bitmap(event.target.content);

みたいにビットマップデータとしてロードすることは出来ない。

つーことで、今回は Perl で wrapper として動く API プログラムを作成して、AIR アプリから TIFF ファイルへのアクセスがあった場合、JPEG 画像に変換してデータを渡すことにした。

例えば、TIFF 画像を $data に読み込んだ後で、Image::Magick モジュールを使って、

use Image::Magick;

my $image = Image::Magick->new();
$image->Set(magick => 'tif');
$image->BlobToImage($data);

# 今回は、画像サイズを縮小するので、その処理も
my($width, $height)    = $image->Get('width', 'height');
$height    = int($height * ($Width（変更後の横幅） / $width));
$image->Resize(width => $Width, height => $height);

my $new_data    = $image->ImageToBlob(quality => $Quality（画質）, magick => 'jpg');

こんな感じ。
これで、$new_data に TIFF から変換された JPEG 画像データがセットされるので、

my $size    = length($new_data);

print "Content-type: image/jpeg\n";
print "Content-Length: $size\n";
print "\n";
print $new_data;

で、AIR アプリ側でも問題なく画像が表示される。

Image::Magick もたまにしか使わないので、いつもメソッドやプロパティを忘れてしまうので、一応、メモ代わりに書いておこう。

・Web サーバ上に、画像選択のための条件を渡せば、その画像を表示する HTML を返してくる API を設置。

・HTML コントロールからのそ API にアクセスし、HTML を取得。

・画像が表示されているその HTML コントロールを PrintJob クラスで印刷。

var myPrintJob:PrintJob    = new PrintJob();

if (myPrintJob.start()) {

try {

myPrintJob.addPage(html_gamen);

myPrintJob.send();

}

catch(e:Error) {

//エラー処理

}

}

・URLLoader でインターネット上の JPEG 画像を取得。

・取得した JPEG 画像データを Loader でロードして BMP データに変換。

　（ロードが成功したら、bmp:Bitmap オブジェクトにデータをセット）

var uicomponent:UIComponent = new UIComponent();

var myPrintJob:PrintJob    = new PrintJob();

if (myPrintJob.start()) {

try {

// プリンタから渡される印刷可能サイズで bmp オブジェクトをリサイズ

bmp.height = myPrintJob.pageHeight;

bmp.width = myPrintJob.pageWidth;

uicomponent.addChild(bmp);

// addElement(uicomponent); // 今回は表示はしない（印刷用）

myPrintJob.addPage(uicomponent);

myPrintJob.send();

}

catch(e:Error) {

//エラー処理

}

}

Windows Flash Player 11.1 ActiveX control content debugger (for IE)

C:\Windows\System32\Macromed\Flash\Flash64_11_1_102.ocx

• Internet Explorer 9 なら問題ないが、8 や 7 だと Flash Player の自動インストールに失敗することがある。（もちろん、手動でダウンロードしてインストールすれば全然問題無い）
• Mac OS X 10.6 以下だと、Flash Player 11.1.0 がインストール出来ない。OS が古いと怒られるらしい。（10.6.8 とかはOK）

1. FB4 の <s><fx> タグは、FB3 では <mx> タグに変更。（例：<s:Application>→<mx:Application>、<fx:Script>→<mx:Script> 等
2. FB3 では、オブジェクトをスライドさせた時など、標準でスクロールバーが表示されてしまうので、<mx:Application>タグに、horizontalScrollPolicy="off" verticalScrollPolicy="off" を追加。
3. FB4 にあって FB3 にない、verticalAlign や chromeColor 等のプロパティを削除。
4. FB4 では、SWF ファイルへのリンクが貼られた HTML ファイルからの相対パスとなるが、FB3　の場合は自分（SWFファイル）が置かれた場所からの相対パスになるので、プログラム中のパスの記述や、SWF ファイルの設置場所に注意が必要。

Flash で、<mx:Image>タグで貼り付けた画像ファイルがちゃんと読み込まれたかの判定がしたい。

つまり、

<mx:Image x="10" y="10" id="image1" width="100" source="img/1.jpg" />

みたいに指定してた時、img フォルダの下に 1.jpg が無かったら（読み込めなかったら）任意の処理をしたいというわけだ。

例えば URLLoader を使ってデータを読み込んでくれば、失敗したかどうかはすぐに取れるんだけど、今回は <mx:Image> タグを使うのが必須条件。

で、最初は、データが読み込まれなければ（当然「空の画像」なわけだから）画像の横幅が取れないんじゃないかと思って、 image1.content.width の値を取ってみたんだけど、画像ファイルが読み込めなかった時も、14って値返してくるな・・・
どうも、ファイルが読めなかった時に表示される「壊れ画像アイコン」の幅を取ってきているようだ(^^;

さて、どうしようかなっと思ってググってたら、

obj = image1.getChildAt(0) as FlexLoader;

のようにして、Imageコントロールの子オブジェクトを取得しようとすれば、画像が読み込めてない時は NULL 値が返ってくるような記述を見つけた。

そこで、

var obj:FlexLoader  = image1.getChildAt(0) as FlexLoader;
if (obj == null) { // 読み込まれてない！
    ...いろいろな処理
}

という処理を書いてみたのだが、どうも上手く行く場合と行かない場合がある。
5つくらいの画像でこういう処理をやるのだが、5つの内、2つの画像ファイルが存在していない時、最初の（本来は存在していない）画像のみ NULL が返ってこないのだ。（2つ目の非存在画像ではちゃんと NULL が返ってくる）

何か、タイミングの問題なのかなと思い、メインウィンドウが表示される時の、creationComplete イベントで処理を起動していたのを、updateComplete イベントで起動するようにしたら上手くいったようだ・・・もう少しテストしてみんとタイミングの問題なんで何とも言えんが、今のところは上手くいってるみたい。

この調査及びプログラムの修正だけで半日を潰してしまった。よもや、こんなにハマるとは思わず、この処理はまったく工数見積してなかったのに・・・がっくり(;_;

しかし、creationComplete イベントの説明見ると、「コンポーネントの構築、プロパティ処理、測定、レイアウト、および描画が完了したときに送出されます。」って書いてあるんで、全ての画像ファイルを読み込んだ後で起動される・・・と判断していたのだが、何か違うのね・・・(^^;
updateComplete イベントもプログラム起動時に起動されるとは知らなかった。

なんか、イベント駆動型のプログラミングって、この辺の処理タイミングとかでハマること多いよなあ・・・(^^;