アシアルブログ

アシアルの中の人が技術と想いのたけをつづるブログです

「PHP×Flex(後編)」PHPテクニカルセミナー(無料)第4弾の募集を開始しました!!

皆さま。こんにちは。
和田でございます。

みなさま、もうご存知かとは思いますが、現在アシアルでは、全5回にわけて「開発者向け、一歩先を行くためのテクニカルセミナー(無料)」を開催しております。
おかげさまで、昨日開催いたしました第3回「PHP×Flex(前編)」も定員の100名を超える方々からのご参加をいただき、大盛況のうちに幕となりました。
お忙しい中、セミナーに参加して下さった皆さま、誠にありがとうございました。

さて今回は、そんな大盛況だった「PHP×Flex」の後編「第4回 PHP×Flex(後編):Flexを用いたWebシステム開発」のご紹介です。

開催日は9月29日(水)。申し込みも開始しております。
今回も第1線で活躍している弊社のエンジニアが講演いたしますので、皆さまふるってご応募ください!!!

FlexPHPの連携の基礎を学びながら簡単なFlexアプリケーションを作成していきますので、ご興味のある皆さま、そして前編に参加されていない皆さまもチェックしていただけたらと思います。

お申し込みは、以下URLよりお願い致します。
今回は、「第4回 PHP×Flex(後編)」のみの応募となりますのでご注意ください。
http://www.asial.co.jp/seminar/




【開催概要】

日程: 9月29日(水) 10:00 ~ 12:00(※ 開始30分前より入室可能)
会場: 山王健保会館2F 多目的ホール
交通: 地下鉄銀座線・南北線溜池山王駅 7出口 徒歩3分
    地下鉄千代田線:赤坂駅 1出口 徒歩5分
    地下鉄銀座線・丸ノ内線赤坂見附駅出口 下車徒歩7分
主催: アシアル株式会社
受講対象者: Webシステムにおいて1~3年の開発経験のある方
定員: 100名(※ 定員となり次第、受付を終了させていただきます 。)
参加費: 無料(事前登録制)


【第4回 PHP×Flex(後編)】Flexを用いたWebシステム開発

近年、システム開発の現場では、従来型のWebアプリケーションに加え、FlexSilverlightといったRIAの技術を用いた、インタラクティブなアプリケーション開発のニーズが高まってきています。

この講演では、RIAの中で最も普及しているFlexを取り上げ、サーバ側のPHPと連携させる簡単なアプリケーションを作成していきながら、Flex4の基本的な機能について解説していきます。

PHP×Flex編は前後編の2回構成です。
今回の後編では、前編で学んだActionScript3.0の知識をベースに、簡単なアプリケーションを作成しながらFlexの魅力に触れていきます。
FlashActionScriptを少しでも触ったことがある方のステップアップとなるセミナーですので、後編から参加しても充分理解できる内容となっております。
前編出られていない方もふるってご参加ください。

講演者:アシアル株式会社 橋本 章史(ハシモト アキフミ)アシアル株式会社のPHPプログラマーFlexプログラマー
以前は大手SIerでSEとして開発に携わっていたが、その中で「もっとプログラミングに深く携わりたい」という気持ちを持ち、アシアル株式会社に入社。
FlexJavascriptを用いたインタラクティブなWebシステムの開発を得意とする。
現在は最も得意とするFlexを用いたシステム開発に従事し、充実した日々を送っている。



【第3回 「PHP×Flex(前編)」セミナーを受講された皆さまの声】

------------------------------------------------------
Flexでの開発の流れを知れたのが良かった
・業務用に使えそう
Flexを使ってみようとおもった
Flexは想像していたよりははじめ易いと思った
・自分で開発を行ううえでのイメージが出来た
・「何で?!」と思うような点のTipsも含まれていたので実践に役立ちそう
Flexを使った動的コンテンツの作成について詳しく知れた
・内容が濃くて良かった。スピード感も良い
・プログラム作成者の観点で資料がまとまっていた
PHPActionScriptの書き方の比較がありイメージしやすかった
Flex、ActionScriptnitについて詳しく知りたくなりました
・基本的な部分を丁寧に説明してくれていたため、とても分かりやすかった
------------------------------------------------------

「PHP×Flex(前編)」PHPテクニカルセミナー(無料)第3弾の募集を開始しました!!

皆さま。こんにちは。
アシアルの和田でございます。

先日、弊社小林のブログにもありましたように、現在アシアルでは、全5回にわけて「開発者向け、一歩先を行くためのテクニカルセミナー(無料)」を開催しております。
第1回目の「PHP×セキュリティ」セミナーでは定員をはるかに超える120名もの方々からご参加いただき、大盛況となりました。
お忙しい中、セミナーに参加していただき誠にありがとうございました。

さて現在、8月25日(水)開催の
第3回目「PHP×Flex(前編):ActionScript3.0でインタラクティブなWeb開発」の申込を開始しております。
今回も第1線で活躍している弊社のエンジニアが講演いたしますので、皆さまふるってご応募ください!!!

また、PHP×Flexセミナーは前後編の2回構成です。前編ではActionScript3.0の基礎、後編では前編での基礎を元にFlexPHPを連携を学んでいきますので、ご興味のある皆さまはどちらもチェックしていただけたらと思います。

お申し込みは、以下URLよりお願い致します。
今回は、「第3回 PHP×Flex(前編)」のみの応募となりますのでご注意ください。
http://www.asial.co.jp/seminar/




【開催概要】

日程: 8月25日(月) 10:00 ~ 12:00(※ 開始30分前より入室可能)
会場: 山王健保会館2F 多目的ホール
交通: 地下鉄銀座線・南北線溜池山王駅 7出口 徒歩3分
    地下鉄千代田線:赤坂駅 1出口 徒歩5分
    地下鉄銀座線・丸ノ内線赤坂見附駅出口 下車徒歩7分
主催: アシアル株式会社
受講対象者: Webシステムにおいて1~3年の開発経験のある方
定員: 100名(※ 定員となり次第、受付を終了させていただきます 。)
参加費: 無料(事前登録制)


【第3回 PHP×Flex(前編)】ActionScript3.0でインタラクティブなWeb開発

近年、様々なFlashコンテンツがWebサイトの要となっています。これらのFlashコンテンツの元となるのがActionScriptであります。最近ではFlexAIRなどのRIAアプリケーションにも使用され、ActionScriptの重要性はますます高まってきています。

この講演では、Flexアプリケーションの基礎となるActionScript3.0の基本構文から簡単な Flashの作成まで実際のスクリプトを追いながら解説していきます。

PHP×Flex編は前後編の2回構成です。
前編では ActionScript3.0の基礎を学び、後編ではFlexPHPを連携したFlexアプリケーションの作成方法を解説します。まずはこの前編で ActionScript3.0の基礎をしっかりと学びましょう。

講演者:アシアル株式会社 松田 惇(マツダ アツシ)アシアル株式会社のPHPプログラマーFlexプログラマー
JavaScriptAjaxを生かした、動的にインターフェースが変化するシステムが好きなことからFlashアプリケーションに興味を持ちはじめ、趣味でFlexを勉強するようになる。そのことがきっかけで、現在ではFlexアプリケーションの構築も担当している。



