2009/05/26

Flex Applicationを自動生成 〜Balsamiq Mockups〜

手書き感いっぱいのUIモックアップ作成ソフトBalsamiq Mockupsに、もうすぐ「Generate Flex Application (WebORB)」メニューが追加されます。

これはUIモックアップを作成した後、[Help]-[Generate Flex Application (WebORB)]を選択するとユーザーインターフェースのMXMLとクライアント/サーバーの通信部分(雛形)のコード生成をしてくれる機能です。

この機能は現在、「Balsamiq Mockups Next Release Preview」で試すことができます。
http://www.balsamiq.com/products/mockups/desktop/next

自動生成されるコードは、クライアント側はMXML/ActionScript、サーバー側はJava, C#/VB.Net, PHPとなっているのでサーバー環境にあったものが利用できます。

FAQを見たところ対応しているUIコンポーネントが結構ありますね。
accordion, barchart, button, buttonbar, calendar, canvas, checkbox, colorpicker, columnchart, combobox, datagrid, datechooser, hslider, label, linechart, list, numericstepper, piechart, radiobutton, rule, tabbar, textinput, title, verticaltabbar, vslider

いくつかスクリーンショットを載せておきます。
LabelとButtonだけのシンプルなHello World Flexアプリをデザインしました。

Generate Flex Application (WebORB)メニュー

Flex Applicationの生成

Flex Applicationのダウンロード
Flex Applicationの生成はThe Midnight Codersのサーバー側で行われるようで、zipにまとめられたものをダウンロードできます。

Flex BuilderにMXMLをインポートしデザインモードで表示


自動生成されたクライアント側のコード(もちろん雛形だけ)
MockupSampleView.mxml
<?xml version="1.0" encoding="utf-8"?>
<MockupSampleController xmlns="sampleBalsamiqClient.*" xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" height="100%">
<mx:Button x="309" y="107" width="73" height="28">
<mx:label>sayHello</mx:label>
</mx:Button>
<mx:Label x="216" y="109" width="-1" height="-1">
<mx:text>Hello World!</mx:text>
</mx:Label>
</MockupSampleController>
MockupSampleController.as
        package sampleBalsamiqClient
{
import mx.containers.Canvas;
import mx.rpc.remoting.RemoteObject;
import mx.controls.Alert;
import mx.rpc.events.ResultEvent;
import mx.rpc.events.FaultEvent;
import mx.rpc.AsyncToken;
import mx.rpc.IResponder;
import mx.collections.ArrayCollection;

public class MockupSampleController extends Canvas
{
[Bindable]
public var model:MockupSampleModel = new MockupSampleModel();

private var remoteObject:RemoteObject;

public function MockupSampleController()
{
super();
remoteObject = new RemoteObject("GenericDestination");
remoteObject.source = "sampleBalsamiqServer.MockupSampleService";



remoteObject.addEventListener("fault", onFault);

initializeController();
}

public function onFault (event:FaultEvent):void
{
Alert.show(event.fault.faultString, "Error");
}

public function initializeController():void
{

}
}
}
MockupSampleModel.as
        package sampleBalsamiqClient
{
import mx.collections.ArrayCollection;

public class MockupSampleModel
{

}
}

ちなみにBalsamiq MockupsはAdobe AIRで作られていますのでMac OS X, Windowsでも動作しますし、Web版も公開されています。
日本語が使用できない場合は[View]-[Use System Fonts]にチェックを入れてお試しください。

Balsamiq MockupsはUIモックアップの定義だけであって、Flash Catalystのようにインタラクションの定義は今のところできません。
なお、ライセンスは有償で79ドルとなっていますが評価利用は可能です。
Balsamiq Mockups
http://www.balsamiq.com/products/mockups

From Mockups to Flex in Seconds! - The Midnight Coders: Balsamiq Integration
http://www.themidnightcoders.com/develop-ria/balsamiqapp

Weekly Release: New Default Font (on OS X) and more -Coming soon: WebORB integration!-
http://www.balsamiq.com/blog/2009/05/25/newfont/

2009/05/24

Flex/AIRでGrowlライクな通知機能

GrowlやSkype, Windows Live MessengerのようなIMを利用していると画面の端っこにぴょこっと通知してくれるあいつ。
その通知機能をFlex/AIRアプリにも提供してくれるコンポーネント「FlexGrowl」の紹介です。

