ラベル Flex の投稿を表示しています。 すべての投稿を表示
ラベル Flex の投稿を表示しています。 すべての投稿を表示

2010/06/09

HTML5 Geolocation APIをFlash/Flexから使う - as3geolocation

前回の記事のas3webstorageに続き、Geolocation APIをFlash/Flexから利用できるようなシンプルなユーティリティを作ったので、それをGoogle Code Hostingで公開しました。

as3geolocation
https://github.com/shoito/as3geolocation

サンプルはこちらになります。HTML5 Geolocation APIをサポートしているChromeやFirefoxなどから確認してください。
Geolocation APIのサンプル


作りとしては、as3webstorageと同様にActionScriptのExternalInterfaceクラスを利用して、Geolocation API(JavaScript)をラップしてActionScriptから呼んでる"だけ"です。

※Safari5でGeolocation APIが実装されてるのですが、as3geolocationではExternalInterfaceとの絡みで上手く動いてません...orz
※Geolocation APIはHTML5仕様には含まれてません。

2010/06/03

HTML5 Web Storage APIをFlash/Flexから使う - as3webstorage

以前、Web Storage APIをFlash/Flexから利用できるようなシンプルなユーティリティを作っていたので、それをGoogle Code Hostingで公開しました。

as3webstorage
https://github.com/shoito/as3webstorage/

6/2(水)に開催した「HTML5、おまけにiPadをネタにワイワイガヤガヤ in 福井」でタネ明かししたやつです。
サンプルはこちらになります。ストレージに格納されてるかどうかはChromeブラウザのデベロッパーツールなどから確認してください。
LocalStorageのサンプル
SessionStorageのサンプル



作りとしては、ActionScriptのExternalInterfaceクラスを利用して、Web Storage API(JavaScript)をラップしてActionScriptから呼んでる"だけ"です。
LocalStorageクラスとSessionStorageクラスしかなくて、そんだけ?っていう感じのユーティリティになってます。

先日公開された「Web SQL DatabaseをFlashから使う」という海外のブログ記事を見たのが公開のキッカケになりました。
=> Flash + HTML 5 : Offline Flash Apps using DataStore API


HTML5 vs Flashっていう視点で一部では見られてるけど、Flash/FlexとHTML5の両方に興味があって追っている私としては、別にFlashとHTML5を無理にvsな関係で捉えなくてもイイんじゃないかなと思っています。

HTML5関連API(HTML5仕様ではないJavaScript API群)については、完全にではありませんがFlash(ActionScript)からも利用できますしね。
ちなみに、FlexのHistoryManagerやディープリンキング(パーマリンク)はActionScriptとJavaScriptとが密に連携して実現していますよ。


HTML5関連APIにはWeb Storage API, Geolocation API, Indexed database API, ....と多々あります。
HTML5について詳しくは↓この辺で一緒に学びませんか?
html5-developers-jp
html5-fit

※Web Storage APIはHTML5仕様には含まれてません。

※2010/06/18 追記 - MOONGIFTで紹介していただきました。感謝。
ActionScript3向けのWebストレージライブラリ「as3webstorage」
http://www.moongift.jp/2010/06/as3webstorage/

2009/11/17

11/21(Sat) Flex勉強会第87回@北陸(福井)やりますよー

11/21(土)PMに、FxUG(Flex User Group)87回目、北陸では5回目のFlex勉強会を開催します。

本日リリースされたAdobe AIR 2.0βとそれを使ったアプリケーション開発プロジェクト、Progression、Arduino・・・Flex/AIR, Flashをテーマにしています。
参加費は無料ですので、お気軽にご参加ください。
懇親会参加予定者の割合がほぼ100%と今回はちょっと異例w