【第1回 「PHP×セキュリティ」セミナーを受講された皆さまの声】

------------------------------------------------------
・理解し易かった(サンプルコード、プログラマ基準で具体的なコード、脆弱性の解説とPHPの具体的な対策、例をあげながらの説明、セキュリティのポイントを網羅、ほどよい内容)
・見過していた問題や更に考慮すべき部分が明確になった
・参考URLがよかった
・具体的な内容で良かった(対策、攻撃手法)
PHPに特化した内容だった
・システムを構築するにあたり、考慮すべきことが明確になった(php初心者)
・セキュリティに対しての意識が向上
・短い時間で良くまとまっていた、全体像を把握できた、要点を学べた
・セキュリティに興味がわいた
PHPのセキュリティについて幅広く知ることができた
・改めて知識を深めることができた
・最新の情報を交えて話してもらえた、最新のトレンドを知ることができた
------------------------------------------------------

【Flex】FlexからJavascriptを実行してみる

こんにちは、橋本です。

今日は、FlexからJavascript関数へアクセスする方法についてお話したいと思います。

FlexからJavascriptへアクセスするためには、ExternalInterface APIを使います。

使い方は非常に簡単です。call()メソッドを使ってラッパーのJavascriptを呼び出すだけです。
Javascriptの関数に引数を渡したり、Javascript側から戻り値を受け取ることも可能です。

簡単なコードを書いて、実際に使ってみましょう。

Flexコード


<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" minWidth="955" minHeight="600">
	<mx:Script>
		<![CDATA[
			import flash.external.*;
			
			import mx.controls.Alert;
			
			public function setWrapperTitle(title:String):void
			{
				var ret:String;
				
				if (ExternalInterface.available)
				{
					ret = ExternalInterface.call("setTitle",title);
				}
				else
				{
					ret = "Fault";
				}
				
				Alert.show(ret);
			}
	
			protected function execBtn_clickHandler(event:MouseEvent):void
			{
				this.setWrapperTitle(this.titleInput.text);
			}
		]]>
	</mx:Script>
	<mx:Panel id="hoge"
			  width="280"
			  height="150"
			  x="{this.width / 2 - hoge.width / 2}"
			  y="{this.height / 2 - hoge.height / 2}"
			  title="タイトル変更"
			  >
		<mx:Form>
			<mx:FormItem label="タイトル:">
				<mx:TextInput id="titleInput"/>
			</mx:FormItem>
		</mx:Form>
		<mx:ControlBar width="100">
			<mx:Spacer width="100%"/>
			<mx:Button id="execBtn"
					   label="変更"
					   click="execBtn_clickHandler(event)"
					   />
		</mx:ControlBar>
	</mx:Panel>
	
</mx:Application>


ラッパーにScriptタグを追加して、Flexで呼び出す関数を設定します。



<script language="JavaScript" type="text/javascript">
	function setTitle(title)
	{
		window.document.title = title;
		
		return "success";
	}
</script>


実行結果がこちらです。







また、オブジェクトや配列をそのまま渡すことも可能です。
先程のソースを少し修正します。



<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" minWidth="955" minHeight="600">
	<mx:Script>
		<![CDATA[
			import flash.external.*;
			
			import mx.controls.Alert;
			
			public function setWrapperTitle(obj:Object):void
			{
				var ret:String;
				
				if (ExternalInterface.available)
				{
					ret = ExternalInterface.call("setTitle",obj);
				}
				else
				{
					ret = "Fault";
				}
				
				Alert.show(ret);
			}
	
			protected function execBtn_clickHandler(event:MouseEvent):void
			{
				var obj:Object = 
				{
					title1: this.titleInput1.text,
					title2: this.titleInput2.text
				};
				
				this.setWrapperTitle(obj);
			}
		]]>
	</mx:Script>
	<mx:Panel id="hoge"
			  width="300"
			  height="180"
			  x="{this.width / 2 - hoge.width / 2}"
			  y="{this.height / 2 - hoge.height / 2}"
			  title="タイトル変更"
			  >
		<mx:Form>
			<mx:FormItem label="タイトル1:">
				<mx:TextInput id="titleInput1"/>
			</mx:FormItem>
			<mx:FormItem label="タイトル2:">
				<mx:TextInput id="titleInput2"/>
			</mx:FormItem>
		</mx:Form>
		<mx:ControlBar width="100">
			<mx:Spacer width="100%"/>
			<mx:Button id="execBtn"
					   label="変更"
					   click="execBtn_clickHandler(event)"
					   />
		</mx:ControlBar>
	</mx:Panel>
	
</mx:Application>


javascriptの方も、オブジェクトを受け取るように変更


<script language="JavaScript" type="text/javascript">
	function setTitle(obj)
	{
		window.document.title = obj.title1 + obj.title2;
		
		return "success";
	}
</script>


実行結果







また、無名関数をFlex内で直接記述して実行することも可能です。

さきほどのコードを、無名関数を使うように変更します。


	public function setWrapperTitle(obj:Object):void
	{
		var ret:String;
				
		if (ExternalInterface.available)
		{
			ret = ExternalInterface.call(
				"function(obj)" +
				"{" +
					"window.document.title = obj.title1 + obj.title2;" +
					"return 'success';" +
				"}"
			, obj);
		}
		else
		{
			ret = "Fault";
		}
		
		Alert.show(ret);
	}
	


実行結果は先程の例と同様になります。

無名関数を使うことで、適用の幅が広がると思います。
非常に簡単ですので、試してみてください。

【Flex】Flexのコーディング規約のお話

こんにちは、橋本です。

今日はFlexのコーディング規約についてお話しようと思います。

「え、Flexにコーディング規約なんてあったの!?」

とお思いの方も多いかと思いますが、実は公式のコーディング規約が存在します。

Flex SDK coding conventions and best practices

日本語訳はこちら


今日はこの中で個人的に気になったところを拾って見ていきたいと思います。


略語


原則は、略語を使用しないということになっていますが、一部標準化されている略語があります。

acc: accessibility(アクセシビリティ)。使用例: ButtonAccImpl
auto: automatic(自動)。使用例: autoLayout
eval: evaluate(評価)。使用例: EvalBindingResponder
impl: implementation(実装)。使用例: ButtonAccImpl
info: information(情報)。使用例: GridRowInfo
num: number(数値)。使用例: numChildren
min: minimum(最小)。使用例: minWidth
max: maximum(最大)。使用例: maxHeight
nav: navigation(ナビゲーション)。使用例: NavBar
regexp: regular expression(正規表現)。使用例: RegExpValidator
util: utility(ユーティリティ)。使用例: StringUtil


個人的には、obj(object)、arr(array)、str(string)なんかも標準に入れても良い気がするのですが。

プロパティ名(変数およびgetter/setter)


小文字で綴りを開始し、以後の連語をキャメルケース方式で記述します。例: i、width、numChildren。

ループのインデックスにはi、上限値にはnをそれぞれ使用します。 内部ループのインデックスにはj、上限値にはmをそれぞれ使用します。

for (var i:int = 0; i < n; i++)
{
    for (var j:int = 0; j < m; j++)
    {
        ...
    }
}

for-inループの変数には、p(プロパティの頭文字)を使用します。

