Rails + Adobe AIRでの業務システム

昨年末から4月末まで、 Rails(JSON+RubyAMF) + Adobe AIR(Flexベース,デスクトップアプリ)での業務システムな仕事をがっちりとやっておりました。

Adobe AIRというと、今だとモバイル開発が主戦場で、WindowsMac向けのデスクトップアプリとしては、世間一般ではオワコン扱いなのかもしれません*1

しかし、今回Rails+Adobe AIRの組み合わせでやってみて、個人的にはこういう組み合わせは業務システム用途ではまだまだイケる、アリだよねという感想を持ちました。


以下、いいとおもった事をつらつらと。

デスクトップアプリなので、ブラウザ間の差異とか気にしなくていい。
Adobe AIRCookieの取り扱いはブラウザのものを使うので、DeviseとかRailsに構築した認証の仕組みがそのまま使える。
Railsサーバ側ではAPI提供に徹して、AIR側と疎結合に構築すれば、構成変更等にも柔軟に対応出来る。
PDFでの印刷処理が楽*2
開発言語がActionScriptなので、クライアントサイドをJavaScriptで開発する時よりハマリが少なくていい。クラス定義、パッケージ、型宣言があるので大分いい。


もっとも、これは開発側から見てのいい点なので、発注側から見た場合にはこの限りではないでしょう。
これからだと、技術者の確保が難しくなっていく(る)とか容易に想像出来ますし。
Flex SDKがASFへ委託されたりとか、プラットフォーム自体の将来性がどうなのかとか。



・・とかありますが、責任持って面倒見られる人がいれば、発注側にとっても今でもいい選択肢かと。

*1:TweetDeckのAdobe AIR版終了なんてニュースもありましたし

*2:そのまま安易に処理すると画質が荒くて汚いが・・

AIR,Flexの雑多なメモ

かなり古くなってる情報も


Adobe AIRメモ
PhoneGap | Developer Portal
Flash Builder 4とプラグインで爆速コーディングをしよう! | ClockMaker Blog
Flash Builder 4 Index « 夢茶爺&苦茶爺のPC奮戦備忘録
Adobe ActionScript® 3(AS3 )API リファレンス
 HTML 開発者用 Adobe® AIR® API リファレンスガイド


FlexFlashの一部
RIA開発に特化したコンポーネントを備えたフレームワーク
生成されるのはSWF


デメリット
配布サイズが大きくなる。そのため初回起動時に時間がかかる。


Flexコンパイル
mxmlファイル→ActionScriptファイル→SWFファイル


AIR
META-INFもあるので、warとかearみたいなもの
jarで展開可能
airパッケージはswfに配備情報を付加しただけのファイル
.airはjarで展開できる。 - ねこら対策研究要塞日誌@はてな


ActionScript3.0
JavaScriptの標準規格であるECMAScriptECMA-262 4th草案に準拠したもの
乱暴にいうと、JavaScriptにクラス定義やパッケージ、型宣言を追加したもの。
JavaScript+Javaというイメージ。


as演算子、is演算子
http://d.hatena.ne.jp/ActionScript/20090427/as3_as_operator


MXMLから生成されるActionScriptを確認する方法

プロジェクトのプロパティで、Flexコンパイラーに引数を追加する
-keepを追加
bin-debugフォルダにgeneratedというフォルダができて中に生成されたASが保存されている。


Flex Formatterを入れてコーディング規約を揃える


mxml
名前のとおりxmlに準拠したもの。
テキスト系のコントロールで改行文字など、特殊文字を扱いたい場合はCDATAセクションを使うと良い

<s:text><![CDATA[
本日は
<晴天>
なり]] >
</s:text>

豊富なコンポーネントで.netのようなポトリペタンが可能。
画面上に見える部品であるビジュアルコンポーネント
非ビジュアルコンポーネントがある。
非ビジュアルコンポーネントプログラマ的には結構抵抗あるかも。
asに書いた方が精神衛生上いいかも。


ネームスペース
s: や fx: など。タグ名の重複を避けるために導入されているもの。
s: や fx: といった接頭辞は、一意なURIと結びつけられている。
自分でコンポーネントを自作したら、それをネームスペースに使うことも可能。


