flex Archive

Spark project 勉強会 #01行ってきました。
とても濃い内容のスーパー勉強会でした。こういうの待ってました！
食い入って見てましたよ。

ほとんどの方がノートPC持参。
そしてMac率高い。

僕はノート持って無くてペンとノート(紙)。
やっぱノート(PC)欲しい。

既にminacoさんが、まとめを書かれています。
ＭｉnaLoぐぅぅ» Blog Archive » SparkProjectの勉強会

ぼくはyossyさんのActionScript Thread Library 1.0 (そうめん)の発表から書こうと思います。

1. ActionScript Thread Library 1.0 (そうめん) by yossy:BeInteractiveさん

既に有名なそうめん。
javaのスレッドを擬似的に再現しているそうで、その為、結城浩さんの『増補改訂版Java言語で学ぶデザインパターン入門マルチスレッド編』で紹介されているデザインパターンが使えるそうです。
とうわけで昨日帰ってから早速アマゾンで注文しました。もう届きました。すごい速さだアマゾン…。
早速そうめんでASスレッド入門しようと思う。

発表資料がUPされていますね。
BeInteractive! [Spark project 勉強会 #01 ありがとうございました]

2. GeniusFramework by seagirlさん

Flex用フレームワーク。ターミナルからコマンドを打って、必要なディレクトリ、ファイル群を一発生成。
Windowsで使うにはCygwinなどのアプリケーションが必要とのこと。
似たようなフレームワークとしてCairngorm(けあんごーむ) – Adobe Labsというのがあるそうだ。しかし、複雑で分かりにくい為、GeniusFrameworkの開発に至ったとのこと。

■2008/07/25 20:42追記 発表資料がseagirlさんのBlogにUPされています。
Spark project 勉強会 #1 – yoshizu@S2F

3. Frocessing by NUTSUさん

ProcessingのAS3版(SparkProjectの方には「あくまでライクです。移植ではなくリファレンス実装なので〜」と書かれていますね。)
Processingらしいウネウネしたライン描画とか、RADIOHEADのGoogleCodeにあがってるアレとか動かしてらっしゃった。Blogで既にUPされていた物とはちょっと違っていたかな？ 口元が動いていたような。
懇親会で教えてもらったのですが、公開されているProcessingのサンプルもAS3の書き方に直す(変数宣言の部分とか)だけで、そのまま動かす事が可能とのこと。ただ、flight404の人の様なProcessingの達人な方は、ほとんどProcessingでは無くなっているそうで、直接OpenGLを操作していたりするそうだ。

4. Flash Player Mental Model by arkwさん

1フレームの中でどのような処理が行われているかの話。
ENTER_FRAMEとTimer、マウスイベントを使ったサンプルを動かし説明されていた。
まだ良く理解できていないので、arkwさんのエントリを読んで理解する。

5. sazameki by zk33さん

オーディオ操作ライブラリ。サウンドを動的に生成したり、エフェクトを付けたり。
単音にディレイをかけてロックマンのやられたときの音(ティウンティウン)を作ってらした。
FlashPlayer10 beta2がインストールされていれば、最後に発表されたリズムマシン？のデモがzk33さんの発表記事から体験できます。

2008/07/24 記事訂正しました。 デモswfファイルへの直リンクをしていましたが、不適切と感じたのでリンク先を変更しました。すみません。

これで簡単な曲を作ってらっしゃった。リズムがだんだん曲になっていく様子はやっぱ楽しい。
これには会場が沸きました。

デモではスイングも実装されてた。デモの右下にあるボタンで調整されてたかな？？ 以下はスイングの参考リンク(いいのが見つからなかった。ちょっと違うかも)。
DTMでのグルーヴ設定方法(swing)

発表資料がご本人のBlogにUPされています。
Spark project勉強会#1で発表してきましたよ – zk_diary

6. 昨今の(X)HTMLに準拠したswfの埋め込みについて(embedタグ使わないとか、swfobject 2とか) by ksakaiさん

swfをHTMLに埋め込む際の注意点。
embedは今後廃止の方向。
safariでのHTMLからの変数の受け渡しなど。
DreamWeaver CS4ではswfObjectを使ったHTMLが書き出されていた。←ここはうろ覚えです、すみません…。)

そのほか

拡張子のswfって、「すぅいふ」って読むんですね。
Adobeの方も発表者の方も、皆さん、この読み方だったので間違いない。きっと。
今まで「えすだぶりゅえふ」って読んでました。
Shockwave Flashの略だと思うんですがどうなんでしょう。

というわけで、とても充実した勉強会でした。
お疲れ様でした。そして有り難うございました。
僕も発表できるよう頑張ろ。超頑張ろ。