for (var p:String in o)
{
    ...
}



for文に関しては、特に異論はないのですが、for-in文の規約には個人的に納得出来ないというか、微妙な気がします。

pってわかりにくいですよね?

for-in文の中でさらにfor-in文を使うときにはどうするんでしょうか?pをプロパティの頭文字と言うのであれば、qだとおかしいですよね?だとすると、p2?

微妙ですね。。。


ストレージ変数名



getter/setterのfooのストレージ変数には、_fooという名前を付けます。



これも、好き嫌いがあると思います。個人的には、内部プロパティについては、全て_hogehogeといった感じで、アンダーバーからスタートする変数名に統一するのが、意外と分かりやすくていいんじゃないかな、と。

イベントハンドラ


イベントハンドラには、イベントの種類を示す語句に「Handler」を結合した名前を付けます。例: mouseDownHandler()。

仮にハンドラが、サブコンポーネント(this}}以外のものなど)によってディスパッチされるイベント用のものである場合は、ハンドラ名の前にサブコンポーネント名を付け、これらをアンダースコアで結合します。例: textInput_focusInHandler()。


イベントハンドラについては、onを接頭詞として付ける派(onMouseDown、など)の方もいらっしゃるかと思いますが、FlashBuilder4から追加された、イベントハンドラを自動で作成してくれる機能では、上記の規約に従ってメソッドが作成されるので、こちらに移行した方がいろいろと楽かもしれません。

引数名


各setterの引数には、valueを使用します。

public function set label(value:String):void

各イベントハンドラの引数には、(e、evt、eventObjではなく)eventを使用します。

protected function mouseDownHandler(event:Event):void


個人的には、setterの引数には、setする引数名を使いたくなるんですが。。



private var _hoge:String;
			
public function set hoge(hoge:String):void
{
   _hoge = hoge;
}


どっちがわかりやすいんでしょうか。

型宣言


すべての定数、変数、関数引数、関数の戻り値に対して、型宣言を記述します。
Arrayデータ型を宣言する場合は、/* of ElementType */の体裁のコメントをArray直後に記述し、配列要素の型を示すようにします。 将来バージョンの言語では、型付けされた配列が含まれる見込みです。


これは、めんどくさいんですが、慣れるとコードが読みやすくていいかもしれません。
こんな感じです。




var arr:Array /* of String */ = [];



また、この規約はFlash10以降使えるようになった、Vectorクラスの記述に似せたものなのかもしれません。
Vectorクラスは配列みたいなものなのですが、中に格納するデータの型を指定する必要があります。




private var vector:Vector.<String>;



リテラル


String:
文字列の区切りとしては、たとえその文字列にクオーテーションマークが文字として含まれている場合でも、アポストロフィ(1重引用符)ではなくクオーテーションマーク(2重引用符)を使用します。

"What's up, \"Big Boy\"?";

Array:
new Array()ではなく、配列リテラルを使用する。

var arr:Array = [];

Object:
new Object()ではなく、Objectリテラルを使用する。

var obj:Object= {};



ArrayとObjectは基本かと思いますが、Stringが気持ち悪いですね。わざわざエスケープするくらいなら、シングルクォート使う方がわかりやすいと思うんですけどね。。

ifステートメント


if/elseステートメントの分岐後条件に単一のステートメントのみが含まれる場合は、これらをブロックにすることを避けます。
1.
if (flag)
    doThing1();

2.  
if (flag)
    doThing1();
else
    doThing2():



1番はまぁいいのですが、2番はブロックにしたいですよね。なんとなく気持ち悪い。。。

forステートメント


たとえステートメントが1つしかない場合でも、{{for}}ループの命令部分はブロックで記述します。
for (var i:int = 0; i < 3; i++)
{
   doSomething(i);
}


なんで、ifと逆なんだ…。

switchステートメント


各case句の内容、およびdefault句の内容はブロックで記述します。breakステートメントおよびreturnステートメントは、ブロックの後ではなくブロック内に記述します。 returnがある場合は、returnをbreakの後に配置しないようにします。 default句はcase句同様に扱うようにし、breakやreturnを記述してswitchの最後まで処理が達するのを防ぐようにします。

switch (n)
{
    case 0:
    {
        foo();
        break;
    }

    case 1:
    {
        bar();
        return;
    }

    case 2:
    {
        baz();
        return;
    }

    default:
    {
        blech();
        break;
    }
}


これは慣れると、非常に見やすいです。

PHPを書いてるときにも、switch文の書き方に違和感を感じていたので、この書き方は目から鱗でした。
ちなみに、PHPでもこの書き方、できます。

ローカル変数


ローカル変数は、その変数が初めて使用される時点、または使用される直前に宣言するようにします。 すべての宣言を関数の最初の部分に記述することは避けます。

正しい記述例
private function f(i:int, j:int):int
{
    var a:int = g(i - 1) + g(i + 1);
    var b:int = g(a - 1) + g(a + 1);
    var c:int  = g(b - 1) + g(b + 1);

    return (a * b * c) / (a + b + c);
}

誤った記述例
private function f(i:int, j:int):int
{
    var a:int;
    var b:int;
    var c:int;

    a = g(i - 1) + g(i + 1);
    b = g(a - 1) + g(a + 1);
    c = g(b - 1) + g(b + 1);

    return (a * b * c) / (a + b + c);
}


AS3はブロック内のみが有効範囲のローカル変数に対応しておらず、変数名の重複でコンパイルエラーが出るときが多々あるので、個人的には、最初にまとめて宣言しちゃいたいです。

まぁ、変数名にもっと気を使ってコード書けって話になるのかもしれませんが。

記述書式


コードは1行あたり半角文字80字で折り返します。 これにより以下のメリットを享受できます。

デベロッパーが小さな画面を使用している場合でも、長い行を読む際に水平にスクロールする必要がありません。
比較ユーティリティを使用する際、ファイルの2つのバージョンを並べて表示できます。
プロジェクタを使用してグループにプレゼンする際、スクロールではなくフォントサイズを大きくすることで対応できます。
途切れや無駄な改行なく、ソースコードを印刷できます。


一行あたり80文字は少なくないですか。
下手したら、メソッドの宣言だけで80文字こえちゃいますよ?
メリットは確かにあるのかもしれませんが、普段コードを書く分には80文字だと少し物足りないですよね。


インデント



半角スペース4文字のインデントを使用します。



PHPを書くときは、半角2文字派だったんですが、慣れると4文字の方が見やすいです。

その他にもいろいろとあるのですが、個人的に気になったのはこの辺でしょうか。
コーディングスタイルは人それぞれだと思いますので、そんなに気にすることもないのかもしれませんが、
時間があれば一度目を通してみると、いろいろと発見があって面白いかもしれません。

アシアルPHPスクールにて、フレームワークCakePHP、WebAPI、Flex編など新設講座を開設

こんにちは。小林です。

アシアルPHPスクールでは、市場や受講希望者のニーズに合わせて、この度、続々とプログラミング講座を新設しました。

講座の新設にあわせ、講座説明会(無料)も開催しております。次回開催日は6月2日となりますので、皆様、お気軽にご参加いただけたらと思います。

新設・ブラッシュアップした講座は以下のとおりです。

