AIRLife.net: 2008

2008/12/31

イメージからリアルへ

「現実は、かつてはすべて想像の中にあった。」
　　　　　　　　　アルバート・アインシュタイン

そう。まずは想像しないことには始まらない。
来年は何を想像して、どんな現実を迎えるんだろう。

来年のことを考えると、厳しい現実が待っているかもしれない不安もあるけど、ワクワクしてきた。

今年一緒に過ごした皆さん、今年出会えた皆さん、今年まだ出会えなかった皆さん、来年もお付き合いよろしくお願いします。
良いお年を！

2008/12/25

Flex Builderからアプリケーションを実行するときに使用するブラウザをChromeに変更しようとしたけどProgram Filesに見当たらず、探したらGoogle Chromeが面白いところにインストールされてることに気がついた。

Vista環境だと↓こんな感じのパス。

C:\Users\shoito\AppData\Local\Google\Chrome\Application\chrome.exe

同フォルダ内には↓のように、さらに関連するファイルがフォルダ分けされてた。
\0.4.154.29
\1.0.154.36
\Dictionaries
chrome.exe
First Run

最近、Firefoxが起動も終了も許せないほどに遅くなったのでWindowsマシンのブラウザはChromeに乗り換えたよ。
起動はやっ！
終了はやっ！！
ブラウジングはやっ！！！
すてきっ！！！！

早くMac OSX用に正式リリースされないだろか。

2008/12/24

Adobe MAX Japan 2009いきますよー

来月1月29日、30日に開催されるAdobe MAX Japan 2009に行きますよー。
参加予定のセッションはこちらです(予定は未定、変更あるかも)。

2009/01/29(Thu)
10:00 - 11:30　基調講演　ケビン・リンチ
11:40 - 12:40　Flex4/AIR/CS4によるデザイナー＆デベロッパーのワークフロー革新(仮)　クラスメソッド(株)　渡邊桂一/嶋田豪介
13:00 - 14:00　AIRで進化するウィジェット・マーケティングの現場　アップフロンティア(株)　花本浩
14:20 - 15:20　AIRコン優勝者セッション：AIR×イマジネーション=Grand Prix!!　大日本印刷(株)　丸山真実
15:50 - 16:50　AIR最適化テクニック：コード処理・メモリ・レンダリングを知る!　EffectiveUI Sean Christmann
17:10 - 18:10　詳説Flex3コンポーネント　Japan Flex User Group　廣畑大雅/有川榮一/杉浦篤史
18:40 - 20:40　スペシャルイベント：Technology Sneak Peek

2009/01/30(Fri)
10:00 - 11:30　シークレットイベント
11:40 - 12:40　失敗事例に学ぶFlexプロジェクトの第一歩　NECシステムテクノロジー(株)　坂田泰平
13:00 - 14:00　Flexアプリケーション構築時の留意点　NECシステムテクノロジー(株)　三浦隆志
14:20 - 15:20　Flex Deep Diveシリーズ：Flexフレームワーク　EffectiveUI Josh Jamison
15:50 - 16:50　ActionScript 3.0におけるパフォーマンス向上のヒント　野中文雄
17:10 - 18:10　Flex開発2：Flex Component Lifecycle　EffectiveUI Josh Jamison
18:40 - 20:40　スペシャルイベント：EDGE Now! Of the Year

ここ見てくれてる人で誰か同じセッションに参加する人いるだろか。
FxUG@北陸含め各地の方々とお会いできるのが楽しみ。

2008/12/22

Spring BlazeDS IntegrationもApache Ivy使ってる

Spring BlazeDS IntegrationもApache Ivy使ってるみたい。
アーカイブを展開したらIvy関連のファイルが見当たった。

ライブラリの依存関係に関する面倒くささを解消したいだけであれば、MavenよりIvyだよなと思う。

2008/12/21

創造技法もろもろ

アイデアが面白いほど出てくる本 - これだけは身につけたい16の手法という本を読んだので、忘れないように創造技法をリストアップした。

マインドマップを扱うソフトウェアは多々あるけど、これら創法をそれぞれモジュール化して全てを扱えるものを作ってみるのは楽しそう。

創法 - 創造技法

Publish at Scribd or explore others: Maps Reference mindmap Idea


- 創法
  - 発法
    - 自由法
      - ブレインストーミング法
      - カードBS法
      - カードBW法
      - マインドマップ
      - 欠点・希望点列挙法
    - 強制法
      - チェックリスト法
      - マトリックス法
      - マンダラート
    - 類比法
      - ゴードン法
      - NM法
  - 収法
    - 領域法
      - KJ法
      - ブロック法
      - クロス法
    - 系列法
      - フィッシュボーン法
      - ストーリー法
      - カード手順法
  - 統法
    - ワークデザイン法
    - ハイブリッジ法
  - 態法
    - 東洋系
      - 工学禅
      - イメージコントロール法
    - 西洋系
      - 自律訓練法
      - 心理劇
      - ロールプレイング

2008/12/18

Spring BlazeDS Integration 1.0.0.M1リリース

Using Spring BlazeDS Integration 1.0.0.M1
http://blog.springsource.com/2008/12/17/using-spring-blazeds-integration-m1/

SpringSourceはこのニュースで書かれていた「Spring BlazeDS Integration」を宣言通り12月中旬にリリースしてきた。

米AdobeとSpringSource、エンタープライズ向けJava RIAで提携
http://www.itmedia.co.jp/enterprise/articles/0812/09/news104.html

ソースコードを覗いてみるとS2BlazeDSと同じくたったの4クラス。
パッと見た感じSeasar2環境でのS2BlazeDSと同じことをSpring環境に提供するんだから偶然でもないのか。

2008/12/17

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

前回、FlexのTextInput, TextArea, ComboBox(editable), RichTextEditorコントロールにIMEによる日本語入力でインライン入力ができない現象について書いたが、再度、別な条件でも同じ現象に遭遇したので書いておく。

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

再現手順:
1. TextInputを作成する。
2. TextInputのプロパティをwidthにparentより大きい値を設定する。
3. コンパイルオプションに"-target-player=10.0.0"を付けてコンパイルする。
4. Windows環境のFlash Player 10.0.12上で実行し、TextInputに対して日本語入力モードに切り替えて入力する。

再現プログラム:
http://f.air-life.net/samples/flex/OverParentWidth/

再現用コード:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" width="300" layout="vertical">
    <mx:TextInput width="500"/>
</mx:Application>

今回のケースの再現する条件としては、テキストコントロールのプロパティwidthに親コンテナより大きな値を設定し、Flash Player 10以降をターゲットとしてビルドすることのようだ。

前回のバグ報告を更新して1つにまとめておいたので、気が向いたら修正してもらえるようvoting(投票)をお願いします。
ログイン後の画面左にメニューがあります。
Inline input not supported in Flex text components when compiling for Flash Player 10
http://bugs.adobe.com/jira/browse/SDK-18444

2008/12/16

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

FlexのTextInput, TextArea, ComboBox(editable), RichTextEditorコントロールにIMEによる日本語入力でインライン入力ができない現象に遭遇した。
Mac OSXでは以前からできないのだけど、今回はWindows Vista, XP + Flash Player 10(Astro)環境で発生。

再現手順:
1. TextInputを作成する。
2. TextInputのプロパティをalphaに1未満の値を設定する。
3. コンパイルオプションに"-target-player=10.0.0"を付けてコンパイルする。
4. Windows環境のFlash Player 10.0.12上で実行し、TextInputに対して日本語入力モードに切り替えて入力する。

再現プログラム:
http://f.air-life.net/samples/flex/AlphaIMETest/

再現用コード:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
    <mx:TextInput/>
    <mx:TextInput alpha="0.99"/>
    <mx:VBox alpha="0.99">
        <mx:TextInput/>
    </mx:VBox>
</mx:Application>

再現する条件としては、テキストコントロール、またはその親コンテナのプロパティalphaに1未満の値、例えば0.99を設定し、Flash Player 10以降をターゲットとしてビルドすることのようだ。

Flash Playerのバージョンは、Flex Builder上ではプロジェクトのプロパティ - Flexコンパイラ - HTMLラッパーから設定する。
なお、Flash Playerのバージョンに10以降を指定するにはFlex SDK 3.2以降が必要になる。

Adobeのバグデータベースを探したけど該当の報告はまだないようなので挙げておいた。
(もし既知バグだったらごめんなさい)

Inline input not supported in Flex text components when compiling for Flash Player 10
http://bugs.adobe.com/jira/browse/SDK-18444

バグデータベースを探していたところ似たような現象がDataGridでも発生するようで報告が挙がっていた。
(再現手順など似ていたので一部コピ)

DataGrid：内部データ編集で確定前の日本語入力が画面左上に表示される
DataGrid：When the internal data is being edited, input text in Japanese is shown in the top-left screen, if it's before being confirmed.
http://bugs.adobe.com/jira/browse/SDK-18317

このバグは入力確定すれば、しっかりとテキストコントロールに入力されるから致命的ではないのだろうけど痛い・・・。

2008/12/12

flinks - ディープリンクライブラリ

Flexで簡単にディープリンクを実現できるflinksというライブラリが公開された。
今のところバージョンは0.1である。
http://code.google.com/p/flinks/

Google Codeで公開されていたのでソースを眺めてみると。
DeepLinking.as, EnableDeepLinking.asの2クラスだけで構成されていた。
どうやらBrowserManagerによる面倒な処理を包み隠してくれているようだ。

試しにサンプルを作って動かしてみたよ。
http://f.air-life.net/samples/flex/flinksTest/

使い方としてはApplicationのmxml内にEnableDeepLinkingを定義してディープリンク機能を初期化し、ディープリンクを適用するState毎にDeepLinkingを定義する。

<riaspace:EnableDeepLinking defaultState="" defaultTitle="でふぉると" autoDeepLinkStates="true"/>

全体のコードはこんな感じ。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
    xmlns:riaspace="net.riaspace.deepLinking.*" 
    backgroundGradientColors="[#6CFF00, #6CFF00]" viewSourceURL="srcview/index.html">
    <riaspace:EnableDeepLinking defaultState="" defaultTitle="でふぉると" autoDeepLinkStates="true"/>
    <mx:states>
     <mx:State name="state1">
      <riaspace:DeepLinking title="title1"/>
      <mx:SetProperty target="{kanban}" name="text" value="state1だよ"/>
     </mx:State> 
      
     <mx:State name="state2">
      <riaspace:DeepLinking title="title2"/> 
      <mx:SetProperty target="{kanban}" name="text" value="state2だよ"/>
     </mx:State>

     <mx:State name="stateX">
      <riaspace:DeepLinking exclude="true"/>
     </mx:State>
    </mx:states>
    <mx:Label id="kanban" text="でふぉ" verticalCenter="0" horizontalCenter="0" fontSize="36"/>
    <mx:ApplicationControlBar horizontalCenter="0" top="0" width="100%" dock="true" fillColors="[#34B700, #34B700]" fillAlphas="[1.0, 1.0]">
        <mx:Button label="State1" click="currentState='state1'"/>
        <mx:Button label="State2" click="currentState='state2'"/>
        <mx:Button label="対象外" click="currentState='stateX'"/>
    </mx:ApplicationControlBar>
</mx:Application>

「Mashup Seminar in FUKUI」これは行っとかないと

「Mashup Seminar in FUKUI」というイベントが来月開催されるみたい。
アップグレードふくいのメールでお知らせが届いたよ。

北陸では数少ない(？)楽しそうなイベントだから行っとかないと。