なお、FlexGrowlはHydraFrameworkのコンポーネントの一部であり、さらにDegrafaを利用しています。
OSSで提供されていますので、GitHubで全てのソースにアクセスできます。
http://github.com/lukesh

FlexGrowl Component
http://lukesh.wordpress.com/2009/04/04/rawr-flexgrowl-component-available/

デモ
http://lukesh.com/files/growler/index.html

上記デモでは日本語の入力/表示ができませんが、それはデモプログラムで指定されているフォント(HelveticaNeueLTLight.otf, HelveticaNeueLTThin.otf)が日本語に対応していないからであって、このコンポーネントでは日本語は問題なく使えますよ。

twitterアカウントまとめ - ActionScript, Flex, AIRのフレームワーク関連

Mate FrameworkやHydra Frameworkのサイトを訪れると「Follow us on Twitter」のリンクを見かけたので、他にも興味のあるフレームワークがtwitterアカウントを持っていないか調べてみました。

今は新バージョンのリリース告知等をtwitterでも行うからアカウントを取得しているところが多いんですね。

Flash Platform
http://twitter.com/Flash_Platform

Flex Framework
http://twitter.com/flex

AIR
http://twitter.com/air

Degrafa
http://twitter.com/degrafa

Spring ActionScript
http://twitter.com/springas

PureMVC
http://twitter.com/puremvc

Mate Framework
http://twitter.com/MateFramework

Gaia Framework
http://twitter.com/gaiaframework

Hydra Framework
http://twitter.com/HydraFramework

Hydra MVC
http://twitter.com/HydraMVC

FlexUnit
http://twitter.com/FlexUnit

Adobeanのtwitterリスト
http://blog.air-life.net/2009/02/adobeantwitter.html

2009/05/23

NTTひかりTV - 迷惑な勧誘

NTT西日本を名乗り「ひかりTV」の電話勧誘がありました。

発信元:0120815999

平日の夕方、仕事中にかかってきたのですが、どうもしつこい。
まとめると以下のようなことを少々早口で勢いよく説明されました。
・光回線が導入済みなので、設置は簡単
・光回線、ひかりTVとまとまって、なんか安い
・チャンネルいっぱい
・今なら2ヶ月間無料(断ろうとするとこの辺ループ)
・気に入らなかったら解約してくれてかまわない(断ろうとするとこの辺ループ)

話を聞いてる感じでは、この電話で「OK」するとチューナーを送りつけてくる?
私は「ルーターからTVまでが遠いので有線接続なんてありえないですね」という回答を繰り返し、断りました。
「平べったい数ミリ厚の薄いケーブルがあるんですよ」と何度かループしましたけど。

勧誘自体は、たまにある「なんで仕事をしていると分かるであろう時間に電話かけてくるの?」というものですが、ひかりTVの説明に間違いはありませんでした。
しかし、ググってみたところ、この勧誘は一部で評判が悪いみたいですね。
解約しようとしても電話がつながらないとか、いろいろ情報が出てきました。
2ヶ月間無料だからと軽いノリで「OK」するのは考えものなのかもしれませんね。

NTTひかりTVの悪質勧誘にやられる→解決(消費者センター凄すぎる)
http://chikura.fprog.com/index.php?UID=1233803491


とにかく、こういう勧誘に個人情報使わないで欲しいところです。

2009/05/19

RIA All In One - Eclipse

Mac OS X上のEclipse 3.4(Ganymede)にFlex, Silverlight, JavaFXのAll in One開発環境を構築してみました。


以下のプラグインを導入することで実現できますよ。

Flex : Flex Builder(Eclipse Plugin)
http://www.adobe.com/cfusion/entitlement/index.cfm?e=flexbuilder3

Silverlight : Eclipse Tools for Microsoft Silverlight(Eclipse4SL)
http://www.eclipse4sl.org/download/mac/

JavaFX : JavaFX Plugin for Eclipse
http://javafx.com/downloads/macosx.jsp

2009/05/12

逆転現象 - FxUG


第○○回とは、勉強会開催の告知をするタイミングで決まるので、必ずしも開催日順って訳じゃないのです。
このような回と開催日の逆転現象が起きるのは東京、大阪以外の各地でも活発に勉強会が行われるようになってきたおかげですね。