-----
■ モバイル編: 絵文字や固有IDなど携帯特有の開発テクニックを学ぶ
◇詳しくはこちら:https://www.asial.co.jp/school/course_detail/8

CakePHPフレームワーク編:フレームワークを利用することで開発効率up
◇詳しくはこちら:https://www.asial.co.jp/school/course_detail/12

PHP×Flex初級編: Flex4の基礎的なアプリケーション構築をマスター
◇詳しくはこちら:https://www.asial.co.jp/school/course_detail/15

PHP×Flex中級編: Flexスキルを実務レベルまで押し上げる中級編
◇詳しくはこちら:https://www.asial.co.jp/school/course_detail/16

■ オブジェクト編: PHPで学ぶオブジェクトの仕組みと使い方
◇詳しくはこちら:https://www.asial.co.jp/school/course_detail/10

Linuxサーバ編: Linux コマンド操作やLAMP環境の構築方法について学ぶ
◇詳しくはこちら:https://www.asial.co.jp/school/course_detail/9

■ HTML×CSS初級編: Webサイトの制作のベースとなるHTMLをマスターしよう!
◇詳しくはこちら:https://www.asial.co.jp/school/course_detail/13

■ HTML×CSS中級編: スタイルシートによる魅力的なデザイン
◇詳しくはこちら:https://www.asial.co.jp/school/course_detail/14
-----






-----
以下、本日発表したプレスリリースの内容
-----
アシアルでは、2005年にPHPスクールを開始して以来、Web入門者向けの「初級編」、PHPスキルを実務レベルまで押し上げる「中級編」など、PHP言語を用いた開発のスキルアップをサポートする研修を実施してきました。これらの研修は、アシアルが開発現場で培ったソフトウェア技術をベースとしており、より実践的であることから多くの支持を集め、エンジニア・デザイナーを中心に約1500人に受講頂きました。

現在、Web製作の現場ではPHP言語を開発に利用することが完全に主流となりましたが、Webテクノロジーの進歩、PHP言語の普及と成長に伴い、さらに先を行く下記のようなニーズが高まってきました。

・大規模な開発におけるPHPの利用増加と、それに伴うより効率的な開発体制の構築
・デザインとプログラミング技術の強い連携
Flashなど高い表現力と処理能力を使い高いパフォーマンスのアプリケーション構築
・外部サイトと連携させることによる魅力的なコンテンツの提供

現在のエンジニアには、Webアプリケーションの開発現場の中で、よりフレキシブルに対応できることが求められています。大人数での効率的な開発、サーバ操作、モバイルサイトへの対応、先進的なデザインとの連携をはじめとして、数年前と比較すると、より先に進んだスキル、豊富な知識が求められています。

一方、Webデザイナーも従来のようにサイトのデザインに特化した体制ではなく、Flashの知識、プログラムへの理解、技術を考慮した上でのデザインが重要視されるようになってきました。

このような背景のもとアシアルは、プログラマ、デザイナへのサポート、スキルアップのため新たに講座を開設しました。

開設される講座は、いずれもアシアルが自社サービス及び受託開発で好評を受けたソフトウェア技術をベースとしてり、ハンズオンで実際にアプリケーションを作成しながら進める実践的な内容で、スキルを実務レベルに押し上げる内容です。

【アシアルPHPスクールの特徴】
・講師は現場で活躍する現役のPHPエンジニア
・受講者のスキル・希望にあわせた豊富なカリキュラムを提供
・各種割引制度(継続割引、グループ割引、早期申込割引)
・スクールの雰囲気や講座の内容について把握するための講座説明会(無料)の開催(次回開催 6月2日)

【新たに開設するプログラミング研修】
PHP×Flex 初級編
 Flex入門者を対象にActionScript3、最新版であるFlex4を取り上げ、PHPスクリプトと連携した簡単なアプリケーションを作成

PHP×Flex 中級編
 Flex4とPHPの連携によるRIAアプリケーションの作成、基本コンポーネントの使用法、実践的なカスタマイズ方法

CakePHP フレームワーク
 フレームワークを使用したスピーティかつ効率的な開発

PHP講座 モバイル開発編
 3G方式の携帯端末、3キャリアに対応した開発

PHP講座 Web API
 Twitterなど人気コンテンツとの連動

PHP講座 オブジェクト編
 ソースコードの効率化、デザインパターンへの理解

Linuxサーバ編
 基本的なサーバー知識と操作方法

ASDocをFlashBuilderからボタン一発で生成する

こんにちは。松田です。

のほほーんとコーディングをしていると、「この辺のプログラム、どんな形式でもいいからドキュメント書いて出して」なんて突然言われて気が重くなっちゃうことがありますよね。プログラマーはドキュメントの作成がとっても苦手なので、「あぁ・・・もうコメント書いてASDocでHTML出力しちゃえばいいかな・・・」ということになりがちです。
そんなときに役立つ、FlashBuilderからASDocを簡単に生成する方法を紹介します。
これを設定しておけば、いつでもボタン一つでASDocが出力できます。

そもそもASDocって何?という話ですが、クラスやメソッドに付けたコメントを元に、見やすくHTML形式のドキュメントを出力してくれるものです。
簡潔に書くとこんな形式のコメントを使用します。


/** 
* Main comment text.
* 
* @tag Tag text.
*/
public var .....

詳細なコメントのフォーマットは以下のURLを参照してください。
http://livedocs.adobe.com/flex/3_jp/html/help.html?content=asdoc_1.html



ASDocはFlexSDKがあれば作成可能で、本来はコマンドラインで動かすものらしいのですが、FlashBuilder(FlexBuilderでも)から簡単に作れるようなのでやってみました。

手順は以下の通りです。

1. メニューから「実行」→「外部ツール」→「外部ツールの構成」を選択



2. ウィンドウ内の左側のツリーの「プログラム」をダブルクリック



3. 新規構成画面が表示されるので項目を埋める


以下は今回の設定例です。


名前: ASDoc

これはなんでもいいです。



ロケーション: C:\Program Files\Adobe\Adobe Flash Builder 4\sdks\4.0.0\bin\asdoc.exe

FlexSDKのディレクトリの bin/asdoc.exe を選択します。



作業ディレクトリー: ${project_loc}

この文字列を書いておけば選択しているプロジェクトが自動的に使用されます。



引数:
-source-path src
-doc-sources src

スクリプトを保存しているディレクトリ(ここではsrcディレクトリ)を指定。


4. 「適用」「実行」をクリック


5. ASDocを作成したいプロジェクトを選択した状態で、「実行」→「外部ツール」→「ASDoc」を選択



6. 成功すればプロジェクト内に「asdoc-output」が!



7. この赤丸のところのボタンを使っても実行できます。


生成に成功するとasdoc-output内に大量のファイルが生成されます。index.htmlがトップページになるのでそれを開きましょう。

8. こんな感じのHTMLができました!


項目が少なくてショボかったので適当なメソッドを追加してます。
スクリプト上で定義していない、「public var image:Image」なんてのが出力されて、何だこれ?となったのですが、これはMXML上でidを登録しているオブジェクトが自動的に表示されてるんですね。
なかなかかしこい。