【日時】2009年1月17日(土)
【会場】Aossa(福井県福井市手寄1丁目4) - 福井駅から徒歩1分
【スケジュール】<セッション>15:00-18:50、<交流会>19:00-20:30
【参加料】2,000円<学生は無料(学生証の提示、もしくはコピーの提出が必要です。)>
　　※セミナー参加料、交流会飲食費を含みます。(当日、受付にてお支払いください。)
【定員】100名(予定)

セミナーの内容 http://www.fisc.jp/mashup/event.html
・「Mashup Awards 4と最新IT事情について」
・「マッシュアップで技術革新！〜MA4最優秀賞作品ChaMap〜」
・「iPhone/Android/jiglet、モバイルマッシュアップセミナー」
・「ふくいソフトウェアコンペティション2008 入賞作品発表会」
・「未定」

当日会場でお会いしましょ。

Spring ActionScript - Prana 作者による紹介

Prana goes Spring - Introducing Spring ActionScriptと題したスライド資料を作者がブログで公開してくれてます。

Spring ActionScript at FlexCamp 2008 Belgium
http://www.herrodius.com/blog/158

サンプルコードを用いて紹介してくれているので、どんなもんかわかりやすいかと。

2008/12/11

Flash Player 10依存のFlexプロジェクトをAntでビルド

Flash Player 10(Astro)依存のAPIを使ったコードをAntでビルドしようとしたら、mxmlcタスクで下記のようなエラーに遭遇したよ。

エラー: 未定義である可能性が高いプロパティ data に静的型 flash.net:FileReference の参照を使用してアクセスしています。
エラー: 未定義である可能性のあるメソッド load を、静的型 flash.net:FileReference の参照を使用して呼び出しました。

なんでだろうと調べてみると、flex-config.xmlにしっかりとFlash Playerのバージョンが設定されていたことにより、「このSWFは9.0.124から実行できますよ」となっていたことが原因だった。

C:¥Program Files¥Adobe¥Flex Builder 3¥sdks¥3.2.0¥frameworks¥flex-config.xml

<flex-config>
    <!-- Specifies the minimum player version that will run the compiled SWF. -->
    <!-- 9.0.124 is the April 2008 security release -->
    <target-player>9.0.124</target-player>

そこで、「このSWFは10.0.12からじゃないと実行できませんよ」と書いてあげれば解決するのだけど、このファイルを変更した場合、他のプロジェクトも影響を受けてしまうので対象プロジェクト専用にflex-config.xmlを作ってあげる。

<flex-config>
 …
 <target-player>10.0.12</target-player>
 …
</flex-config>

Flex Builder上では下記のように追加コンパイルオプションを設定する。

プロジェクトのプロパティ - Flexコンパイラ - 追加コンパイル引数

-load-config+=C:¥workspace¥hoge¥flex-config.xml

build.xmlには、mxmlcタスクにload-configを追加してflex-config.xmlをロードさせる。

 <target name="build">
     <mxmlc file="src/Hoge.mxml"
      actionscript-file-encoding="UTF-8"
      debug="false" optimize="true"
      output="bin-release/Hoge.swf">
         <load-config filename="${FLEX_HOME}/frameworks/flex-config.xml"/>
         <load-config filename="flex-config.xml"/>
         <source-path path-element="${FLEX_HOME}/frameworks"/>
      <source-path path-element="resources/locale/{locale}" />
      <compiler.library-path dir="${FLEX_HOME}/frameworks" append="true">
       <include name="libs" />
      </compiler.library-path>
      <compiler.library-path dir="libs" append="true">
       <include name="swc" />
      </compiler.library-path>
     </mxmlc>
 </target>

こんなんでFlash Player 10依存のプロジェクトをビルドできたよ。

2008/12/10

AdobeとSpringSourceの蜜月、そしてPranaは変化

BlazeDSとの統合を目的としたSpring BlazeDS Integrationの開発が進められるらしい。

米AdobeとSpringSource、エンタープライズ向けJava RIAで提携
http://www.itmedia.co.jp/enterprise/articles/0812/09/news104.html

それとPrana frameworkがSpring ActionScriptに変わるようだ。
SpringOne Brings a New Tomcat Server, VMware Partnership, and ActionScript Offerings
http://www.infoq.com/news/2008/12/springone-2008

Spring/Adobe - The Spring ecosystem continued to broaden at SpringOne with two key Flex related announcements. The Prana framework was officially renamed Spring Actionscript. As part of the move the project gains official SpringFramework.org forums, JIRA access, and Fisheye integration. SpringSource also announced a partnership with Adobe integrating Spring with BlazeDS:

こちらはPranaの日本語紹介記事。
ActionScript 3 を使ったアプリケーション開発をサポートする Prana フレームワーク
http://www.infoq.com/jp/news/2008/11/prana-framework-actionscript-3

BlazeDS 3.2が先月リリースされてたっぽい

昨日、ふらっとAdobe Open SourceにあるBlazeDSのwikiを見たところリリースビルドが3.2.0.3978に更新されてることに気付いた。
ページのLast Modifiedを見ると先月20日になっているので、リリースされてからだいぶ時間が経っていたみたい。
気づいてなかったんで、さっそく更新してみたよ。

BlazeDS 3.2リリースノート
http://opensource.adobe.com/wiki/display/blazeds/Release+Notes

BlazeDS 3.2 Fixed Issues
http://opensource.adobe.com/wiki/display/blazeds/Release+Notes#ReleaseNotes-BlazeDS3.2FixedIssues

BlazeDSの以前のリリースビルドは確か3.0.0.544。
Adobe LiveCycle Data Services ES 2.6.1のリリースノートにBlazeDS関連の修正を含めた日本語訳があったよ。
英語読解が面倒なときはこちらを見るとイイ。
http://help.adobe.com/ja_JP/livecycle/8.2/lcds_releasenotes.html

2008/12/09

FlexのFileReferenceクラスが憎たらしい

気をつけないとFirefox + SSLだとuploadのリクエストがサーバーに届かんし・・・。
今度はHTTPステータスコードが取れん。

HTTPStatusEventクラスのstatusプロパティ
http://www.adobe.com/livedocs/flex/3_jp/langref/flash/events/HTTPStatusEvent.html#status

Flash Player または AIR がサーバーからステータスコードを取得できなかった場合、またはサーバーと通信できなかった場合、記述したコードにデフォルト値の 0 が渡されます。値 0 は、どのプレーヤーでも生成される可能性があります (たとえば、正しくない形式の URL が要求された場合など)。また、特定のブラウザで実行される Flash Player プラグインでは、HTTP ステータスコードをプレーヤーに渡すことができないので、常に値 0 が生成されます。該当するブラウザには、Netscape、Mozilla、Safari、Opera および Internet Explorer for the Macintosh があります。

通りでサーバー側からHTTPステータスコードを返してもブラウザによっては必ず0が返ってくるわけだ。
くぅー。

as3httpclientとas3httpclientlibで代用できないか調べてみよう。
as3httpclientlibのプロジェクトの方は活動してるようだけど、as3httpclientは活動停止中かな。

2008/12/08

Flexでブラウザ判定

Flex上でブラウザがFirefoxかどうか判定する必要があって、Flexから(JavaScriptを経由して)ブラウザを判別するコードを書いたのでメモ。

ActionScriptだけではブラウザの情報が得られなかったため、JavaScriptでブラウザ情報を判別させるファンクションを作って、それをExternalInterfaceクラスを使用して呼ぶようにした。

判別は結構適当。
だって、Firefoxかどうか分かればイイのだから。
そういう意味ではisFirefox()でも良かったかも。

Flexプロジェクトにある html-template/index.template.htmlファイルに以下を追記する。

<script language="JavaScript" type="text/javascript">
<!--
function getBrowserType() {
       if(navigator.userAgent.indexOf("msie") != -1) {
               return "ie";
       } else if(navigator.userAgent.indexOf("firefox") != -1) {
               return "firefox";
       } else if(navigator.userAgent.indexOf("chrome") != -1) {
               return "chrome";
       } else {
               return "other";
       }
}
// -->
</script>

Flex側からは下記のように呼び出す。
ExternalInterface APIがブラウザでサポートされているかavailableプロパティで確認するのはお約束。

下記のサンプルでは、その後はExternalInterface.call()メソッドの戻り値をAlert.show()で表示している。

if(ExternalInterface.available) {
       var browserType:String = ExternalInterface.call("getBrowserType");
       Alert.show(browserType);
}

2008/12/03

大量にaddChild()したCanvasにマウスオーバーすると…

Flexのお話ですが、大量にコンポーネントをaddChild()したCanvas(他のコンテナも？？)にマウスオーバーするとCPU使用率が跳ね上がる現象に遭遇しました。

指定数のコンポーネントをCanvasに貼付けるサンプル
http://f.air-life.net/samples/flex/AddChildTest/

例えば上記のサンプルで3000と指定してaddChildボタンをクリック。
その後、Canvasの隙間にマウスオーバーをするとこの現象が発生します。
Firefoxさん、90%超えです。

特にイベントをリスンするように指定してないしシンプルなのだけれど…。
なぜ？？

2008/12/02

Ruboss - Flex, AIRアプリをRails, Merbと連携

ちょいと気になってたFlexフレームワークRuboss。
Rubossアプリの構成は「Flex + Simple RESTful CRUD」のようになる。
MateやCairngorm、PureMVCと競合するフレームワークではないらしい。

Ruboss
http://ruboss.com/

Ruboss – A Flex Framework on Rails(InfoQの記事)
http://www.infoq.com/news/2008/12/ruboss-on-rails

記事の中で作者は「Flex + RailsアプリをRubossを使うと5分で作れるよ。」と言ってる。
Getting Startでは簡単なCRUDアプリの作成手順が紹介しているので後でTRYしてみよう。(全部入力したら5分じゃ済まなそう・・・)

Getting Started with Ruboss and Ruby on Rails
http://github.com/ruboss/ruboss4ruby/wikis/getting-started-with-ruboss-and-ruby-on-rails

ちなみに関連する本も既に出版されている(英語だけど)。
Flexible Rails: Flex 3 on Rails 2(本の紹介)
http://www.amazon.co.jp/Flexible-Rails-Flex-2/dp/1933988509

----2008/12/17 追記
InfoQで記事の日本語訳が出ていた。

Ruboss - Railsでも使えるFlexフレームワーク
http://www.infoq.com/jp/news/2008/12/ruboss-on-rails

2008/11/26

iPod touch 2GをGetしたよ

いきなりだけど、iPhoneを買おうか迷ってたのは今使っている携帯のキャリアがauでだいぶ長いこと使っているっていうのが一番の理由。
おまけの理由はiPhoneよりAndroid携帯が欲しいかったから。

最近はauとドコモが「Android携帯を2009年度にリリースします」って宣言したもんだから、iPhoneの購入はさらに迷った。
迷いに迷ってしまったので、これはiPhone購入は止めておこうと先週末思い切ってiPod touch 2Gを買ったよ。

ここ何日かtouchを使いまくってるけど、ゴロ寝学習にはもってこいだね。
PDFビューア、PPTビューア、podcast、メーラー、RSSリーダー・・・ものすごく便利んなった。
おかげでMacBookと向かい合う時間がだいぶ短くなったよ。

ちなみに今、ダウンロードしているソフトはこれら。
・Air Sharing
・Evernote
・Google Mobile App
・ITmedia
・mixi
・NatsuLion for iPhone
・Remote
・そら案内

Google Mobile Appで自分のGoogle Appsを使えるのがスゴく嬉しい。
他に知らないステキなソフトはないかなぁ。

2008/11/20

InfoQのRIAフレームワーク調査記事

沢山登場しているFlex/ActionScriptフレームワークの中から、「どのフレームワークが好きか？」という調査なのだが、結果としてはMate, Cairngorm, PureMVC, Swizなどが挙げられている。
調査結果は1位PureMVC, 2位Cairngorm, 3位Mateとなっている。

