F-site 発表資料

先日 (2/23) の F-site にお越しくださった皆様、ありがとうございました。
それなりに支度したつもりではありましたが、プレゼンについては、不手際や反省すべき点が多々あったと思います。申し訳ありません。

お詫びに…というわけではありませんが、Flex のソースを含めた発表資料を公開します。
下記 URL をご覧ください。

スライド [*1]
http://labs.taiga.jp/presentationMaterial/F-site/fsite023demo01/slide/

スライド(ソース) [*1]
http://labs.taiga.jp/presentationMaterial/F-site/fsite023demo01/slide/srcview/

野中先生ペンギン サンプル
http://labs.taiga.jp/presentationMaterial/F-site/fsite023demo01/penguinSample/

野中先生ペンギン サンプル(ソース)
http://labs.taiga.jp/presentationMaterial/F-site/fsite023demo01/penguinSample/srcview/

設計書サンプル
http://labs.taiga.jp/presentationMaterial/F-site/fsite023demo01/sampleDesignSpecifications.zip

*1
会場でご覧いただいたスライドと、フォントが異なります。
ご了承ください。

mx.states と戯れる #01

個人的な思いこみではありますが、ステートに馴染めないというか嫌いな方が多いのではないかと思い、回数を分けてまとめることにしました。もちろん MXML を使用しない方針で進めていきたいと思います。

今回は、まず基本説明から

  • UIComponent クラスには、states という配列プロパティが用意されており、この配列プロパティに対してステート情報( State クラスのインスタンス)を定義(追加)します。
  • ステート情報は、UIComponent クラスを継承しているアプリケーション/コンポーネントクラスのルート (this) に対して定義(追加)できます。
public function RootMXMLClass()
{
    …
    this.states = [StateInstanceA, StateInstanceB, StateInstanceC, … ];
}
  • ステート情報の内容は、State.overrides という配列プロパティに定義(追加)します。
  • State.overrides プロパティには、AddChild, RemoveChild などの mx.states パッケージクラスのインスタンスを定義(追加)することができます。( State, Transition クラスを除く)
  • State.name プロパティで定義した名前が RootMXMLClass.currentSate プロパティで利用されます。
public function RootMXMLClass()
{
    …
    var lState    :State    = new State();
    var lAddChild :AddChild = new AddChild();
    var lButton   :Button   = new Button();
    …
    lAddChild.target = lButton;
    lState.name = 'hoge';
    lState.overrides = [lAddChild, … ];
    this.states = [lState, … ];
}

以上のポイントさえ抑えてしまえば、AS で書いた方が可読性が高まり(個人的な意見ですが)、動的なステートが作成可能になるというメリットがオマケで付いてきます。 ただし、デザイナーと分業するようなプロジェクトでの使用はオススメできないという欠点もあるので、注意が必要です。(デザインビューでステートの確認ができなくなるため)

[告知] F-site で喋ります

来月の 2/23 (土)に行われる F-site セミナーで、Flex アプリの設計について喋ることになりました。

話の具体的な内容はまだ決めかねていますが、今回は Producer & Director 向けの回ということで、マニアックな話は控えめにして、設計の概要説明と、簡単な MXML+AS コーディングのデモでもできればと、考えております。

もし参加される方で、聞きたい話などの要望がありましたら、この記事のコメントなりメール (contact[a]taiga.jp) なりに、軽くリクエストでも投げていただけると幸いです。(何でも答えられるわけではありませんが、可能な範囲で盛り込みたいと思います)

興味のある方は、下記 URL よりお申し込みください。
http://f-site.org/articles/2008/01/23174140.html

JVM 指定の罠

Flex Builder の話です。
Flex Builder は、デフォルトのとき付属の JRE1.4 の JVM 上で実行されますが( Flex Builder 2 の場合)、使用 JVM を変更するときには注意が必要です。

JVM を変更する方法には二通りあり、設定ファイル(スタンドアロン版の場合 FlexBuilder.ini 、プラグイン版の場合 eclipse.ini )に -vm オプションを追記する方法と、FlexBuilder.exe (eclipse.exe) のショートカットを作成して、ショートカットに引数を追記して渡す方法がありますが、困ったことに、それぞれの方法で構成情報に違いが生じてしまいます