そもそもコメント書いてないから今更書くのめんどくさい・・・
そんな場合、FlexFormatterプラグインが便利です。
ASDocを生成するには、ある程度決まった形式のコメントを付けておく必要がありますが、このプラグインの「Generate ASDoc comments」機能を使えば、各クラス・メソッド・変数に自動的にコメントを付けてくれます。

FlexFormatter
http://sourceforge.net/projects/flexformatter/



public function hoge(value1:int, value2:String):int {}

この状態で使用すると、



/**
 * 
 * @param value1
 * @param value2
 * @return 
 */
public function hoge(value1:int, value2:String):int {}

ここまでコメントを作ってくれます。
もちろん解説文は自分で入れる必要があります。
ちょっとだけ楽になりますね。

ただし、このプラグインは .asファイルにしか対応していないため、MXMLファイル内にASゴリゴリ書いている人は恩恵を受けられません。残念。



参照URL:
http://www.peterelst.com/blog/2009/06/08/flash-builder-4-beta-exporting-asdoc-documentation/

AS3のBitmapFilterを片っぱしから試してみる

こんにちは。松田です。
今年も早いものでいつの間にかエイプリルフールをむかえてしまったようですが、なんのネタも用意して無かったのでいたってふつうのブログです。
今回はActionScriptで画像処理をするには欠かせない、BitmapFilter類を試してみます。

今回はflash.filtersから以下のフィルターを試しています。


BevelFilter
BlurFilter
GlowFilter
DropShadowFilter
ColorMatrixFilter
ConvolutionFilter
DisplacementMapFilter


片っ端からとかいいながら全部のフィルターは試してないです。ごめなさい。
ちょっとだけ嘘つきました。
それぞれどんな効果があるのか、Adobeの解説ページを読むよりも実際に見てみた方が分かりやすいと思うので、実際に実装したswfを置いています。
ボタンをいろいろ押しまくって確認してみてください。



動かしてみるとそれぞれのフィルターの使い道が何となく分かるかと思います。
が、ColorMatrixFilter, ConvolutionFilter, DisplacementMapFilterあたりは使用方法が幅広く、使い方次第でいろんなことが出来てしまうフィルターです。
ですので、今回はその中から使い道を一つだけ選んで使用してます。

ソースコードは上のフラッシュ内で右クリックして「ソースの表示」を押してください。
一応下にも載せておきますが上記方法のほうが見やすいと思います。
こんなに簡単なコードでこれだけ多彩な画像処理が行えてしまうのもASの魅力ですね。



<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="330" height="300" creationComplete="init()" viewSourceURL="srcview/index.html">
  <mx:Canvas left="0" top="0" bottom="0" right="0" backgroundColor="gray">
	  <mx:Image id="image" source="@Embed(source='assets/image.png')"  x="10" y="10" />
	  <mx:Button x="10" y="146" label="もとにもどす" click="revertImage()"/>
	  <mx:Button x="10" y="176" label="Bevel" click="applyBevelFilter()"/>
	  <mx:Button x="76" y="176" label="Blur" click="applyBlurFilter()"/>
	  <mx:Button x="131" y="176" label="Glow" click="applyGlowFilter()"/>
	  <mx:Button x="192" y="176" label="DropShadow" click="applyDropShadowFilter()"/>
	  <mx:Button x="10" y="206" label="ColorMatrix (GrayScale変換)" click="applyColorMatrixFilter()"/>
	  <mx:Button x="10" y="236" label="Convolution (エッジ検出)" click="applyConvolutionFilter()"/>
	  <mx:Button x="10" y="268" label="DisplacementMap(波打ち)" click="applyDisplacementMapFilter()"/>
  </mx:Canvas>
  
  <mx:Script>
    <![CDATA[
      import flash.filters.*;
      
      // 表示されている画像のBitmapData
      private var bitmapData:BitmapData;
      
      // もともとの画像のBitmapData もとにもどす用
      private var baseBitmapData:BitmapData;
      
      /**
      * 初期設定
      */
			public function init():void 
      {
        // Imageオブジェクトに読み込んだ画像をBitmapDataに変換して変数に格納しておく
        // このbitmapDataを操作してImageに上書きすることでフィルターをかける
        // もとの画像より大きくなるフィルターもあるので大きめに作っておきますん
        this.bitmapData = new BitmapData(this.image.width + 50, this.image.height + 50, true, 0x000000);
        this.bitmapData.draw(this.image);
        
        // もとの画像に戻すために初期のBitmapDataを別に保存しておく
        this.baseBitmapData = new BitmapData(this.image.width + 50, this.image.height + 50, true, 0x000000);
        this.baseBitmapData.copyPixels(this.bitmapData, this.bitmapData.rect, new Point(0,0));
			}
      
      
      /**
      * もとに戻す
      * 初期のBitmapDataを現在のBitmapDataにコピーして上書き
      */ 
      private function revertImage():void
      {
        this.bitmapData.copyPixels(this.baseBitmapData, this.baseBitmapData.rect, new Point(0,0));
      }
      
      
      
      /**
      * BevelFilter
      * 
      * ベベル効果?日本語での用語はないのかな
      * 縁取りをして立体っぽく見せる効果
      */
      private function applyBevelFilter():void
      {
        var filter:BevelFilter = new BevelFilter();
        
        this.applyFilterToImage(filter);
      }
      
       
      /**
      * BlurFilter
      * 
      * 画像をぼかす
      */
      private function applyBlurFilter():void
      {
        var filter:BlurFilter = new BlurFilter();
        
        this.applyFilterToImage(filter);
      }
       
      
      /**
      * GlowFilter
      * 
      * 縁取りをして光らせたりする
      */
      private function applyGlowFilter():void
      {
        var filter:GlowFilter = new GlowFilter(0xFFFFFF, 1, 10, 10, 5, 3, true, false);
        
        this.applyFilterToImage(filter);
      }
       
      
      /**
      * DropShadowFilter
      * 
      * 画像に影をつける
      */
      private function applyDropShadowFilter():void 
      {
        var filter:DropShadowFilter = new DropShadowFilter(20);
        
        this.applyFilterToImage(filter);
      }
      
      
      /**
      * ColorMatrixFilter
      * 
      * 画像のRGB+Alpha値をマトリクスを使って変換する
      * 今回はこれを使ってグレースケールに変換
      * 
      * ここの解説が分かりやすい
      * http://d.hatena.ne.jp/umezo/20090122/1232627694
      */
      private function applyColorMatrixFilter():void
      {
        var filter:ColorMatrixFilter = new ColorMatrixFilter([
          1/3, 1/3, 1/3, 0, 0,
          1/3, 1/3, 1/3, 0, 0,
          1/3, 1/3, 1/3, 0, 0,
          1/3, 1/3, 1/3, 0, 0,
          0, 0, 0, 255, 0
        ]);
        
        this.applyFilterToImage(filter);
      }
      
      
      /**
      * ConvolutionFilter
      * 
      * 畳込みフィルタ
      * 配列で指定したフィルタリングを画像の各ピクセルに適用していく
      * ぼかし、エッジ検出、シャープ、エンボス、ベベル・・・とかがこれ1つで実現できるらしい
      * 
      * 下のコードは、対象のピクセルの周り8ピクセルを-1で弱めて、その分中心の1ピクセルを強調させてエッジ検出している例
      * 
      * 参照
      * http://www.imajuk.com/blog/archives/2009/02/convolutionflter.html
      */
      private function applyConvolutionFilter():void
      {
        var filter:ConvolutionFilter = new ConvolutionFilter(3, 3,
          [
            -1, -1, -1,
            -1, +8, -1,
            -1, -1, -1 
          ]
	      );
        
        this.applyFilterToImage(filter);
      }
      
       
      /**
      * DisplacementMapFilter
      * 
      * 置き換えフィルタ
      * 画像を波打たせたりぼかしたりできる
      * perlinNoise(ランダムな模様を生成する)と組み合わせて画像を波打たせる効果を作ることが多いらしい
      * 
	    * perlinNoiseについてはここを参照
	    * http://d.hatena.ne.jp/kkanda/20080224/p1
      * 
      * DisplacementMapFilterについてはこちらを参照
      * http://d.hatena.ne.jp/kkanda/20080305/p1
      * http://endlessblank.com/blog/2009/06/displacementmapfilter.html
      */
      private function applyDisplacementMapFilter():void
      {
        // ランダムな縞模様を生成
        var perlinNoiseBitmap:BitmapData = new BitmapData(this.bitmapData.width, this.bitmapData.height);
        perlinNoiseBitmap.perlinNoise(
          perlinNoiseBitmap.width, 
          perlinNoiseBitmap.height, 
          10, 
          Math.floor(Math.random() * 65535), 
          false, 
          true
        );
        
        // 生成したランダムな模様を利用して波打たせる
        var filter:DisplacementMapFilter = new DisplacementMapFilter(
          perlinNoiseBitmap,  // 変換の元となるBitmapData
          new Point(0, 0),    // 変換開始ポイント
          1, // x座標の変形に使用する色 1=red, 2=green, 3=blue, 4=alpha
          1, // y座標の変形に使用する色
          30,// x座標の乗数
          30 // y座標の乗数
        );
          
        this.applyFilterToImage(filter);
      }
      
      
      
      /**
      * ここで実際にフィルターをかける
      * 修正したBitmapDataをImageオブジェクトに反映させるには、
      * BitmapData を Bitmap オブジェクトに格納した後に Image.load(Bitmap) を使う
      */
      private function applyFilterToImage(filter:BitmapFilter):void 
      { 
        // フィルターかけて
        this.bitmapData.applyFilter(this.bitmapData, this.bitmapData.rect, new Point(0, 0), filter);
        
        // BitmapはBitmapDataを入れておく器
        var bitmap:Bitmap = new Bitmap(this.bitmapData);
        
        // ここでImageに反映!
        this.image.load(bitmap);
      }
      
    ]]>
  </mx:Script>