北陸の次回は7月くらいに富山開催ですよー。

2009/05/01

AS3, Flex最適化テクニック&プラクティス総まとめ

InsideRIAで公開されていたSean Moore氏による記事「Round up of ActionScript 3.0 and Flex optimization techniques and practices」をだいぶ適当に訳してみた。

Round up of ActionScript 3.0 and Flex optimization techniques and practices
http://www.insideria.com/2009/04/51-actionscript-30-and-flex-op.html


AS3, Flex最適化テクニック&プラクティス総まとめ
1. Avoid the new operator when creating Arrays
Arrayを生成する際に、new演算子の使用は避ける。
var a = []; 

悪い例:
var a = new Array();


2. Arrays are expensive to create, do so conservatively
Arrayの生成コストは高いので、控える。
var vanityCollection01 : Array = new Array(); 
var vanityCollection02 : Array = new Array();
var vanityCollection03 : Array = new Array();
var vanityCollection04 : Array = new Array();


3. Fastest way to copy an array:
Arrayをコピーする最速の方法。
var copy : Array = sourceArray.concat(); 


4. Setting values in Arrays is slow
Arrayへの値の設定は遅い。
employees.push( employee ); 
employees[2] = employee;


5. Getting values from Arrays is twice as fast as setting
Arrayから値を取得するのは設定より2倍ほど速い。
var employee : Employee = employees[2]


6. Use static for properties methods that do not require an object instance
インスタンスを必要としないプロパティ、メソッドにはstaticを使う。
StringUtils.trim( "text with space at end " ); 
Class definition:
package
{
public final class StringUtils
{
public static function trim( s : String ) : String
{
var trimmed : String;
// implementation...
return trimmed;
}
}
}


7. Use const for properties that will never change throughout the lifecycle of the application
アプリケーションのライフサイクルを通して、変更の無いプロパティにはconstを使う。
public const APPLICATION_PUBLISHER : String = "Company, Inc."; 


8. Use final when no subclasses need to be created of a class
サブクラスを作成する必要がないクラスにはfinalを使う。
public final class StringUtils 


9. Length of method/variable names doesn't matter in ActionScript 3.0 (true in other langs)
メソッド名/変数名の長さはActionScript 3.0では問題にはならない。
someCrazyLongMethodNameDoesntReallyImpactPerformanceTooMuch(); 


10. One line assignments DO NOT buy any performance (true in other langs)
代入を1行にまとめたところでパフォーマンスは向上しない。
var i=0; j=10; k=200; 


11. No difference in memory usage between an if statement and a switch statement
if文とswitch文では、メモリ使用量に差はない。
if ( condition ) 
{
// handle condition
}

まったく同じ:
switch ( condition ) 
{
case "A":
// logic to handle case A
break;

case "B":
// logic to handle case B
break;
}


12. Rank your if statements in order of comparisons most likely to be true
if文の条件はtrueとなる可能性の高い順に並べる。
if ( conditionThatHappensAlot ) 
{
// logic to handle frequently met condition
}
else if ( conditionThatHappensSomtimes )
{
// handle the case that happens occaisonally
}
else
{
// handle the case that doesn’t happen that often
}


