Rest Term » tips

CSSの解釈について

wellflat — Wed, 05 May 2010 14:16:58 +0000

業務の合間に制作部の社内勉強会にちょこちょこ参加していろいろ学んだのでメモ。
ここではCSSの最適化について。

* ブラウザはCSSをどう解釈している？
ルールを照合するとき、右端のセレクタから調べ始めて、順に左のセレクタを調べていく。

ということは、
[css]
#contents > li { font-weight: bold; }
[/css]
のようなルールの場合「contents という id を持つ要素を探して、その直接の子要素が li 要素かどうかを調べる」ではなく「すべての li 要素について、その直接の親要素が contents という id を持つかを調べる」となり高コストです。子孫セレクタの場合はさらに高くつき、
[css]
#contents a { color: #0099ff; }
[/css]
のようなルールの場合「すべての a 要素について、contents という id を持つ祖先要素をツリー構造をさかのぼって探す」ということになります。子供セレクタであれば1つ上の階層のノードだけ調べれば済みますが、子孫セレクタの場合はさらにさかのぼって探索しなければなりません。Win IE6対応を無視してもいいなら、子孫セレクタから子供セレクタに置き換えた方がいいです。ただ、その子供セレクタも高コストには違いないので、それを1つの class に置き換えます。
[css]
#contents > li > a { font-weight: bold; }
[/css]
ではなく
[css]
.list-anchor { font-weight: bold; }
[/css]
のように要素と関連づけた名前で class を作ってスタイルを適用させることで、探索時間をさらに短くすることができます。

* ユニバーサルセレクタについて
[css]
* { margin: 0; padding: 0; }
[/css]
一時期よく使われていたユニバーサルセレクタは最近では見かけなくなりました。社内の制作さんは、「パフォーマンスが悪くなる」という点よりも「ブラウザのデフォルトのスタイルを活かす」という点の方を重視しているみたいでしたが、ここまで述べてきた内容からパフォーマンスも相当悪くなるのは明らかです。その点について stevesouders.com さんが検証していました。
CSS Selectors: Universal
上述の子供セレクタや子孫セレクタによる読み込み時間の違いは小さなものですが、ユニバーサルセレクタを使用した場合はケタ違いに読み込みが遅くなっています。

* リフロー時間について
ブラウザがスタイルを適用し要素をレイアウトするのにかかる時間をリフロー時間と呼ぶそうです。スタイルの適用はページの読み込み時のみとは限りません。というのは、最近のWebサイトはJavascriptを多用していて、リッチな表現を行うためにDOM要素の style プロパティを頻繁に書き換えている例が多く見られます。
[javascript]
document.getElementById(“id”).style.property=”value”
// 例
document.getElementById(“contents”).style.fontSize = “larger”;