</mx:Application>




参考にさせて頂いたURL
* http://d.hatena.ne.jp/umezo/20090122/1232627694
* http://www.imajuk.com/blog/archives/2009/02/convolutionflter.html
* http://d.hatena.ne.jp/kkanda/20080224/p1
* http://d.hatena.ne.jp/kkanda/20080305/p1
* http://endlessblank.com/blog/2009/06/displacementmapfilter.html

【Flex3】「Flex3の、こんなときどうするの??」

こんにちは、最近モールス信号に興味深々の橋本です。

さて、今回は前回の「AS3のこんなときどうするの?」の続編で、

Flex3のこんなときどうする?」をテーマに、また思いついたところを適当に書いていきたいと思います。

アサインされてるプロジェクトを進める中で発見したものばかりなので、結構偏りがあるかもしれませんが、そこはご了承くださいませ。。。

では、どぞー。

1. スクリプトの中で値をバインドしたい

Q. mxmlの中で値をバインドするときには、バインドしたい変数をmxmlの中で{}で囲み、対象の変数に、[Bindable]タグをつければオッケーなんだけど、スクリプトの中で、値をバインドさせたいときはどうするの??

A. BindingUtilsクラスを使いましょう。
BindingUtils.bindProperty()を使うことで、プロパティ同士をバインドさせることができます。



var textInput:TextInput = new TextInput();
addChild(textInput);
				
var label:Label = new Label();
addChild(label);

BindingUtils.bindProperty(label, "text", textInput, "text");


bindSetterメソッドを使うことで、対象の変数が変化したときに、特定のメソッドを呼び出すこともできますよ。



<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" minWidth="1024" minHeight="768"
				creationComplete="application1_creationCompleteHandler(event)"
				>
	<mx:TextInput id="textInput"/>
	<mx:Label id="hoge"/>
	<mx:Script>
		<![CDATA[
			import mx.binding.utils.BindingUtils;
			import mx.controls.Label;
			import mx.controls.TextInput;
			import mx.events.FlexEvent;
			

			protected function application1_creationCompleteHandler(event:FlexEvent):void
			{
				BindingUtils.bindSetter(toUpperCase, this.textInput, "text");
			}
			
			private function toUpperCase(str:String):void
			{
				this.hoge.text = str.toUpperCase();
			}
		]]>
	</mx:Script>
</mx:Application>


2. 自分で作ったクラスのプロパティをバインドの対象にしたい

Q. 自分で作成したクラス内のプロパティをバインドの対象にしたい。でも、呼び出し元で[Bindable]タグをつけるわけにもいかないし、BindingUtils使おうと思っても、対象外って怒られるし、どうするの??

A. 自分で作成したクラス内の変数のセッター内で、イベントをdispatch。Bindableタグの中で、そのイベントを指定するとバインドの対象にできますよ。
こんな感じです。



var hoge:String;

//セッターの中で、設定したイベントをdispatch。Bindableタグで、イベントを指定
[Bindable(event="hogeChange")] 
public function set hoge(value:String):void
{
	dispatchEvent(new Event("hogeChange"));
	hoge = value; 
}


3. 独自イベントをmxmlの選択項目にいれたい

Q. 自分でカスタムしたコンポーネントを呼び出すときに、独自イベントをmxmlで指定したいんだけど、どうするの??

A. コンポーネント内のMetadataタグの中にイベント名を記載しておきましょう。そうすることで、後からmxml上で使うことができます。



<mx:Metadata>
	[Event(name="hoge",type="flash.events.Event")]
</mx:Metadata>


4. DataGridの背景色を変更したい

Q. DataGridの背景色をセル毎に変えたいんだけど、どうするの??

A. DataGridColumnのitemRendererのbackgroundプロパティをtrueにして、backgroundColorを設定することで変更できますよー。



<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" minWidth="1024" minHeight="768"
				xmlns:components="components.*"
				creationComplete="application1_creationCompleteHandler(event)"
				>
	<mx:DataGrid dataProvider="{dataList}"
				 width="100%"
				 height="100%"
				 >
		<mx:columns>
			<mx:DataGridColumn headerText="hoge" dataField="data" itemRenderer="components.Hoge"/>
		</mx:columns>
	</mx:DataGrid>
	<mx:Script>
		<![CDATA[
			import mx.collections.ArrayCollection;
			import mx.events.FlexEvent;

			[Bindable]
			private var dataList:ArrayCollection;
			
			protected function application1_creationCompleteHandler(event:FlexEvent):void
			{
				var arr:ArrayCollection = new ArrayCollection();
				for (var i:int = 0; i < 100; i++)
				{
					var obj:Object =
						{
							data: i
						}
					;
					
					arr.addItem(obj);
				}
				
				dataList = arr;
			}

		]]>
	</mx:Script>