13. AVM promotes int to Number during calculations inside loops
(VM has been changing, from 9 to 10, so int, uint and number conversions aren't as slow as they used to be.)
AVMはループ内での計算中にintをNumberに変換する。(VMが9から10に代わって、int, uint, Numberの変換はそれほど遅くはなくなった。)

14. Resolve issues of promotion, unknown, or incorrect object types
変換、未知の型、不正な型の問題を解決すること

15. Use uint sparingly, it can be slow (VM has been changing, from 9 to 10, so int, uint and number conversions aren't as slow as they used to be.)
uintは慎重に使う。注意しないと遅くなることがある。(VMが9から10に代わって、int, uint, Numberの変換はそれほど遅くはなくなった。)
var footerHex : uint = 0x00ccff; 


16. Use integers for iterations
反復の判定にはintを使う。
(var i: int = 0; i < n; i++) NOT for (var i: Number = 0; i < n; i++) 


17. Don't use int with decimals
少数値を扱うためにintを使わない。
var decimal : Number  = 14.654; 

悪い例:
var decimal : int  = 14.654; 


18. Multiply vs. Divide: instead of 5000/1000 use: 5000*0.001
乗算 vs 除算: 5000/1000の代わりに、5000*0.001を使う。

19. Locally store function values in for and while statements instead of repeatedly accessing them
for、while内で繰り返し計算させるよりも、ループ外でローカル変数に入れておき、それを使用する。
for (..){ a * 180 / Math.PI; }  
declare: toRadians = a*180/Math.PI; outside of the loop


20. Avoid calculations and method calls in loops
ループの中で計算やメソッド呼び出しをしない。
var len : int = myArray.lengh;  
for (var i=0;i<len;i++){ }

悪い例:
for (var i=0;i< myArray.lengh;i++){ } 


21. Use RegEx for validation, use string methods for searching
バリデーションにはRegEx(正規表現)を使い、検索にはStringのメソッドを使う。
// postal code validation example using regular expressions 
private var regEx:RegExp = /^[A-Z][0-9][A-Z] [0-9][A-Z][0-9]$/i;
private function validatePostal( event : Event ) : void
{
if( regEx.test( zipTextInput.text ) )
{
// handle invalid input case
}
}

// search a string using String methods
var string : String = "Search me";
var searchIndex : int = string.indexOf( "me" );
var search : String = string.substring( searchIndex, searchIndex + 2 );


22. Reuse objects to maintain a “memory plateau” DisplayObjects, URLLoader objects
メモリ使用量を抑えるために、DisplayObject、URLLoaderオブジェクトは再利用する。

23. Follow the Flex component model:
Flexのコンポーネントモデルに従う。
createChildren(); 
commitProperties();
updateDisplayList();


24. Only use Datagrids as a last resort (make sure you can’t implement in a regular List first)
DataGridは最後の手段として使う。(まずは通常のListで実現できないか確かめる)

25. Avoid Repeaters for scrollable data
スクロールデータにRepeaterの使用は避ける。

26. Avoid the setStyle() method (One of the most expensive calls in the Flex framework)
setStyle()メソッドの使用は避ける。(setStyle()メソッドはFlexフレームワークの中で高コストな呼び出しの一つ)

27. Using too many containers dramatically reduces the performance of your application
使用するコンテナが多過ぎるとパフォーマンスが著しく低下する恐れがある。
<mx:Panel> 
<mx:VBox>
<mx:HBox>
<mx:Label text="Label 1" />
<mx:VBox>
<mx:Label text="Label 2" />
</mx:VBox>
<mx:HBox>
<mx:Label text="Label 3" />
<mx:VBox>
<mx:Label text="Label 4" />
</mx:VBox>
</mx:HBox>
</mx:HBox>
</mx:VBox>
</mx:Panel>


28. You do not need to always use a container tag as the top-level tag of components Totally valid component, no top level container needed:
コンポーネントのトップレベルに、常にコンテナを使う必要はない。
<mx:Image xmlns:mx="http://www.adobe.com/2006/mxml"  
source="avatar.jpg" width="200" height="200" />


29. Remove unnecessary container wrappers to reduce container nesting
コンテナのネストを減らし、不必要なコンテナを削除する。

30. Avoid: The VBox container inside an tag, (eliminates redundancy)
コンテナタグ内の無駄なVBoxの使用は避ける。
<mx:Panel> 
<mx:Label text="Label 1" />
<mx:Label text="Label 2" />
</mx:Panel>
<mx:Panel>
<mx:VBox>
<mx:Label text="Label 1" />
<mx:Label text="Label 2" />
</mx:VBox>
</mx:Panel>


31. Avoid: VBox container inside an mx:Application tag, (eliminates redundancy)
mx:Applicationタグ内の無駄なVBoxの使用は避ける。
<?xml version="1.0" encoding="utf-8"?> 
<mx:Application xmlns:mx=http://www.adobe.com/2006/mxml>
<mx:Label text="Label 1" />
<mx:Label text="Label 2" />
</mx:Application>

悪い例:
<?xml version="1.0" encoding="utf-8"?> 
<mx:Application xmlns:mx=http://www.adobe.com/2006/mxml>
<mx:VBox>
<mx:Label text="Label 1" />
<mx:Label text="Label 2" />
</mx:VBox>
</mx:Application>


32. Set the recycleChildren property to true to improve a Repeater object's performance (re-uses previously created children instead of creating new ones)
Repeaterオブジェクトのパフォーマンス向上のため、recycleChildrenプロパティにtrueを設定する。(新しいRepeater対象オブジェクトを生成する代わりに、前に生成されたオブジェクトを再利用する)
<mx:Script> 
<![CDATA[
[Bindable]
public var repeaterData : Array = ["data 1", "data 2"];
]]>
</mx:Script>

<mx:Repeater id="repeater" dataProvider="{repeaterData}">
<mx:Label text="data item: {repeater.currentItem}"/>
</mx:Repeater>


33. Keep framerate set at 60 fps or lower
フレームレートは60fpsかそれ以下にする。
<?xml version="1.0" encoding="utf-8"?> 
<mx:Application xmlns:mx=http://www.adobe.com/2006/mxml
frameRate="45">
</mx:Application>


34. Avoid multiple display manipulations per frame
フレーム毎に複数の表示操作を行うのは避ける。

35. Code against ENTER_FRAME events instead of Timer events
Timerイベントの代わりに、ENTER_FRAMEイベントを使う。
public function onEnterFrame( event : Event ) : void 
{
}
private function init() : void
{
addEventListener( Event.ENTER_FRAME, onEnterFrame );
}

悪い例:
public function onTimerTick( event : Event ) : void 
{
}
private function init() : void
{
var timer : Timer = new Timer();
timer.start();
timer.addEventListener( TimerEvent.TIMER, onTimerTick );
}


36. To defer object creation over multiple frames use:
複数フレームに及ぶオブジェクト生成を遅らせる際に、"queued"を指定する:
<mx:Container creationPolicy="queued"/>


37. Alpha = 0 is not the same as visible = false (Objects marked invisible are passed over)
Alpha = 0は visible = falseと同等ではない。(非表示マークが付けられることではない)
loginButton.visible = false;

悪い例:
loginButton.alpha = 0; 


ここに挙げた以外にFlex/AIR, ActionScriptのパフォーマンス最適化についてまとめられている記事がいくつかあるのでリストしておきます。
Flex アプリケーションのパフォーマンス : クライアントアプリケーションのパフォーマンスチューンアップテクニック集
http://www.adobe.com/jp/devnet/flex/articles/client_perf.html

ActionScript 3.0におけるパフォーマンス向上のヒント
http://www.adobe.com/jp/devnet/flash/articles/ac3_performance.html

Round up of ActionScript 3.0 and Flex optimization techniques and practices」記事の参照元
Sean Christmann: Optimizing Adobe AIR for Code Execution, Memory, and Rendering
http://www.craftymind.com/2008/11/20/max-2008-session-material/

Dennis Ippel: Some ActionScript 3.0 Optimizations
http://www.rozengain.com/blog/2007/05/01/some-actionscript-30-optimizations/

Shane McCartney: Tips on how to write efficient AS3
http://www.lostinactionscript.com/blog/index.php/2008/09/28/tips-on-how-to-write-efficient-as3/

Flex Application Performance: Tips and Techniques for Improving Client Application Performance
http://www.adobe.com/devnet/flex/articles/client_perf.html

Stephen Calender: ActionScript 3.0 Benchmarking
http://www.stephencalenderblog.com/?p=7

Grant Skinner: Types in AS3: ints not so fast, uints slow!
http://www.gskinner.com/blog/archives/2006/06/types_in_as3_in.html

Grant Skinner: Resource management strategies in Flash Player 9
http://www.adobe.com/devnet/flashplayer/articles/resource_management.html

Gary Grossman: ActionScript 3.0 and AVM2 Performance Tuning
http://www.onflex.org/ACDS/AS3TuningInsideAVM2JIT.pdf

Fastest way to copy an array
http://agit8.turbulent.ca/bwp/2008/08/04/flash-as3-optimization-fastest-way-to-copy-an-array/

Andre Michelle: AS3 optimations & suggestions
http://blog.andre-michelle.com/2005/as3-optimations-suggestions/

Package-level function closures in ActionScript
http://www.ericfeminella.com/blog/2008/05/06/package-level-function-closures-in-actionscript/

ActionScript 3 optimization techniques
http://blog.joa-ebert.com/2008/04/26/actionscript-3-optimization-techniques/

AS3 Performance Tester
http://businessintelligence.me/projects/performance_tester/performanceTester.html