RIAフレームワーク：調査によると…
http://www.infoq.com/jp/news/2008/11/ria-frameworks-survey

この記事の中でCairngormについて下記のように書かれていた。同意！

例えば、なぜフロント・コントローラでハンドリングされるイベントを生成して、それをコマンドに伝えないといけないのでしょう？どうしてコマンドを直接実行してはいけないのでしょう？

個人的には1位Mate, 2位Cairngorm, 3位しらん、という感じ。
EasyMVCとかSwizは見たけど触ったことはないもので。

記事の最後にこんな提案が。

私の拙い意見としては、もし有能で規律正しい開発者がいるのなら、よい規約があれば十分でしょう。

RIAフレームワーク全否定か・・・。

FlexとFlashがダントツで1位

ITProが11月上旬に行ったWebアンケートによると「RIA開発に使ったことがある技術」でFlexとFlashがダントツで1位らしい。

Adobe AIRとSilverlightは今後に期待
http://itpro.nikkeibp.co.jp/article/Research/20081119/319489/?ST=research&P=2

ひっそりCurlやBiz/Browserも使われてるみたい。

Cairngorm Plugin

Adobe Open SourceにCairngorm Pluginが公開されてたよ。
Controller, Event, Commandクラスのスケルトンの作成とControllerクラスにEvent, Commandクラスのマッピングを追加するところまでしてくれます。

Cairngorm Plugin
http://opensource.adobe.com/wiki/display/cairngorm/Plugin

正直、あんまりありがたみを感じない・・・。

Durango(ドゥランゴ) - Adobe AIRフレームワーク

Adobe MAX 2008で発表のあったDurangoっていうAIRフレームワークが楽しそう。
Durangoで再利用可能なコンポーネントをペタペタ組み合わせてマッシュアップアプリを作れるみたい。

Durango
http://labs.adobe.com/technologies/durango/

atl.reuse.IComposableってインターフェースをルートタグに実装(implements)させてDurangoで使えるコンポーネントにするようだ。

<mx:TextArea xmlns:mx=http://www.adobe.com/2006/mxml implements="atl.reuse.IComposable">

非ビジュアルコンポーネントの場合はmx.core.IMXMLObjectも合わせてimplementsする。

public class DurangoServiceComponent implements IComposable, IMXMLObject {

これもFxUG@北陸勉強会のネタにイイなぁ。

※追記(2009/02/22)
勉強会が無事終わったので資料を公開します。
http://www.scribd.com/doc/12725795/DD-Mashup-Framework-Durango

Android携帯はドコモ、KDDIから来年度・・・度？

ET2008(Embedded Technology 2008)で発表してるんかな？

グーグル携帯を発売へ　ドコモ、ＫＤＤＩが来年度
http://sankei.jp.msn.com/economy/business/081119/biz0811191439006-n1.htm

来年度ってことは2009年4月以降かー。
まだまだ先・・・、やっぱりiPhoneいっとこか。

2008/11/19

Android携帯はドコモが先っぽい？

ドコモが「グーグル携帯」　無償ソフト採用、低価格で09年発売
http://www.nikkei.co.jp/news/main/20081119AT1D140B418112008.html

2009年のいつ？
auでスマートフォンに期待するのはもうダメかな・・・。

そいえば、AndroidでのFlash対応がAdobe MAX 2008で正式に発表されたらしい。
http://japan.cnet.com/mobile/story/0,3800078151,20383831,00.htm

2008/11/18

echo - Adobe AIR製のTODO管理サービス

trust Convection(株式会社トラストコンベクション)がリリースしたTODO管理サービス echoがカッコイイ。
「スポーツのような、チームワークを。」っていう仕事をボールに喩えて、チームでボールをつないでゆくというイメージらしい。
拡張機能を2008年内リリースらしいけど、どこまで無償で提供してくれるんだろう？

echo
http://echoes.to/

Adobe AIR＋Ruby on Rails製みたい。

プライベートのタスク管理に使い始めたけど、１人だけだとチームでの使い心地がわからなくて寂しいなー。

2008/11/17

FxUG@北陸勉強会の顔合わせ〜

北陸の真ん中、金沢で北陸のFlex User Groupのみんなと顔合わせしてきたよー。
すんごく楽しいガン・・・Flex談義だった。

フレームワーク好きだからCairngorm、Mate、PureMVCをからめたFlex frameworkネタかそれともFlex単体テストのFluintネタを発表しようかな。
いつでも話せるようにネタ作りをちょびちょびしておこっと。

※ 2009/01/16追記
勉強会やることになったよー。

Flex3勉強会第XX回＠北陸

目的：たわむれる。
日時：2月21日(土) 15:00〜

場所：株式会社ドーガ金沢事業所
住所：〒920-0062 石川県金沢市割出町631
最寄駅：北陸鉄道浅野川線「磯部」より徒歩○○分
　　　　北陸鉄道浅野川線「割出」より徒歩○○分
最寄バス停：「三浦住宅前」(徒歩五分だけど本数少ない)
　　　　　　「南新保口」(徒歩十分だけど本数は比較して多い)
　　　　　　いずれも金沢駅西口より乗車可能
会費：勉強会無料
　　勉強会後の懇談会 300〜500円程（飲み物、お菓子を用意する予定）
対象者：どなたでも
資料：共有します。

特典：北陸開催初回記念としてAdobe様から 1名様に「Flex Builder 3 Professional」プレゼント！！

参加申し込み方法
FxUGの下記Wikiで参加(スピーカー or オーディエンス)を宣言してください。
http://www.fxug.net/modules/bwiki/index.php?Flex3%CA%D9%B6%AF%B2%F1%C2%E8XX%B2%F3%A1%F7%CB%CC%CE%A6%A1%CA%B6%E2%C2%F4%A1%CB%BB%B2%B2%C3%BC%F5%C9%D5%A1%A12%2F21%28%C5%DA%29

※追記(2009/02/22)
勉強会が無事終わったので資料を公開します。
http://www.scribd.com/doc/12725795/DD-Mashup-Framework-Durango

2008/11/15

AIRアプリから関連付けられたアプリケーションでファイルを開く

Adobe AIRでちょっとおかしなファイラを作ろうと思ったんだけど、大体のOSでは可能な「ファイルをダブルクリックしたら関連付けられたアプリケーションで開く」という機能を作ろうとしたところで行き詰まった。
AIRではJavaで提供されてるようなRuntime.exec()やProcessBuilderチックなAPIがないんだった・・・。

ここであきらめるのも悔しいのでAIRで「ファイルをダブルクリックしたら関連付けられたアプリケーションで開く」という機能を無理矢理実装してみた。
なお、AIRだけじゃ実現するのは無理なので、実際にファイルを開く部分はJavaプログラムにヘルプをお願いしている。
(AIRとJavaの２つを使わないと実現できていない時点であまりイケてない)

ちなみに、一から作るのは面倒なので下記記事のサンプルプログラムを拡張して動作確認を行った。

ディレクトリ検索アプリケーションの構築
http://www.adobe.com/jp/devnet/air/flex/quickstart/directory_search.html

まずは記事で紹介されているFileSearch.zipをダウンロードして展開する。
そして、展開したフォルダにあるFileSearchFlex.mxmlに下記のようにコードを追加する。
ここではファイル一覧が表示されるDataGridの行をダブルクリックした際のハンドラを定義しており、Javaプログラムへ選択されたファイルのパスを送っている。

    (省略)  
    private var socket:XMLSocket;
      
    private function onDoubleClick(event:MouseEvent):void {
        if(!socket) {
            socket = new XMLSocket();
        }

        if(!socket.connected) {
            socket.connect('localhost', 5050);
        }
     
        socket.send(event.target.data.path + "\n");
    }
    (省略) 
        <mx:DataGrid id="resultsGrid" doubleClickEnabled="true" doubleClick="onDoubleClick(event)" 
    (省略)

次に以下のようなJavaプログラムを用意する。
やりたいのはこれ。
Java 6から追加になったDesktopクラスのopenメソッドを利用すること。

File file = new File(path);
Desktop.getDesktop().open(file);

これがFileSearchFlex側から送られてきたパスのファイルをOS側で関連付けられたアプリケーションを使用して開くという働きをする。

FileOpener.java

package net.air_life.sample;

import java.awt.Desktop;
import java.io.BufferedReader;
import java.io.File;
import java.io.IOException;
import java.io.InputStreamReader;
import java.io.PrintStream;
import java.net.ServerSocket;
import java.net.Socket;

public class FileOpener {
    public static final int DEFAULT_PORT = 5050;
    private static FileOpener server;
    
    ServerSocket socket;
    Socket incoming;
    BufferedReader readerIn;
    PrintStream printOut;

    public static void main(String[] args) {
        int port = DEFAULT_PORT;

        try {
            port = Integer.parseInt(args[0]);
        } catch (ArrayIndexOutOfBoundsException e) {
        }

        try {
            server = new FileOpener(port);
        } catch (IOException e) {
            e.printStackTrace();
        } finally {
            if(server.socket != null) {
                try {server.socket.close();} catch (IOException e) {}
            }
        }
    }

    private FileOpener(int port) throws IOException {
        System.out.println(">> Starting FileOpener Server");
        socket = new ServerSocket(port);
        
        while (true) {
            try {
                incoming = socket.accept();
                readerIn = new BufferedReader(new InputStreamReader(incoming.getInputStream(), "UTF-8"));
                printOut = new PrintStream(incoming.getOutputStream());
                
                String str = readerIn.readLine();

                if(str != null && str.trim().length() > 0) {
                    openFile(str);
                }
            } catch (Exception e) {
                e.printStackTrace();
            } finally {
                if(printOut != null) {
                    printOut.close();
                }
                if(readerIn != null) {
                    try {readerIn.close();} catch (IOException e) {}
                }
                if(incoming != null && !incoming.isClosed()) {
                    try {incoming.close();} catch (IOException e) {}
                }
            }
        }
    }
    