// 実際は上記のような処理がラップされたjQueryなどのライブラリを利用している場合が多い
// 制作工数とパフォーマンスのバランスを考えて使う
$(“#contents”).css(“border”, “1px solid #333333″);
[/javascript]
style プロパティを書き換えるとブラウザはその度にルールを照合しなおしています。もし、DOM要素が body などの多くの子孫を持つ要素の場合、効率の悪いセレクタがあるとページの反応が遅くなってしまいます。ページの読み込み時だけでなくWebアプリケーションがユーザと情報をやりとりしている間の動作に及ぶ影響にも注意することが重要です。

参加したのは新卒向けの勉強会だったので得られたのはこの程度の内容ですが、通常業務でも制作さんといっしょに仕事する機会ができたので、もう少し深い部分も聞いてみたいと思います。

Vector複製時のfixed

wellflat — Fri, 27 Feb 2009 09:58:30 +0000

もしかして既によく知られていることなのかもしれませんが；

[as]
var vector1:Vector. = new Vector.(256, true);
・・・
var vector2:Vector. = vector1.concat(); // vector1を複製
trace(vector1.fixed, vector1.length);
trace(vector2.fixed, vector2.length);
[/as]
・出力結果

true 256
false 256

vector1はpop()やpush()をするとRangeErrorとなりますが、vector2はエラーがでません。
これはconcat()だけでなくslice()で複製した場合も同じで、要素のみコピーされるようです。
長さを固定したい場合は vector2.fixed = true; っていちいち書かないといけないのかな。

＜追記＞
kenさんのご指摘よりグローバル関数を使ってみると、、
[as]
var vector1:Vector. = new Vector.(256, true);
・・・
var vector2:Vector. = Vector.(vector1); // vector1を複製
trace(vector1.fixed, vector1.length);
trace(vector2.fixed, vector2.length);
[/as]
・出力結果

true 256
true 256

trueになりました。kenさんに感謝！

ちなみにconcat()よりVector()で複製した方がどうやら高速のようで、
データ数が256個程度だと差は出ませんが、2^20個で試してみると40msほど違いました。
よって、Vectorを複製したい時はグローバル関数の Vector() を使うといいです。

enhance Flex Builder

wellflat — Fri, 05 Dec 2008 13:03:19 +0000

EclipseでのFlex開発をより便利にしたい。

きっかけはThe Flash Blogのエントリーです。
New tutorial on customizing Flex Builder
More Snip Tree View features!
FlashTest Eclipse Plugin Alpha
Pimp My Eclipse – Part 1
Pimp My Eclipse – Part 2
Pimp My Eclipse – Part 3

Eclipse起動時のスプラッシュも自分で描くというUIへの強いこだわりが感じられます。
最初は読み流してましたが、途中から記事がパート化して評判も良いようなので僕も試してみようと。

まず手始めに、TextMateに似た強力なスニペット機能をEclipseに追加します。
環境はEclipse 3.4.1(Pleiadesで日本語化済み)、Flex Builder Plugin 3.0.2。

基本的にgotoandlearn.com – Customizing Flex Builder for Flashの通りに進めていけば問題ありません。
[ヘルプ] > [ソフトウェア更新] > [サイトの追加] から、

http://www.cfeclipse.org/update

を追加、CFEclipseをダウンロード・インストールします。
それとLeeさんが拡張プラグインを作られたようなのでPimp My Eclipse – Part 3からそれも併せてダウンロード。
TheFlashBlog_1.0.0フォルダをEclipseのpluginsフォルダに入れてEclipseを再起動します。

再起動したら、[ウィンドウ] > [ビューの表示] から、CFML > Snip Tree Viewを選択します。

上のようなツリービューが出てきます。(上の画像はスニペットをいくつか追加したツリー)
ここから＋ボタンを押してスニペットを作成していきます。
例として以下のようなスニペットを作ります。

エディタで ef (Trigger textで指定)とタイプしてShift + Spaceを押します。すると、
addEventListener(Event.ENTER_FRAME, );
と入力されます。また、入力後のカーソル位置はSnippet starting blockの後ろになります。
さらに置換機能も使うことができます。以下のように $${} 構文で指定します。

エディタで、pbe とタイプしてShift + Spaceを押すと以下のようなダイアログが表れます。

Pleiadesが強力すぎて”Class Name”が”クラス名”に翻訳されてますね、、ここは英語のままでいいのに；
URLをfilter.pbj、クラス名をmyFilterとすると、
[Embed(source="filter.pbj", mimeType="application/octet-stream"])
private myFilter:Class;
と入力されます。

ショートカットはデフォルトでShift+Spaceですが変更することもできます。
[ウィンドウ] > [設定] > [一般] > [キー] から”snip”で検索すると、
Insert Snippet というのが見つかるのでここで変更します。

CFEclipseをインストールするとツールバーにたくさんアイコンが出来てしまいます。
これらを消したい場合は、[パースペクティブのカスタマイズ]からCFEclipseのチェックを外せばOK。
元通りすっきりしたUIになりました。

コード補完に関してはEclipse Monkeyを利用してさらに便利に拡張することが可能なようです。
こちらもまた試していきたいと思います。

efficient as3 part2

wellflat — Sat, 08 Nov 2008 09:32:23 +0000

efficient as3の続きのエントリです。

Tips on how to write efficient AS3 – part 2の簡単な意訳。

Array push vs. Array index
pushを使ってはいけない。値をセットする時はlist[list.length] = data;のようにしよう。配列の長さは外部変数に保存して、要素を追加/削除した時はその変数をインクリメント/デクリメント。

//コメント欄でのBlizzさんの指摘：list[list.length - 1] = data;だよね？
//返事：Blizzが正しいよ。ありがとう！

Array emptying – length 0 vs. A new Array
配列を空にするにはlengthプロパティを0にするのが、新しく配列を生成する必要もなくてかつメモリも節約できて良い方法だと考えるかもしれない。でもそれは(ほとんどのケースで)速くないよ。lengthプロパティを使って速くなるのは、一度に510個以上の配列をクリアする必要がある時だ。

Var declarations on multiple lines vs. Var declarations on a single line
数個の変数を宣言する時は、一行で書いた方が少しだけ効率的だよ。

var a:int=0, b:int=0, c:int=0;
vs.
var a:int=0;
var b:int=0;
var c:int=0;

※この項目については、コメント欄や外部リンクにてバイトコードやメモリ使用量にまで話が及んだ熱いやり取りが行われていました。追いかけて読んでみると楽しいです。

Using Xor to swap variables
値を交換する時に3つ目の変数を作りたくない時は、

a = a^b;
b = a^b;
a = a^b;

のようにすると、

var oldB:int = b;
b = a;
a = oldB;

よりも300%ほど速くなるよ。

Multiplication vs. Division
割り算より掛け算の方が約130%速いよ。5000/1000 より 5000*0.001。

Type casting comparison
型をキャストする時はasを使った方がType(item)よりも250%速いよ。でもどちらも使わなければ1400%ほど速くてビビった。

Long vs Short variable names
この項目は論争の余地がある。なぜならこれを実践すると可読性の低いコードになるからね。短い変数は1つのループ内で1000回反復して1ミリ秒速くなる程度。でも僕はこれがコード最適化の最後の切り札だと考えてるよ。

※この元の記事ではコメント欄も併せて読むといいと思います。

ちなみに最初の項目は僕も試してみました。
ヒルベルト曲線のクラスでは、drawPath()を使うためにVectorにひたすら値をpushしてましたが、

data.push(pt.x + dx);
data.push(pt.y + dy);
       ↓↓↓
data[iter++] = pt.x + dx;
data[iter++] = pt.y + dy;

のように変更して10次のヒルベルト曲線を書いてみると、

・data.push()：2142ms
・data[iter++]：1837ms

となり少し高速化しました。(関連：Hilbert Curve – Flex(AS3.0))
とりあえず参考までに。

ObjectUtil.getClassInfo – Flex

wellflat — Tue, 04 Nov 2008 10:55:25 +0000

ActionScriptでクラスの情報を得るには、flash.utils.describeTypeメソッドを使いますが、Flexの場合だと、mx.utils.ObjectUtilのgetClassInfoメソッドでも簡易情報を取得できます。

前回のヒルベルト曲線のクラスをdescribeTypeとObjectUtil.getClassInfoの2つのメソッドでクラス情報を取得してみると、

・describeType()

・ObjectUtil.getClassInfo()

(Object)#0
  alias = ""
  dynamic = false
  metadata = (null)
  name = "Hilbert"
  properties = (Array)#1
    [0] (QName)#2
      localName = "accessibilityProperties"
      uri = ""
    [1] (QName)#3
      localName = "alpha"
      uri = ""
    [2] (QName)#4
      localName = "blendMode"
      uri = ""
    [3] (QName)#5
      localName = "cacheAsBitmap"
      uri = ""
    [4] (QName)#6
      localName = "filters"
      uri = ""
    [5] (QName)#7
      localName = "graphics"
      uri = ""
    [6] (QName)#8
      localName = "height"
      uri = ""
    [7] (QName)#9
      localName = "loaderInfo"
      uri = ""
    [8] (QName)#10
      localName = "mask"
      uri = ""
    [9] (QName)#11
      localName = "mouseX"
      uri = ""
    [10] (QName)#12
      localName = "mouseY"
      uri = ""
    [11] (QName)#13
      localName = "name"
      uri = ""
    [12] (QName)#14
      localName = "opaqueBackground"
      uri = ""
    [13] (QName)#15
      localName = "parent"
      uri = ""
    [14] (QName)#16
      localName = "root"
      uri = ""
    [15] (QName)#17
      localName = "rotation"
      uri = ""
    [16] (QName)#18
      localName = "rotationX"
      uri = ""
    [17] (QName)#19
      localName = "rotationY"
      uri = ""
    [18] (QName)#20
      localName = "rotationZ"
      uri = ""
    [19] (QName)#21
      localName = "scale9Grid"
      uri = ""
    [20] (QName)#22
      localName = "scaleX"
      uri = ""
    [21] (QName)#23
      localName = "scaleY"
      uri = ""
    [22] (QName)#24
      localName = "scaleZ"
      uri = ""
    [23] (QName)#25
      localName = "scrollRect"
      uri = ""
    [24] (QName)#26
      localName = "stage"
      uri = ""
    [25] (QName)#27
      localName = "transform"
      uri = ""
    [26] (QName)#28
      localName = "visible"
      uri = ""
    [27] (QName)#29
      localName = "width"
      uri = ""
    [28] (QName)#30
      localName = "x"
      uri = ""
    [29] (QName)#31
      localName = "y"
      uri = ""
    [30] (QName)#32
      localName = "z"
      uri = ""

どうやらgetClassInfo()ではパブリックプロパティのQNameが返ってくるようです。
AS3.0の場合だとE4Xがあるので、describeType()の方がまだ使えますね。
getClassInfo()の方はどういうときに便利に利用できるのか思いつきません。。

Binding – Flex

wellflat — Sat, 27 Sep 2008 19:25:37 +0000

Flexのバインディングで試したこと。記事にするほどのことじゃないんですけど。

TextInputの内容を相互にバインディングしたら無限ループする、、わけないよなぁと思って書いてみたらやっぱりしませんでしたという話。

2つのテキストインプットそれぞれに文字を入れてみてください↓

ソースが変更されたときに1回だけトリガされるんですね。
こんな所で開発者が無限ループの心配する必要はなく、そこはFlexがちゃんとやってくれると。
親切。

SWFの複製 – Flex

wellflat — Sat, 06 Sep 2008 08:15:24 +0000

Loaderクラスを使って外部SWFをロードするサンプルはたくさんありますが、今回はLoaderとByteArrayを利用してStageにロード済みのSWFを複製します。

ここで肝になるのはLoaderInfoクラスです。

LoaderInfo クラスは、ロードされる SWF ファイルやイメージファイル (JPEG、GIF、PNG ファイルなど) に関する情報を提供します。LoaderInfo オブジェクトは、すべての表示オブジェクトで使用できます。提供される情報には、ロードの進行状況、ロードする側とロードされたコンテンツの URL、メディアの総バイト数、メディアの規格高さと幅などが含まれます。

複製の手順は以下の通りです。
1. DisplayObject(SWFやロードされたImage)のloaderInfoプロパティからバイト情報を取得(ByteArrayに格納)
2. Loader.loadBytes()でそのバイト情報を読み込む
3. LoaderオブジェクトのcontentLoaderInfoプロパティにアクセスしてロード状況を監視
4. ロードが完了したらLoaderをaddChild

バイト情報を取得するには、loaderInfo.bytesで取得できます。
ただし、FlashPlayerのバージョンが9.0.115.0からじゃないと使えないので注意！
Flex2のリファレンスには載ってませんでした。なのでFlex3.0以降で。

下の図にもあるように、LoaderInfoオブジェクトは、ロードされたオブジェクトファイルとロードした Loader オブジェクト間で共有されているようです。

ロードされたSWFの複製をFlexで行う場合の例を以下に示します。

Imageコンポーネント(Img)にロードされたSWFを別のImageコンポーネント内(DupImg)に複製

(Flashが表示されない場合はこちら→duplicate.swf)

ArrayUtil (as3corelib)

wellflat — Fri, 05 Sep 2008 10:28:36 +0000

as3corelibのArrayUtilクラスの使い方。
メソッドは5つしかなく使い方も簡単なので紹介程度に。

1つめ。配列(arr)内にある値(value)が含まれているかを調べるメソッド。

public static arrayContainsValue(arr:Array,value:Object):Boolean

2つめ。2つの配列(arr1とarr2)が等しいか調べるメソッド。

public static function arraysAreEqual(arr1:Array, arr2:Array):Boolean

3つめ。配列をコピーするメソッド。

public static function copyArray(arr:Array):Array

例）

private var arr:Array = [1,2,3,4,5];
private var copyArr:Array = [];
copyArr = ArrayUtil.copyArray(arr);
trace(copyArr);

//出力結果
1,2,3,4,5

4つめ。要素の重複を許さずに配列をコピーするメソッド。

public static function createUniqueCopy(a:Array):Array

例）

private var arr:Array = [1,1,2,2,3,4,5];
private var uniqueCopyArr:Array = [];
uniqueCopyArr = ArrayUtil.createUniqueCopy(arr);
trace(uniqueCopyArr);

//出力結果
1,2,3,4,5

5つめ。配列(arr)から要素(value)を削除するメソッド。

public static function removeValueFromArray(arr:Array, value:Object):void

この５つだけです。
ArrayUtilのソースを見てもらえればわかりますが、実際に行っている処理はとても簡単で、
arrayContainsValueとcopyArrayに至っては中身はたった１行です。
copyArrayはslice()を使っているようだけど、concat()に変えると少し速くなりそう。
corelibを使わなくても自分でこれ相当のクラスを作っている人もたくさんいるでしょうね。

com.adobe.utils.にはArrayUtilの他にも7つのクラスがあります。
DateUtilクラスは結構大きなクラスなので読むのがちょっと大変；
DateUtil、StringUtil、XMLUtilなどは便利そうなので機会があればまた紹介したいと思います。　

関連記事
配列コピー – ActionScript

fl.* Package.swc

wellflat — Thu, 04 Sep 2008 17:07:08 +0000

Flash CS3は持ってないけど、Flexでもfl.motionなどのflパッケージを使いたい時がたまにあります。
以下のサイトでfl.swcが配布されています。
Downloads | EVOLVE

以前、別のサイトでもswcで配布されてたんですけど、そのサイトが閉鎖されてて困っていました；

Flexで使うには、flex_sdk/frameworks/libsにfl.swcを置くだけでOK。

どうやらちゃんと使えるようです。

二十四節気

wellflat — Fri, 15 Aug 2008 14:40:13 +0000

カレンダーを作る際、閏(うるう)年の判定プログラムはよく話題に挙げられます。
年が100の倍数のときは400で割れる年、100の倍数でないときは4で割り切れる年ってやつですね。

今回はもう少しややこしい二十四節気(にじゅうしせっき)の判定プログラムです。
祝日の春分・秋分を含む二十四節気は、日付が固定されてるわけではなく計算式で求められます。
二十四節気 – Wikipediaによると、
「1太陽年を日数（平気法）あるいは太陽の黄道上の視位置（定気法）によって24等分し、その分割点を含む日に季節を表す名称を付したもの」
とあります。
360度を24で割ると15度。
視太陽黄経が15度の倍数になる瞬間、日常的にはそれを含む「日」を二十四節気とします。
計算式は以下のサイトで説明されています。
二十四節気の略算式
[日] ＝ＩＮＴ(Ｄ＋ (Ａ × (Ｙ – １９００)) – ＩＮＴ((Ｙ – １９００) ÷ ４))

この二十四節気を求めるプログラム例として、
1月の小寒から12月の冬至までの各パラメータ(dおよびa)の配列(結合配列の配列)を用意します。
(ここではActionScriptで書いています)


private const param:Array = [ { d:6.3811, a:0.242778 }, { d:21.1046, a:0.242765 }, { d:4.8693, a:0.242713 }, { d:19.7062, a:0.242627 }, { d:6.3968, a:0.242512 }, { d:21.4471, a:0.242377 }, { d:5.6280, a:0.242231 }, { d:20.9375, a:0.242083 }, { d:6.3771, a:0.241945 }, { d:21.9300, a:0.241825 }, { d:6.5733, a:0.241731 }, { d:22.2747, a:0.241669 }, { d:8.0091, a:0.241642 }, { d:23.7317, a:0.241654 }, { d:8.4102, a:0.241703 }, { d:24.0125, a:0.241786 }, { d:8.5186, a:0.241898 }, { d:23.8896, a:0.242032 }, { d:9.1414, a:0.242179 }, { d:24.2487, a:0.242328 }, { d:8.2396, a:0.242469 }, { d:23.1189, a:0.242592 }, { d:7.9152, a:0.242689 }, { d:22.6587, a:0.242752 } ];

あとは以下のような日付を計算する関数を作り、各引数を変えて使うだけです。


private function calculateDate(y:int, d:Number, a:Number):int {
  return d + a * (y - 1900) - Math.floor((y - 1900) / 4);    //yは年(西暦)
}

ここで気を付けることは、小寒から雨水までの4つは年(y)から1引いておくことです。
(2008年ならyには2007を使用する)


/* day(Array)に小寒から冬至までの日付を格納, yearは任意の年 */

var day:Array = [];
var len:int = param.length;
var year:int = int(YearInput.text);    //YearInputはmx:TextInput
for (var i:int = 0; i < len; i++) {
  if (i < 4) day.push(calculateDate(year-1, param[i].d, param[i].a));
  else day.push(calculateDate(year, param[i].d, param[i].a));
}

これらを使ってFlexのDataGridに二十四節気を表示させました。
(Flashが表示されてない人はこちらから→season.swf)
フォームに年を西暦で入力してください。(1870～2099年まで, 精度は0.03日程度)
また、DataGridの各行をクリックすると各節気の暦便覧も見れます。

これ以外にも、土用や節分などの雑節もあります。
さらに六曜や干支なども考慮すると、まともな暦を作るのは結構たいへんそうですね;;

配列コピー – ActionScript

wellflat — Fri, 08 Aug 2008 10:52:36 +0000

ActionScriptで配列とかディープコピーするのはどんな方法が一般的なんだろうと思って調べてました。
今回は、僕のようなAS初級者向けの内容です。

以下のエントリーでByteArrayを使ってオブジェクトをディープコピーする例がありました。
ActionScriptでディープコピー
おぉ、けっこう簡単。後追いですが僕も検証してみました。

var list:Array = [0,1,2,3];

var ba:ByteArray = new ByteArray();
ba.writeObject(list);
ba.position = 0;
var copy:Array = ba.readObject();  

trace(copy);
copy[2] = 4;
trace(copy);
trace(list);

//出力結果
0,1,2,3
0,1,4,3
0,1,2,3

うん、できてる。
次は100万個の要素をfor文でガリガリコピーしたものと速度比較。

var list:Array = new Array();
for(var i:int = 0; i < 1000000; i++) list.push(Math.random());
trace("List of "+list.length+" elements.");

//for
var ts1:Number = getTimer();
var copy1:Array = new Array();
for(var j:int = 0; j < list.length; j++) copy1.push( list[j] );
var te1:Number = getTimer();
trace("for(): "+(te1-ts1)+"ms");

//ByteArray
var ts2:Number = getTimer();
var ba:ByteArray = new ByteArray();
ba.writeObject(list);
ba.position = 0;
var copy2:Array = ba.readObject();
var te2:Number = getTimer();
trace("ByteArray: "+(te2-ts2)+"ms");

//出力結果
List of 1000000 elements.
for(): 363ms
ByteArray: 464ms

あれ。forの方が早い。ループ処理を最適化してさらに検証。

//最適化前
var ts1:Number = getTimer();
var copy1:Array = new Array();
for(var j:int = 0; j < list.length; j++) copy1.push(list[j]);
var te1:Number = getTimer();
trace("for(): "+(te1-ts1)+"ms");

//最適化後
var ts1:Number = getTimer();
var copy1:Array = new Array();
var len:int = list.length;
for(var j:int = 0; j < len; j++) copy1[j] = list[j];
var te1:Number = getTimer();
trace("for(): "+(te1-ts1)+"ms");

//出力結果
List of 1000000 elements.
for(): 217ms
ByteArray: 468ms

ByteArrayで配列コピーすると遅いってことでいいのか。
ただ、100万個も要素コピーすることなんてまずないと思いますけど；
ここで、変数に配列名(copy1 = list)を代入すると配列のシャローコピー(浅いコピー)になりますが、
ループで要素を１つずつ入れてやれば(copy1[j] = list[j])ディープコピーができます。
C言語でも「配列名はアドレス」って大学生の時にしつこく教えられた記憶があります。

また、配列のコピーならArray.concat()、Array.slice()を使っても出来ます。

//slice()
var ts1:Number = getTimer();
var copy1:Array = list.slice(0, list.length);
var te1:Number = getTimer();
trace("slice(): "+(te1-ts1)+"ms");

//concat()
var ts2:Number = getTimer();
var copy2:Array = list.concat();
var te2:Number = getTimer();
trace("concat(): "+(te2-ts2)+"ms");

//出力結果
slice(): 46ms
concat(): 32ms

concat。速い。
なんか時間をムダにした気がする。。。。

カスタムエフェクト – Flex

wellflat — Tue, 22 Jul 2008 18:27:22 +0000

Flexでカスタムエフェクトを作成するには、いろいろ細かい決まり事を守る必要があります。

各エフェクトはファクトリクラスとインスタンスクラスの2つのクラスによって表現されます。
なので、カスタムエフェクトを作るにはファクトリクラスとインスタンスクラスの2つを作る必要があります。

[ファクトリクラスを作成する]
1. mx.effects.Effect クラスのサブクラスを作成
or
2. mx.effects.Effect クラスのいずれかのサブクラスのサブクラスを作成
ファクトリクラスは、インスタンスクラスのオブジェクトを作成し、そのターゲットオブジェクト上でエフェクトを実行します。

[インスタンスクラスを作成]
1. mx.effects.EffectInstance クラスのサブクラスを作成
or
2. mx.effects.EffectInstance クラスのいずれかのサブクラスのサブクラスを作成
インスタンスクラスは、エフェクトロジックを実装します。

少し長くなるので、エフェクトクラスの実装は続きで..

エフェクトクラスの実装

エフェクトクラスの一部のメソッドとプロパティをオーバーライドします。
また、作成するエフェクトのタイプに応じて、追加のプロパティとメソッドをオーバーライドすることもできます。
ここではカスタムエフェクトを作るのに必要なオーバーライド必須のメソッド・プロパティだけ挙げておきます。
ファクトリメソッド / プロパティ
コンストラクタ
Effect.initInstance() (ファクトリクラスのプロパティをインスタンスクラスにコピー)
Effect.getAffectedProperties() (エフェクトによって変更されるターゲットオブジェクトのプロパティのストリング配列を返す)
Effect.instanceClass (エフェクトクラスのインスタンスクラスの名前を指定する Class タイプのオブジェクト)

インスタンスメソッド / プロパティ
コンストラクタ
EffectInstance.play() (エフェクト呼び出し。オーバーライド内から super.play();)
TweenEffectInstance.onTweenUpdate() (トゥイーンエフェクトを実装するために一定の時間間隔で呼び出されるコールバックメソッド)

これらのメソッド・プロパティをオーバーライドしたクラスを作ればカスタムエフェクトが作れます。
トゥイーンエフェクトを使ったカスタムエフェクトの例は、adobeのlivedocsを見るといいです。
トゥイーンエフェクトについて

ファクトリクラスでは、instanceClassプロパティにインスタンスクラス名を指定し、initInstance()でパラメータをインスタンスクラスにコピーしてるだけです。
インスタンスクラスでは、play()、onTweenUpdate()、onTweenEnd()をオーバーライドしていて、このクラスのコンストラクタではcreateTween()によってTweenオブジェクトを作っています。
このTween オブジェクトは、一定の時間間隔でonTweenUpdate()を呼び出し、開始値と終了値の間の補間値をコールバックメソッドに渡します。
livedocsの例ではターゲットのrotationプロパティを変更して単純に回転させていますが、alpha、scaleX、scaleYなども当然扱えます。
また、エフェクトを適用できるのはターゲットオブジェクトに限った話ではありません。
ターゲットとなるオブジェクトをコピーしたUIComponentをかぶせてそれを操作してやれば、オリジナルのターゲット自体は変化させず、それをコピーしたUIComponentだけにエフェクトをかけることもできます。
トゥイーンを使ったエフェクトで肝になるのは、onTweenUpdateメソッドでどんな処理をさせるかですね。

メモリ管理 – Flex

wellflat — Sun, 20 Jul 2008 14:28:08 +0000

FlashでもFlexでもメモリリークには気をつけないといけません。
Flex Builderなら強力なプロファイラがあるからいいけど、
FlashDevelopとかでFlexアプリを作る場合の、メモリ使用量の監視と強制GCを行うコード。

System.totalMemoryはFlashPlayerのメモリ使用量、
System.gc()でガベージコレクションプロセスを強制します。(デバッグ版FlashPlayerのみ)

FlashDevelopでこれをスニペット化するには、
[Tools] → [General Tools] → [Snippet Editor] → [xml]
で上のコードを”TrackMemory”とか好きな名前で登録しとくと便利です。
このコードスニペットを使うにはエディタ上でCtrl+Bで選択するだけ。簡単。

ただ、今はFlex Builderのプロファイラが強力すぎてもう手放せない状況です；

Vista豆知識

wellflat — Tue, 30 Oct 2007 20:41:22 +0000

フォルダ上にカーソルを合わせてShiftを押しながら右クリックすると、
「コマンドウィンドウをここで開く」
っていう項目が出現する。
これはコマンドプロンプトをそのフォルダのパスで開いてくれる。
地味に便利。いちいちcdコマンドで移動しなくてすむ。
XPだと「窓の手」とか使えばできたけど、Vistaだと標準でついてる機能。
知らなかった。。