TDDとかしらんがな

テストってなんぞ？っていう状態だったので、とりあえずこのへんの動画をみて、
テスト駆動開発の雰囲気をつかんで、話を聞いたようなそんなレベルです。
最後の方はリファクタリングの話にも触れられてるので、そのへんも勉強になります。

和田卓人の“テスト駆動開発”講座

と、まあ、急がば回れ的な雰囲気で、何やらよさそうです。

今回参考にさせてもらったのは、「FizzBuzzではじめるテスト – 第１回関西PHP勉強会」
こちらの内容で、そのままASに持ってきて試してます。

FizzBuzzもしらんがな

なにやらエンジニア界隈ではわりと常識らしい「FizzBuzz」、初めて聞きました。
参考のエントリできちんと説明されていますが、1から順に数字を出力していき、
3の倍数で”Fizz”、5の倍数で”Buzz”、公倍数で”FizzBuzz”と、
要は世界のナベアツ的な出力をするプログラムを指すらしいです。

ASで書くとこんな感じ。（サンプルのまんまですけどね。）

package
{
	/**
	 * FizzBuzzクラス
	 * @author Hidemasa Mori
	 */
	public class FizzBuzz
	{
		/**
		 * FizzBuzz テキスト表現を作成
		 *
		 * @param uint num
		 * @return String
		 */
		public static function makeFizzBuzz(num:uint):String
		{
			if (num % 3 == 0 && num % 5 == 0)
			{
				return "FizzBuzz";
			} else if (num % 3 == 0) {
				return "Fizz";
			} else if ( num % 5 == 0) {
				return "Buzz";
			} else {
				return num.toString();
			}
		}

	}

}

FlexUnit4+FlashDevelopでテスト

で、本題のテストですが、今回はAS3+FlexUnit4（4.1Betaが出てたけどうまく行かず）+FlashDevelop4でやってます。
プロジェクトごとGithubに置いてるので、そのままmxmlをドキュメントクラスにしてコンパイルすると動くかと。
サンプルの作成に「FlashDevelopの使い方 (17)FlexUnit 4でユニットテストをする方法」を大変参考にさせていただきました。

サンプルファイル

手順としては、FlexUnit4をダウンロードして、swcファイルをライブラリに追加していきます。
今回のサンプルはこんなファイル構成。

サンプルに入れているMain.asをドキュメントクラスにしても動くけど、
GUIを表示させることができなかった（traceはできる）ので、mxmlでのコンパイルに落ち着きました。

テストコードはこんな感じ。
[test]とメタタグを書いたメソッドがテスト用メソッドとなるようです。
ほかにも、testの前後に処理を行うbeforeやafter、非同期処理に対応したメタタグなど色々あるみたいです。

package
{
	import org.flexunit.Assert;
	/**
	 * FizzBuzzのテストクラス
	 * @author Hidemasa Mori
	 */
	public class FizzBuzzTest
	{
		[Test]
		public function testFizzBuzz():void
		{
			Assert.assertEquals("Fizz", FizzBuzz.makeFizzBuzz(3));
		}

		[Test]
		public function testFizzBuzz2():void
		{
			Assert.assertEquals("Buzz", FizzBuzz.makeFizzBuzz(5));
		}

		[Test]
		public function testFizzBuzz3():void
		{
			Assert.assertEquals("FizzBuzz", FizzBuzz.makeFizzBuzz(15));
		}

	}

}

Assert.assertEqualsの引数を比べて、同じなら、テストが通りグリーンの表示

違う結果が帰ってきた場合はレッドの表示となります。

とりあえず、赤と緑がみれたので満足。

他言語みたいなサクサクテストな環境は・・

今回の方法だと参考エントリでも言及されてるように、
GUIで確認するとなるとパブリッシュ→ムービープレビューの流れが必要になり、
手順としては冗長に感じますね・・こまめにテストするには敷居が高いです。
レッド/グリーンをGUIで確認しつつ、リアルタイムにテストを実行できる環境があればいーなー。
（勉強会でデモされてた、MakeGoodみたいな感じで）
FlashBuilderはこのあたり、連携スムーズになってるんでしょうか。興味湧いてきました。

