Flash Builder4 で git リポジトリを使って push してみる

事前準備

• gitのプラグインはこっちを参照してインストールしてね Flash Builder 4 を使ってみよう - @sugamasao.blog.title # => ”コードで世界を変えたい”

github にリポジトリ作成
github のリポジトリ用 URL をコピーする

リポジトリの登録

パッケージエクスプローラとかがあるところの、「Git Repositories」へ選択してリポジトリ一覧を表示させる。その画面で右クリックで「import Git Repository」メニュー を選択し、 github にある git のリンクを貼り付ける。
なお、URI欄にコピーすると、他の場所にも値が入力されるのでビビらなくても大丈夫です。
URI欄にコピーするとこんな感じ。

URI欄をコピーしたら、上記画像にもある通りに項目を変更する。

• Protocol
  • file から git+ssh へ
• Password
  • 自分で github へ push する時に使う（鍵を生成したときの）パスワード
  • User は git で良いよ

プロジェクトのインポート

• リポジトリエクスプローラのリポジトリ上で右クリックをすると「Import Projects...」とあるので、選択
• 今回は既にプロジェクトファイルがコミット済みなので 「Import Existing Projects」を選択

プロジェクトの push

ローカルへのコミットはチーム→Commit でできて、ここらへんの操作感は svn と変わらない。
では、その変更を push するときは。

登録済みの URL が認識されない

git+ssh だからダメなのかもしれないが、そのまま push しようとすると、「Can't connect to any URI」と言われる。
しょうが無いので、pushするときの一番最初のリポジトリの選択画面で Custom URI を選択して、改めて登録する。
github の git の URL を URI へ貼り付ける（最初のリポジトリの登録時と一緒）

Protocolを git+ssh にして、パスワードを入力。

どのブランチを push するか

まだ master ブランチだけだけど、「Add all Branches spec」を押してブランチをすべて push する設定で良いと思う。
あとはウィザードに任せて進めると push される。

これで push までできた

まだ Eclipse 上の git プラグインはこなれてない感じですが、まあまあ、なんとか使える感じですね。
enjoy!

Flex4 での追加機能をしろう

FlashBuilder 4 で追加されたコンポーネントを学ぶ

• Flex 4 マスターシリーズ #01 MXML 2009 | デベロッパーセンター

ここに書いてあるのを読んでみたのでメモ。

String とかを MXML で指定する場合はこのタグの中に書くよ（よくわかってない）

HTMLでの div みたいな感じで、レイアウトではなく、デザイン上まとめられると便利じゃねって時に使うのかな。

と

カスタムコンポーネントとして別ファイルにせずに、MXML内で独自のコンポーネントを作れる。
あるコンポーネント内でのみ複数回使うような、全体に切り出す必要が無いパーツがあったら使う感じかな。
fx のネームスペースで使うので混乱しないか心配。

コンパイル時も実行時にも使用されない値。
利用する用途がまったく思いつかない。。。
コンパイラオプションの define での変数定義みたいな感じ……でも無いよなぁ。

state(includeIn) と target を指定することで、Reparent タグのある場所に、別のコンポーネントが state 変わると来るよ、というのが明示的にわかるようだ。
これは地味に便利かもしんまい。

の中で定義する。いわゆる、Vector の定義。Vectorなので型の指定ができるから、Array　よか良いとは思うけど、とはいえ、それほど使うかは疑問。

その他

state は大分便利になるし、CSSも id での選択とか、より CSS っぽく書けるようになる。

• Flex 4 マスターシリーズ #03 Flex 4 ステート | デベロッパーセンター
• Flex 4 マスターシリーズ #04 Flex 4 CSS | デベロッパーセンター

ざっと読んでみた全体的な印象としては、いかにデザインとコンポーネントの連携が取りやすくなるか？　というのに主眼がおかれてるみたい。
state 関連は便利な上に必要となる頻度も高いと思うので抑えておきたいですね。

Doc? でローカルに API リファレンスを格納する

livedoc をローカルから見よう作戦です

ここを見てしまうのが手っ取り早いんですが……。リファレンスをローカルにおいて閲覧する Air アプリとして、Doc?*1というものがあるんですね。

• いつものリファレンスをオフラインでらくらく検索！ Doc?を使おう！ | _level0 | Kayac Front End Engineer's Blog

実際に導入してみた

入れたのは下記の二つ。
本当は Flex4 のリファレンスが欲しかったのだけど、うまく解析できないらしく、インポート中にエラーになってしまう。