</mx:Application>


itemRenderer用のクラス


package components
{
	import mx.controls.dataGridClasses.DataGridItemRenderer;
	
	public class Hoge extends DataGridItemRenderer
	{
		
		public function Hoge()
		{
			super();
			
			this.background = true;
			// ランダムの色を入れる
			this.backgroundColor = Math.random() * 0xFFFFFF;
		}
	}
}


5. DataGridに文字列以外のものを表示したい

Q. DataGridに、ボタンとか画像とかチェックボックスとか、その他諸々を表示したいんだけど、どうするの??

A. DataGridColumnのitemRendererに、表示したいコンポーネントのクラスを指定することで変更することができますよー。
mxmlで指定するときには、一つ前のサンプルの中でやっているような感じで、クラス名を指定してやればオッケーです。
スクリプトで指定するときには、ClassFactoryクラスのインスタンスを指定してやればオッケーです。



var column:DataGridColumn = new DataGridColumn();
column.itemRenderer = new ClassFactory(Hoge);


6. ツリーに文字列以外のものを表示したい

Q. ツリーにボタンとか画像とかチェックボックスとか、その他諸々を表示したいんだけど、どうするの??

A. DataGridのときと同様に、itemRendererを指定することで可能です。
ただ、チェックボックスを表示するときは要注意。DataGridやTreeなどの、ListベースのコンポーネントのitemRendererは内部で使いまわされるので、チェックした状態を保持しておく機構が必要です。

以下の例では、TreeのdataProviderに指定しているXMLに、selectedというAttributeを持たせて、それを変更することによって、チェック状態を保持しています。



<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" minWidth="1024" minHeight="768"
				xmlns:components="components.*"
				>
	<mx:Tree itemRenderer="components.Hoge" dataProvider="{xml}" width="100" labelField="@value"/>
	<mx:Script>
		<![CDATA[
			[Bindable]
			private var xml:XMLList = XML(
				<root>
					<node selected="false" value="1"/>
					<node selected="false" value="2"/>
					<node selected="false" value="3"/>
					<node selected="false" value="4"/>
					<node selected="false" value="5"/>
					<node selected="false" value="6"/>
					<node selected="false" value="7"/>
					<node selected="false" value="8"/>
					<node selected="false" value="9"/>
					<node selected="false" value="10"/>
				</root>
			).node;
		]]>
	</mx:Script>
</mx:Application>


チェックボックスを表示するためのカスタムitemRendererクラス


package components
{
	import mx.binding.utils.BindingUtils;
	import mx.controls.CheckBox;
	import mx.controls.treeClasses.TreeItemRenderer;
	import mx.controls.treeClasses.TreeListData;
	
	public class Hoge extends TreeItemRenderer
	{
		[Bindable]
		public var checkBox:CheckBox;
		
		public function Hoge()
		{
			super();
		}
		
		override public function set data(value:Object):void {
			super.data = value;
		}
		
		override protected function createChildren():void{
			super.createChildren();
			
			checkBox = new CheckBox();
			checkBox.setStyle("verticalAlign","middle");
			BindingUtils.bindSetter(setSelected, checkBox, 'selected');
			this.addChild(checkBox);
		}
		
		override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {     
			var treeListData:TreeListData = TreeListData(super.listData);
			
			super.updateDisplayList(unscaledWidth,unscaledHeight);
			
			if(super.data)
			{
				if (data.@selected.toString() == 'true')
				{
					checkBox.selected = true;
				}
				else
				{
					checkBox.selected = false;
				}
				
				checkBox.x = super.label.x;
				checkBox.y = ( unscaledHeight - checkBox.height ) /2;
				label.x = checkBox.x + checkBox.width + 20;
			}
		}
		
		private function setSelected(selected:Boolean):void
		{
			if (data)
			{
				data.@selected = selected.toString();
			}
		}
	}
}


7. drag and drop時の画像を変更したい

Q. drag and dropを独自に実装したときに、ドラッグする対象の画像を変更したいんだけど、どうするの??

A. DragManagerクラスのdoDragメソッドの第四引数に画像を指定してやればオッケーです。



DragManager.doDrag(dragInitiator, dragSource, event, img);


8. カーソルを変更したい

Q. 処理待ち中のカーソルを変更したりしたいんだけど、どうするの??

A. cursorManager変数の各種メソッドを使えば可能ですよー。

cursorManager.setBusyCursor()で、デフォルトの時計のアイコンを表示することができます。
cursorManager.removeBusyCursor()で、普通のアイコンに戻せます。

CursorManager.setCursor()を使うことで、独自のアイコンを指定することもできますよー。

9. ラッパーのhtmlのtitleをswfの中で設定したい

Q. htmlのタイトルを変更したいんだけど、どうするの??

A. ExternalInterfaceクラスを使いましょう。そうすることで、swfから、javascriptを実行することができます。



ExternalInterface.call("function(){if(location.href.indexOf('#',0) != -1){document.title = 'hogehoge'}}");


ラッパーhtmlの中でタイトルを最初から指定しておけばいいんじゃネーノ?って思うかもしれませんが、IEだけちゃんと動かないんですよ。なぜか'#'って表示されちゃうんですよね。

10. swfの置いてあるURLを取得したい

Q. swfの実行元のURLを取得して、swfの内部で使いたいんだけど、どうするの??

A. Application.application.urlで、実行されているswfのURLをフルで取得できるので、そこから正規表現で取得しましょう。



private function getHost():String
{
	var fullUrl:String = Application.application.url;
	var reg:RegExp = new RegExp("http://[^/]*/");
	if (reg.test(fullUrl)) {
		return reg.exec(fullUrl).toString();
	}
}


以上でーす。

結構偏った内容なんですが、お役にたてることが一つでもあれば幸いです。
ではではー。

【AS3】「ActionScript3の、こんなときどうするの??」

こんにちは、橋本です。
今日は、自分が普段AS3を書いていて「こんなときどうするの??」と思ったところを中心にいくつか書いみました。
思いついたものから書いていったので、内容はバラバラですが、お役に立てる内容が一つでもあれば幸いです。

では、どうぞー。


Q. イベントリスナーに引数を渡したい。

A. 関数を返すイベントハンドラを指定することで、引数を渡すことができます。

サンプル.


// イベントリスナを登録するときに、引数を渡す
addEventListener(MouseEvent.CLICK, clickHandler("hoge"));

private function clickHandler(str:String):Function
{
	return function (event:MouseEvent):void {trace(str)};
}


Q. イベントの進行を止めたい。

A. event.stopPropagation()を使います。現在処理されている対象で、イベントの伝達をストップすることができます。

サンプル.