図 01. FlexBuilder.ini (eclipse.ini) ファイルで -vm を指定したとき
図 01. FlexBuilder.ini (eclipse.ini) ファイルに -vm を指定したとき
なぜか -vm が二回定義されるだけでなく、eclpise.vm がデフォルトの JVM を指しています。これは困りますね。

図 02. FlexBuilder.exe (eclipse.exe) のショートカットを作成して、引数を渡して起動したとき
図 02. FlexBuilder.exe (eclipse.exe) のショートカットを作成して、引数を渡して起動したとき
ini ファイルで設定したときと違い、eclpise.vm が指定通りに定義されています。

結論:JVM を変更する場合には、ini ファイルで設定するのではなく、ショートカットに引数を渡して設定しましょう。

参考 URL

超絶 Colin 会

Colin&taiga

先日 16 日に Adobe で行われた ASer の集まりに行ってきました。
懇親会の 2 次会が翌朝の 4 時ごろまで行われたのですが、最後までしっかり居座り、飲んだり言いたい放題したり、とても有意義に過ごせました。

関連 URL

RadioButtonGroup のキーフォーカス対策

RadioButtonGroup をラップしたカスタムコンポーネントを、同一画面で複数回再利用するとき、ちょっとした工夫を施さないと、Tab キー操作によるキーフォーカス遷移が正しく機能しません。

どうやら RadioButtonGroup の id プロパティは、オブジェクトの階層とは関係なく、アプリケーション内において一意の名前でなければならない(重複してはいけない)ようです。

しかも RadioButtonGroup はなかなかの曲者で、id プロパティを定義する場合、MXML タグに直接書くことしかできません。id=”{hogehoge}”… のように、波括弧で変数を参照することすらできません。( AS では一切定義できません)

そこで、かなり強引な手段ですが、回避用のサンプルとソースを用意しましたので、下記 URL をご覧ください。

RadioButtonFocusSample (画面)
http://labs.taiga.jp/flex2/RadioButtonFocusSample/

RadioButtonFocusSample (ソース)
http://labs.taiga.jp/flex2/RadioButtonFocusSample/srcview/

簡単にポイントを箇条書きで説明します。

  • RadioButtonGroup タグは使用しません。
  • グルーピング処理は、RadioButton の groupName プロパティを使用します。
  • RadioButtonGroup のイベントを使用したい場合は、RadioButtonGroup インスタンスを作成し、groupName 定義済みの RadioButton の group プロパティを代入します。

Windows(64bit) Flash/Flex 開発環境

私のメイン作業 PC は HP のモバイルワークステーション (Compaq 8710w) なのですが、年明けに Windows XP Professional x64 Edition (DSP 版)をインストールして、環境移行しました。

システムのプロパティ

元々使用していた OS は Vista(32bit) だったのですが、移行時のちょっとしたメモを残しておきたいと思います。これから 64bit 環境に移行しようと考えている方(同業者さん)へのヒントになれば幸いです。

Eclipse, JDK

元々使っていた Eclipse フォルダごと新しい環境にコピーしましたが、今まで使用していた Eclipse プラグインがそのまま使えました。(自分がインストールしたプラグインは、エディタ拡張と SVN プラグインくらいです) ただし、Flex Builder に関しては、Eclipse フォルダ内の該当フォルダ/ファイルを手動削除するか、移行前にアンインストールして、移行先で再度インストールする必要があります。

なお、詳細は以下の通り。
Flex 2 -> Eclipse 3.2 (32bit) + JDK 1.6.0_03 (32bit)
Flex 3 -> Eclipse 3.3.1 (32bit) + JDK 1.6.0_03 (32bit)

Flash CS3

Adobe のサービスデータベースでは、『 CS3製品では、 64bit環境は動作保障の対象ではありません。32bit 環境でご利用ください。』 とアナウンスされていますが、私の環境では今のところ特に問題ありません。(「快適だ」と仰る知人も何人か…)

FlashDevelop

FlashDevelop のバージョンは 3.0.0 Beta 5、.NET Framework 2.0 は 64bit 版を使用していますが、こちらも今のところ特に問題なく動作しています。

パフォーマンス