• flex 3.5 en（新バージョンに対応するのが速いので、新しいAPIを使う場合）
  • http://livedocs.adobe.com/flex/3/langref/
• flex 3.3 jp（とりあえず普段使う版）
  • http://livedocs.adobe.com/flex/3_jp/langref/

という感じで。
Flex4のリファレンスはここで良いと思うんだけどなぁ

• http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/index.html?filter_flex=4

ちなみに、Air のリファレンスは上記の Flex API と一緒に入っているのであえて追加はしていません。
あと、一個登録するのに一時間くらいかかった気がするので、気長にやる方が良いと思います。

で、本題

実は Doc? には Eclipse plugin があるので、FlashBuilder に入れればもっとシームレスに使えて良いよね、ということなのです。

• http://airdoc.be/plugin/

が、どうやらFlashBuilder には対応していない？っぽく、.jar を plugins に入れても動作せずorz
そのうち連携できるようになることを祈って、そのときのためのポインタとして残しておきます＞＜

*1:ググラビリティが低くて死にたい

FlashBuilder に Aptana plugin と FlexFormatter を導入する

FlashBuilder 開発環境構築シリーズ

• Flash Builder 4 を使ってみよう - @sugamasao.blog.title # => ”コードで世界を変えたい”
• FlashBuilder 4 に Ant を導入する - @sugamasao.blog.title # => ”コードで世界を変えたい”

Aptana Pugin

デフォルトだと、HTML とか XML のエディタが圧倒的なヘタレっぷりを発揮しているので、Aptana のエディタを使いたいのです。

インストール

今回は plugin なので、下記から update サイトの URL をコピーして、いつものようにアップデートサイトに突っ込んでインストール。

何も問題なくインストールできました。

設定

各エディタもほとんどは勝手に関連付けされるので、問題ないと思いますが、念のため build.xml をフルネームで指定して Ant エディタにするように設定した。
簡単ですね。

FlexFormatter

使ってる人多いし、意外とコーディングスタイルが自分と変わらない感じなので、シュッとさせてくて導入。
あと、空白やタブが混在する問題を統一したいので、プロジェクトやチームとして共通プラグインとして導入するための人柱としてw

インストール

下記からDLする。

• Flex Formatter | Free Development software downloads at SourceForge.net

ダウンロードして、解凍した *.jar*1を FlashBuilder のインストールフォルダにある plugins フォルダにコピーする。
これだけ。

設定

スタイルはほとんど同じなのですが、"{" のスタイルだけ気にくわないので変更。
ウィンドウ→設定→「FlexFormatting」→「ActionScript」タブ？→「NewLines/wrapping」タブ？
の中の、LineBreaks を 「Sun Style」に。

これで

FlashBuilder を実際に使って不便だったところは解消できました。
enjoy!

*1:自分が確認した時点では3つ

Flexで mxml でのハンドラを削除したい場合

このエントリーを見て気になったので

Flex コンポーネントの破棄 注意点 | _level0 | Kayac Front End Engineer's Blog
はてブのコメントにも書いたんだけど、ここでいう aButton がクリックされて実行される aButtonClick っていうのは、 mxml が勝手に生成してくれる Mouse.CLICK ハンドラの中で aButtonClick っていうメソッドをコールしているに過ぎないので、そもそも aButtonClick っていうメソッドが addEvent されてるわけじゃないと思うんですよね。
で、じゃあどうやってイベントを消そう？と思うと、arguments.callee を使えばいいんじゃないかと思って、以下のような感じに書いた。
元々のソースとは違って、明示的に消す、ということはできないけれど……。
無名関数で登録した場合もそうだと思うけど、メソッド名がわからないので呼ばれたタイミングで消すか、別途オブジェクトを参照するようのストアを用意しないと、キレイに消すのはできないんじゃないかな。
ま、mxml で付加される click="" とかのイベントは、対象の mxml コンポーネントが GC された時によしなにやってくれてるかもしれないけど……（そこまでは確認してない）。

ソース