Flexビルダーにスニペットとかテンプレートって無いんだ。
ショック。あるものだと思っていた。
Eclipseの機能の一部だと思ってたら違うんだ。
JDT(Javaエディタ)ではテンプレート使えるし、アクセサメソッドの自動生成も、もちろんある。
色々ショックだなぁ。FlashDevelopに戻ろうか考え中。

なんだか全くFlashを触っていなくて不安になったので、途中になっていたActionScript 3.0 アニメーションをやっています。
まだまだ途中ですが、この本のChapter8でこういうのが出来ました。本では3つのボールをバネで繋いでますが、何個でも増やせるようにしました。増やしすぎると訳が分からなくなりますが…。
黒いボールはドラッグ出来ます。

バネ運動をやっているのですが、綾取りみたいになって面白い。
やっぱこの本凄い。基本的なところから徐々にレベルアップしていって、無理なく覚えられる。
全部一気に詰め込むのでなくて、細かい部品の作り方を徹底的に教えてくれて、あとでそれを組み立てて大きい面白い物を作ろう、ってかんじ。

欠点は大きくて分厚くて持ち運びに向かないこと。結構余白が残っている印象で、文字も小さくすればかなりコンパクトになると思うけど、見やすさの為しょうがないですね。

ここから先が楽しみ。

今までFlashDevelopでやっていけど、今回はFlexを使った。補完はFlashDevelopの方が使いやすいな。ガンガン補完してくれるんだもん。でもFlexは逐一文法エラーだとかを教えてくれる。
かなりうっかり者の僕にはありがたい。つまらないミスに気付かず何時間もハマルってのが減るかも？
それとリファクタリング機能がやはり便利。これはFlashDevelopには無い。そのうち実装される予定らしい？

一応コードを載せます。
まず、本の至る所で使うBall.as。サンプルのまんま。

package {
	import flash.display.Sprite;

	public class Ball extends Sprite {
		public var radius:Number;
		private var color:uint;
		public var vx:Number = 0;
		public var vy:Number = 0;

		public function Ball(radius:Number=40, color:uint=0xff0000) {
			this.radius = radius;
			this.color = color;
			init();
		}
		public function init():void {
			graphics.beginFill(color);
			graphics.drawCircle(0, 0, radius);
			graphics.endFill();
		}
	}
}

次に、今回用に拡張したBallクラス。

package
{
	public class CustomBall extends Ball
	{
		public function CustomBall(radius:Number=40, color:uint=0x000000)
		{
			super(radius, color);
		}

		private var _isDragging:Boolean = false;
		private var _id:uint;

		public function get isDragging():Boolean{return _isDragging;}
		public function set isDragging(value:Boolean):void
		{
			_isDragging = value;
		}

		public function get id():uint{return _id;}
		public function set id(value:uint):void
		{
			_id = value;
		}
	}
}

最後にメインとなるクラス。
コメントにも書いたけど、macのfirefoxだとstage.stageWidth、stage.stageHeightが0になる。
なんでだ。それとmacのブラウザで見るとCPUを喰ってる。parallels上のwinows版Firefoxは全然CPUを喰わないし、ローカルでの速さとほぼ同じ。なんでなんだ。