UIのテスト

あと、Selenium IDEというのが紹介されていて、とってもいいなーと感じました。
ブラウザベースでの自動テストができるのは魅力的ですし、
デザイナーにも役立ちそうなツールなので是非試してみたいです。

また、FlashのUI自動テストについても調べてみたら、
FlexMonkey とか QTP とかってのがあるみたいです。
そのへんはまた今度。

イベントの詳細は下記にて
第2回関西アンカンファレンスを2011/01/08に開催します – Shin x blog
第2回関西アンカンファレンスを2011年1月8日に開催します – 頭ん中

セッション一覧
第２回関西アンカンファレンス セッション一覧 – backyard of 伊勢

前回も発表させてもらって勉強になったし楽しかったので、
今回もろくな準備もできてなかったけど、せっかくなんでやらせてもらいました。

とりあえず発表

発表の内容は、デザイン→コーディング→公開までひと通りやっちゃうような
中小規模の制作会社によくあるWebデザイナーさんがもってそうな、
JsやらHTML５やら色々あるけどどれやっていこう ・・っていうありがちな悩みに対して、
Flashやってても幸せになれるよ！ライブラリもいっぱいあるよ！っていうことを伝えるつもりでした。

まあ、冒頭にデザイナーの人いるか聞いたら手を上げてくれたのが2〜3人くらいで軽く撃沈したので、
最終的にはFlashで頑張ります！っていう宣言だけさせてもらいました。

内容はグダグダでも意外と後悔とかしないよ。

やけに緊張もしてグダグダではありましたけども、
やってもうたなあ・・的な感覚は終わったあとの一瞬で割と平気です。
（大人数の貴重な10分間を・・とか思うと申し訳ない気持ちにはなりますが・・・）
やっぱり発表の難しさとかは体感できるので勉強にもなりますし。次はこうしよう、ってのも出てくるので。

なにより懇親会で、内容は印象に残ってなくてもなんとなく「発表してた人ですよね」とか、
「Flashの人ですよね」とか言われると嬉しいし、話のネタになるのでよかったです。
なので、躊躇してやめちゃった方がもしいるなら、やったもん勝ち的に、やっちゃえばいいと思います。
そう言うのが許されるイベントだと思いますし。

イベントは終始フレンドリーな雰囲気で楽しかった!

前回よりはエンジニアさん率がすこし高くなったかなーという印象でしたけど、
それでも色んなバックグラウンドを持つ人達が集まっていて、
発表内容も、懇親会で話してても色んな話が聞けて面白かったです。
デザイナーよりの僕みたいな人だと普段仕事以外でエンジニアさんと知り合う機会も少ないので、
そういった知り合いが増えると嬉しいですし、「なんか作る」って所は共通してるので聞いて面白くない話は無いです。

とにかくみんなで盛り上げて楽しもうっていうポジティブな雰囲気で行われているので、
自然といい雰囲気でイベントも進んで、モチベーションもあがりまくりんぐでした。

個人的にはTwitterのTLで見かける人やイベントの主催者さんにも直接挨拶もできて、それも収穫でした。

今回も素敵なイベントをひらいてくれた、主催者の方、スタッフの方に感謝！

概要とレポートはすばらしいまとめページが存在しますので、下記から。
にゃあプロジェクト – ウェブログ – 大阪ひよこの会 (第2回勉強会) レポート

ですんで、僕は自分のネタがらみのところを中心にレポートしたいと思います。
普段の実案件でやるやり方として、
とりあえずざっくり素材を当て込んで機能を実装してから、
最後に（時間がゆるせば）味付けするような作り方をしています。

ので、マイボタンクラスを晒すことにしましたん。
（本当はなにも新しいものが思いつかなかったんですごめんなさいごめんなさい）