wonderfl に書こうと思ったんだけど、なんか mxml を書いたらエラーになったのでこっちに貼り付けておく。
onClickHandlerっていうメソッドを、addEventListener と click="" で呼ぶようにしていて、どっちも一度実行すると、リスナーから消される。
誰得なソースを書いてしまった気がします＞＜

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init(event)">
	<mx:Button x="72" y="58" label="addEventListenerButton" id="addEventListenerButton"/>
	<mx:Button x="261" y="58" label="clickButton" id="Button" click="onClickHandler(event, arguments.callee)"/>
	<mx:Script>
		<![CDATA[
			import mx.core.UIComponent;
			import flash.utils.getQualifiedClassName;
			
			private function init(e:Event):void {
				addEventListenerButton.addEventListener(MouseEvent.CLICK, onClickHandler);
			}
			
			private function onClickHandler(e:Event, callee:Function = null):void {
				var component:UIComponent = e.currentTarget as UIComponent;
				textArea.text += component.id + "=>";
				textArea.text += getQualifiedClassName(arguments.callee);
				textArea.text += "   ";
				textArea.text += arguments.callee.toString();
				textArea.text += "\n";
				
				if(callee != null) {
					component.removeEventListener(MouseEvent.CLICK, callee);
				} else {
					component.removeEventListener(MouseEvent.CLICK, arguments.callee);
				}
			}
		]]>
	</mx:Script>
	<mx:Label x="72" y="32" text="一度クリックされたらイベントを削除するよ" width="279"/>
	<mx:TextArea x="72" y="88" width="469" height="103" id="textArea"/>
</mx:Application>

参考

こことかわかりやすいですかね
ActionScript3のarguments.calleeのサンプルコードがひどい - なんたらノート第三期ベータ

rascut による autotest 環境

無限 FlexUnit

FlexUnit は現在 RC1 ですが、なかなか安定している感じですし、何よりも Adobe がきちんと開発しているので、AS3 というか Flex 界隈でも今後 UnitTest 文化も成熟してくると思われます。
で、そーなると、今後はいかに負担なく UnitTest を作成・実行していくか？　という観点での話になってくると思うんですね。

FlexUnit を使ってみると

環境の構築とかは FlexUnitを試してみた - @sugamasao.blog.title # => ”コードで世界を変えたい” を見てもらうとして、実際にやってみる。
そうすると、

1. テストケースを書く
2. テスト実行する

というパターンや

1. 実装する
2. テスト書く
3. テスト実行する

のようなパターンをちょくちょく行う事になります。
そうすると「よし、テスト実施だ！」テスト実行→「あ、間違ってた」修正→「テスト実行や！」とかのサイクルが面倒ですよね。

そこで autotest

autotest っていうのは ZenTest | zenspider.com by ryan davis の中に含まれる コマンドで、Ruby で使われてるツールの名前？なのかな。
ファイルの変更を監視して、変更があったら即座に RSpec を実行してくれるっていうモノ。
つまり、明示的にテストを実行するのではなく、とにかくひたすらテストは実行させておく。保存したらテストケースだろうがテストスイートだろうが、テスト対象のソースだろうがとにかく変更があったらテストする。

そうすることで

少なくとも手動で確認する操作が1ステップ減らせるし、画面の端にでも映るようにしておけば視線をエディタに向けたままの操作も可能だ*1。

じゃあ環境を構築してみましょう

• FlexUnit 環境
• Rascut(Ruby) 環境

が必要になります。

FlexUnit を動かすために

まず、FlexUnit を実装できる環境は必ず必要。なので、上記のページ等から使えるようにしておきましょう。

rascut を動かすために

Ruby 製のツールのため、 Ruby が、そしてパッケージ管理ソフトの RubyGems が必要。
Windowsの人はここからインストールすると、両方入るようだ。Rumix - Ruby Starter Package with Installer
Mac の人は MacPorts に入ってるので、ports を入れて

sudo port install ruby
sudo port install rb-rubygems

ってやれば良いと思う。たぶん。
で、gem が入ったら以下のようにする。

sudo gem install rascut

これで rascut がインストールされる。
パスが通ってれば rascut --version でバージョンを確認できる。自分の環境だと 0.2.1 のようだ。

rascut の使い方

ここを見るのが良いと思う。パッチとかは当時の話しなので無視しても大丈夫だと思う。

• ActionScript やるなら入れとけ。rascut 導入と使い方。 - てっく煮ブログ

ここまで来たら事前準備は終わり。実際に試してみよう。

稚拙のライブラリで試してみましょう

• sugamasao/BrowserUtility · GitHub

にはそこら辺を実行する環境を整えているので*2、実際に動かす調度良いサンプルになると思う。
http://github.com/sugamasao/BrowserUtility/downloads から新しい zip 等をDLしてもらい、以下のautotest.shを修正します。
30行目付近で各コマンドやライブラリのパスを設定していますので、そこを各自の環境にあわせてください。
Macでportsを使って Ruby をインストールしていれば FLEX_UNIT_PATH と LOG 以外は変更する必要が無いと思いますが。。。