public class test extends Sprite
{
	public function test()
	{
		var obj:Object = {hoge: "hoge"};
		
		var sprite:Sprite = new Sprite();
		sprite.name = "parent";
		this.addChild(sprite);
		sprite.graphics.beginFill(0xFFFF00);
		sprite.graphics.drawRect(0, 0, 100, 100);
		
		sprite.addEventListener(MouseEvent.CLICK, clickHandler1);
		
		var sprite2:Sprite = new Sprite();
		sprite2.name = "child";
		sprite.addChild(sprite2);
		sprite2.graphics.beginFill(0x00FF00);
		sprite2.graphics.drawRect(0, 0, 50, 50);
		
		sprite2.addEventListener(MouseEvent.CLICK, clickHandler2);
	}
	
	private function clickHandler1(event:MouseEvent):void
	{
		trace("parent");
	}
		
	private function clickHandler2(event:MouseEvent):void
	{
		trace("child")
		
		event.stopPropagation();
	}
}


Q. イベントの、currentTargetとtargetの違いが、実はよくわかりません。

A. 大丈夫です。僕は最初はよくわかっていませんでしたw
currentTargetは、イベントを受け取ったオブジェクトで、targetはイベントを発生させたオブジェクトです。
以下のサンプルで、親のボックスをクリックしたときには、両方とも"parent"と表示されますが、子のボックスをクリックしたときには、targetが"child"となり、currentTargetが"parent"となります。これは、子のボックスをクリックしたことで発生したイベントを、親のボックスで受け取っているからです。

サンプル.


public class test extends Sprite
{
	public function test()
	{
		var obj:Object = {hoge: "hoge"};
		
		var sprite:Sprite = new Sprite();
		sprite.name = "parent";
		this.addChild(sprite);
		sprite.graphics.beginFill(0xFFFF00);
		sprite.graphics.drawRect(0, 0, 100, 100);
		
		sprite.addEventListener(MouseEvent.CLICK, clickHandler1);
		
		var sprite2:Sprite = new Sprite();
		sprite2.name = "child";
		sprite.addChild(sprite2);
		sprite2.graphics.beginFill(0x00FF00);
		sprite2.graphics.drawRect(0, 0, 50, 50);
	}
	
	private function clickHandler1(event:MouseEvent):void
	{
		trace("currentTarget:" + event.currentTarget.name + ", target:" + event.target.name);
	}
}


Q. オブジェクトのクラス名を知りたい。

A. flash.utils.getQualifiedClassNameメソッドを使うと、フルパスのクラス名を取得できます。純粋にクラス名だけを取りたいときには正規表現を使ったりしてみてくだしい。

サンプル.


var sprite:Sprite = new Sprite();

trace(getQualifiedClassName(sprite)); // flash.display::Sprite
trace(getQualifiedClassName(sprite).match(/::(.*)/)[1]); // Sprite


Q. 配列にオブジェクトが含まれているか知りたい(PHPでいうところの、in_array)。

A. indexOfメソッドを使います。配列に含まれている場合には、インデックスを返し、無い場合には"-1"を返してくれるので、そこで判定します。

サンプル.


public static function inArray(item:*, arr:Array):Boolean
{
	return arr.indexOf(item) != -1;
}


Q. 配列のコピーが欲しい。

A. Arrayの中身をfor文で回して…というのは嘘で、Array.concat()もしくは、Array.slice()を引数無しで呼び出すことで作成可能です。

サンプル.


var arr:Array = [1, 2, 3];

var arr2:Array = arr.concat();

for each (var num:Number in arr2)
{
	trace(num);
}


Q. オブジェクトディープコピーが欲しい。

A. ByteArrayクラスのインスタンスを作成することでディープコピーが可能になるようです。(参考:http://help.adobe.com/ja_JP/ActionScript/3.0_ProgrammingAS3/WS5b3ccc516d4fbf351e63e3d118a9b90204-7ee7.html)リンク先にもありますが、一応cloneメソッドのサンプルを載せておきます。

サンプル.


import flash.utils.ByteArray; 
 
function clone(source:Object):* 
{ 
    var myBA:ByteArray = new ByteArray(); 
    myBA.writeObject(source); 
    myBA.position = 0; 
    return(myBA.readObject()); 
}


どうでしょうか。
お役に立てることがひとつでもあれば幸いです。

E4Xのまとめ-その2-

こんにちは。Flex大好き橋本です。

今回は、前回の「E4Xのまとめ-その1-」の続きということで、子孫ノードへのアクセス、値のフィルタリング、名前空間の利用についてまとめていきたいと思います。

・子孫ノードへのアクセス。
「..」を使って、子孫ノードにアクセスすることができます。



//例
var xml:XML = <root>
	<hoge>hoge1</hoge>
	<fuga>
		<hoge>hoge2</hoge>	
	</fuga>
</root>;

//前回あったとおり、「.」を使うと、直接の子ノードを取得することができます。
var a:XMLList = xml.hoge;
for each (var b:XML in a) {
	trace(b); //hoge1
} 

//「..」を使うと、「.」とは異なり、直接の子ノードだけではなく、すべての子孫ノードを取得することができます。
var a:XMLList = xml..hoge;
for each (var b:XML in a) {
	trace(b); //hoge1, hoge2
} 


・条件指定によるフィルタリング
「()」の中に条件を指定することによって、各ノードの値や属性値について、フィルタリングを行うことができます。



//例
var xml:XML = 
    <root>
        <member id="1">
            <name>akifumi</name>
            <job>engineer</job>
        </member>
        <member id="2">
            <name>tarou</name>
            <job>analyst</job>
        </member>
    </root>;

// ノードの値でフィルタリング
trace(xml.member.(name == "akifumi")); // 一つめの<member>ノードを取得

// 属性値でフィルタリング
trace(xml.member.(@id == 2)); // 二つめの<member>ノードを取得
trace(xml.member.(@id <= 1)); //不等号を使うことも可能。この場合は、一つめの<member>ノードを取得

// 正規表現によるマッチングを利用することもできます。
var regexp:RegExp = new RegExp("engineer");
trace(xml.member.(job.toString().match(regexp) != null)); //一つめの<job>ノードを取得


名前空間が指定されている値の取得
Namespaceクラスを利用することで、名前空間が指定されているXMLの値を取得することが可能です。
//例
var xml:XML =
aaaa
bbbb
;

// namespaceを指定して値を取得
var ns:Namespace = new namespace("http://hogehoge.hoge");
trace(xml.name); // aaaa
trace(xml.ns::name); // bbbb
<
default xml namespace ディレクティブを利用することで、デフォルトのnamespaceを指定することもできます。



var xml:XML = <root xmlns:hoge="http://hogehoge.hoge" xmlns:fuga="http://fugafuga.fuga">
	<fuga:name>aaaa</fuga:name>
	<hoge:name>bbbb</hoge:name>
</root>;

// デフォルトnamespaceを設定
var ns1:Namespace = new Namespace("http://hogehoge.hoge");
default xml namespace = ns1;

trace(xml.name); // bbbb

// デフォルトnamespaceを切り替え
var ns2:Namespace = new Namespace("http://fugafuga.fuga");
default xml namespace = ns2;

trace(xml.name); // aaaa


以上、前回と今回の2回に渡って、簡単ですがAS3におけるE4Xの使い方をまとめてみました。
特に、フィルタリングの部分はうまく使うことで、非常に簡単に目的の値を取得することが可能になるかと思いますので、尻込みせずに、ぜひ使ってみていただけたらと思います。