こんな感じで乗っかるテキストやら塗りの色を動的に変えつつ、
基本のトゥイーンだったりマウスイベントは持ってくれてるようなやつです。
ボタンのクラスは下記のような感じで、メインのASではそれを new して並べてるだけです。
※自身にaddChildしてるDynamicButtonクラスはグラフィック素材で、角丸塗りのMC（name = base）とその上のレイヤーにダイナミックなテキストフィールド（name = txt）を持っている。

package Hiyoko
{
	import caurina.transitions.Tweener;
	import caurina.transitions.properties.ColorShortcuts;
	import flash.display.Graphics;
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.events.MouseEvent;
	import flash.geom.ColorTransform;
	import flash.geom.Transform;
	import ui.DynamicButton;

	ColorShortcuts.init();

	/**
	 * ...
	 * @author hidemasa mori
	 */
	public class BasicButton extends Sprite
	{
		private var _btn:DynamicButton;

		public function BasicButton(buttonTxt:String,color:uint)
		{
			_btn = new DynamicButton();
			_btn.txt.text = buttonTxt;
			_btn.txt.mouseEnabled = false;
			_btn.txt.textColor = 0xFFFFFF;
			buttonMode = true;
			alpha = 0;

			setColor(color);
			addChild(_btn);

			addEventListener(MouseEvent.CLICK,clickHandler);
			addEventListener(MouseEvent.ROLL_OVER,overHandler);
			addEventListener(MouseEvent.ROLL_OUT, outHandler);
			addEventListener(Event.ADDED_TO_STAGE, addHandler);
			addEventListener(Event.REMOVED_FROM_STAGE, removeHandler);
		}

		/**
		 * ステージに追加されたときのイベントハンドラ
		 * @param	e
		 */
		private function addHandler(e:Event):void
		{
			removeEventListener(Event.ADDED_TO_STAGE, addHandler);
			Tweener.addTween(this, { alpha:1,time:0.5} );
		}

		/**
		 * ステージから削除されたときのイベントハンドラ
		 * @param	e
		 */
		private function removeHandler(e:Event):void
		{
			removeEventListener(Event.REMOVED_FROM_STAGE, removeHandler);
			Tweener.addTween(this, { alpha:0,time:0.5} );
		}

		/**
		 * マウスオーバーイベントハンドラ
		 * @param	e
		 */
		private function overHandler(e:MouseEvent):void
		{
			Tweener.addTween(this, { _tintBrightness:0.5, time:1 } );
		}

		/**
		 * マウスアウトイベントハンドラ
		 * @param	e
		 */
		private function outHandler(e:MouseEvent):void
		{
			Tweener.addTween(this, { _tintBrightness:0, time:1 } );
		}

		/**
		 * マウスクリックイベントハンドラ
		 * @param	e
		 */
		private function clickHandler(e:MouseEvent):void
		{

			removeEventListener(MouseEvent.ROLL_OVER,overHandler);
			removeEventListener(MouseEvent.ROLL_OUT, outHandler);
			//dispatchEvent(new MouseEvent(e.type));
			Tweener.addTween(this, { alpha:0, time:0.5, onComplete:function():void
			{
				this.visible = false;
			}
			} );
		}

		/**
		 * コンストラクタで指定された色をセットする。
		 * @param	color uint 変更する色
		 */
		private function setColor(color:uint):void
		{
			var tf:Transform = _btn.base.transform;
			var ctf:ColorTransform = tf.colorTransform;
			ctf.color = color;
			tf.colorTransform = ctf;
		}

	}

}

こんなクラス。何のネタにもならんかと思ってたけど意外と話題はあるもので。
いくつか出たのでまとめます。

イベントリスナー書くとこ

あまりなんの疑問も持たずにコンストラクタに書いてたけど、
ロールオーバーでロールオーバーイベントをリムーブ、クリックイベントをadd・・・みたいに、
動的にリスナー登録していくような試みもあるみたい。
今回のシンプルなボタンならコンストラクタで一括登録しちゃうのがコストパフォーマンス的に良いとのこと。