というわけで実行

sugamasao@SIEGFRIED% ./autotest.sh
[./autotest.sh] fetch file.[/opt/local/bin/rascut]
[./autotest.sh] fetch file.[./src/TestRunner.mxml]
[./autotest.sh] fetch dir.[/opt/flex/flexunit/libs]
[05/11 23:43:55] Start Mongrel: http://0.0.0.0:3001/
[05/11 23:43:56] Compile Start
[05/11 23:43:57] Found update file(s)["./src/test/TestSuiteAll.as", "./src/com/github/sugamasao/browser_utility/BrowserUtility.as", "./src/test/com/github/sugamasao/browser_utility/BrowserUtilityUATest.as", "./src/com/github/sugamasao/browser_utility/Location.as", "./asdoc/print.css", "./src/com/github/sugamasao/browser_utility/Browser.as", "./src/test/com/github/sugamasao/browser_utility/BrowserUtilityTest.as", "./src/test/com/github/sugamasao/browser_utility/BrowserUtilityLocationTest.as", "./asdoc/style.css", "./src/com/github/sugamasao/version/BrowserUtilityVersion.as", "./src/TestRunner.mxml"]

こんな感じで色々出力されていますが、これですでにFlexUnitが起動しています。
http://localhost:3001 へアクセスしてみましょう。
アクセスすると、FlexUnit が実行されますね。おそらく、すべてのテストがパスされてグリーンになってるはずです。

ちなみに、autotest.sh は rascut を起動するときに引数を渡すのが面倒だからやっているだけで、rascut を直接実行しても問題ありません。以下と同等です。

rascut -s -c -compiler.library-path+=(FlexUnitへのパス) FlexUnitCore.run を実行してるファイルパス

準備完了

あとは粛々とファイルの編集をしてみるだけです。
試しに、以下のファイルを編集してみましょう。あ、FlexUnitを開いているブラウザは常に目にはいるようにしておいてくださいね。
最悪でも、右側の緑のチェックマークみたいのが視界に入ってるようにしておくと良いです。

src/test/com/github/sugamasao/browser_utility/BrowserUtilityUATest.as

例えば、17行目のObject の右端に、 ver:4.0 という値がありますね。ここを ver:5.0 にしてみましょう。
保存して１〜２秒くらいでブラウザがリロードされてテストNGの赤いアイコンに変わりましたね。

このまま、先程変更した箇所をもとに戻して保存すれば、同じようにテストが実行されます。
コンパイルして実行されるまで少しだけタイムラグがありますが、おそらく毎回自分で手動で実行するよりは速いレスポンスで実行されていると思います。また、色が目に入るようにしておけばテストが実行されるのはわかりますので、祈りながらバーが伸びていくのを見つめる必要もありません。

そんな訳で

FlexUnit で UnitTest が普及してくる今こそ、autotest で手間を省いたテストライフを送ってドヤ顔できるチャンスです！
enjoy!

*1:rascut のプラグインとか書けば Growl への通知とかできるかもしれない

*2:as_loggerも同様だけど

FlashBuilder 4 に Ant を導入する

FlashBuilder 環境構築シリーズその2

• その1 [Flash Builder 4 を使ってみよう - @sugamasao.blog.title # => ”コードで世界を変えたい”
• その3 FlashBuilder に Aptana plugin と FlexFormatter を導入する - @sugamasao.blog.title # => ”コードで世界を変えたい”

Ant が欲しい！

というか、最初から入っていないということに驚愕するのですが、入ってないものは入ってないのでしょうがないですね。
Ant単体のプラグインというのは無く、JDTというEclipseのパッケージを突っ込むと使えるようになります。

更新サイトに追加

以下を更新サイトに登録する

http://download.eclipse.org/releases/galileo

そうすると、「Programming Languages」というカテゴリが出てくるので、そこから「Eclipse Java Development Tools」というのを選択する

これだけで良い。これで再起動するとAntが有効になる。

Ant の使い方

build.xmlを右クリック→実行とかでも良いけど、以下のようにビューに表示した方が楽で良い。
「ウィンドウ」→「他のビュー」→「Ant」→「Ant」

これで画面下部にAntビューができると思うので、そのビューに build.xml を D&D で放り込む。
そうすると、以下のようにタスクが一覧で表示されるので、ダブルクリック等で実行すると、すぐに Ant タスクが実行される。

これで面倒なタスクは Ant に任せることができますね。
enjoy!