mxmlでのプログラムについて
html上でのjavascriptのように、プログラム文をタグの中にいきなり書けない。
具体的に明示する
HTML/JavaScriptでは問題ないケース

<body>
<script type="text/javascript">
var a = 30;
alert(a);
</script>
</body>

MXMLではエラーとなるケース

<fx:Script>
<![CDATA[
var a:int = 30; //宣言は問題ない
Alert.show(a); //プログラムの文はエラー
import mx.controls.Alert; //これも問題ない
protected function helloButton_clickHandler(event:MouseEvent):void { //これも問題ない
    Alert.show("こんにちは");
}
]] >
</fx:Script>

MXMLはActionsScriptのクラスに変換される為、このような事がおこる。
上記の例でいえばvar a:int=30;は、そのmxmlクラスのメンバー変数となる。
Alert.show(a);は、クラス定義の中に直接書かれているのと同じ状態。
functionはインスタンスメソッドとなる。
つまりの中に書けるのは、クラスの変数、メソッド定義、外部クラスのインポート宣言などの宣言だけ。


ロジックの分離について
ビュー(mxml),ロジック,モデルという感じにしたい。

  1. scriptタグに普通に記述、またはscriptファイルを外出しする
  2. MVCフレームワークを使用
  3. IMXMLObjectを継承する
  4. ロジックでビューを継承する

scriptタグに記述するのは前述の理由等により避けたい。
他、イベントハンドラをインラインに書いた場合は、イベントをremoveEventListenerを使用して廃棄することが出来ない点も気をつける。
フレームワークは学習コストが発生するのと、そのフレームワークに依存してしまうため却下。


IMXMLObjectを継承する
http://level0.kayac.com/2010/08/flexmvc.php
共通の処理という事を考えて、これをさらに汎用的に。
IMXMLObjectをextendしたクラスを生成して、ヘルパーの親クラスとする。
ヘルパーではそのクラスを継承して各mxmlと対応させる。
モデルは適宜用意する
IMXMLObjectとは非ビジュアルコンポーネントが実装する最も基本的なインターフェイス


ベースヘルパー IMXMLObjectクラスを継承
各ヘルパー ベースヘルパーを継承
viewは各mxml.
モデルを適宜用意。


ロジックでビューを継承
ロジックをmxmlのサブクラスにする。お手軽かつ簡単。
ただし、共通処理ではちょっと困る。


起動時最適化
http://level0.kayac.com/2010/04/flex_3.php
その1のcreationPolicyのqueuedはFlex4.1ではなくなった模様。

creationPolicy noneで、明示的な指示があるまで待機。
初期ロード時に最小限に保つ。


dataprovider自作
flex:DataGrid sqlを使ってdataProviderを自作する ( Part 3 :IListの実装)

AIR2.0時のメモ
  • Safari 4.0.3のwebkit相当
  • ファンクションキーや右クリックもOKに。
  • AIRのみでサーバー作成可能。
  • TSL/SSLソケット通信
  • ネイティブプロセス呼び出し
  • exeインストーラー作成可能。
  • 他のアプリをインストーラに同梱可能


Adobe AIR 2.0 Betaサンプルアプリケーション
http://www.adobe.com/jp/joc/air2/samples/

AIR SQLite

AIRでSQLiteの気をつけるとところ知ってるとお得なこと - PHP,MySQL,Flex,JSな日々+イラストとか

AIRでのローカルDBのベストプラクティス(訳) - satoko's blog - s21g

Date 親和型の列には、日付と時刻の値が格納されます。Date 列は値として ActionScript または JavaScript の Date イン スタンスを受け入れるように設計されており、Date 列に String 値を格納しようとすると、ランタイムでユリウス日付に変 換されます。変換に失敗するとエラーが発生します。コードで Number、int、または uint の値を格納しようとした場合、 日付の検証は行われず、有効なユリウス日付値と見なされます。SELECT ステートメントを使用して Date 値を取得すると 自動的に Date インスタンスに変換されます。Date 値は REAL 記憶クラスを使用してユリウス日付値として格納されるので、ソート操作や比較操作も期待どおりに動作します。