Tweenerの罠

これもろくに意識せずにやってて、@ProjectNyaさんに指摘してもらって、恥ずかしい限りだったわけですが、
ロールオーバー＆アウトなんかで、初期状態に戻るアニメーションの時に
１秒かけて１進み、１秒かけて１戻ればいいけど、
0.5秒で0.5進んだ場合、1秒かけて0.5をもどることになるとのこと。
こいつは普段TweenerやらBetweenAS3使ってるものとしてはきちんと理解しとかないと・・・
また検証したいと思います。

素材をボタンクラスの子にするか、素材のスーパークラスにしてまうのか

結構、よく悩むネタだったので一緒に質問させてもらいました。
このサンプルではグラフィック素材をnewして、addChildすることで自身の子としてコントロールしてます。
その素材はswc書き出ししたものを使ってるので一度パブリッシュしています。
そのときにクラス書き出し設定と一緒にスーパークラスを設定できるので、予めASを書いておいて、
素材に継承してもらうっていうやり方ですね。
これもケースバイケースかとは思いますが、@masamunet さんいわく、同じ悩みに直面した結果、今は素材として呼び出して子として扱う場面が多いとか。参考になりました。

酒と肉と夜景とFlash

今回の懇親会がめちゃいい感じの屋内バーベキュー？屋さんで
カップルで窓辺に向かって肉やきながらキャッキャウフフできるようなところに
Web好きなボーイズ＆ガールズがなだれ込むという素敵な光景でした。
みなさんの熱い（変態的な？）志を聞くだけでもモチベーションあがりますよね。
勉強会とかちょっと・・って人は懇親会だけでも参加するとおもしろいと思うよ！いろんな話聴けちゃうよ！

個人的にネタはありませんでしたが・・

僕個人としては、特段おすすめできる画期的な方法が思い浮かばなかったので、自分の生活スタイルをさらけだすことでうやむやにしてきました。あとおすすめの本と。

紹介させてもらったのは・・・

• Adobe Flash CS4 詳細!ActionScript3.0入門ノート[完全改訂版]
• ActionScript 3.0辞典 [FlashPlayer10/9対応]
• ブラウザで無料ではじめるActionScript 3.0 ―It’s a wonderfl world―
• Flash Math & Physics Design:ActionScript 3.0による数学・物理学表現[入門編]

このへんでごじゃいます。基礎のとこから、必携の辞書もの、モーションもの、あとWonderflって感じです。

似てるようでちょっと違うみんなの勉強法

もちろんそれぞれのレベルやぶち当たってる課題なんかも違いますし、デザイン系のひとが始めるのとエンジニア系の人が始めるのでは視点も求めるものも違いますのでそこは揃わないとは思ってましたが色々あって面白かったです。

Webでサンプル探す、本かう、本買うけど流し読み（必要なとこだけ）、ライブラリのソースコード読む、 通勤時間にコーディング！、サンプルからとにかく解析解析・・

同じ本読むでも、とにかくサンプルやってく人（自分）やら、英語本がいい！とか、Javaのも参考なるよ！とか色々参考になりました。

個人的には設計部分の壁にぶちあたってるので、おすすめしてもらったリファクタリング系の知識をつけて、ゆくゆくはデザパタもすんなりものにできたらなーってな魂胆でございます。

オススメしてもらったのは、

• オブジェクト指向でなぜつくるのか―知っておきたいプログラミング、UML、設計の基礎知識―
• なぜ、あなたはJavaでオブジェクト指向開発ができないのか―Javaの壁を克服する実践トレーニング

このへんと、たぶんこれ

• Java言語で学ぶリファクタリング入門

結局人に刺激を受ける僕です。