    private void openFile(String path) throws IOException {
        File file = new File(path);
        if(file.exists() && file.isFile()) {
            Desktop.getDesktop().open(file);
        }
    }
}

実行する場合は、
1. FileOpenerのJavaプログラム
2. FileSearchFlexのAIRプログラム
という順で実行する。

これでFileOpenerを実行している間はFileSearchFlexから「選択したファイルをダブルクリックしたら関連付けられたアプリケーションで開く」ということができる。

2008/11/13

Flex向けのテストツールFluintが紹介されてた

前回に続いて今回もInfoQの記事から。

FlexUnitやAS3Unitじゃなくて、Fluint(旧dpUInt)を使ってたので、こういった記事で知名度アップするとうれしいですね。

Flex向けのユニットテストツールFluint - 総合テストもカバー
http://www.infoq.com/jp/news/2008/11/fluint-unit-test-for-flex

名前は「Fluint」であって、「Flunit」ではないのでご注意を。

2008/11/12

Prana Framework - IoC Container for AS3

Springを基に作られたActionScript 3で使えるIoCコンテナを提供するPranaフレームワークの邦訳記事がInfoQで公開されてました。
CairngormやPureMVCと統合されてるようです。

ActionScript 3 を使ったアプリケーション開発をサポートする Prana フレームワーク
http://www.infoq.com/jp/news/2008/11/prana-framework-actionscript-3

2008/11/05

リグレト - 「ヘコみ」と「なぐさめ」を共有して楽しむサービス

リグレト
http://rigureto.jp/

Mac People 12月号に掲載されてたので試してみた。
かわいい感じのサービスやの。
自分の「ヘコみ」にパーマリンクが欲しいな。
そうしたら、直接「なぐさめ」を書いてもらえるのに。

ペコペコ音が鳴るから会社では気をつけて開いてね。

2008/11/04

Mac Fan 12月号 - 2008

本屋で立ち読みしてたら、じっくり読みたくなってついつい買ってしまった。
「第2特集 OS進化論」と「Apple's Standards」の記事が良かった。

まず「第2特集 OS進化論」だが、この記事ではMac OSの変遷が語られていたのだが、
初代Mac(1984)以前にアップルから販売されていたLisa(1983)で、
既にメニューが現在の形になり、他にもGUIのベースは完成していたことに驚いた。
現在のWindows, Linuxを含むOSへの影響はホント大きかったんだねぇ。

次に「Apple's Standards」では、スティーブ・ジョブスの製品に対する強いこだわりが書かれている。
ジョブスはアップルにとって製品は「プロダクトではなくアート」であると考え、外観の美しさだけでなく、内側にも外観に負けない美しさを持たせようという美学を持っている。
「うちの製品の背面は他の製品の正面よりも美しい」とまで言いっているほど。

そんな厳しい美学を持ったジョブスがOKを出したMacBook、これから使い倒してやろう。
新登場アルミボディのMacBook欲しい・・・。

Adobe xml news aggregator - Adobe Feeds

ブログのサイドメニューにも表示させてもらってるAdobe Feeds
Flex, AIRに関係ない情報も流れるけど、RSSリーダーに登録して重宝してます。
http://feeds.adobe.com/index.cfm?query=byLanguage&languageId=6&languageName=Japanese

上部メニューから「Submit Feed」を選択して、サイト名やFeed URLを登録するとAdobe Feedsに掲載してくれますよ。

Adobe MAX Japan 2009参加登録始まってた

いつのまにやらAdobe MAX Japan 2009の参加登録が始まっていたよ。
１１月２０日（木）までは早期登録割引で１日１０００円安くなるみたい。
２日間だから２０００円安。

手続きはWebから

１．セッション選択
２．個人情報入力
３．登録情報確認
４．登録完了

その後、事務局の口座へ参加費用を振込で完了。
そしたら、後はお台場行くだけ！

イベントは２００９年１月２９日、３０日開催。

2008/10/31

MiNDPiECEがカッコいい上に使いやすいんだが

カンテツワークスのアイデア粘土細工ソフトウェアMiNDPiECE(マインドピース)に惚れた！
サンプルギャラリーを覗いて興味惹かれて、10日間体験ライセンスを発行して使ってみたら、もう買う！って気分にさせられてる。

KJ法で思いつくままペタペタ付箋を貼っていって、それを使ってマインドマップにまとめる。
それも美しいマインドマップに。
ルートトピックを一つに限定されずに複数のマインドマップを作れる点が嬉しいなぁ。

Macでしか使わないだろうからシングルライセンスでイイかな。

2008/10/27

OSSモデルカリキュラム

IPAがOSS(オープンソースソフトウェア)の技術教育に関して調査結果を公開してくれてるのだけど、そのモデルカリキュラムのPDFが沢山で充実していそう。
適当に時間を作ってみてみよう。

組み込みソフトウェアは特に全然知らないからのー。

OSS技術教育のためのモデルカリキュラムに関する調査
http://www.ipa.go.jp/software/open/ossc/seika_0605.html

調査５：モデルカリキュラムの提言
OSSモデルカリキュラムコースウェア一覧
http://www.ipa.go.jp/software/open/ossc/seika_0605_2.html

2008/10/16

Cairngormのコマンドをシーケンシャルに実行していく

Cairngorm - Chain Events
http://undefined-type.com/index.php/2008/08/07/cairngorm-chain-events

こんな感じにChainEventにイベントを配列の形で入れてやると、イベントに対応するコマンドが順次実行されていくみたいです。


var beginChain : ChainEvent = EventChainFactory.chainEvents([
       new UpdateViewEvent(ModelData.VIEW_LOADING),
       new CheckSoftwareVersionEvent(),
       new GetLocalSettingsEvent(),
       new GlobalApplicationEvent(),
       new GetFeedListEvent(),
       new UpdatePostStatusEvent(),
       new UpdateViewEvent(ModelData.VIEW_POSTS)
   ]);
beginChain.dispatch();

ソースを見るとコマンドはSequenceCommandを継承して、executeやresultメソッドの中でexecuteNextCommandメソッドを実行するようです。
これは普通のことだけれど、下記のように次のイベントをセットする形にすることによって、コマンドの実行順序をコマンドの実装から分離できてるわけですね。


override public function execute(event:CairngormEvent):void
{
       nextEvent = ChainEvent(event).nextChainedEvent;
       // Do Command Action
       this.executeNextCommand();
}

へぇー。

2008/09/24

Mateの良い点、悪い点 -infoQ-

Flex Framework Mateの良い点、悪い点
http://www.infoq.com/jp/news/2008/09/flex-mate-good-bad

短い記事だけど、好きな点、嫌いな点をハッキリ言ってます。

2008/09/03

Google ChromeでFlashはOK

なんかシンプルなおかげか画面が大きく使えてうれしい。
Firefoxの設定をインポートできるから乗り換えも簡単。
Flash Playerも動いたからアイツも動く。

タブ毎に別プロセスだから、メニューにはGoogle Chrome内のタスクマネージャーもあったよ。

2008/09/02

GoogleのWebブラウザ - Google Chrome

Google ChromeっていうWebブラウザが出るらしい。
AppleのSafariと同じくWebKitをエンジン、Firefoxのコンポーネント、さらにGearsを加えた構成？
タブ毎に別プロセスらしいのでSleipnirやFifefoxみたいに一気に落ちるってことはなさそう。

楽しみだけど、Flash Playerはどうなるんだろう？
乗る？乗らない？
Flasherは気になるところ。

ネタ元
http://journal.mycom.co.jp/news/2008/09/02/003/

2008/08/25

SWFの3276px問題 - 65535twips問題

ベクター形式(SWF)で出力していた画像をFlexアプリケーションでロードした際に、以下に記す問題に遭遇しました。
簡単にブラウザクラッシャーが作れてしまいます。
・・・まず、こんな大きいサイズの画像を出力しようって人は少ないでしょうね。
SVGじゃなくてSWFですし。

[問題]
幅、高さが3276ピクセル以上の画像をSWF出力し、ロードするとFlash Playerがフリーズするか落ちる。

[原因]
SWF出力対象の幅、高さが3276ピクセル以上になってはいけない。
SWFの読み書きでは、unsigned shortで値を扱っている部分があるため、3276ピクセル(65535twips)を超えると桁あふれしてしまう。

2の16乗 = 65536(twips) = 3276.8(px) * 20

[対処]
SWF出力前に画像を3276ピクセル以下に縮小して出力するようにした。

[補足]
・Flash MXではムービーの新規作成時の幅、高さの上限を2880ピクセル
としているため、壊れたSWFファイルを出力することができない。
・Flashでは扱えるビットマップの幅、高さの上限は2880ピクセルである。
・Adobe Illustratorで幅、高さ3276ピクセル以上の画像を作成し、SWFで書き出すと問題を簡単に再現できる。

2008/08/19

RemoteObjectサービスの負荷テスト - BlazeDS

JMeter 2.3.2からAMFのキャプチャが出来るようになりました。

JMeter - Changes
http://jakarta.apache.org/jmeter/changes.html

Improvements
The Proxy server can now record binary requests. By default the content types application/x-amf and application/x-java-serialized-object will be treated as binary and saved in a file. To change the content types, update the property proxy.binary.types .

これでJava + Tomcat + Seasar2 +S2BlazeDS環境のRemoteObjectサービスについて負荷テストができます。
試したところ結構やりづらいですけど・・・。

Flex Builder 3.0.1リリース

Flex Builder 3.0.1がリリースされてました。
ヘルプメニューの「Flex Builderの更新を検索」からアップデートできます。

↓下記の問題が解決して、Eclipse 3.4(Ganymede)でも使えるようになるっぽい。

Flex Builder 3.x plugin don't work with Eclipse 3.4 final build
https://bugs.adobe.com/jira/browse/FB-13155

2008/08/07

Adobe MAX Japan 2009は2009/01/29-30

アドビ、第2回目となる「Adobe MAX Japan 2009」を2009年1月に開催
http://journal.mycom.co.jp/news/2008/08/07/037/index.html

やっと開催日が公開されました。
これは行かないと！

1回目も行ったし、早いうちに根回しして行くべしですね。
サイトオープンは9日13時らしい。

Adobe MAX Japan 2009
http://www.adobe.com/jp/events/max2009/

BlazeDSにJava AMFクライアントですって

BlazeDS 3.1.0.2602のflex-messaging-core.jarライブラリにJava AMFクライアント機能が追加されたらしいです。

JavaクライアントからはAMFConnectionを作って、これに対してcallメソッドを呼ぶという使い方です。
コネクションのURLにhttps(SSL)を指定して、amfsecureでも行けるんだろか。

Java AMF Client仕様
http://opensource.adobe.com/wiki/display/blazeds/Java+AMF+Client

New Java AMF Client feature in BlazeDS - 情報元
http://tjordahl.blogspot.com/2008/08/new-java-amf-client-feature-in-blazeds.html

Migrate4j - RailsのMigrationをJavaで

Migrate4j
http://migrate4j.sourceforge.net/

DBのデータを、組み込むプロダクトのバージョンに合わせて移行する方法を検討する、という状況になったので、イイやり方やツールを調べてみたところ、RailsのMigration、Gearshift(GearsのSQLite用)、Migrate4jなどが見つかりました。

Migrate4jはプロダクトの特性に合っているため、これに的を絞って調査開始です。
Migrate4jはRailsのMigrationをJavaでも実現しようというツールであり、Rubyスクリプトではなく、Javaプログラムでデータベースのスキーマ定義のバージョン管理をします。

ちなみにバージョンは0.04とまだまだ若いようです。
ライセンスはGPLになっています。

DBのサーポート状況
http://migrate4j.sourceforge.net/status.html

ステータスを見るとH2とMySqlがイイ感じでPASSしてました。
ソースコードやテストコードを覗いたところ興味が湧いてきたので、もうちょっと深く調査を続行しようと思います。

2008/08/06

CairngormがAdobe labsからAdobe Open Sourceに移動したって

Cairngorm Moved to Adobe Open Source - 情報元
http://weblogs.macromedia.com/amcleod/archives/2008/08/cairngorm_moved.html

Cairngorm - Adobe Open Source
http://opensource.adobe.com/wiki/display/cairngorm/Cairngorm

Best of Open Source Software Awards 2008

Best of Open Source Software Awards 2008
http://www.infoworld.com/article/08/08/04/32TC-bossies-2008_1.html - 情報ソース

オープンソースソフトウェアアワード2008をFlex SDKが受賞していたので受賞リストを載せてみました。
カテゴリ別に分かれています。

Collaboration

Elgg - Social networking
MediaWiki - Wiki
Scalix - Mail and calendar
VNC(TightVNC, UltraVNC) - Remote control
WordPress - Blog publishing

Developer tools

db4o - Object database
Git - Version control
HttpClient - Web client library
Intel Threaded Building Blocks (TBB) - Parallel programming
JBoss Drools - Business rule management system
Flex SDK - Rich Internet applications
Prototype - JavaScript framework
soapUI - Web services test tool

Enterprise applications

Alfresco Community - Content management
Compiere - Enterprise resource planning
GanttProject, Open Workbench, dotProject - Project management
Hyperic HQ - Application monitoring
Intalio BPMS - Business process management
Liferay Portal - Enterprise portal
Magento's eCommerce - E-commerce
Pentaho Open BI Suite - Business intelligence
SugarCRM - Customer relationship management
JasperReports - Reporting

Networking

Asterisk - IP telephony
AWStats - Log file analyzer
inSSIDer - Wi-Fi network scanner
Nagios - Server monitoring
NDISwrapper - Wireless network interface
Vyatta - Router, firewall, and VPN
Wireshark - VoIP monitoring
Zenoss Core - Network monitoring

Platforms and middleware

CentOS - Server operating system
JBossESB - Enterprise service bus
MySQL - Database
phpMyAdmin - MySQL administration
Puppy Linux - Small-footprint OS
Jitterbit - Data migration
Ubuntu 8.04 - Desktop operating system
VirtualBox - Desktop virtualization
Xen - Server virtualization

Productivity applications

Audacity - Sound editing
Blender - 3-D modeling
Firefox - Web browser
GIMP - Image editing
OpenOffice.org - Productivity suite
PDFCreator - PDF creation

Security

Metasploit - Penetration toolkit
Ophcrack - Windows password cracker
SmoothWall Express - Network firewall
Snort, BASE(Basic Analysis and Security Engine) - Network intrusion detection
Splunk - Security log analysis
TrueCrypt - Disk encryption
Untangle - Gateway security

Storage software

Amanda - Network backup
FreeNAS - Storage server
Free Online Backup - Online backup
WinMerge - File management
smartmontools - Disk monitoring
StorageIM - Storage administration

2008/07/31

BlazeDS Developer Guideが更新されたらしい

BlazeDS Developer Guide Updated
http://blogs.adobe.com/flexdoc/2008/07/blazeds_developer_guide_update.html

注意を見たらPDFバージョンは更新したけど、Livedocs HTMLはまだ更新してないみたい。

2008/07/23

Swiz - Flexフレームワーク

Swiz
http://code.google.com/p/swizframework/

Brutally simple micro-architecture for Rich Internet Application development with Adobe Flex

Swizってフレームワークがあるみたいですね。
軽く、説明とソースコードを見たところCairngormとはまた違ったアーキテクチャフレームワークなんでしょうか？

Swiz provides Inversion of Control, event handing, and simple life cycle for asynchronous remote methods.

IoC(国際オリンピック委員会じゃない方)もあるんか。

2008/07/22

Mac OSXのFirefox 3.0.1と日本語入力

Firefox 3.0.1にバージョンアップしても、まだ日本語入力はできないのですね。
正式版での対応はいつになることやら。

Firefox 3.0.1でも下記ビルドにお世話になってます。

Firefox lzyc build
http://fox.lazycat.info/archives/13

2008/07/15

Flexフレームワークの比較

New York Flex User Groupで気になる話題が取り上げられていました。
7月24日に下記内容でミーティングがあるらしい。

Title:Comparison of Flex Frameworks
The goal of any framework is to make the process of software development and maintenance easier. There are different ways of achieving this goal. Some people prefer working with frameworks that are based on the Model-View-Controller pattern, while other like dealing with class libraries of components. Each approach has its pros and cons. During this session we'll go over the same application that was built using Cairngorm, Clear, PureMVC and Mate frameworks.

Cairngorm、Clear、PureMVC、Mateって興味津々なフレームワークばかりじゃないか！
終わったら資料公開してください。
お願いします。

2008/07/11

Mateプロジェクトの作り方

今回はMateプロジェクトの作り方を紹介します。
作り方を簡単に説明すると、下記のような手順で進めることになります。

1. Mate.swcをプロジェクトに追加する。
2. ビューを作る。
3. イベントマップ(EventMap)を作る。
4. メインアプリケーションファイルにイベントマップを含める。
5. カスタムイベントを作る。
6. イベントをディスパッチするようにする。
7. イベントマップにイベントをリッスンするイベントハンドラ(EventHandlers)を追加する。
8. イベントハンドラブロック内でアクションが実行されるようにする。(サーバのサービスを呼ぶなど)
9. 5から8の繰り返し。

今回は細かいことは気にせずMateプロジェクトの作り方の経験を目的とし、
イベントハンドラ、イベントマップなどのMateの要素は別な機会に触れることにしました。
なお、初プログラミングのお約束、Hello Worldを作ることにします。

完成イメージ

Hello World >> Mate Flex Framework を参考に作りました。
サンプルの中で、ColdFusionを利用している部分はBlazeDSに置き換えています。
http://mate.asfusion.com/page/examples/hello-world

ここから、実際にMateプロジェクトを作っていきます。

1. Mate.swcをプロジェクトに追加する。
Mate.swcが手元にない場合はもちろんダウンロードしておくこと。
今回はFlex3でプロジェクトを作るので、Downloads >> Mate Flex Framework のページから下記をダウンロードします。
Download compiled library (SWC) version 0.7.1 - Flex 3

まずはダウンロードしたMate_07_1.swcをプロジェクトのlibsフォルダに追加します。

2. ビューを作る。
src/net/air_life/mate/views/MessagePanel.mxml


<?xml version="1.0" encoding="utf-8"?>
<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" 
    xmlns:mate="http://mate.asfusion.com/"
    title="Hello Worldのサンプル" 
    resizeEffect="Resize"  horizontalScrollPolicy="off" verticalScrollPolicy="off">
    <mx:Script>
        <![CDATA[
            import net.air_life.mate.events.*;
                
            private function submitForm():void 
            {
                messageDispatcher.generateEvent();
            }
            
            private function handleResult(text:String):void
            {
                currentState='response'; 
                display.text = text;
            }
            
            private function handleFault(text:String):void
            {
                currentState='response'; 
                display.text = text; 
                display.styleName='error'
            }
        >
    </mx:Script>
    
    <mate:Dispatcher id="messageDispatcher" generator="{MessageEvent}" type="{MessageEvent.GET}">
        <mate:eventProperties>
            <mate:EventProperties name="{inputName.text}"/>
        </mate:eventProperties>
        
        <mate:ServiceResponseHandler result="handleResult(event.result.text)"
                                      fault="handleFault(event.fault.faultString)"/>
    </mate:Dispatcher>
    
    <mx:states>
        <mx:State name="response">
            <mx:AddChild position="lastChild">        
                <mx:Text id="display" styleName="message" />
            </mx:AddChild>
        </mx:State>
    </mx:states>
        
    <mx:HBox>
        <mx:Label text="あなたのお名前を入力してください:"/>
        <mx:TextInput id="inputName" enter="submitForm()"/>
        <mx:Button label="送信" click="submitForm()"/>
    </mx:HBox>
</mx:Panel>

3. イベントマップを作る。
src/net/air_life/mate/maps/MainEventMap.mxml


<?xml version="1.0" encoding="utf-8"?>
<EventMap xmlns:mx="http://www.adobe.com/2006/mxml"
    xmlns="http://mate.asfusion.com/">
    <mx:Script>
        <![CDATA[
            import com.asfusion.mate.core.*;
        >
    </mx:Script>
</EventMap>

4. メインアプリケーションファイルにイベントマップを含める。
src/MateHelloWorld.mxml


<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
    xmlns:view="net.air_life.mate.views.*" 
    xmlns:maps="net.air_life.mate.maps.*">
    <!-- Styles --> 
    <mx:Style source="assets/styles/main.css"/>

    <!-- Event Maps -->
    <maps:MainEventMap/>

    <!-- Views -->
    <view:MessagePanel/>
</mx:Application>

5. カスタムイベントを作る。
src/net/air_life/mate/events/MessageEvent.as


package net.air_life.mate.events
{
    import flash.events.Event;
    
    [Bindable] 
    public class MessageEvent extends Event
    {
        public static const GET:String = "getMessageEvent";

        public var name:String;

  public function MessageEvent(type:String, bubbles:Boolean=true, cancelable:Boolean=true)
        {
            super(type, bubbles, cancelable);
        }    
    }
}

6. イベントをディスパッチするようにする。
src/net/air_life/mate/views/MessagePanel.mxml


            private function submitForm():void {
                messageDispatcher.generateEvent();
            }
    
    .....
    
    <mate:Dispatcher id="messageDispatcher" generator="{MessageEvent}" type="{MessageEvent.GET}">
        <mate:eventProperties>
            <mate:EventProperties name="{inputName.text}"/>
        </mate:eventProperties>
        
        <mate:ServiceResponseHandler result="handleResult(event.result.text)"
                                      fault="handleFault(event.fault.faultString)"/>
    </mate:Dispatcher>
    
    .....
    
        <mx:Button label="送信" click="submitForm()"/>

7. イベントマップにイベントをリッスンするイベントハンドラを追加する。
src/net/air_life/mate/maps/MainEventMap.mxml


<?xml version="1.0" encoding="utf-8"?>
<EventMap xmlns:mx="http://www.adobe.com/2006/mxml"
    xmlns="http://mate.asfusion.com/">
    <mx:Script>
        <![CDATA[
            import com.asfusion.mate.core.*;
            import net.air_life.mate.events.*;
        >
    </mx:Script>
    
    <EventHandlers type="{MessageEvent.GET}">
    </EventHandlers>
</EventMap>

8. イベントハンドラブロック内でアクションが実行されるようにする。(サーバのサービスを呼ぶなど)
src/net/air_life/mate/maps/MainEventMap.mxml


<?xml version="1.0" encoding="utf-8"?>
<EventMap xmlns:mx="http://www.adobe.com/2006/mxml"
    xmlns="http://mate.asfusion.com/">
    <mx:Script>
        <![CDATA[
            import com.asfusion.mate.core.*;
            import net.air_life.mate.events.*;
        >
    </mx:Script>
    
    <EventHandlers type="{MessageEvent.GET}">
        <RemoteObjectInvoker destination="helloWorld" 
         endpoint="@ContextRoot()/messagebroker/amf"
            method="sayHello" arguments="{event.name}"
            showBusyCursor="true">
            <resultHandlers>
                <ServiceResponseAnnouncer type="result" />
            </resultHandlers>

            <faultHandlers>
                <ServiceResponseAnnouncer type="fault"/>
            </faultHandlers>
        </RemoteObjectInvoker>
    </EventHandlers>
</EventMap>

9. 5から8の繰り返し。
あとはイベントを追加するごとに5から8を繰り返し追加していきます。
Hello Worldはシンプルなので、9は無しで終了。

手順には抜けてましたが、FlexクライアントとBlazeDS間で受け渡すVOのソースも載せておきます。
src/net/air_life/mate/vos/Message.as


package net.air_life.mate.vos
{
    [RemoteClass(alias="net.air_life.vos.Message")]

    [Bindable]
    public class Message
    {
        public var text:String = "";

    }
}

最終的にはプロジェクトの構成はこのようになりました。

これでMateを使ったHello Worldが完成！
今回作ったソースコードはこちらで右クリック－ソースの表示より。
http://f.air-life.net/samples/mate/HelloWorld/
なお、Hello Worldを返してくれるサービスはBlazeDS上に構築し、RemoteObjectを使っているため、TomcatやWebLogicなどのアプリケーションサーバが必要となります。

下記のサイトからBlazeDSが配備済みのTomcat(Turnkey)をダウンロードし、今回紹介したソースコードをビルド、デプロイすることで動作確認を行えます。

冒頭でも述べたように、イベントハンドラ、イベントマップなどのMateの要素は次回以降触れていくことにします。

Cairngormの概要図

続いて、ちょっと嫌いになってきたCairngormの概要図も。

Farata Systems >> Our new book:” Enterprise Flex. Best Practices”
http://flexblog.faratasystems.com/?p=335

cairngormdocsと一緒にご覧あれ。
Cairngorm diagram - download area
http://www.cairngormdocs.org/cairngormDiagram/index.html

PureMVCの概要図

先のMateの概要図と同じくFarata SystemsにPureMVCのものもあったので紹介しておきます。
これを見る限りPureMVCって複雑な印象を受けます。

Farata Systems >> PureMVC diagram
http://flexblog.faratasystems.com/?p=345

Mate Flex Frameworkの概要図

Mateのページにもありましたが、Farata SystemsのサイトにMateの概要図が描かれていました。

Farata Systems >> Mate Flex Framework
http://flexblog.faratasystems.com/?p=342

2008/07/08

ディープリンクでちょっと失敗

とあるプロジェクトでFlex3で追加されたディープリンクを使ってるんだけど、そこでちょっと失敗しました。

ちなみにディープリンクの解説はこちら。

ディープリンクについて
http://livedocs.adobe.com/flex/3_jp/html/help.html?content=deep_linking_2.html

ブラウザのアドレスバーからコピーすれば問題ないんだけど、「これを使ってね」というようにプログラム側でディープリンクのURLを作っている部分で問題がありました。

ちなみにこんな感じで作ってました。


var url:String = BrowserManager.getInstance().base + "#" + URLUtil.objectToString(fragment, "&");

しかし、このコードでは

http://hoge.air-life.net/flexapp/##id=1000

というように、ある条件のときに#が一つ余計についてしまうことがあったのです。

そのある条件っていうのはこちら。URLの最後に#を付けてアクセスした場合。

http://hoge.air-life.net/flexapp/#

IBrowserManagerのプロパティbaseを見ると↓こう説明されていて#は入らないと思ったのにな・・・。
http://livedocs.adobe.com/flex/3_jp/langref/mx/managers/IBrowserManager.html#base

ブラウザのアドレスバーに表示されている現在の URL の「#」より前の部分。

んー、何か間違ったかな。

2008/07/07

Google技術講演会 in 京都行ってきたよ

楽しみにしていたGoogle技術講演会 in 京都(Google Tech Talk)行ってきたよ。

交流会がTech Talkの前後にあったんだけど、そこでの会話が良かった。
私にとってはとても有益な情報交換となったと思う。
似たような問題に遭遇してる人はやっぱりいるんだなーと、しみじみ感じた。

それとビックリしたのはFxUG(Flex User Group)のメンバーとの遭遇率の高さ。
まず、受付で並んでいて遭遇、会場に入って遭遇、周りを見渡してまた遭遇、
Tech Talkを聴いていて、前席の人に見覚えあるなーと思っていたらやっぱり、
という感じで各所で出会った。

今日のイベントで沢山の出会いがあったのはFxUGの勉強会に参加したおかげだと思う。
出会ったみんなに感謝！

2008/07/06

Flash MagazineのMate紹介記事

Flash MagazineでMate Flex Frameworkが紹介されてます。
Mateの必要性やドキュメント＆サンプルソースコード(リンクだけど)、Mateがどんなコンポーネントで構成されているかなどが紹介されてました。
英語なので読むのしんどい。

Mate: Event driven framework for Flex
http://www.flashmagazine.com/Reviews/detail/mate_event_driven_framework_for_flex/

2008/07/03

Mateとは

Mate(マテ)はAsFusion社で開発されているFlexフレームワークです。
「タグベース」「イベント駆動」であるという特徴があります。

タグベースのFlexフレームワークであり、ActionScriptをガリガリ書くようなActionScriptフレームワークではありません。
現在はAlphaであるが社内では既に第4イテレーションに入るほど長く利用されてきました。

Mateはイベントマップ(Event Map)と呼ばれる「イベント」とそれに対してどういう「アクション」を実行するかを示すマッピング定義(Event Handlers)を提供します。
イベントハンドラ(Event Handlers)内ではメソッド、コマンド、Webサービス、HTTPサービス、リモートオブジェクトを呼び出すなどを行えます。

Mateでは、以下のハンドラを提供しており、それぞれの用途によって使い分けて使用します。

MethodInvoker

CommandInvoker

EventAnnouncer

WebServiceInvoker

HTTPServiceInvoker

RemoteObjectInvoker

ObjectBuilder

DataCopier

StopHandlers

InlineInvoker

ResponseAnnouncer

なお、ユーザが独自に定義したハンドラを利用することは可能です。

次にビュー、イベントマップ、イベントハンドラらの関係の一例を紹介します。
Two-way communication via model: Using view injection

この図では下記の流れを表しています。

ビューがイベントをディスパッチする。

イベントがイベントマップのイベントタイプに対応したハンドラに届く。

ハンドラで定義されているサービス呼び出し(HTTPサービスなど)のアクションが実行される。

ModelManagerのメソッドが実行され、サービス呼び出しの戻り値がセットされる。

ModelManagerの変化や更新はバインディングによってビューに伝わる。

他にも図で流れが紹介されていますので、興味がある方はこちらもご覧ください。
Mate Diagrams

今回は以上で。

Mate Flex Framework

最近注目しているFlexのフレームワークであるMateについて、何度かにわけてメモっていこうと思います。
参照元はMateのサイトにあるドキュメンテーションにします。

内容としては、こんな感じにしていく予定です。
予定なので変更はもちろんありえます。

Mateって？

イベントマップ(Event Map)とは

イベントハンドラ(Event Handlers)とは

Mateで提供されるハンドラ

Mateの振る舞い

MateとCairngormの比較

Mateプロジェクトの作り方

Mateプロジェクトを作ってみる

Mateのデバッグ

あとは未定

Mateに興味のある方、いろいろ情報をもらえると助かります。

最近はInfoQのこちらの記事で紹介されていました。
まずはこちらを読むことをおすすめします。

注目されるMate Flex FrameworkのAlpha版
http://www.infoq.com/jp/news/2008/06/mate-flex-framework-alpha

2008/06/29

Google技術講演会 in 京都(7/6) 行くよ

Google Codeディスカッショングループにタイトルにある案内が届いたので行こうと思います。
7月6日に京都で開催ですよ。
http://services.google.com/events/kyoto-techtalk2008

先週末はFlex User GroupのFlex3勉強会で大阪、来週はGoogle Tech Talkで京都。
関西遠征が続きます。

私の顔に見覚えがある方/ない方、見かけたら気兼ねなく声かけてくださいませ。

2008/06/28

Flex3勉強会行ってきたよ

大阪で勉強会があったから行ってきたよ。
懇親会でワイワイ飲んでたら楽しくって23時過ぎてた。
途中で抜けなくてはならなかったのが残念。

ダッシュで駅に向かったら、無事「きたぐに」に間に合った。
AM2時30分自宅着・・・。

懇親会がとても楽しかった！
Flex User Groupのみなさんありがとうございます。

2008/06/27

FlexでGearsを使う

FlexでGoogle Gears(Gears)を使う方法がサンプル＆ソースコード付き紹介されてました。
やはり、ゴリゴリとJavaScriptを使わないといけないんですね。

Enhancing Flex applications with Google Gears
http://weblog.mrinalwadhwa.com/2008/06/27/flex-and-gears/

2008/06/26

Flex3勉強会第45回＠大阪

これ行く！
大阪へ行こうじゃないか。

Flex3勉強会第45回＠大阪
http://www.fxug.net/modules/bwiki/index.php?Flex3%CA%D9%B6%AF%B2%F1%C2%E845%B2%F3%A1%F7%C2%E7%BA%E5%BB%B2%B2%C3%BC%F5%C9%D5

Flexの勉強会参加は初めて。

2008/06/24

ログAPIの使用

Flex、AIRでのデバッグ時にはtrace()を使っていたけど、パフォーマンス的によろしくないのでログAPIでログ情報を出力するようにTRYしてみた。

ログ API の使用
http://livedocs.adobe.com/flex/3_jp/html/help.html?content=logging_09.html

ログカテゴリには完全修飾クラス名を指定するのが規則なんだけど、イチイチ書くのは面倒なのでターゲットのオブジェクトを渡すと、そのオブジェクトの完全修飾クラス名を内部で取得して、そのカテゴリに関連付けられたロガーを返してくれるユーティリティを作ってみた。
ちなみにLogTargetのフィルターを指定していて、汎用性に欠けていることには後で気がついた・・・。

それと疑問なのが、LogTargetのフィルターでmx.messaging パッケージと mx.rpc パッケージを指定していないんだけど、BlazeDSでRPCするとログ情報が山ほど出てきてしまう。
そのため、Log.flush()を呼んで関係のないロガーを削除しているんだけど、Log.flush()はデバッグ専用で使っちゃまずそうなので後でなんとかしよう。


package net.air_life.utils 
{
   import flash.utils.getQualifiedClassName;
   
   import mx.logging.ILogger;
   import mx.logging.Log;
   import mx.logging.LogEventLevel;
   import mx.logging.targets.TraceTarget;

   public class LogUtil 
   {
       private static var logTarget:TraceTarget;

       public static function getLogger(targetObj:Object):ILogger 
       {
           if(!logTarget) 
           {
               //デバッグ専用なのでここで使うのはまずいね
               //http://livedocs.adobe.com/flex/3_jp/langref/mx/logging/Log.html#flush()
               //mx.messaging パッケージと mx.rpc パッケージ配下のすべてのログ情報が出てしまうためにflushしている。
               Log.flush();
               
               var logTarget:TraceTarget = new TraceTarget();
               logTarget.level = LogEventLevel.WARN;
               //メッセージをログに出力するクラスを指定
               logTarget.filters = ["net.air_life.hoge.*"];
               logTarget.includeDate = true;
               logTarget.includeTime = true;
               logTarget.includeCategory = true;
               logTarget.includeLevel = true;
                
               Log.addTarget(logTarget);
            }
            
            //完全修飾クラス名は "net.air_life.hoge::Hoge"のような文字列なので、"::"をカテゴリ名に使える"."に置換している。
            var category:String = getQualifiedClassName(targetObj).replace("::", ".");
            var logger:ILogger = Log.getLogger(category);
            
            return logger;
        }
    }
}

使い方はこう。
flash.utils.getQualifiedClassName()を使って、thisからログカテゴリに指定する完全修飾クラス名を作っている。


    var logger:ILogger = LogUtil.getLogger(this);
    logger.debug(event.target.toString());

2008/06/22

Mac OSX版Firefox3.0のFlash Player上での重大な問題

Mac OSX版Firefox3.0のFlash Player上で日本語入力は本当にできなかった・・・。
リリース前に各所で噂は聞いていたけど、本当にそのまま正式リリースを迎えるとは残念。
なんて致命的な問題を含んでいるんだろう。

今は問題のバグにパッチを当ててくれたバージョンを使っています。
それだけで、Firefoxをいつまでも2のまま3へ移行しないなんて嫌ですから。

Firefox lzyc build
http://fox.lazycat.info/archives/13

2008/06/21

ImageコントロールでアニメーションGIFが動いてくれない

昨日、画像のロード中にLoadingイメージを表示するよう試みた。
まずは楽しようと、下記のジェネレータでLoadingイメージのアニメーションGIFを作成した。

Ajax loading gif generator
http://www.ajaxload.info/

作ったアニメーションGIFはこんな感じで使おうとした。
imageのvisibleとloadingのvisibleにはloadingData:Boolean(初期値true)をバインディングしておいて、imageの画像データの読み込みが完了したらfalseに値が切り替わり、ロード中から画像の表示へと切り替えるというもの。


       <mx:Image id="image" source="{imageUrl}" visible="{!loadingData}"
               complete="loadingData=false;"
               width="120" height="120" horizontalCenter="0"/>
       <mx:Image id="loading" source="@Embed('/assets/loading.gif')"
               visible="{loadingData}" horizontalCenter="0" top="30" width="32" height="32"
               showEffect="Fade" hideEffect="Fade"/>

しかし、loading.gifがちらっと一瞬表示されたけど動いていないような気が・・・。
確認したところ確かに動いていない。
どうやらFlexのImageコントロールはアニメーションGIFに対応していないようだ。
一応、静止画像は表示される。

調べたところアニメーションGIFに対応したLoaderは作られているようだ。
見つけたのはこれら。

Animated Gif Loader Component
http://www.adobe.com/cfusion/exchange/index.cfm?event=extensionDetail&extid=1103970

How to load animated GIFs using Adobe Flex 2.0(上記コンポーネントの作者)
http://dougmccune.com/blog/2007/01/19/how-to-load-animated-gifs-using-adobe-flex-20/

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

しかし、使用するライブラリは増やしたくないので素直にFlashを使ってアニメーションを作ることにした。
それも楽をしたいのでAjax loading gif generatorで作成したアニメーションGIFをFlashで読み込んでムービークリップとしてSWFに書き出すことにした。
なんて怠け者なんだろう。

loading.gifからloading.swfは作れたので、先ほどのコードもちょっと修正して下記のような感じにした。
１カ所、mx:Imageを使っていたところをmx:SWFLoaderに書き換えたくらい。


       <mx:Image id="image" source="{imageUrl}" visible="{!loadingData}"
               complete="loadingData=false;"
               width="120" height="120" horizontalCenter="0"/>
       <mx:SWFLoader id="loading" source="@Embed('/assets/loading.swf')"
               visible="{loadingData}" horizontalCenter="0" top="30" width="32" height="32"
               showEffect="Fade" hideEffect="Fade"/>

これでファイルサイズの大きな画像ファイルを読み込むときはNow Loadingのくるくるしたアニメーションが表示されるようになった。

必要そうだったらファイル一式載せておこう。

2008/06/16

FileReference.upload()の宛先がhttpsだとFirefoxでは失敗する

この前判明したこと。
下記のように、FileReference.upload()の宛先がhttpsだとFirefoxではサーバにリクエストが届かない。
IEでは問題なかった。


    private var fileRef:FileReference;
    //略
    private function upload():void {
        var req:URLRequest = new URLRequest("https://xxxx/FileUploader");
        req.method = URLRequestMethod.POST;
        fileRef.upload(req);
    }

どうやらFirefox環境でのバグのようだ。
今のところはhttpで素直に送るか、JavaScriptを使った代替手段で回避するしかなさそう。

FileReference.upload() from Firefox over SSL is problematic
http://bugs.adobe.com/jira/browse/SDK-13196

2008/06/07

dispatchEvent(event:Event)のオーバライドメモ

ふむふむ。


override public function dispatchEvent(event:Event):Boolean
{
    var handlerName:String = event.type + "Handler";

    if(this.hasOwnProperty(handlerName))
    {
      var method:Function =  this[handlerName] as Function;
      method.apply(this, [event.clone()]);
    }
    return super.dispatchEvent(event);
}

Vistaのアドレスバーちっくなコンポーネント

BreadCrumb Navigator
http://blog.smashedapples.com/2008/06/flex-breadcrumb.html

これイイな。
Windows Vistaのエクスプローラのアドレスバーっぽい。

ナビゲーションパスのそれぞれにドロップダウンがあって、簡単に階層間の移動が可能に。
欲しかったコンポーネントなんだけど、Degrafaってライブラリを使っているのか・・・。

ソースを眺めてみよう。

2008/05/28

Flexメタタグデータいっぱい

メタタグが16個くらい載ってた。
http://livedocs.adobe.com/flex/3_jp/html/help.html?content=metadata_3.html

よく使うのは頻度順に、

Bindable

Embed

Event

RemoteClass

かな。

Arrayに格納できるデータ型を定義するArrayElementTypeってのは今後機会があったら使っときたいところ。
NonCommittingChangeEventなんて、存在を知らなかった・・・。

イベントを一時トリガにしていするらしい。
TextInputのtextプロパティに対するchangeイベントのような頻繁に値が変更されるけど、都度、バリデートしたくないようなときに使うんだとさ。

へぇ～～～。

2008/05/26

Mac OSXの操作でよくやるミス～その2～

フォルダを上書きしようとして置換。

Windowsの場合、フォルダを上書きすると中身は、
「以前フォルダにあったファイル＋新しいフォルダにあるファイル」
になりますが、Macでは同様の操作をするとフォルダの置換となるため中身は、
「新しいフォルダにあるファイル」
だけになります。

以前フォルダにあったファイルは消えてしまうので要注意です。
とくに、Windowsユーザだった人は気をつけてください。

Mac OSXの操作でよくやるミス～その1～

ファイルを削除しようとして、「コマンド＋D」をしてしまう。
Windowsだとファイルが削除されるんだけど、Macだとファイルが複製されちゃうんですよね。
正しくは「コマンド＋delete」です。

Cairngorm Extensions

私がちょっと前から注目しているプロジェクトを紹介します。
「Cairngorm Extensions」というプロジェクトであり、名前が示す通り「Cairngorm」を拡張するものです。

Cairngorm Extensions
http://code.google.com/p/flexcairngorm/

Cairngorm
http://labs.adobe.com/wiki/index.php/Cairngorm

Cairngorm Extensionsに触れる前に、Cairngorm(ケアンゴーム)の概要を説明します。
CairngormはAdobe labsで公開されているFlexによるRIAソフトウェアの開発のためのクライアントサイドのアーキテクチャフレームワークです。
Cairngormには、Adobeコンサルティングが培ってきたエンタープライズRIAソフトウェア開発のデザインパターンが実装されています。

使われているデザインパターンとしては、下記のものが見られます。

Business Delegate

Command

Front Controller

Service Locator

なお、DIやAOPなど特別な機能を提供してくれるフレームワークではなく、このようなアーキテクチャで実装しましょうというアーキテクチャを提供するフレームワークです。

Cairngormを理解するには、Cairmgorm Diagramを見るのが一番の近道です。

次に、本題のCairngorm Extensionsについて触れましょう。
Cairngorm Extensionsは冒頭でも述べたように、Cairngormを拡張するフレームワークです。
これはUniversal MindのThomas Burleson氏を中心にGoogle Code上で開発が進められています。
そのため、SVNリポジトリにあるソースコードやPDF、wikiページを見ることが可能です。
下記URLにある、Thomas氏が使用していたスライドを見るとCairngormの問題点、Cairngorm Extensionsの開発動機などが書かれています。
http://flexcairngorm.googlecode.com/svn/trunk/docs/

なお、議論はGoogle Groups上で行われており、私たちもそれを覗くことは可能です。

これまでCairngorm Extensionsのフレームワークは提供されていましたが、具体的なサンプルが公開されていませんでした。
そのため、理解しがたい部分もありましたが、先日、Thomas氏はCairngorm ExtensionsによるFlexStoreを来週中に公開する予定であることを告知しています。

宛先 cairngormextensions@googlegroups.com
日付 2008/05/25 23:05
件名 {Cairngorm Extensions} Re: documentation
Coming soon (within the next week), I will also provide an release of the FlexStore using the Cairngorm extensions.
Thanks,
ThomasB

FlexStoreが公開されたらソースコードを読んでみようと思います。

2008/04/24

Code Coverage Tool ～コードカバレッジ～

flexcoverってのあった。
テストコードを書くのは飽きるから、モチベーションを維持するためにもこんなんイイかも。

Code Coverage Tool for Flex and AIR applications
http://code.google.com/p/flexcover/

AutoComplete Input ～オートコンプリート～

こんなコンポーネントあったんだ。
オートコンプリート用のコンポーネント。
Flex, AIRで業務系の開発をするときはこんなんが必須なんだろうな。

Adobe AutoComplete Input
http://examples.adobe.com/flex2/exchange/AutoComplete/CustomizeAutoComplete/CustomizeAutoComplete.html

ObjectHandles

Flex, AIRでこういうの探してた！！
コンポーネントをリサイズしたり、移動するときはこんな感じがイイよね。

ObjectHandles
http://www.rogue-development.com/objectHandles.html
ページ中段くらいにあるExampleがステキ。

2008/04/22

Deep Linking ～ディープリンク～

Flex3のディープリンクに関しては以前もちょっと触れたことがあったけど、実際にコードは書いてなかった。
最近、使わなければならない状況になったので、サンプルプログラムを作ってみた。

ちなみにサンプルプログラムのスクリーンショットはこちら

このサンプルプログラムは画面上部にボタンが３つ、「First」、「Second」、「Third」とあり、クリックするとそれぞれ、
該当するViewに切り替わるというもの。

Viewの切り替わりと同時にブラウザのアドレスバーのURLも変化する。
First ー http://127.0.0.1/DeepLinkSample.html#view=first
Second ー http://127.0.0.1/DeepLinkSample.html#view=second
Third ー http://127.0.0.1/DeepLinkSample.html#view=third

http://127.0.0.1/DeepLinkSample.html#view=thirdとアドレスバーに入力して、
アクセスした場合、ViewにThirdが指定された状態で画面が表示される。

DeepLinkSample.mxml


<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
   xmlns:view="hoge.view.*">
   <view:ViewContainer width="100%" height="100%">
   </view:ViewContainer>
</mx:Application>

hoge/view/ViewContainer.mxml


<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" height="100%"
   xmlns:view="hoge.view.*" creationComplete="initApp()">
       <mx:Script>
           <![CDATA[
               import mx.core.Container;
               import mx.events.BrowserChangeEvent;
               import mx.events.ItemClickEvent;
               import mx.managers.BrowserManager;
               import mx.managers.IBrowserManager;
               import mx.utils.URLUtil;

               private var browserManager:IBrowserManager;

               [Bindable]
               private var viewId:String;

               private function initApp():void {
                   browserManager = BrowserManager.getInstance();
                   browserManager.addEventListener(BrowserChangeEvent.BROWSER_URL_CHANGE, parseURL);
                   browserManager.init();
               }

               private function parseURL(event:BrowserChangeEvent):void {
                   var o:Object = URLUtil.stringToObject(browserManager.fragment);
                   viewId = o.view;
               }

               private function updateURL(event:Event):void {
                   var fragment:String = "view=" + event.currentTarget.selectedChild.id;
                   browserManager.setFragment(fragment);
               }

               private function getView(viewId:String):Container {
                   if(viewId == "second") {
                       return second;
                   }else if(viewId == "third") {
                       return third;
                   }else {
                       return first;
                   }
               }

               private function clickHandler(event:ItemClickEvent):void {
                   viewStack.selectedChild = getView(event.label);
               }
           ]]>
       </mx:Script>
       <mx:ViewStack x="0" id="viewStack" width="100%" height="100%" top="40"
           selectedChild="{getView(viewId)}" change="updateURL(event)">
           <view:FirstView id="first">
           </view:FirstView>
           <view:SecondView id="second">
           </view:SecondView>
           <view:ThirdView id="third">
           </view:ThirdView>
       </mx:ViewStack>
       <mx:ButtonBar borderStyle="solid" horizontalGap="5" horizontalCenter="0" y="10"
           itemClick="clickHandler(event)">
       <mx:dataProvider>
           <mx:Object id="firstButton" label="first"></mx:Object>
           <mx:Object id="secondButton" label="second"></mx:Object>
           <mx:Object id="thirdButton" label="third"></mx:Object>
       </mx:dataProvider>
   </mx:ButtonBar>
</mx:Canvas>

hoge/view/FirstView.mxml


<?xml version="1.0" encoding="utf-8"?>
<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="100%" height="100%">
   <mx:Label text="1" horizontalCenter="0" verticalCenter="0" fontSize="36"/>
</mx:Panel>

hoge/view/SecondView.mxml


<?xml version="1.0" encoding="utf-8"?>
<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="100%" height="100%">
   <mx:Label text="2" horizontalCenter="0" verticalCenter="0" fontSize="36"/>
</mx:Panel>

hoge/view/ThirdView.mxml


<?xml version="1.0" encoding="utf-8"?>
<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="100%" height="100%">
   <mx:Label text="3" horizontalCenter="0" verticalCenter="0" fontSize="36"/>
</mx:Panel>

なお、ディープリンクはBrowserManagerクラスによって実現する機能である。
ディープリンクを使用する際には、履歴管理機能が無効になってしまうため、それらを同時に使用することはできないようだ。
この点は注意が必要である。

2008/04/01

MacとBIG MAC

仕事帰りに思い立ってMacBookを買ってきた。
自宅PCがとっても不調だったから買ってもイイよね。

感想は使ってみてから書くことにしよう。

「大きな買い物は結婚する前に」という教えに従うと、次は車？

2008/03/14

Flex Builder 2から3へのアップグレード

Upgrade to Flex Builder 3 Standard from US$99 (12,600円)
Upgrade to Flex Builder 3 Professional from US$299 (37,800円)
今って1ドル100円くらいだから、ドルで買った方が安くね？

2008/03/11

view(MXML)とlogic(ActionScript)の分離

今更ながらやってみた。
確かにMXMLにScriptがなくてスッキリしてイイな。(全体のコード量は若干増えるけど)

MXMLはFlexBuilderでペタペタ、CSSでデザインを小奇麗に。

ActionScriptでコードをガリガリ。

[分離前]
ComplexView.mxml


<?xml version="1.0" encoding="utf-8"?>
<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" 
 xmlns:logic="hoge.logic.*"
 width="360" height="300" layout="absolute" title="左から右へ受け流す">
 <mx:Script>
  <![CDATA[
  private function clickCopyButtonHandler(event:MouseEvent):void {
   rightField.text = leftField.text;
  }
  
  private function clickClearButtonHandler(event:MouseEvent):void {
   leftField.text = "";
   rightField.text = "";
  }
  ]]>
 </mx:Script>
 
 <mx:TextInput left="10" top="10" id="leftField" width="100"/>
 <mx:TextInput top="10" id="rightField" right="10" width="100" 
  editable="false"/>
 <mx:Button y="10" label="Copy" id="copyButton" horizontalCenter="0" 
  click="clickCopyButtonHandler(event)"/>
 <mx:Button y="60" label="Clear" horizontalCenter="0" id="clearButton" 
  click="clickClearButtonHandler(event)"/>
</mx:Panel>

[分離後]
SimpleView.mxml(view)


<?xml version="1.0" encoding="utf-8"?>
<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" 
 xmlns:logic="hoge.logic.*"
 width="360" height="300" layout="absolute" title="左から右へ受け流す">
 <logic:SimpleViewLogic id="logic"/>
 
 <mx:TextInput left="10" top="10" id="leftField" width="100"/>
 <mx:TextInput top="10" id="rightField" right="10" width="100" 
  editable="false"/>
 <mx:Button y="10" label="Copy" id="copyButton" horizontalCenter="0" 
  click="logic.clickCopyButtonHandler(event)"/>
 <mx:Button y="60" label="Clear" horizontalCenter="0" id="clearButton" 
  click="logic.clickClearButtonHandler(event)"/>
</mx:Panel>

SimpleViewLogic.as(logic)


package hoge.logic {
 import hoge.view.SimpleView;
 
 import flash.events.MouseEvent;
 
 import mx.core.IMXMLObject;
 import mx.events.FlexEvent;
 
 public class SimpleViewLogic implements IMXMLObject {
  private var view:SimpleView;
  
  public function initialized(document:Object, id:String):void {
   view = document as SimpleView;
  }
  
  public function clickCopyButtonHandler(event:MouseEvent):void {
   view.rightField.text = view.leftField.text;
  }
  
  public function clickClearButtonHandler(event:MouseEvent):void {
   view.leftField.text = "";
   view.rightField.text = "";
  }
 }
}

ロジック部分を非ビジュアルオブジェクトとして、IMXMLObjectを実装したActionScriptのクラスで定義する。

ビュー側(MXML)では、上記の非ビジュアルオブジェクトのタグを記述する。

ってだけ。
単体テストも書きやすくなりそうだし、フレームワークに依存することもなくてステキ。
ちなみに上記プログラムを実行するとこんな感じ。

2008/02/27

ディープリンク

Adobe Flex3開発ガイド p822
http://livedocs.adobe.com/flex/3_jp/devguide_flex3.pdf
「ディープリンクが動作する仕組み」より

URL を解析するには、通常は URLUtil クラスのメソッドを使用します。このクラスには、URL のサーバー名、ポート番号、およびプロトコルを検出するメソッドが用意されています。さらに、objectToString() メソッドを使用して、ActionScript オブジェクトをストリングに変換して URL の末尾に追加できます。また、URLUtil クラスのstringToObject() メソッドを使用して、クエリ文字列の任意の数の名前と値のペアをオブジェクトに変換できます。これによって、アプリケーションロジックでより簡単にフラグメントを操作できるようになります。

URLUtilクラスのobjectToString()、stringToObjectメソッドがイイ感じ。

2008/02/25

Adobe Flex3キター！AIR1キター！！BlazeDSキター！！！

ついに正式リリース。

Adobe Flex3
http://www.adobe.com/products/flex/

Adobe AIR1
http://www.adobe.com/products/air/

BlazeDS
http://opensource.adobe.com/wiki/display/blazeds/BlazeDS

2008/01/19

BlazeDS + Seasar2(S2Flex) + Flex(Cairngorm)

AdobeからBlazeDS(現時点ではβだけど)が公開されたので、これを機にSeasar2と連携させてみた。
今まではS2FlexのGatewayを使っていたけど、そこんとこをBlazeDS任せにする。
BlazeDSはFlex Data Servicesとベースは一緒なので、S2Factory for FDS2を試したところ、S2Containerにサービスのインスタンスを登録するのはそのままイケた。

手順としてはこんな感じ。

1. BlazeDS一式をダウンロード、展開。

BlazeDS
http://labs.adobe.com/technologies/blazeds/

2008年1月19日現在はblazeds_b1_121307.zipというアーカイブファイルで提供されている。
この中にはBlazeDSの空コンテキストやサンプルアプリケーションコンテキスト等が含まれている。

2. BlazeDSアプリケーションの設定。

展開後のblazeds_b1_121307\tomcat\webapps\blazeds に空コンテキストがあるので、それをベースにBlazeDSアプリケーションを構築していく。

2.1. web.xmlの設定。
blazeds\WEB-INF\web.xmlにs2filterの設定を追加する。


<filter>
    <filter-name>s2filter</filter-name> 
    <filter-class>org.seasar.framework.container.filter.S2ContainerFilter</filter-class> 
</filter>
<filter-mapping>
    <filter-name>s2filter</filter-name> 
    <url-pattern>/*</url-pattern> 
</filter-mapping>

2.2. Flexコンパイルオプション -context-root, -services の設定。

FlexBuilderでFlexコンパイラのオプションを設定する。
FDSと違って、このコンパイルオプションを指定しないとRemoteObjectの呼び出しで失敗してしまった。

blazedsというコンテキストであれば下記のように指定する。


-context-root /blazeds -services=C:\blazeds\WEB-INF\flex\services-config.xml

BlazeDSではなく、FDS(LCDS)を使う場合はWeb層コンパイラにコンテキスト名を渡す必要がそもそもないのでこのようなコンパイルオプションは不要っぽい。

BlazeDSではWeb層コンパイラや他いろいろが提供されていないので、上記のオプションが必要。
FlexBuilderコンパイラはflex-config.xmlは使用しないので、コンパイルオプションにload-configオプションの指定をする。

http://livedocs.adobe.com/flex/2_jp/docs/wwhelp/wwhimpl/common/html/wwhelp.htm?context=LiveDocs_Parts&file=00001490.html

外部ファイル内部でcontext-root, servicesを記述して、コンパイラにその外部ファイルをロードさせる形でもOK。
その場合のコンパイルオプションはこんな感じにした。


-load-config+=C:\blazeds\WEB-INF\flex\flex-config-ext.xml

load-configのところが += ってしてあるのは、FlexBuilderが内包するデフォルト設定(flex-config.xml)に追加する形とするため。

flex-config-ext.xml


<flex-config>
    <compiler>
        <context-root>/blazeds</context-root>
        <services>services-config.xml</services>
    </compiler>
    
    <metadata>
    <title>blazeds with Seasar2</title>
        <description>blazeds with S2 application</description>
        <publisher>infy2c</publisher>
        <creator>infy2c</creator>
        <language>JA</language>
    </metadata>
</flex-config>

3. S2Factory for FDS2, S2Flex2, S2Container2 2.4をダウンロード、展開。

S2Factory for FDS2
http://akabana.sandbox.seasar.org/ja/products/fds/

前提条件に
・Flex Data Services2
・S2Flex2
・S2Container2 2.4
が挙げられているけど、今回はBlazeDSを使うので、Flex Data Services2はいらない。

S2Factory for FDS2を通してFlexクライアントのリクエストに応えるインスタンスを生成する。

Flex2開発ガイドのファクトリメカニズムの使用を参照。
ファクトリメカニズムの使用
http://www.adobe.com/livedocs/flex/201_jp/html/wwhelp/wwhimpl/common/html/wwhelp.htm?context=LiveDocs_Book_Parts&file=ent_services_config_097_26.html

3.1. FlexFactoryの設定。

C:\blazeds\WEB-INF\flex\services-config.xml にFlexFactoryの設定を追加する。


<factories>
  <factory id="s2" class="org.seasar.flex2.rpc.remoting.service.fds2.factory.Seasar2Factory" /> 
</factories>

3.2. RemoteObjectの設定。

C:\blazeds\WEB-INF\flex\remoting-config.xml にRemoteObjectのdestinationを追加する。

下記のような記述をRemoteObjectの数分だけ必要になる。
factoryには3.1. で指定したs2を使う。


<destination id="hogeService">
  <properties>
    <factory>s2</factory> 
  </properties>
</destination>

なお、クライアント側はFDSを使っていたときのものでOK。
私はCairngormを使用しているので、下記のような感じになる。

ServiceLocatorとBusinessDelegateを例に挙げておく。
コマンドクラスをresponderに指定して、BusinessDelegateのメソッドを呼んでください。
Services.xml(ServiceLocator)


<?xml version="1.0" encoding="utf-8"?>
<cairngorm:ServiceLocator 
  xmlns:mx="http://www.adobe.com/2006/mxml" 
  xmlns:cairngorm="com.adobe.cairngorm.business.*">
  <mx:RemoteObject 
    id="hogeService"
    destination="hogeService"
    result="event.token.resultHandler(event);"
    fault="event.token.faultHandler(event);">
  </mx:RemoteObject>
</cairngorm:ServiceLocator>

hogeDelegate.as(BusinessDelegate)


package hoge {
    import com.adobe.cairngorm.business.ServiceLocator;
  
    import mx.rpc.AbstractService;
    import mx.rpc.AsyncToken;
    import mx.rpc.IResponder;
  
    public class hogeDelegate {
        private var responder:IResponder;
        private var service:AbstractService;
    
        public function hogeDelegate(responder:IResponder) {
            this.service = ServiceLocator.getInstance().getService("hogeService");
            this.responder = responder;
        }
    
      public function hoge():void {
          var token:AsyncToken = service.hoge();
          token.resultHandler = responder.result;
          token.faultHandler = responder.fault;
      }
}

かなり手抜きだけど以上。

登録: 投稿 (Atom)