残念ながらというか仕方ないというか、ビルド/パブリッシュのスピードが向上したという実感は、正直沸きませんでした。ただし、タブレット (intuos 3) を使用するときに限り、64bit 環境の恩恵が体感レベルで実感できます。 というのは、intuos3 のタブレットドライバには、64bit 版も用意されており、おそらくそのドライバが優秀だからだと思います。私は、Flash 上でタブレットを使うような仕事はしてませんが、Flash アニメーターな方には、ありがたい話なのではないでしょうか。

参考:

ふたつの川うるおう日記
[Windows][Java] Windows Vista 64-bit版でEclipseベースのソフトウェア対応状況

Microsoft Windows XP エキスパートゾーン
これから Windows XP Professional x64 Edition をインストールする人へ

trace() 話

ご存じの方が多いと思いますが、Flash コンテンツ内で使用している trace() の内容は、FlashTracer などのブラウザ拡張機能を使えば、簡単に丸見えになってしまいます。

Flash には、パブリッシュ(ビルド)の設定に 「 Trace アクションを省略」 という設定項目があり、この機能を使うことによって、パブリッシュ時に ActionScript のコード内にある trace() をすべて削除してから swf ファイルを生成することができます。ですが、FlexBuilder には、この機能に該当するオプションがありません。( mxmlc のオプションにもありません)

『 Flex アプリの開発では、trace() を使わない 』 という選択肢がベストなのですが、trace() を使用せざる得ない場合に、少しでもリスクを削減したいという方のために、簡単なクラスを作成しました。

package
{
    /**
     * FlexTrace.as
     * @author taiga
     * カスタム trace() クラス
     */
    public class FlexTrace
    {
        /**
         * @private
         */
        private static var mFlag:Boolean;
        /**
         * enabled
         * 書き込み専用プロパティ trace() の有効(true)/無効(false)
         */
        public static function set enabled(aFlag:Boolean):void
        {
            mFlag = aFlag;
        }
        /**
         * output
         * @param args trace() させる要素
         * enabled=true のとき、trace() を実行
         */
        public static function output(...args):void
        {
            if(!mFlag)
                return;
            var i:uint;
            var s:String = '';
            for(i = 0; i < args.length; i++)
                s += args[i].toString() + ' ';
            trace(s);
        }
    }
}

使い方ですが、適当にインポートしたあと、FlexTrace.output(‘hoge’, ‘fuga’); という具合に、trace() と同様に使うだけです。カンマ区切りで好きなだけ引数を追加できます。( ActionScript 3.0 では、… (rest) パラメータを使用することにより、任意の数のカンマ区切りのパラメータを受け入れる配列パラメータを指定できます)

あとは、FlexTrace.enabled の値を true か false に設定するだけで、trace() の使用/不使用を一括制御することができます。「 Trace アクションを省略」 のように完全にコードを削除できるわけではありませんが、緩和処置としては許せる範囲かなと思いますので、使いたい方はご自由にどうぞ。

ちなみに、私は Flex アプリ開発の仕事では、trace() を一切使用していません。

Flex 3 勉強会 第 30 回

昨日は、Flex 3 Beta 3 のポイント解説を期待していたので、BlazeDS の話題がメインで終わってしまったのが残念でした。

サーバ環境の細かい話は、Web コンテンツ屋な自分的に、あまり食指が動かないんだな…ということを再認識させられました。もちろん完全無視するわけにはいきませんが、話を聞いていて、アウェイ感を感じずにはいられませんでした。(苦笑

Adobe から頂いたおみやげ

上の写真ですが、Adobe さんからおみやげを頂きました。
2008 年度のカレンダーと、FLEX TEAM の長袖シャツです。

わーい。

暴年会 MAX 2007

昨晩、CUPPY の肉…もとい道家君主催の忘年会に参加してきました。

約 30 人の Flash 屋が集まって呑んで話して…と、なかなか有意義な時間を過ごせました。

ところで、Flash 屋の集まりに参加すると Flex 屋は少なく、逆に Flex 屋の集まりに参加すると Flash 屋が少ないという 「どこでも少数派なアウェイ感」 を感じるようになってきたのですが、たとえば実際に Flex の UIComponent のマニア話をしたくても、会話できる人ってなかなか居ないんですよね。

…というような話を、クラスメソッドの杉浦さんと話していたのですが、両刀な方は本当に少ないんでしょうか。

色々な意味で、明日の晩の FxUG 勉強会が楽しみです。