そんなかんじで勉強会自体も、ひょっと出た疑問に対して、その場でテストコード書いて実証してみたり、これどうしてんの〜ってのにあーでもないこーでもないというてみたり、非常に勉強になりましたが（むしろそういうところから本に載らないような小ネタが飛び出したりするもんですよね）、なんだかんだでこういう小規模勉強会に魅力を感じるのは人とのつながりです。

懇親会では普段こんなんやってますー、こんなん好きなんですー、っていうたわいも無い話から、開発環境や最近見つけたバグなどFlasherな話題まで、とにかく何かと刺激を受けますね。共感や驚きの連続で。最後はイベント主催の方とご一緒させていただいて色々熱い思いなんかも肌で感じる事ができました。

あとは、自分はサボってる暇ないぞって危機感とｗ
僕みたいなスキルが中途半端な人間が気後れせずに参加できるイベントというのはほんとにありがたいです。
今後もひよこの会はじめ、Web系イベント盛り上げられるように修行、修行でございますな。

セッション雑感

奥田さんのセッションではギミック（仕掛け）についてのこだわりや、気付きや興味心・技術探究心からビジュアルへ落として行く過程のお話を。城戸さんのセッションはプレゼン資料から常人を逸してましたが、それぞれのモーションはすべて基礎的なところからの応用ですよ～という、親切丁寧な、そして愛のあるセッションでした。これはダミーですが・・とか、お蔵入りになったものですが・・・で、出てくる成果物の精度の高さを見るたびにめまいが・・。

その後のてら子セッションは和む空気を醸し出しつつ、偶然？サウンド系のセッションになってました。岩井俊雄好きの僕には 2010: New Year Sonata とかたまらんです。そのほかにもフィジカルコンピューティングなお題もあったりで、学生時代にやれDirectorだのMax/MSP/Jitterだの言うてやってたメディアアートがFlashでできちゃうという。素敵な流れ。ハイパーメディアクラスの皆さん。お元気ですか。

見せられるもんがあるっていい！

てら子をこっそりUSTで追いかけたりしてても思いますが、仕事以外で（仕事でもいいんですけど）見せられるものがあるっていいですね。僕の中でプログラミングの神様的存在の方からもなにか作るのが、スキルアップにもつながるからいいよってアドバイス受けたことありますが、どうも作ろう作ろうと考えると順番がちがってて。普段の気付きを形にできるような素敵Flasherになりたいですよ。

shin 1×1 さんに背中を押していただいて、発表もさせていただきました！

発表デビューです！

いやー、緊張しましたけど、準備期間も含めて、いい経験になりました。

ネタは、「インタラクティブな広告が気になる！サイネージとかARとか」ということで、

現実拡張な広告＆作品数点の紹介⇒FlashでARのデモ　てな内容でさせてもらいました。

発表資料

デモは自前の部分がすくないですけど・・・

FLARToolKit のFLARToolKit スタータキット へ、

wonderfl に投稿されてた、clockmakerさんの[PV3D] Xmas Tree を移したものを使わせてもらいました。

（って、キラキラがいまいち再現できてないのが気になりますけど。誰か教えてください・・）

>>ソース一式はこちら

スライドは、Progression の拡張ライブラリ、Slides をつかってみましたー。

時間なくてそっけない感じですが、Flashでつくれますし、凝ったものもできそう。

>>スライド

感想

エンジニアさん率が高いかなーと思ってたイベントですが、（実際は半分から６割くらい？）

セッション自体もバリエーションに富んでて楽しめました。

（まあ、技術的な話に紛れ込んだときは宇宙語と戦ってる感じでしたが・・）

んで、最後の交流会や懇親会ではいろんな方にお話聞けてよかったです。

今まで、懇親会みたいな集まりまで参加することなかったですが、出てみるもんだなーと。

関連リンク

関西アンカンファレンスセッション一覧 – backyard of 伊勢的新常識

関西アンカンファレンスを開催しました＆運営してわかったこと – Shin x blog

関西アンカンファレンスをやってみての感想まとめ – 頭ん中