autocomplete

スキン当てられる
http://flashcommander.org/blog/flex-4-autocomplete

flex3,4も動くが3ベース
http://hillelcoren.com/flex-autocomplete/

childのlistで縦スクロールしているときに親の横スクロールが反応して勝手に動いてしまう

解決策
親でwheelイベントを殺す。
親も子もviewportを使用している場合に起こる。
マウスホイールイベントに親が反応してしまっていたため。
HorizontalLayoutのListをHScrollBarのviewportに指定すると簡単に再現する。
HorizontalのList上で上下に動かすと左右にスクロールする。

itemrenderer


spark itemrenderer&skinをプログラマブルに処理する
http://stackoverflow.com/questions/4347930/how-do-you-combine-renderers-in-flex

http://www.adobe.com/devnet/flex/articles/itemrenderers_pt1.html
http://www.adobe.com/devnet/flex/articles/itemrenderers_pt2.html

表示したいレコードが1,000個あるとします。この場合、リストコントロールが1,000個のitemRendererを作成するかというと、そうではありません。リストに表示される行が10行だけだとすれば、作成されるitemRendererの数は12程度

http://www.adobe.com/devnet/flex/articles/itemrenderers_pt3.html
http://www.adobe.com/devnet/flex/articles/itemrenderers_pt4.html
http://www.adobe.com/devnet/flex/articles/itemrenderers_pt5.html

UIComponentのフォーカスを外す

this.stage.focus = null;

airアプリケーションサンドボックス環境化でのjs制限

Applicationsandboxではdocument.write(writeln)は使えない。
createElementしてのdom追加は出来る。

テキストエリアの文字位置から座標位置を調べる


flex4
http://forums.adobe.com/thread/453085


flex3
http://www.coltware.com/2010/03/16/flex-text-get-xy/

バグ

PopUpManager.removePopUpを使った時に
buttonのvisibleがあると起こることがあるバグ
http://forums.adobe.com/message/2741467


titlewindowクローズ処理での
http://forums.adobe.com/message/2708042


Adobe Community: FocusManager generates error

Flash Builderのパフォーマンス調整

Xms Xmx MaxPermSize PermSizeを調整。
http://d.hatena.ne.jp/tukaharu/20110322/1300757321

4月17日の朝活&オープンアワー

今日は朝活、オープンアワー、@ さん発案による花見コーディングの流れでした。

参加者は朝活2名,オープンアワー5名,花見コーディング4名


オープンアワー終了後、@さんの車で榴岡公園まで移動しました。

以下花見コーディングの様子



@ さん @ さん差し入れいただきありがとうございました。
天気が下り坂だったため、花見は実際には15分程で撤収して、ネパールカレーを食べて帰りました。
カレー食べてるあたりから降りだしたのでいい撤収タイミングでしたね。

参加の皆様お疲れ様でした。

4月10日の朝活&オープンアワー

朝活参加者が5人、オープンアワー参加者が5人、延べ7人の参加でした。
朝活だけだとお菓子があまり減らないのですが、オープンアワーだとそれなりの時間なので、やはり皆さん糖分を欲するようです。次回は多めにおやつを用意しておこうと思います。

参加の皆様お疲れ様でした〜。

第13回Sendai.rb&朝活参加しました

http://d.hatena.ne.jp/xibbar/20120403#1333438775

xibbarさんが暴風にも負けずやるという話だったので、参加してきました。
こんな天候でしたが参加者は3名でした。
相変わらずAIRアプリケーションを作ってました。
朝活は作業がはかどっていいですね。

4/3朝活

今日は4人でした。

自分はもくもくとAIRアプリ作成してました。

それと、ビル入り口が分かりづらかったといってる方がいましたので、次回の告知から↓も貼り付けようと思います。

Googleストリートビュー

歯科がある2階にあがる階段と利休が入っているビルの間です。
奥にエレベーターがあります。


参加の皆様お疲れ様でした〜