package
{
	import flash.display.Sprite;
	import flash.display.StageScaleMode;
	import flash.events.Event;
	import flash.events.MouseEvent;

	public class SpringTest extends Sprite
	{
		public function SpringTest()
		{
			init();
		}

		private var balls:Array/* of CustumBall */;
		private var ballNum:int = 5;
		private var friction:Number = 0.95;
		private var spring:Number = 0.05;
		private var springLength:Number = 100;

		private function init():void
		{
			stage.scaleMode = StageScaleMode.NO_SCALE;
			balls = [];
			for(var i:uint = 0; i < ballNum; i++)
			{
				var ball:CustomBall = new CustomBall(20);
				ball.id = i;//動作確認用

				//trueにすると多少軽くなる？が、エッジが欠ける
				//ball.cacheAsBitmap = true;
				ball.addEventListener(MouseEvent.MOUSE_DOWN, onBallMouseDown);
				ball.addEventListener(MouseEvent.MOUSE_UP, onBallMouseUp);

				//mac firefoxだとstage.stageWidth、stage.stageHeightが0になる
				//ball.x = Math.random() * stage.stageWidth;
				//ball.y = Math.random() * stage.stageHeight;

				var STAGE_SIZE:uint = 600;
				ball.x = Math.random() * STAGE_SIZE;
				ball.y = Math.random() * STAGE_SIZE;
				balls.push(ball);
				addChild(ball);
			}
			addEventListener(Event.ENTER_FRAME, onEnterFrame);
		}

		private function onEnterFrame(e:Event):void
		{
			for(var i:uint = 0; i < ballNum; i++)
			{
				var ball:CustomBall = CustomBall(balls[i]);
				if(!ball.isDragging)
				{
					for(var j:uint = 0; j < ballNum; j++)
					{
						var objectivePointBall:CustomBall = CustomBall(balls[j]);
						//自分以外のボールに対して位置を調整する
						if( objectivePointBall != ball)
							springTo(ball, objectivePointBall);
					}
				}
			}

			//ラインを引く
			graphics.clear();
			graphics.lineStyle(1, 0x000000);
			graphics.moveTo(CustomBall(balls[0]).x, CustomBall(balls[0]).y);
			for(var i:uint = 1; i < ballNum; i++)
			{
				graphics.lineTo(CustomBall(balls[i]).x, CustomBall(balls[i]).y);
			}
			graphics.lineTo(CustomBall(balls[0]).x, CustomBall(balls[0]).y);
		}

		private function onBallMouseDown(e:MouseEvent):void
		{
			var ball:CustomBall = CustomBall(e.target);
			ball.startDrag();
			ball.isDragging = true;
		}

		private function onBallMouseUp(e:MouseEvent):void
		{
			var ball:CustomBall = CustomBall(e.target);
			ball.stopDrag();
			ball.isDragging = false;
		}

		/**
		 * バネ運動の処理
		 * @param ball 動かす対象のボール
		 * @param objectivePointBall 目標位置とするボール
		 *
		 */
		private function springTo(ball:CustomBall, objectivePointBall:CustomBall):void
		{
			var angle:Number = Math.atan2(objectivePointBall.y - ball.y, objectivePointBall.x - ball.x);
			var targetX:Number = objectivePointBall.x - Math.cos(angle) * springLength;
			var targetY:Number = objectivePointBall.y - Math.sin(angle) * springLength;
			ball.vx += (targetX - ball.x) * spring;
			ball.vy += (targetY - ball.y) * spring;
			ball.x += (ball.vx *= friction);
			ball.y += (ball.vy *= friction);
		}
	}
}

Flexビルダーで初めて日本語でコメント入れようとしたら、
インライン入力が出来なくて焦った。
調べてみたらMac版ではインライン入力できないらしい。ショック！

さらに調べたら、eclipseの次期バージョン3.4だとインライン入力が出来るようになったらしい。
晴れ – まさたか日記

早速下記からダウンロードしてインストールした。
Eclipse Project

■2008/06/19追記 最新版は以下からダウンロード。
Eclipse Ganymede RC4 Packages | Eclipse Packages

Flex３をインストール中に、eclipseのディレクトリを指定する際、3.4には対応してません、
といった内容の注意が出たけど、｢注意してインストール｣を押して普通にインストール出来た。

■更に追記
最新版だとFlexがインストール出来なかった。

結果、無事インライン入力が出来るように。
ちゃんと動くか分からないけど。
もう3度目のeclipse、Flexのインストールだ〜。

eclipseプラグインの形でなければ普通にインライン入力できるのかな？