11/26(木)に東京で開催されるAdobe AIR Day(#AIRDAY)で講演予定の内容もやっちゃいます。
http://www.info-event.jp/adobe/air/

<セッション内容>
「デザイナー視点のFlash制作。Progressionで作る、10分でできる画像スライドショー」 by @shirokuro331
「Flashでフィジカルコンピューティング的な何か」 by @itsuki_kosen
「某リモコン的な何か」 by @rch850
「ユーザーインターフェースの何か」 by @checkela
「Adobe AIR 2.0 - AIR Day miniセッション」 by @keisuke322(Adobe 轟さん), @shoito, @coelacanth, @hikaruworld
「(ショートセッション)」 by @katzchang

目的:北陸をもっともっと盛り上げていこう!
対象者:デベロッパー&デザイナー(Flash, ActionScript, Flex, Java, PHP, Rubyなど)
   Flex/AIR, ActionScirpt初心者
定員:25名程度

日時:11月21日(土) 14:30~
      受付:14:00~
場所:(株)サーフボード 1階会議室
住所:〒910-0842 福井県福井市開発2丁目614
最寄駅:えちぜん鉄道勝山永平寺線「越前開発駅」徒歩5分
地図:http://www.surfboard.jp/profile/map_fukui.asp
懇親会(お店): とり元 千乃夢 http://www.hotpepper.jp/strJ000349150/

参加費:無料
参加方法:ATNDで参加登録お願いします
http://atnd.org/events/1814

2009/09/27

Flex SDK 3.4で遭遇したFocusManagerのバグ

Flex SDK 3.4でビルドするようになってからTabキーでフォーカスを移動した際に、以下のようなエラーが出る事はありませんか?
Flash Playerのデバッグ版でしか表示されないエラーなので、気付いていないかもしれません。
私はTabキーでフォーカスを移動し、画面上のコンポーネントを一周し、defaultButtonに指定したコンポーネントにフォーカスが合わさろうとした際に、このエラーに遭遇しました。
TypeError: Error #1009: null のオブジェクト参照のプロパティまたはメソッドにアクセスすることはできません。 at mx.managers::FocusManager/focusInHandler()[C:\autobuild\galaga\frameworks\projects\framework\src\mx\managers\FocusManager.as:601] at flash.display::Stage/set focus() at mx.core::UITextField/setFocus()[C:\autobuild\galaga\frameworks\projects\framework\src\mx\core\UITextField.as:1525] at mx.controls::TextInput/setFocus()[C:\autobuild\galaga\frameworks\projects\framework\src\mx\controls\TextInput.as:1832] at mx.managers::FocusManager/setFocus()[C:\autobuild\galaga\frameworks\projects\framework\src\mx\managers\FocusManager.as:553] at mx.managers::FocusManager/setFocusToComponent()[C:\autobuild\galaga\frameworks\projects\framework\src\mx\managers\FocusManager.as:1293] at mx.managers::FocusManager/setFocusToNextObject()[C:\autobuild\galaga\frameworks\projects\framework\src\mx\managers\FocusManager.as:1263] at mx.managers::FocusManager/keyFocusChangeHandler()[C:\autobuild\galaga\frameworks\projects\framework\src\mx\managers\FocusManager.as:1758]
どうやらこれはFlex SDK 3.4のバグで、3.5ではFixされているようです。
バグレポートはこちらにあります(タイトルにはLiveCycleとありますがLiveCycle限定というわけではありません)。
[#SDK-21780] FocusManager RTE in defaultButton scenario. was: Navigating around LiveCycle Workspace results in an ActionScript null pointer error
https://bugs.adobe.com/jira/browse/SDK-21780

バグレポートに合った再現プログラムをシンプルにしたものがこちら。
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" >
    <mx:VBox id="boo" defaultButton="{goo}" >
        <mx:Button id="goo" />
        <mx:Button id="foo" />
    </mx:VBox>
    <mx:VBox id="bee" >
        <mx:Button />
        <mx:Button />
    </mx:VBox>
    <mx:TextInput />
</mx:Application>

バグ回避コードがこちら。
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" defaultButton="{goo}" >
    <mx:VBox id="boo">
        <mx:Button id="goo" />
        <mx:Button id="foo" />
    </mx:VBox>
    <mx:VBox id="bee" >
        <mx:Button />
        <mx:Button />
    </mx:VBox>
    <mx:TextInput />
</mx:Application>
defaultButtonの指定位置が変わったことにお気付きでしょうか?
Flex SDK 3.5がリリースされるまでは、このようにして問題を回避できるようですよ。
私の環境ではこの手段で回避できました。
類似の現象に遭遇した方、ご確認ください。

2009/09/13

Flex勉強会第79回@北陸(石川)やったど

昨日、Flex勉強会第79回@北陸(石川)を開催しました。
Flex勉強会はFxUG(Flex User Group)という有志たちによる勉強会です。
北陸では、石川、福井、富山と開催地を移し、今回は2週目に入り北陸では4回目の開催となりました。

今回はスピーカー候補者がいっぱいいたので、発表しなくてイイかなと思っていたらLTはやることになってました。
気付いたのは発表の一週間前...orz

【セッションレポート】
「Flash Catalyst + Flash Builder 4」轟さん(Adobe)
Flash Catalystの最新版でデモを見せていただきました。
プレリリースプログラムでも公開されていないNightly Build版でのデモ、「パーツ不足」という意味不明なエラーメッセージが出たりとハラハラどきどき。
ノンコーディングで複数ステート+トランジション付きのアプリが作るデモは「スゲー!」と思わされます。
「こんなイメージでイイですか?」ってモックアップを作って確認しながら開発を進められそう。
ペーパープロトタイプじゃ、エフェクトとかわからないですしね。

そうそう。アプリ落ち、OS落ちじゃなくて、プロジェクタ落ちという事件が発生しました。
初遭遇w

「 FlexMonkey + Flex Automation APIの紹介」 hikaruworldさん
前回の勉強会で時間等の都合で話せなかったFlexMonkeyをメインに、Flex Automation APIを加えたセッションでした。
FlexMonkeyでユーザー操作を記録してテストできるのはイイねーと思うディベロッパー達。
一方、FlexMonkey?FlexUnit?Mixin?Flex Automation API?ときょとんとするデザイナー達。
私はFlex Automation APIをちょっと資料を読んだ程度で、触ってはいなかったので興味津々でした。
この辺を上手に使う工夫をするとテストがもっと楽しくなるのでしょうね。

「 Flexで作るおされビンゴアプリ」 katzchangさん
北陸初開催の際に、轟さんより頂いたFlex Builder Professionalを利用してお洒落なビンゴアプリの開発を紹介してくれました。
独りアジャイルプロセスで開発をススメ、各イテレーション毎について成果物をデモ+ふりかえりの内容を話すという面白いスタイル。
katzchangらしく笑いが豊富なプレゼンでした。

交流会のビンゴ大会では、このおされビンゴアプリ(Flex)のおかげで大盛り上がり。
おされの部分を強化するイテレーションが今後実施されるとみんな信じています。

「 Silverlight入門」 hr_saoさん
Silverlightを囲む会よりゲスト参加してくれました。
Flex勉強会であり、Silverlightを触ったことのある人が少なかったので入門的な内容を。
開発環境のスライドの中に、Eclipse4SLのことが載っていて、一瞬テンションがあがりましたw

全然関係ないけど、会場ではhr_saoさんと轟さんのファッションがイケてました。
イベントへ行くとこっそりファッションチェックをしています。

「 FlashとSilverlightの配信事情 〜DynamicStreaming+SmoothStreaming入門〜」 coelacanthさん
動画配信のお話で、自動的にスムージングしてくれるデモをしてくれました。
IISって、「アイアイエス」って発音するんですね。
Iが2つ並んでいるから、勝手に「アイツーエス」と発音してました。

[LT]
「WebGLについて」 rch850さん
WebGL、OpenGLなお話。
rch850さんは情報の少ないイバラの道を好むという特性に気付きました。

「Android + JavaScript」 checkelaさん
Androidだぜ!Flash載るぜ!きっと。
会場の無線LANにAndroidがつながらなくて、準備が大変そうだった、、、という裏話。

「ディベロッパーへデザインのススメ」 shoito
ディベロッパーはデザインを苦手とせずに、もっとテクノロジー以外にもアンテナはろうぜ!
デザインって人間にもソフトウェア/サイトにとっても重要な要素ですよ、というお話。

「最後に」
交流会で本をGetされた方は次回、次々会あたりにスピーカーをやってくれることになったので、
新たなスピーカーの確保ができそうです。
参加してくれた方、運営&協力してくれた方、皆さんありがとうございました。

次はこちらでお会いしましょう。
世界有数の勉強会(遺産的な意味で) - Hokuriku.lang 出張編
http://atnd.org/events/1331

2009/08/29

Flash Player 10.0.30.18のインストールがスムーズに(Chrome限定)

Flash Player 10.0.30.18をWindows Vista + Google Chrome環境にインストールした際に、何か違和感があったのですが、その時にはそれが何なのか気付いていませんでした。

下記の件について調べるために、Flash Player 10 リリースノートを見ていて、違和感がなんだったのかわかりました。

FlexのテキストコントロールにIMEでインライン入力不可 〜経過2〜
http://blog.air-life.net/2009/08/flash-player-10-ime.html

Flash Player 10 Release Notes
http://www.adobe.com/support/documentation/en/flashplayer/10/Flash_Player_10_Release_Notes.pdf

リリースノートの9/14ページに修正点の1つとして記載されているのですが、Google Chromeでは、Flash Playerのインストール時にブラウザのプロセスを終了させておく必要がなくなったのです。
小さいけど、ステキな改善!インストールがこれでさらに楽になりましたね。
こういった小さな改善をコツコツと続けてもらえると応援を続けたくなります。
Google Chrome で、ブラウザーを閉じることなくプラグインをインストールできるように、プラグインインスト ーラーを拡張します。(2310185)
Fixと言えば、wmode="transparent"を指定した際に日本語入力ができなくなってしまう下記の問題解決を強く強く望んでいます。

Cannot type non-English/foreign characters in Flex app when wmode set to 'opaque' or 'transparent'
http://bugs.adobe.com/jira/browse/FP-1877

2009/08/28

FlexのテキストコントロールにIMEでインライン入力不可 〜経過2〜

Windows Vista, XP + Flash Player 10環境で、FlexのTextInput, TextArea, ComboBox(editable), RichTextEditorコントロールにIMEによる日本語入力でインライン入力ができない現象に遭遇していたんだけれど、Flash Player 10.0.30.18で一部Fixされていました。
Flexではなく、Flash Playerの問題だったらしくJIRAで経過をチェックできず、気付くのが遅れました。

なお、この問題の再現方法としては2つありまして、修正されていることに気がついたのは下記のケース2に関してです。
ケース1はまだFixされていないようですので、チェックを継続していきます。

ケース1
テキストコントロール、またはその親コンテナのプロパティalphaに1未満の値、例えば0.99を設定し、Flash Player 10以降をターゲットとしてビルドした場合。

ケース2
テキストコントロールのプロパティwidthに親コンテナより大きな値を設定し、Flash Player 10以降をターゲットとしてビルドした場合。

FlexのテキストコントロールにIMEでインライン入力不可
http://blog.air-life.net/2008/12/ime.html

FlexのテキストコントロールにIMEでインライン入力不可 〜その2〜
http://blog.air-life.net/2008/12/flexime-2.html

FlexのテキストコントロールにIMEでインライン入力不可 〜経過1〜
http://blog.air-life.net/2009/01/flexime-1.html

2009/07/05

7/4 Flex勉強会@富山 これで北陸一周

昨日、開催されたFlex3勉強会第73回@北陸(富山)に参加してきました。
今回はスピーカーもせず、運営も富山メンバーに全てやっていただけたので完全な参加者側です。

ちなみに、Flex勉強会はFxUG(Flex User Group)という有志たちによる勉強会です。
勉強会は全国各地で行われていて、内容はグループ名の通りFlexが中心にはなりますが、Flash、Silverlight、JavaScriptなども扱いFlexだけに限定はされているわけではありません。

北陸では、2/21に金沢で第1回、4/25に福井で第2回が既に行われており、今回の富山が第3回となります。
石川、福井、富山の各県が隔月持ち回りで開催することにしているので、これで1周したことになり、9月予定の金沢開催から2週目に突入です。
各回毎にスピーカー&参加者を募集しておりますので、興味のある方は是非FxUGのサイト上部の「お知らせ」欄をチェックしていてください。

【セッションレポート】
「Flash Builder 4 と Flash Catalyst (ベータ版) を使ってみる」bambooさん
Adobe Labsで公開中のFlash Builder 4 βとFlash Catalyst βについて、bambooさんがFlexについて勉強しながら調査してくれた内容を紹介してくれました。
Flex4からのネームスペースの変更(fx, s, mx)に関して、解説があってFlex3ユーザーには「へぇ〜」という感じだったと思います。
途中、プレゼン用のEee PCが非力だったせいかFlash Catalystの動作が固まりヒヤヒヤでしたね。
(...coelacanthさんにプレゼンっぷりを見られていてやりづらくなかったのかなぁw)

「 FlexUnit4、FlexcoverとFlexMonkey」 hikaruworldさん
実は今回、これを一番楽しみにしていました。
FlexUnit4 βがリリースされ、そこにFluintの一部が統合されていたことに気付いてから、FlexUnit 4に興味津々だったからです。
FlexUnit4のドキュメントやソースを読んで調べていたんだけど、twitter等でhikaruworldさんもFlexUnit 4に食いて、勉強会で話してくれるってことが分かったので、もう調査はお任せしちゃってました(自分の中で)。
FlexUnit4のメタタグについて色々と紹介してくれて理解が進みましたが、理解できていない部分も一緒orz
自分でも調べておきますw

お話を聞けなかった後半部分+FlexMonkeyに関しては、きっと次回聞けるんですよね。

「 GAEでFlex」 wackyさん
Google App Engine for Javaの出来ること/出来ないこと、BlazeDSの載せ方などを紹介してくれました。

GAEってスレッド生成やファイル作成が許されていなかったりと制約が多いよね。←うんうん。
JDOって何?←うんうん。
MBeanって「The JRE Class White List」に入ってないの!?←うんうん。

さらにBlazeDSの載せ方に関しては、修正が必要なソースコード、設定ファイルを見せてくれて、おっ!これなら誰でもGAEにBlazeDS載せられるね。という感じでした。

「 DIコンテナ比較とテストツール」 yone098さん
Flexで使えるDIコンテナと補足的にフレームワークを紹介してくれました。
紹介されたフレームワークの中で記憶しているのはCairngorm、PureMVC、Prana(Spring ActionScript)、Swiz Framework、Smartypantsです。
DIコンテナについては以前、「Flexの嫌みなやつ - Smartypants」の辺りで偶然見ていたので、前提知識があり聞きやすい内容でした。
Adobe Developer ConnectionにてDependency injection with Flexという記事が公開されているので、こちらも合わせて見とくと良いと思います。短いけど。

「 CSSを使ったDIコンテナASphalt2の概要」 c9katayamaさん
c9katayamaさん作のDIコンテナAsphalt2を紹介してくれました。
バージョンアップして2にした訳ではなく、別にAsphaltという名前が既に他で使われていた都合らしいです。
なので、Asphalt3って名前が使われたら、今度はAsphalt4にしないとねと笑いを誘っていました。
CSS内でClassReferenceを使ってSWFに実装クラスをぶっ込むのがミソなんだろうなと思います。

「懇親会」
スタートからエンドまで全部が懇親会でした。
以上w

「最後に」
富山メンバーの皆さん、とても濃い〜勉強会にしてくれてありがとうございました。
好きです濃い〜の。

参加者の皆さん用にTシャツや書籍、CD等のプレゼントを毎回提供してくれるkskさん(Adobe)、ホントありがとうございます。
是非、またご都合の良い回にご参加いただけるとうれしいです。

2009/06/11

FlexUnit 4 - Testメタデータ

前回の「FlexUnit 4 - 進化したJUnit4ライクな単体テストフレームワーク」に引き続き、「Major New Features of FlexUnit 4」をベースに話を進めていきます。

Major New Features of FlexUnit 4
http://opensource.adobe.com/wiki/display/flexunit/FlexUnit+4+feature+overview

1. Testメタデータ
FlexUnit 4では新たにTestメタデータが提供されていて、テストメソッドにマーカーとして付ける。
以前のバージョンまでは、テストケースはTestCaseクラスを継承したクラスとして作り、さらにテストメソッドにはtestMax, testMinのようにtestというprefixが必要だったが、FlexUnit 4から不要になった。

比較のため、FlexUnit 0.9、JUnit4、FlexUnit 4の簡単なサンプルテストケースを紹介する。
このケースでは、最大値max、最小値minを求める計算をテストしている。

FlexUnit 0.9
package net.air_life
{
import flexunit.framework.*;

public class SampleTest extends TestCase
{
public function testMax():void
{
assertEquals(100, Math.max(0, 100));
}

public function testMin():void
{
assertEquals(0, Math.min(0, 100));
}
}
}

JUnit4
package net.air_life;

import static org.junit.Assert.*;
import org.junit.*;

public class MathTest {
@Test
public void max() {
assertEquals(100, Math.max(0, 100));
}

@Test
public void min() {
assertEquals(0, Math.min(0, 100));
}
}


FlexUnit 4
package net.air_life
{
import org.flexunit.Assert;

public class MathTest
{
[Test]
public function max():void
{
Assert.assertEquals(100, Math.max(0, 100));
}

[Test]
public function min():void
{
Assert.assertEquals(0, Math.min(0, 100));
}
}
}

このように、FlexUnit 4からはTestCaseクラスの継承、prefix(test)が不要になりJUnit4に本当にそっくりになってきた。

次回に続く...

2. Before, Afterメタデータ
3. BeforeClass, AfterClassメタデータ
4. 例外ハンドリング
5. Ignoreメタデータ
6. async
7. Hamcrest
8. Suiteメタデータ
9. ユーザー定義メタデータパラメータ
10. Theory, Datapoints, Assumptionsメタデータ
11. RunWithメタデータ
12. アダプタ
13. ユーザーインターフェースファサード



FlexUnit 4 - 進化したJUnit4ライクな単体テストフレームワーク
http://blog.air-life.net/2009/06/flexunit-4-unit-testing-framework-for.html

2009/06/09

FlexUnit 4 - 進化したJUnit4ライクな単体テストフレームワーク

FlexUnit 4 beta 1.0が公開され、正式リリースが近そうなので、今回から数回に分けてFlexUnit 4を紹介していきます。

FlexUnitはFlexやActionScript 3(AS3)で作られたアプリケーションやライブラリの単体テストを実装するためのJUnit4ライクなフレームワークです。

現在、Adobe Open Sourceで公開されています。
http://opensource.adobe.com/wiki/display/flexunit/FlexUnit

Flex、ActionScriptの単体テストフレームワークにはFlexUnit以外にもいくつか存在していますので、FlexUnitの前に、FluintとAS3Unitを簡単に紹介しましょう。

Fluint
http://code.google.com/p/fluint/

Digital Primates社製(現在はOSS)の単体テストフレームワーク。
以前はdpUInt(Digital Primates Unit and Integration)という名前でした。
非同期処理のテスト、Cairngormのテスト、CI等が可能な点が特徴です。

FlexUnit 4にはその一部(org.fluint.sequenseパッケージ, org.fluint.uiImpersonationパッケージ)が取り込まれています。
ライセンスはMIT Licenseで公開されています。

AS3Unit
http://www.libspark.org/wiki/yossy/AS3Unit

Spark projectが公開している国産の単体テストフレームワーク。
JUnit4の移植で、テストケースがPOJOによる実装が可能な点が特徴です。(AS3だから、POJOじゃなくてPOAO??こんな言葉ないですね・・)
ライセンスはApache License Version 2.0で公開されています。

ここからはFlexUnitに話を戻しましょう。
これまでFlexUnitはバージョン0.9が最新だったのですが、先月、メジャーバージョンアップを遂げて、FlexUnit 4 beta 1.0まで今のところリリースされています。

2009/05/04 FlexUnit 4 alpha 1.0
2009/05/11 FlexUnit 4 alpha 2.0
2009/05/18 FlexUnit 4 beta 1.0

FlexUnitは0.9から4へとバージョンアップしたことで、いくつか大きな機能追加があるので、まずはそれらを紹介していきましょう。
「Major New Features of FlexUnit 4」をベースに進めていきます。

Major New Features of FlexUnit 4
http://opensource.adobe.com/wiki/display/flexunit/FlexUnit+4+feature+overview

FlexUnit 4はJUnit 4ライクになっていますので、Javaエンジニアに分かりやすくするため、JUnit 4の単体テストコードと比較しながら説明していきます。

1. Testメタデータ
2. Before, Afterメタデータ
3. BeforeClass, AfterClassメタデータ
4. 例外ハンドリング
5. Ignoreメタデータ
6. async
7. Hamcrest
8. Suiteメタデータ
9. ユーザー定義メタデータパラメータ
10. Theory, Datapoints, Assumptionsメタデータ
11. RunWithメタデータ
12. アダプタ
13. ユーザーインターフェースファサード


次回へ続く。


FlexUnit 4 - Testメタデータ
http://blog.air-life.net/2009/06/flexunit-4-test-metadata.html

2009/06/01

Adobe Flash Catalyst/Builder 4(Gumbo) betaリリース

ついにAdobe Flash CatalystとAdobe Flash Builder 4(Gumbo)のβ版がリリースされましたね。
RSSリーダーをチェックするとFlash界隈はこのリリース情報だらけです。
これで+1。

Adobe Flash Catalyst
http://labs.adobe.com/technologies/flashcatalyst/

Adobe Flash Builder 4
http://labs.adobe.com/technologies/flashbuilder4/

Adobe Flash Builder 4を少し使ってみましたが、ネットワークモニタやFlexUnit連携の機能が加わっているようですね。
今までFluintを使っていたけど、FlexUnitがAdobe Flash Builder 4との連携機能強化されているのであれば、これを機会に乗り換えようかな。

リファクタリング機能に追加がないのがとても残念です。
EclipseのJDTに比べるとリファクタリング機能が少なすぎるんですよね。

それと、今までFlex User Group(FxUG)はFlex3勉強会を開催してきましたが、これからはFlex4勉強会に改められるようです。

sato-shiさん談
http://d.hatena.ne.jp/sato-shi/20090601

確かにFlex4勉強会になってます。北陸はFlex3で告知出しちゃった。ちょっと早まったか・・・。
http://www.fxug.net/

最後に、どうでもイイかもしれないけど、Windows環境でプロセスをチェックしてみたところjavaw.exeじゃなくて、Gumbo.exeで動いてました。

ドキュメントもどんどん公開されてるみたいですね。
Documentation for the Flex 4 and Flash Builder 4 Beta Releases
http://blogs.adobe.com/flexdoc/2009/06/documentation_for_the_flex_4_a.html

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/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/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

2009/04/13

RIAプラグイン普及率

Rich Internet Application StatisticsというWebアプリの紹介です。
http://www.riastats.com/

これを使うとAdobe Flash Player(Flex)、Microsoft Silverlight、Sun Java(JavaFX)の普及率をブラウザ、 OS、 国別に調べることができます。
下のスクリーンショットは絞り込みをせずに全てのブラウザ、OS、国を含む割合を表示したものです。

全体では、Flash Playerが95%超と圧倒的ですね。Linuxに関しても90%弱です。
一方、Silverlightも伸びてきていて25%程度に達しています。
しかし、Linuxに関しては2%弱とMicrosoft製だからか弱いところですね。

サイトへ組み込めるパーツも提供しているので、興味のある方は「RIAStats for your site, free!」をクリックしてください。

2009/03/31

Tour de FlexのFlex版が公開中

Tour de FlexはAdobe AIR版が今まで公開されていましたが、先日、Flex版も公開されました。

Tour de Flex
http://www.adobe.com/devnet/flex/tourdeflex/web/

Flexのコンポーネントはもちろんのこと、Amazon, Flickr, Cocomo, Salesforce.comなどのCloud APIやGoogle Maps APIを利用したサンプルコードをブラウザ上で簡単に見て、試せますよ。

2009/03/03

Flex開発環境 - FB, VS, NB, IDEA

Flexの開発環境としては、Flex Builderがメジャーで、次にFlashDevelopなイメージ。
ちょっと前にAmethystというVisual Studio Pluginが登場して、ついにVisual StudioでもFlex開発できるのかー、と思っていました。

そんな中、ふとNetBeansはどうなんだろう?と思ってググってみたところ何件かヒット。

FlexBeans
http://sourceforge.net/projects/flexbean/

flex-beans
http://code.google.com/p/flex-beans/

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

それぞれのプロジェクトを見た感じ、FlexBeansがアクティブに活動しておりプラグインもリリースされていました。
しかし、今のところビジュアルエディタはない模様。
その点でFlex BuilderやFlashDevelopに負けている感じ。


ついでに、実はとても優秀なIntelliJ IDEAのFlex対応についてもサラッと確認してみました。
http://www.jetbrains.com/idea/documentation/documentation.html

IntelliJ IDEAもビジュアルエディタは無いようですけど、リファクタリング機能の点でFlex Builderに勝っていますね。

Flex Builder、まずはリファクタリング機能を強化してもらえないかなぁ。
リファクタリングメニューが寂しすぎます。
せめて、JDTと同じくらいになってくれないでしょうか。