＜2008/06/16追記＞
[#ROR-412] Could not create view Ruby Explorer in Eclipse 3.4M4 – ASAP – The Aptana Issues Tracker
ここに報告されてたけど、Eclipse 3.4M4だとredRailsの表示がおかしくなる。
しかたないから3.3に戻そう…。
長年macでeclipse使ってる方は日本語のインライン入力ができなくてもそのまま使ってるのだろうか？

参考書

Flexとeclipseが全く分からないので、日曜日に池袋のジュンク堂にいって本を漁ってきた。
２〜３時間物色。目当ての本を何冊か持って、座り読み用の椅子に座って吟味。こういう本屋いいですよね。
んで結局買ったのが、
FlexはAdobe Flex 2プロフェッショナルガイド Windows & Macintosh対応 (単行本（ソフトカバー）) 。

著者のクジラ飛行机さんのインタビューNew Generation Chronicle：クジラ飛行机——「なでしこ」に込められた鷹の勇気と蛇の知恵 (1/6) – ITmedia エンタープライズも読んだけど、とても信頼できそうな人だなぁ。
型が厳しくて、IDEでさくさく補間できる言語が好きだ、っていう部分に、こんな達人でもそうなんだーって思った。
僕もFlashDevelopで型と補間にかなりお世話になった。
お世話になりすぎた今、rubyには型宣言とかないから不安。

eclipseの本は悩んだ。
Eclipse3.3 完全攻略 とどっち買うか悩んだのだけど、結局Eclipse 逆引きクイックリファレンス Eclipse 3.3 Europa対応 (単行本（ソフトカバー）) 買った。

Eclipse3.3 完全攻略は、いろいろ広範囲に渡って書かれているんだけど(プラグインの話とか）、
Amazonのレビューにも書かれているとおり
内容は薄い気がした。CSVの解説とか要らなかったし。
分からないトコあったらその都度調べればいいかなと。

svnの事

Eclipse 逆引きクイックリファレンスはSubversionプラグインについて少し書かれていた事とかも購入ポイントだった。
それでも足らないんだけど、eclipseのSubversionプラグインについて詳しく書かれている本とか、サイトとかないんだろうか。
というか、Subversion自体を調べろってことか。
macで何を使えばいいのかまだ分からん。
目星はVersionsか、
Mac用SubversionクライアントVersions – IwazerReport

SmartSVN。
SmartSVN
Versionsはまだベータだし、まだ使っている人も少なさそうだから、SmartSVNかな。でも本当はVersions使いたい。見たかんじ使いやすそうだもんね。

SCpluginはどうなんだろ。
Subversion – Niku3

最近かなりの暇人なので、この機会にrubyとFlexを覚えようと思う。
rubyもeclipseで。emacs覚えようと思ったけど挫折。
以下、やったこと。Macです。

eclipseを入れる。

Eclipse Downloads
いろいろ種類があるけど、今回の場合、何を選べば最適なのかいまいち良く分からん。今回はEclipse IDE for Java EE Developers（後でEclipse IDE for Java Developersを入れ直した。下記参照）を入れた。

<2008/06/09追記＞
第5回 Europa（Eclipse 3.3）の注目機能はこれだ！：ITpro
こちらに何をインストールすればいいのか詳しく書いてあった。
最初から入ってるプラグインに違いがあるそうだ。
プラグインが増えていくと動作が重くなっていくそうだし、
javaやんないってなら、Eclipse IDE for C/C++ Developersでいいのかも。
必要になったら後から入れればいいんだろうし。
僕は一応、少し軽めのEclipse IDE for Java Developersをダウロードし直した。

＜参考＞
インストール – EclipseWiki

eclipseを日本語化する

Pleiades (Eclipse プラグイン日本語化プラグイン)っての入れた。
＜参考＞こちらに設定法も載ってます。
プラグイン日本語化プラグイン – EclipseWiki

＜2008/06/17 もっと詳しく追記＞
1. Pleiadesを解答したフォルダに入ってる
plugins/jp.sourceforge.mergedoc.pleiades、
features/jp.sourceforge.mergedoc.pleiadesを
eclipseフォルダのplugins、featuresフォルダにコピー。

２．Eclipse.appを右クリック→パッケージの内容を表示。
Contents/MacOS/eclipse.iniの最後の行に
-javaagent:/Applications/eclipse/plugins/jp.sourceforge.mergedoc.pleiades/pleiades.jar=no.mnemonic
を追加。
詳しくは解凍したPleiadesフォルダのreadmeの中に書いてある。
（eclipseが/Applications/eclipseにある場合。-javaagent:以降を絶対パスで指定。）

flex入れる

Adobe – Adobe Flex Builder 3 Professionalのダウンロード
使用期間は60日。Adobe IDが必要。

ruby入れる準備

下記を参考にしました。
Ruby Install Guide::MacOS X
MacPortsを使った自動インストールをやりたかったので、Xcode、MacPortsをいれます。

Xcode入れる

インストーラーディスクDisc１の(Disc２に入っている人も入るみたい‥？)
Optional Installs/Xcode Tools/XcodeTools.mpkg
を実行。

MacPorts入れる

/downloads
最新のいれた。（MacPorts-1.6.0-10.5-Leopard）

ruby入れる

Ruby Install Guide::MacOS Xの
パッケージ管理ツールを用いてインストールする場合 (Mac OS X 10.3, 10.4, 10.5)
の通りにした。

ruby用のeclipseプラグイン入れる

html用のプラグイン、Aptanaの一部になっているとのこと。
なのでAptanaもはいる。HTMLもいじるから丁度いいす。ここも以下のリンク通りにした。記事はwindows用だけどOK。
Aptana Eclipseプラグインで始めるRuby on Rails (CodeZine編集部ブログ)
以下の文は自分の環境用にすこし改変。

Eclipseを起動し、「ヘルプ」→「ソフトウェア更新」→「検索とインストール」を選択。
ダイアログボックスが出たら「インストールする新規フィーチャーを検索」を選びます。
アップデートサイト選択画面で「新規リモート・サイト」を選びます。
ここでは次の2つのサイトを登録します。
・http://update.aptana.com/install/3.2/
・http://update.aptana.com/install/rails/3.2/
1つ目がAptana本体、2つ目がAptanaのRailsプラグインになります。
リモートサイトを2つ登録し終わったら、「次へ」をクリックし、
以降は通常の更新機能と同様に操作して、インストールを行います。

結構時間かかった…。
eclipseの使い方が良く分かんないから勉強しないと。