WebGL版です。

クリックで別ウインドウで開きます。

今回は、はじめてHTML5を触ってみた中でわかったことを書きたいと思います。

HTML5でJavascriptからグラフィックを操作するには、従来のdivの操作に加えてSVGとCanvasを使う方法が加わったらしく、とりあえず今回はCanvasを使ってみました。

3Dライブラリthree.jsについて

ご存じのとおり、SVGはベクターを扱うタグでして、Canvasはピクセルを扱う場所になります。AS3だとベクターもラスターもどっちもよく扱うのでJSでも出来るんだろうけど流石に今回ピクセル操作ばっかりプログラミングするのは面倒くさかったので何かいいライブラリはないかと思っていると、どうやら3Dのライブラリthree.jsが何やら面白そうです。
ある程度のJavascriptの知識と、3Dライブラリを使ったプログラムの経験があればすんなりと使うことが出来ました。
がんばってAPIを掘り下げれば、かなり面白いものが作れそうです。

注意すべき点は、たぶんバージョンアップのためだと思うのですがAPIの仕様が変わっていて、古い解説文書などですと動かない場合があることです。
あとどうしてもドキュメントが少ないので、特にリファレンスが無いと何も出来ない僕にとっては、慣れ親しんだASDocくらい詳しいリファレンスが無いのが地味に大変でした。

ただし、クラス名やプロパティに変な癖も無いのでリファレンスが足りて無くても何とかなりました。
一般的な3Dライブラリと似たような感じで

• シーンを作って、カメラを作って、レンダラーを作って
• シーンや表示オブジェクトは入れ子構造にできて
• ジオメトリとマテリアルを持つメッシュを作成して表示オブジェクトに追加
• シーンとカメラを指定してレンダリングを実行

という、ごくごく自然な流れでプログラミングできました。

面白いことに、WebGLでレンダリングするレンダラーと、素のCanvasにレンダリングするレンダラーがあるんですが、その二つをかなり簡単に切り替えられるんです。
ここらへんは型付けがゆるいJavascriptならではの面白みだと思いました。

制作環境について

かなり残念な英語力と記憶力、たぐいまれなるタイピングミスの持ち主の僕にとって、開発環境こそが頼みの綱です。
今回は@kotaro_tanさんに教えて頂いたWebStormというIDEを使ってみました。

なにやらかっこいいクラスを作ってるなう

Javascriptをクラスで開発していくことについて

前回の記事「Actionscript3erが覚えるJavascriptでのクラス開発まとめ」でJavascriptでクラスを作って開発するスタイルをまとめてみたわけですが、手前味噌ながらこれが非常に役に立ちました。
javascriptにはjavascriptの面白さがあるので、AS3のクラスっぽい作り方が無理矢理なのであれば何もわざわざjavascriptの面白さを消してまでクラス作りをする必要は全くないと思っていたのですが、無理矢理どころかむしろだいぶ自然にクラスが使えたので、だいぶ効率よく作ることが出来ました。
後述するjsファイルの重複ロード問題も今回はクラスを使って解決できましたし、デザインパターンが使えるのもなによりうれしいひなまつりです（こんど娘が初節句なんです。楽しみで楽しみで）。
クラスは僕も最初かなり苦手意識を持っていましたが、品質を上げるための先人の知恵の結晶なので今後ももっともっと勉強していきたいです。

Javascriptのゆるさについて

Javascript特有の「ゆるさ」は長所でもあり短所でもあるんですが、久々にまあまあの量のJavascriptをコーディングして、このゆるさもかなり楽しめました。
個人的にはガチガチの型付け言語をガチガチのIDEで扱った方が実質的なコーディング速度は速いと思うんですが、Javascriptの設計のゆるさからくる「アイデアが形になるまでの速度感」はAS3とはまた違った面白さがあります。
AS1の頃の面白さとHTML5の新鮮さの良いところどりはずるいと思います。

javascriptの楽しさをたっぷり楽しんだ上で、今後の課題も書き留めておきたいと思います。
あくまでActionscript3よりな人間が久々に遊びでJavascript触ってみて対応というか妥協した程度の記録ですので、今後かならず解決するべきだしもっといいノウハウは他にあるはずです。

変数やオブジェクトがいくらでも上書きできてしまう

定数は無理としても、prototypeに閉じ込めるなどしてprivateな空間は作るべきなのでしょうが、今回はそこまでしませんでした。変数のアクセス範囲を出来るだけ狭くすることが鉄則なのに、非常に悩みどころです。

名前空間について

いちおう最初のファイルに

if(!jp_utweb_namespace){
    var jp_utweb_namespace = {};
}

こういう事書いておくことで「俺はグローバルの名前空間をあんまり汚染しない男だぞ」アピールをしているのですが、正直気に入っていません…。
最低でもプロジェクトごとにも別けたいし、ネームスペースの変数名そのものを持ち回りたいんですが、そこらへんは今後の課題として残りました。

重複ファイルのロードについて

こういったjavascriptファイルがあったとして、
onece.js

;(function(ns){
    alert('一回しか実行を想定していない処理！');
})(jp_utweb_namespace);

HTMLで二回読み込まれてしまうと

当然二回実行されてしまいます。
実行前にDOMを調べて、src属性に自分のファイル名と同じscriptタグが２つ以上ある場合は一回しか実行しない、といった処理をすればいいのですが、うまくライブラリ化できなかったので、それは今後の課題になります。

今回とった方法では、クラスを作成する処理ばかりにしておいて、最後にrun.jsというスクリプトファイルのみ、重複チェックを行って、ActionScriptでいうドキュメントクラスに相当するクラスを一回だけ実行する、というやり方にしました。

クラスを作成する直前に

;(function(ns){
    if(!!ns.Mein){
        return;
    }
    ns.Main = functino(){};
})(jp_utweb_namespace);

こんな感じでチェックを入れても良かったのですが、タイプミスなどによるデバッグがしづらくてかえって危険なのでやめました。
実際に上のコードはこんなに短いのに見つけるのが困難なバグがあります。
ここは素直に

;(function(ns){
    ns.Main = functino(){};
})(jp_utweb_namespace);

こう書くことにしました。
重複ロード時にクラスが複数回生成されてしまうコストが発生しますが、プログラムの意図しない箇所でバグるよりはマシかと。

まとめ

いまのところまだちょっと触って遊んでみた程度ですので、今後案件に投入できるかどうかの判断もまだ現段階ではつきませんが、面白い技術であることには間違いないです。
少なくともWEB上でリッチなインターフェースやモーション、体験を作るということにおいてはActionScripterこそ親和性の高い技術なので、これからどんどんと横断的に開発できるノウハウを見つけ出してハイブリッドな開発者がたくさん増えると面白いかと思います。

そこでJavascriptでクラスを作ったりするときに「あれ？ASだとこうやるやり方、JSだとどうやるんだっけ」ってのを減らせるように、完全に個人的な備忘録を作ってみました。自己流なうえにオレオレ規約ばっかりで恥ずかしい限りですがせっかく作って公開したのでなんらかのお役にたてばうれしいです。

Javascriptでのクラスの作り方は本当にたくさんの方法がありますが、その中で僕が一番馴染んでいる書き方だけを勝手に選んでのせています。
さっきふと思い立ってやった方法をそのままばんばんのせている感じです。
あと、JSとの類似性を浮き上がらせるためにASにはあえて型を宣言しないで書いています。
ASやJSの綺麗なコードの書き方ではなく、あくまでもASに似せたやり方でJSを書いていく方法を探った記事ですのでご了承ください。
あと、技術書でも何でもなくあくまで個人の備忘録ですので恥ずかしながら盛大に間違えている箇所がたくさんあるかと思います。その場合間違いは常に正していきたいのでご指摘頂けると大変嬉しいです。
ほんと僕のブログ間違いもおおいんで前置きも長々となってしまってすいません。

同じ処理を最初にAS3、次にJSの順番で書いてみたいと思います。

クラスを使ってみる

クラスを使う方法はまさに全く同じです。
actionscript3

//インスタンスメンバを使う場合。
var d = new Date();
trace(d.getTime());
//クラスメンバを使う場合。
trace(Math.random());

javascript

//インスタンスメンバを使う場合。
var d = new Date();
console.log(d.getTime());
//クラスメンバを使う場合。
console.log(Math.random());

つまり作り方の違いさえうまく吸収できれば、クラスを使うぶんにおいてはほぼ全くといっていいほど同じように使えるようになるってことではあーりませんか。
こりゃいいや、さっそく作り方をまとめてみよう。

クラスを作ってみる

AS3のほうは意図的にpackageブロックを書いていません。
actionscript3

public class Human {
	public function Human() {}
}

javascript

/**
 * @constructor
 */
function Human(){};

Javascriptではfunction宣言するだけでクラスが作れます。この部分がそのままコンストラクターになります。
作ったクラスは先ほどみたいにASでもJSでも全く同じように

var John = new Human();

こういうふうに使えるようになります。

プライベートプロパティ、プライベートメソッドを作ってみる

JSでは言語としてprivateをサポートしてないっぽい？
言語がサポートしていない以上、なんとかして隠匿化するコードを書いた方が良いのかもしれませんが、個人的にはオリジナルで処理を組むよりは規約を作ってこういったチェックツールに頼る方が好みなので、JSのほうはGoogleのコーディング規約を参考にこうしてみました。
まあClosure Linterまだ使ったことないですが。
actionscript3

public class Human {
	public function Human() {}

	private var himitsu_ = 'わりと最近うんこをもらした';

	private function think_() {
		trace('（´-`）.｡oO（蛇口からビールが出ればいいのになあ…。');
	}
}

javascript

/**
 * @constructor
 */
function Human(){
    /** @private */ this.himitsu_ = 'わりと最近うんこをもらした';

    /** @private */ this.think_ = function() {
        console.log('（´-`）.｡oO（蛇口からビールが出ればいいのになあ…。');
    };
};

JSのほうは、コンストラクタ内で宣言することで「これはプライベートな空間なんですよ」と（自分が）強く思い込むことにしました。

2012/01/29 追記
コンストラクタ内でvar で宣言しておいて、getter/setterで操作するってやり方を今知りました。うーん、それ使うかどうしようか迷う…。

2012/01/29 さらに追記
さっそく@taikikenさんからpublic/privateをわける方法を教えて頂きました。
ツイッター
JavaScriptでOOP – Classみたいなのにprivateな関数と変数 | イナヅマtvログ
コンストラクタ内でvarでプライベート宣言しておいた上で、mainというfunctionもprivateで保持しつつそこのprototypeにpublicな変数と関数を入れておいてreturnするというやり方ですね（僕が言葉にするとかえってわかりにくいですが教えて頂いたコードはすごい明快です）。プロトタイプベースのクラス、奥が深い！

パブリックプロパティ、パブリックメソッドを作ってみる

JSがprivateをサポートしていない（未確認）以上、publicもファブリックもあったもんじゃない（最近IKEAに行きました）のですが、JSのほうではprototypeに宣言することで「これはパブリックな空間にあるんですよ」と（自分が）強く思い込むことにしました。
actionscript3

public class Human {
	public var syumi = 'プリクラ集め、水に向かって綺麗な言葉を言い続けること';

	public function work() {
		trace('|^o^|＜ひきこもりぎみなのでそとをあるくのはにがてです');
	}
}

javascript

/**
 * @constructor
 */
function Human(){};
/** @public */ Human.prototype.syumi = 'プリクラ集め、水に向かって綺麗な言葉を言い続けること';

/** @public */ Human.prototype.work = function() {
    console.log('|^o^|＜ひきこもりぎみなのでそとをあるくのはにがてです');
};

スタティックなプロパティやメソッドを作ってみる

JSではクラス（正確にはFunctionオブジェクト？）に直接定義することでstaticになりました。
actionscript3

public class Human {
	public static function help() {
		trace('困ったときはお互い様。');
	}
}

javascript

/**
 * @constructor
 */
function Human(){};
Human.help = function() {
    console.log('困ったときはお互い様。');
};

助け合いの心は人が誰もが持っている心。美しいですね（美）

継承してみる

僕の作ったクラスがだいぶ人としても完成されてきた頃なので、ここらで継承して新たなクラスを作ってみたいと思います。
actionscript3

public class Hentai extends Human{
	public function Hentai() {}

	public function zenra() {
		trace('╰⋃╯');
	}
}

javascript

/**
 * @constructor
 * @extends {Human}
 */
function Hentai() {};
Hentai.prototype = new Human();
Hentai.prototype.zenra = function() {
    console.log('╰⋃╯');
};

Javascriptでは新たなクラスのprototypeにスーパークラスをインスタンス化させると継承できました。

オーバーライドしてみる

JSはそのまま親クラスを上書きするだけとしています。
actionscript3

public class Hentai extends Human{
	public override function work() {
		//super.work();
		trace('三╰⋃╯');
	}
}

javascript

/**
 * @constructor
 * @extends {Human}
 */
function Hentai() {};
Hentai.prototype = new Human();
/** @override */ Hentai.prototype.work = function() {
    //this.constructor.prototype.work.call(this , arguments);
    console.log('三╰⋃╯');
};

インターフェースを使ってみる

JSではインターフェースもサポートされていないので、インターフェースに似たふるまいをするコードを書くか書かないか、書くとしたらどこまで書こうか、ここ一番悩んだんですが、結局コードとしては一切書かないことにしました。
だいたいこの辺の記事を参考に、規約で実現する方法を探っているところです。今のところコメントにinterfaceと書いてるだけですが。
actionscript3

public interface IBijin {
	function yasashii();
	function iinioi();
}

public interface IIsya {
	function care();
}

public class Jyoi implements IBijin, IIsya{
	public function Jyoi() {}
	public function yasashii() {}
	public function iinioi() {}
	public function care() {}
}

javascript

/**
 * @interface
 */
function IBijin() {};
IBijin.prototype.yasashii = function() {};
IBijin.prototype.iinioi = function() {};

/**
 * @interface
 */
function IIsya() {};
IIsya.prototype.care = function() {};

/**
 * @constructor
 * @implements {IBijin, IIsya}
 */
function Jyoi() {};
Jyoi.prototype.yasashii = function() {};
Jyoi.prototype.iinioi = function() {};
Jyoi.prototype.care = function() {};

こんな感じでしょうか？コードがなんかだいぶ投げやりになってきたなあ。

さいごに

僕がまとめた限りではまあだいたいこんなものではないでしょうか。
無理矢理にしてまでJSをASのクラスライクに書いていく必要はないと思いますが、わりかし自然にASっぽく書くことも出来なくはなさそうな感じはします。
今話題のArctic.jsやenchant.jsなど（ふたつとも僕はまだ残念ながら使えていないんですが）のようにASライクに書けるJSのライブラリも増えてきましたし、とりあえず横断的に開発してみたくてまとめてみました。
ASもそうですがJavascriptも独学の完全自己流なので本当は晒せるほどは自信がないですが、何かしら役に立てばなによりです。

1. ObjectタグのIDのどこかに「external」を入れる。
2. Javascriptの名前空間を出来るだけ汚染しない。
3. 初期化の実行順序を守る

2011/10/23 追記
ひろゆきさんに教えていただいたんですが（こちら）、IDに「external」を付けなくても動くそうです。

AS側でやっといて便利なのは次の点です。

1. JavaScriptとの連携は必ずシングルトンを介して行う。

順番にみてみたいと思います。

Cap1.ObjectタグのIDのどこかに「external」を入れる。

こちらの記事にあるように、IEのアホウはトンマなヤロウであるわけです。
本来ならばIEのマヌケなバグにこちらが付き合ってやるいわれはないわけですが、ObjectタグのIDのどこかしらに「external」と入れてやれば万事解決するのであれば、そうしてやろうではありませんか。
それが大人というものではないでしょうか。
なのでSWFObjectの記述はこんな感じになるかと思います。

;(function(){
	var swfDirectory = "/";
	var swfFileName = "index.swf";
	var targetId = "flashcontent";
	var width = "800";
	var height = "600";
	var version = "9.0.45";
	var expressInstall = swfDirectory+"commons/scripts/swfobject/expressInstall.swf";
	var flashvars = {};
	flashvars.jsNamespace = "jp_utweb_ExternalInterface_sample";
	var params = {};
	params.menu = "false";
	params.quality = "best";
	params.scale = "noscale";//showAll
	params.salign = "tl";
	params.wmode = "transparent";//opaque wmode
	params.swliveconnect = "true";
	params.allowfullscreen = "true";
	params.allowscriptaccess = "always";
	params.allownetworking = "all";
	var attributes = {};
	attributes.id = "external_content";
	attributes.name = "external_content";
	attributes.align = "middle";
	swfobject.embedSWF(swfDirectory+swfFileName, targetId, width, height, version, expressInstall, flashvars, params, attributes);
})();

まずは22行目、23行目、ObjectのID属性に「external」が出現していることに注目してください。
10行目の

flashvars.jsNamespace = "jp_utweb_ExternalInterface_sample";

は次のCap2で説明します。

Cap2.Javascriptの名前空間を出来るだけ汚染しない。

基本的には匿名関数とか使って、ぱっと実行された間に必要なときだけ呼び出されてあとは何事もなかったかのようにぱっと消えるのは格好良いんですが、ASからJSを呼び出そうとした場合、いろいろ試してみたんですがどうしても最低ひとつはJSの名前空間を汚染する必要があるという結論に至りました。
これに関しては結構いろいろためして、一見して無駄だと思えるような、匿名関数の中でSWFObjectを実行してその中でSWFはJS側の関数を呼ぶことで全く名前を消費しない方法を使えないかとかいろいろ試したのですが僕のスキルではどうにもならず、結果としてどうしても一個だけ名前を消費する方法しか作れませんでした。
これがそのJavaScriptのテンプレートです。

;var jp_utweb_ExternalInterface_sample;
(function(){
	this.getElementFromName = function(name){
		if (navigator.appName.indexOf("Microsoft") != -1){
			return window[name];
		}else{
			return document[name];
		}
	};
	jp_utweb_ExternalInterface_sample = function(){};
	jp_utweb_ExternalInterface_sample.ready = function(){
		//ActionScriptが実行可能状態になったら最初に呼び出される。
		//JS側からAS側に関数を呼び出すときは必ずこの関数が実行された後にしなくてはならない。
	};
	jp_utweb_ExternalInterface_sample.hoge = function(){
		//ActionScriptから適時呼び出される。
		var swf = this.getElementFromName("external_content");
		if(swf){
			//ActionScriptの関数を実行。
			swf.asFunction();
		}
	};
})();

一行目の

;var jp_utweb_ExternalInterface_sample;

これが唯一の名前空間となります。
これと全く同じ名前を、Cap1の10行目で

flashvars.jsNamespace = "jp_utweb_ExternalInterface_sample";

というふうにFlashに伝えてあることによって、Flash側ではJavaScriptへの呼び出しを可能にします。
Flash側での呼び出しはCap4で説明します。

コーヒーブレイク：ぼくのかんがえたさいきょうのJS名前空間

一旦休憩です。
非常にくだらない事を書くので、読み飛ばしてCap3まで進めることを強くおすすめします。
僕がJavaScriptを触っていて特に気を遣うのが名前空間の汚染なわけですが、大規模案件にかかわらず一人で開発しているような趣味のプログラミングでもどうしてもグローバルの名前空間の汚染が避けられない状況がよく出てきます。
僕は僕なりにいろいろ調べてはみたんですが、JavaScriptは言語仕様としてどうしてもこれは避けられないのではないかと思うようになったわけです。
名前空間を擬似的に扱うクラスを作ってみたりもしたんですが、そのクラスに一つ名前空間を使うという仕様になってしまい、これはだめだということで他のアプローチで名前空間を確保する方法を考えてみました。

1:僕を褒める言葉を使用する。

調べてみたんですが、少なくともインターネット上では僕を褒める言葉が使われている回数は皆無なのですね。
そこでこれを利用して僕を褒め称える変数名を使用すると、絶対に名前空間が保証されるというアイデアです。
こんなふうに使います。

var 正宗さんは格好いい = "ほげ";
var 正宗さんの言うことは常に正しい = "ふが";

2行目のように、僕を恒常的に肯定する言葉を用いるとより強固になります。

2:自作ポエムを変数名にする。

変数名などを自作のポエムにすることで著作権によってプログラマーの死語50年間まで担保される非常に強固な名前空間を仕様することができます。
この場合の名前空間の強度はディズニー法の強度に依存します。

var かにをたべ　るとくちのなか　かゆくなる = "hoge";

プログラムが一気に風流になるという副次的効果付きでとてもおすすめです。
仕方のない話しはここまでにして、本題に戻ります。
今まではSWFを表示させるためにブラウザ側やHTML側、JavaScript側の問題でしたが、次はActionScript側の問題になります。

Cap3.初期化の実行順序を守る

よっぽどの理由がない限り、JS側からAS側に働きかける場合、AS側が準備完了かどうかを待ってJSは働きかけたほうがより安全だと思います。
つまりAS側が準備完了になった時点ではじめてJSに通知して、JSはその通知を待ってASに働きかけるようにするのが定石と言えます。
Cap2の11行目から14行目

jp_utweb_ExternalInterface_sample.ready = function(){
 //ActionScriptが実行可能状態になったら最初に呼び出される。
 //JS側からAS側に関数を呼び出すときは必ずこの関数が実行された後にしなくてはならない。
};

を用意しておき、必ずActionScript側から最初に呼び出されてJSの初期化をここで行うようにします。
ここまでが僕が作った必ず守るべきルールになります。
次からはActionScript側からJSと連携するのに便利な方法をまとめたものになります。

Cap4.JavaScriptとの連携は必ずシングルトンを介して行う。

この記事の最初に提示したgithubのサンプルソースを見ていただくとわかりやすいんじゃないかと思うんですが、Javascriptとの連携はそれを専門にしたシングルトンクラスにまかせることにします。
ちょっと簡単に書いてみます。
ActionScript3です。

package
{
	import flash.events.Event;
	import flash.events.EventDispatcher;
	import flash.external.ExternalInterface;

	public class JavascriptTool extends EventDispatcher
	{
		public static const DO_HOGEHOGE:String = "doHogehoge";
		public static const DO_FUGAFUGA:String = "doFugafuga";

		private static var _instance:JavascriptTool;

		private var _jsNamespace:String;

		public static function getInstance(jsNamespace:String = null):JavascriptTool
		{
			if(!JavascriptTool._instance){
				JavascriptTool._instance = new JavascriptTool(new Enforcer());
				if(!jsNamespace){
					throw new JsNamespaceError("Javascriptと連携する名前空間を指定してください。");
				}else{
					JavascriptTool._instance._jsNamespace = jsNamespace;
				}
				try{
					ExternalInterface.addCallback("jsHoge", JavascriptTool._instance.hogehoge);
					ExternalInterface.addCallback("jsFuga", JavascriptTool._instance.fugafuga);
				}catch(error:Error){

				}
			}
			return JavascriptTool._instance;
		}

		public function ready():void
		{
			try{
				ExternalInterface.call(_jsNamespace + ".ready");
			}catch (error:Error){

			}
		}

		public function hogehoge():void
		{
			dispatchEvent(new Event(DO_HOGEHOGE));
		}

		public function fugafuga():void
		{
			dispatchEvent(new Event(DO_FUGAFUGA));
		}

		function JavascriptTool(enforcer:Enforcer):void{}
	}
}
class Enforcer{}
class JsNamespaceError extends Error{
	public function JsNamespaceError(message:String):void
	{
		super(message);
	}
}

シングルトンの説明は省いたとして、これ。
ExternalInterface.addCallback
第一引数がJavascript側から見える関数。
第二引数が実際のActionScriptの関数。
APIとして多言語に対しての接続部分が隠匿化できるので非常に優れてるといえますけど作業する本人達にとってはややこしいことこの上ないです。
この部分を埋めるデバッグツールは存在しないわけですし。
そうは言ってもわざわざJS側とAS側で呼び出す関数名を指定できるってことはJS側とAS側で違う名前にしておいたほうがいいって事ですかね？
僕はそう解釈して実行していますが、このへんの名前の命名規則になにか良い方法があったら教えていただきたいです。

あと21行目、他はイレギュラーな使われ方をしたときにわざわざコンパイルエラーを出すように作ってあるのに対して、この部分だけはランタイムエラーになるようにしか作れませんでした。
シングルトンの生成される最初だけ値を渡して初期化したいときに、初期化のタイミングで値が渡されたときとそれ以外で値が渡されたときの両方でコンパイルエラーを出す何か上手い方法があればどなたか教えてください。

というわけでまだまだ未完成ながらもこのシングルトンクラスをいきなりドキュメントクラスで使ってみたのがこちら。
ActionScript3です。

package
{
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.text.TextField;
	import flash.text.TextFieldAutoSize;

	public class externalinterfaceSample extends Sprite
	{
		private static const _DEFAULT_JS_NAMESPACE:String = "hogehoge_msturi";
		public function externalinterfaceSample()
		{
			if(stage){
				_init();
			}else{
				addEventListener(Event.ADDED_TO_STAGE, _init);
			}
		}

		private function _init(e:Event = null):void
		{
			if(!(!e)){
				removeEventListener(Event.ADDED_TO_STAGE, _init);
			}

			var tf:TextField = new TextField();
			tf.border = true;
			tf.autoSize = TextFieldAutoSize.LEFT;
			addChild(tf);

			var jsNamespace:String = _DEFAULT_JS_NAMESPACE;
			var flashVars:Object = stage.loaderInfo.parameters;
			if(!(!flashVars.jsNamespace) && flashVars.jsNamespace.length > 0){
				jsNamespace = flashVars.jsNamespace;
			}
			var jsTool:JavascriptTool = JavascriptTool.getInstance(jsNamespace);
			jsTool.ready();

			tf.text = "Javascriptからの呼び出しが実行可能になった。";

			jsTool.addEventListener(JavascriptTool.DO_HOGEHOGE, function(e:Event):void{
				tf.text = "JavascriptからjsHogeが呼び出された。";
			});
			jsTool.addEventListener(JavascriptTool.DO_FUGAFUGA, function(e:Event):void{
				tf.text = "JavascriptからjsFugaが呼び出された。";
			});
		}
	}
}

こんな感じでどこでもシングルトンクラスからJSを実行できるし、逆にJSからの呼び出しもいつでもどこでもEventを受け取る形でキャッチできるようになるんだよ〜、というサンプルでした。
ActionScript、スマートすぎる。

このCap4は全てgithubのままですが、最後にいちおうgithubのindex.htmlのソースも載せておきます！

ちょっと実験用に名前のスコープをいじっております。
特にjp_utweb_ExternalInterface_sampleを返す48行目は、明示的にpublicな関数を指定してやるとJavaScript側からも実行できるようになります。

まとめ

やっと最近コードスニペットというのを覚えたので、コードの再生産がだいぶマシになりました。
毎回毎回こんだけ再発明するのしんどいですもんね。
まだまだ未完成な部分も多いですが、もっと上手い方法を随時見つけていきたいと思います！

ではFlashで呼び出してみよう！

ここまでの道のりが長かったですね。安心してください。それまでのほとんどが僕のゴタクです。
僕がはじめるにあたって先ず理解しておかないといけないことが多すぎただけで、ほとんどの人は実際にはここまですいすいと来られたはずです。

PixelBenderのpbjファイルをFlashのActionScriptで使うには二種類の方法があります。
実行時に外部ファイルとして読み込むか、Embedであらかじめ埋め込んでおくかです。

前者はXMLや外部JPEGファイルと同じく、URLLoaderを使って読み込む方法です。
Progressionだとこんな感じで

addCommand(
	new LoadURL(new URLRequest(Directory.PBJ_DIR + "myPixelBender.pbj"), {dataFormat:URLLoaderDataFormat.BINARY}),
	function():void{
		var t:Command = this as Command;
		_shader = new Shader(t.latestData);
	}
);

Progressionを介さずに普通にAS3で書く場合も、URLLoaderのdataFormatをちゃんとURLLoaderDataFormat.BINARYにしておけばうまくいくと思います。
こんな感じ。

var loader:URLLoader = new URLLoader();
loader.dataFormat = URLLoaderDataFormat.BINARY;
loader.addEventListener(Event.COMPLETE, _onCompleteHandler);
loader.load(new URLRequest(Directory.PBJ_DIR + "myPixelBender.pbj"));
private function _onCompleteHandler(e:Event):void
{
	var shader:Shader = new Shader(loader.data);
}

実際にはエラーハンドリングなんかも行う必要ありますがそれはまた別の話なのでここではあえて触れないでおきます。

Embedであらかじめ埋め込んでおく方法は、こんな感じで

[Embed(source="/../shaders/myPixelBender.pbj", mimeType="application/octet-stream")]
private var _myPixelBenderKernel : Class;
private var _myPixelBenderShader : Shader;

クラスのインスタンス変数として埋め込んでおいて、適切な場所で

_myPixelBenderShader = new Shader(new _myPixelBenderKernel());

として呼び出してやるやり方です。

実行時に外部ファイルとして読み込むか、Embedであらかじめ埋め込んでおくか、どちらのやり方もメリットデメリットあるので自分で適切だと思う方法で呼び出せばいいのですが、もしその判断が出来ない・迷うようであれば後者のEmbedで埋め込む方法をおすすめしておきます。
シェーダーを外部読み込みにするメリットが思いつかないのであればほとんどの場合外部読み込みのデメリットのほうがEmbedする方法のデメリットを上回るからです。

呼び出したのでどうやって使おう？

2種類の呼び出しの方法のどちらを使っても、ActionScriptではShaderクラスとして読み込まれることがわかりました。
ここでActionScriptリファレンスのShaderクラスとそれに付随するShader何々クラスを一読しておくとだいたい何すればいいかわかるかと思います。
僕みたいにクラスの動作が全て頭に入っているわけではないひよここそ、リファレンスの存在は欠かせません（いまだにArrayにさえ、こんなメソッド無いかな〜とリファレンス引きながら作業してるくらいです）。

FlashがPixelBenderをShaderで読み込んだら、いろいろ出来ることがあるんですが、いまのところ僕はShaderJobを使うことをおすすめします。
理由としてはShaderJobが圧倒的に速いからです。
ブレンドモードとして使ったり、塗りに使ったり、フィルタとして使ったり、も確かに面白いのですがそれらがどうしても最終的にFlashの処理を挟む必要があるのにたいして、ShaderJobは同じ事が出来てしかも完全にFlashと処理が切り離せるので「Flashの処理速度という概念を無かったことに出来る」という冒頭の売り文句が発揮できるからです。
しかもFlashとの同期処理・非同期処理のどちらで処理するかを実行時に選べるのです。
これのおかげでShaderJobを使うことによってFlashの描画処理を徹底的にチューニングすることが出来るようになると思います。僕もまだそこまでには達していませんが、少なくともその入り口には立てた気がします。

ShaderJobを使うには、まず入力側のBitmapDataと出力先のBitmapDataが必要になります。
入力の指定については、PixelBenderのKernelの書き方によって違うのですが、

_shader.data.src.input = _inputBitmapData;

こんな感じで指定してやります。
「src」っていう変数名が、ここがKernelで使ってる変数名によって違うので注意が必要です。
PixelBenderで
input image4 src;
と書かれてあれば

_shader.data.src.input = _inputBitmapData;

と書きますし、もし
input image4 sauce;
だと

_shader.data.sauce.input = _inputBitmapData;

こういう感じでActionScriptを書くようになるかと思います。

あとはShaderJobの処理のさせ方ですが、
ShaderJobのリファレンスを読むとコンストラクタの第二引数に出力先のBitmapDataを指定しないといけないことになっているのがわかります。
そこでこんなふうに

var _shaderJob:ShaderJob = new ShaderJob(_shader, _outputBitmapData);

ShaderJobクラスのインスタンスを生成します。
そのあとおもむろに

_shaderJob.start();

してやってもいいんですが、面白いことにShaderJobはstartする際に処理を非同期で実行するか同期して実行するかを選べます。

//_shaderJob.start();
_shaderJob.start(false);

このいずれの場合も非同期で実行します。
なので

_shaderJob.addEventListener(ShaderEvent.COMPLETE, _onShaderJobCompleteHandler);
//_shaderJob.start();
_shaderJob.start(false);

こんな感じでイベントリスナーを登録しておくとシェーダーの処理が完了したタイミングを捕捉できるようになります。
画面の処理のために入力や画面の更新などFlashの他の処理を遅らせたくない場合に、完全に処理を分離できるので非常に効果を発揮します。

_shaderJob.start(true);

こうした場合には同期して実行します。
どのみち同期しててもPixelBenderのShaderJobの処理はほとんどの場合は一瞬で終わるので誤差は一瞬ですが、画面更新のタイミングと処理を完全に同期させておきたい場合に効果的です。

さいごに

書いててほんと自分でもびっくりするくらい長い記事になったのですがどうでしょうか。
ほとんどがPixelBenderの技術の話しではなくてPixelBenderとはどういう動作をするものなのかの概念の話しばかりだったと思います。
それだけ僕にとってPixelBenderは概念的な障壁が高く、でも一旦概念を理解してしまえば技術的にそんなにハードルの高いものではない、むしろとっつきやすく奥の深いとても楽しいものだと言うことが解りました。
それに一旦こうして記事にして書いてしまえば、次からPixelBenderの技術的な記事書くときに「概念についてはこちらを参考にしてください」と言えるので、むしろ今後PixelBenderを研究していく布石になったと思います。

僕がPixelBenderを学びはじめるに当たって参考にしたAS3アニメーションのオライリー本にも書かれてあることですが、PixelBenderはOpenGLのシェーダー言語GLSLに非常によく似た言語で、そのノウハウがだいぶ参考になるかと思います。

僕個人の考えとしては、ブラウザ上での描画に限って言えば並列処理を実現するための方法はさまざまに企画が立ち上がっていますが、3年以上も前から提供されていてしかもFlashさえ走ればブラウザを問わず納品レベルできちんと動くPixelBenderには一日の長があるかと思います。
PixelBenderそのものが意外にもとっつきやすくて奥が深く、それでいてFlashが何十倍も楽しくなる面白い技術なのも今回学ぶに当たって新鮮な驚きでした。

この技術がもっと普及して研究がされたら、もっと面白い使いどころが増えると思いますし今までFlashの処理速度が枷だったことがいろいろと解決する可能性が高いかもしれません。
今回の記事ではあえて書かなかったのですが、僕はPixelBenderをByteArrayとかVectorで処理する方法にも非常に興味を持っています。
この記事がきっかけになって、少しでもPixelBenderの使いどころの上手い人が増えて今まで処理速度がネックになっていた問題が解決できれば、WEBの表現はもう一段階自由になるのではないでしょうか。

そこまでは夢見すぎだとしても、少しでも処理速度による表現の限界を解決するヒントになれば幸いです。

さてさて、今さらながらPixelBenderについて勉強してみました。PixelBenderって登場したの確か3年以上も前ですよねえ。
普段から情報共有が 盛んなFlashにおいて、僕が今まで3年もPixelBenderを使っていなかった理由はひとえに「PixelBenderが何をするものなのかわかりにくい！」からでした。
PixelBenderを使うとどうなるのか、Flashのどんな場面で使えるのか、どうやって使うのか、いやいやそれ以前の問題でただひたすら「PixelBenderが何をするものなのかわかりにくい！」のでした。
もちろん、Adobeの告知不足とかそういった事が言いたいわけではなくて、僕のスペックではPixelBenderはわかりにくいからとっつきにくかった。というお話です。

で、勉強してみてわかった結果は、「PixelBender、かなり使える」ということです。
簡単に言うとFlashの処理能力が別次元で向上します。
おおげさですがおおげさでない表現として「Flashの処理速度という概念を無かったことに出来る」ほどのパフォーマンスです。
「別次元」とか「処理速度という考え方を無かったことに」というのは、太字にしたのは煽りでもなんでもなく実際に本当に処理方法が違うからです。これに関しても出来るだけ簡単に説明します。
いったんサンプルを見てください。

ウエブカメラがあれば接続の許可を求められると思いますので許可してください。
ウエブカメラがない、あっても許可しなかった場合は、僕が今年の夏にバラ園にいったときの思い出の写真がかわりに表示されることになると思うので、そういった悲しい事故がないよう、是非ともウエブカメラを使って遊んで頂くことを強くおすすめします。

マウスをうごかしてもらうとわかると思うんですが、昔からよくある、水面の波紋のような画像処理を効果に加えたサンプルです。
DisplacementMapFilterとかで手垢がつきまくっているので、アンテナの高い人には今さらなサンプルです。
ここで見て貰いたいのは、処理のほとんどをPixelBenderにまかせたことによる処理速度の安定です。

サンプルのソースコードはこちら。
https://github.com/masamunet/blog_samples_pixelbender_practice

ソースコードをみてもらってもわかるように、基本的に僕はなにもしていません。処理のほとんどを外部のPixelBenderファイルに頼っています。
具体的にはこちらのソースをほとんどの部分で使用しています。
僕がやったことと言えば、もともとDisplacementMapFilterで処理していた部分もShaderJobを用いてPixelBenderで行うように変更したくらいですが、そのPixelBenderもこちらの記事を参考にしてあります。
このように、PixelBenderの概念を一旦理解したら、あとは自分でオリジナルなPixelBender処理を書くもよし、海外にあるいろいろなPixelBenderのファイルを（ライセンスに従って）使いこなすも良し、いずれにせよ処理速度という表現の枷からかなり自由に解き放たれるPixelBenderは是非是非習得すべき楽しい技術だと思います。

ちなみにPixelBenderの習得にあたって参考にした本はこちら。

この本の第9章にPixelBenderについて書かれています。
だからこの本以上のことはこのブログに書かれていないのでこの本を読んだ方はあんまり期待できる記事ではないと思いますが、PixelBenderについて僕なりに理解したことをまとめてみました。

PixelBenderはそんなに敷居の高い技術ではないです。
実験レベルならすぐにはじめられて、効果は非常に高い（なにせ処理速度が別次元になるので）技術なので、ぜひともわかりやすく説明出来るようにまとめられたらと思います！

とはいえさて何から書こう。
やっぱり初心者にとってはそもそもまずPixelBenderが何かを知らないですよね。並列処理というちょっと特殊な処理の流れもあって、非常にとっつきにくい印象を受けるので、先ずはPixelBenderについて少し細かく説明してみたいと思います。
なお、僕という初心者が理解した程度の説明を初心者を対象に説明するので情報の正確性については基本的に自信がないです。
しかもピクセルシェーダーとかプログラマブルシェーダーと呼ばれる技術を意図的に全て「PixelBender」という名称を用いて説明しています。
並列処理についても仮想化の話しとかまで説明し出すと僕が混乱するので、すべてハードウェアとして、つまり「並列処理を行う、そういう機械があるものとして」書いています。
つまりここに書かれてあることをそのまま人に話すと笑われるかもしれないということです。

はじめよう。先ず最初に、PixelBenderって何なん？

PixelBenderとは、Adobeが開発したピクセルシェーダーを記述する言語のことです。その言語の記述やテスト、ビルドコンパイルするソフトのことをPixelBenderツールキットと呼びます。

画像はCS5についてきてたPixelBenderツールキット2

なるほど、わからん。もっと簡単に説明して？

そのためにはまず最初に「パソコンはどうやって画面が表示されるのかな？」について考えないといけません。
PixelBenderは凄く簡単に言うと「ピクセルを処理する言語」、もっと限定的に言うと「画像を処理するための言語」だからです。

ではパソコンはどうやって画面が表示されるのかな？

パソコンの画面の最小単位は1pxからできていることは説明の必要がないと思います。
では仮に1pxだけ表示するディスプレイがあるとして、その1pxに赤を表示させてみましょう。

1ピクセルの画面に赤を描く

CPUは1ピクセルずつ処理している

620×480の画面に表示する

こればっかりはCPUが進化して速くなっても、画面の表示処理だけはまともにやると解像度の処理回数がかかってしまうのはかつては避けられない問題でした。
この問題を面白い方法で解決したのが次の考え方です。

1ピクセルずつに専用のCPUを割り当ててしまう

全ては同時に行われる

実際には本当に297600個も並べているのかというと半分本当で半分嘘になります。本当のところはもうちょっとソフトウェアやハードウェアレベルで仮想化なども行われているのですが、画像処理の並列処理についての考え方は基本的にこれまで説明したような処理で行われていることになります。
しかもここまでの説明を「GPU」と説明すればわかるひとには一発でわかるものを、なぜ「仮想化とかそういう処理は置いておいて、「画像を表示させるための機械」というものがあることにしておく」などとまわりくどい説明を行ったかというと、PixelBenderはGPUが無くても動くからです。

では改めて問う。PixelBenderとは何ぞや。

PixelBenderとは、
「つーかその1ピクセルごとに専用のCPUがあるならさ、そのCPUにプログラム走らせれば良いんじゃない？」という発想の元に生まれた、ピクセルを描画するためだけのプログラムです。

先ほど説明した「画像を表示させるための機械」が行っている1ピクセルの描画処理の流れはこんな感じです。

1ピクセルの描画処理の流れ

PixelBenderの処理の流れ

なんとなくPixelBenderというものがわかってきたでしょうか。
冒頭（といっても記事の中盤）で説明した言葉をもう一回書いてみます。
PixelBenderとはある一つのピクセルを計算して描画するプログラムの事です。

正体が分かればそんなに怖くない

つまりPixelBenderが行う処理は、言ってしまえばRGBの値（正確にはあとアルファ値も）だけが入力されることと、出力もRGBの値（と正確にはあとアルファ値と）を出力するためだけのプログラムです。
一個のプログラムは1ピクセルの色だけを出力するためのものです。
そしてそれが何万個（場合によっては何千万個）も同時に実行されます。
ActionScriptやJavaScriptなどのように、順番に実行される言語でプログラムしていると最初ちょっと戸惑いますが、PixelBenderは

1. 一個のピクセルを描画するためだけの言語
   • そしてそれだけしかできないのでたいして難しいわけではない
   • そもそも言語的にそれ以上の難しい事を出来るようにはなっていない
2. 全てが同時に実行される

という二点のミソを理解すれば最初感じていた取っつきにくさは消え去りました。

PixelBenderをFlashで使うことのメリット・デメリット

そしてこのPixelBenderはFlashでもノーコストで使用できます。
FlashのActionScriptにおいて、
保守管理しやすい綺麗なコードを白魔法
高速化のために全てを犠牲にするような過激なチューニングが為されたコードが黒魔法
とするなら、PixelBenderはさしずめ召喚魔法です。
全く異世界の力を借りることになり、威力は絶大。しかもノーコストです。

メリット

• 同時に実行しなければならない処理がノーコストで一瞬にして終わる。
• FlashのFPSを落とさない。

実際にはFlashPlayerの実行環境の構成によりますが、理論上はFlashのFPSを落とすことはありません。

デメリット

ByteArrayについてはまた別途書きます。

2011/09/08追記
ByteArrayと同じくVector.型も使えると教えて頂きました。

ピクセルを描画するというPixelBenderの仕組み上、扱える描画オブジェクトがBitmapDataに限られます。
BitmapData型を保持していない描画オブジェクトの場合、処理の前に常にbitmapData.draw()を発生させなければいけないので、このコストがいちばんの悩みどころになります。
逆に言えば、BitmapData型を保持していればどんどん積極的にPixelBenderを使っていきたいところです。

さっそく使ってみよう！PixelBender！

とここまで書いておいてなんですが、悩んだんですがこの記事ではPixelBenderの言語については解説は書かないことにしました。
理由は僕もまだはじめたばかりなので説明出来るほど言語にたいして理解が深くないためです。
みなさんと同じく僕も目下勉強中なので、いずれ記事に出来るくらいには理解を深められたらと思います。

ただし、PixelBenderについては「PixelBender お目当ての処理」で検索するとけっこうな数で海外のPixelBenderのソースがヒットします。
それらを参考にするも良し、ライセンス的に問題がないのであればそのままFlashに使用するもよしなので、およそ汎用的な処理であればPixelBender初心者でもかなりなことができてこの技術を手っ取り早く楽しむことは出来ます。

PixelBenderというプログラム言語についての解説は今回は省きますが、PixelBenderツールキットの使い方について、おおまかに説明してみたいと思います。
ちなみに冒頭（といってもこの記事の中盤頃）でも書きましたがPixelBenderツールキットとはPixelBenderというプログラムを書いたり実行したりテストしたりコンパイルしたりするアプリツールのことです。Flashを作るあのソフトのことをFlashIDEと呼んだりするのと同じです。

PixelBenderツールキットは、AdobeCS4かAdobeCS5を買ってインストールしていれば標準で入っていると思います。CS5.5ではどうかわかりませんし、CS以外の他の方法で手に入れるやり方はわかりませんが、とにかくCSでインストールされているものとして話しをすすめてみます。
ちなみにCS5ではPixelBenderツールキット2が入っていました。1と比べてどこか新しくなったんですかね？
Macだと
/アプリケーション/ユーティリティ/Adobe ユーティリティ
/アプリケーション/ユーティリティ/Adobe ユーティリティCS5
あたりに入ってると思います。

New Kernelで新規作成

画面は大きく3つにわかれています。

Export For Flash Player...

後半へ続きます。

DisplacementMapFilterのマップ作りに手こずった。
ソースコードはこちら。 

一度でもお会いした方には、求められれば今まで制作した実績を、秘密保持の契約に問題ない範囲でお知らせしていますのでご存じの方も多いですが、ウエブサイト制作という目的に沿うためのありとあらゆる技術を駆使して業務に携わっており、その中でもとりわけFlashが大好きな、いわゆる業界の一部のみで使われるスラングであるところのFlasherという肩書きを好んで自称しております。

ここ数年でよく目にするようになった「HTML5 v.s. Flash」という言葉。
別に個人の話しレベルでは何も思うことはなかったのですが、特にここ最近は大手技術系ニュースブログでもたぶんアクセス数欲しさからやってることなのだとは思いますが釣りタイトルで使われるようになり、ちょっと個人的に看過できないのではないかと考えるようになってきました。

ニュースブログのやってることは、記事という名の広告掲載場所を作るためのいわゆる看板板の作成のお仕事なので、釣りタイトルで人目を引くことに関しては何も異論はありません。
何ズモードとか何デア何デアとか、けっこうかなりな大手ニュースブログで勝手に「もうFlashはいらない？」と煽られたFlashを、こよなく愛するいちユーザーが感じた、ちょっとした違和感を書きたいと思います。

大前提としてFlashとHTML5は対立関係に無い。排他的関係はもっと無い。

「もうFlashはいらない？」

これわざとなんですかねえ。わざとなんですよねえ。何イデアアイデアさんとか何ズモードジャパンさんとか大手でもやってますが。

もしわざとでないんであれば、後述するようにもうニュースサイトの記事書くのやめたほうがいいですし、わざとなんであれば、アクセス数をすこしでも稼ぎたいお気持ちはすごくよくわかります。

もしかしたらFlashを触ったこともないような人とか、HTMLに全く理解の無い人からはあたかも対立関係があるように見えるのかもしれませんが、僕程度の半可通からみても対立するような技術ではないことはよくわかります。
少なくとも僕の知ってるHTML5を研究してる人やFlashの凄い人や、誰に聞いても「むしろどこがどう対立するのかこっちが知りたい」という意見しか聞こえてこないです。
何故「HTML5 v.s. Flash」という図式が外野で作られたのか。
それには三つの本当とたった一つの勘違いがあるからだと僕は考えています。

[本当.1]AppleとAdobeは対立しているように見える。

これは本当だと思います。
MacのOSアップデートLionのときにAdobeのアプリがことごとく動かなかった事から見ても、相当根が深いのかなと心配しています。

[本当.2]AppleはiOSにFlashを搭載する予定はないし、その代わり「HTML5が動くよ」と言う。

これも本当です。
iOSではFlashのリッチな体験が出来ない問題に対してHTML5がその役割を代替することをアップルは期待しています。

[本当.3]AdobeはiOSにFlashPlayerが走らないと困る。

本当そうですよね。
ただ、これが次の勘違いを生むことになります。

[勘違い.1]AdobeはHTML5が普及すると困る。

完全に勘違いです。
Adobeが困るのはFlashPlayerが走らない環境が少なくなるのが困るのであって、つまりiOSでFlashPlayerが走らないことについては非常に困っています。
2番目の本当でAppleがiOSのFlashの代替にHTML5を提示したこともあって、FlashとHTML5を同等に並べられて勘違いされやすいですが、iOSでFlashが動かないのはAdobeにとって大問題ですが、HTML5の普及とAdobeは何の関係もないんです。
むしろ、クリエイターに制作ツールを売って生計を立てているAdobeにとって、クリエイターに支持されるHTML5のツールを作ることは至上命題なのです。
ちょっとややこしいですが、

1. iOS => HTML5好き　Flash無理
2. Adobe => Flashが動かないのは嫌！iOSでも動かして！
3. Apple => 嫌。Flashの代わりにHTML5動くし。

というなりゆきと

• Adobe => クリエイターが使うツールを作って売ってる会社

とはわけて考える必要があります。
Adobeの顧客であるクリエイター、そのクリエイターの最近の出力先として無視できないのがWEB。
WEBの出力先として無視できないのがiOS。
iOSのWEBでFlashが動かない事は、Adobeのプラットフォーム戦略としては問題です。
が、AdobeがHTML5のツールを出すことについてAdobeにとって特に何も問題になることはありません。

ということでAdobeがiOSでFlashPlayerが動かないのは困りものです。

でもそれ以外が全然的外れな感じがしないですか？
問題がややこしいから普通に会話で「HTML5 v.s. Flash」とか言っちゃうのはわかるんだけれど、少なくとも大手といわれる技術系記事を書いて広告掲載場所を少しでも多く稼いでる看板板屋としては、素で勘違いしていたのであれば技術系の話題を書く素質無しだし、わざとやってたのだとしたらそうとうにあざといとは思います。
わざとだとすれば、僕は大手のブログの記者に、アクセス数欲しさに「Flashはもう必要なし？」とまで煽られたので、少しは文句も言っていいでしょうか？

大手の知名度の割にはアクセス数が厳しいのか多少でも過激なタイトルをつけないといけない事情はわかります。
「もうFlashはいらない？？？？？Adobeが作ったHTML5でFlash終了pgr」
と煽って記事を書かないといけない心中はお察ししますが、僕がいちばん腑に落ちないのは
いったいぜんたい何を持ってして、HTML5の表現力を引き出すツールができたからといってFlashがいらないと判断したかです。
少なくともFlashを煽れば、記事にアクセスがつくと思ったのでしょうか？

「もうFlashはいらない？？」

もうFlashはいらないんでしょうか？

ナニを持ってしてそう感じたかは、僕が聞きたいくらいでが、ナニアイデアだったかナニギズモードだったかの記事では、彼らは「もうFlashはいらない」と感じたようです。

しかしながら僕はそう考えていません。
今までFlashにしか出来なかった表現が（CSS3と組み合わせることで）HTML5でも出来るようになった。
素晴らしいことです。
Flashで培った表現が、より多くの人に見てもらえるプラットフォームが広がったのです。
HTMLでできたサイトが動くようになったのです。

ねんがんの、動くサイトがやっと陽の目を浴びることになったのです。
動くサイトは魅力的です。
ユーザーにとって凄くわかりやすいです。
「WEBサイトとはこういうものだから」という技術者の言い訳を超えた、
「ページが切り替わるなら（うっとうしいと感じない範囲で）切り替わりのアニメーションをする、
ボタンを押したら切り替わる、
フリックしたら画面が指についてくる、
といったように、ユーザーにとってわかりやすい制作物を作るためにアニメーションは絶対に欠かせません！

何デアアイデアとかいう超有名ブログとか何モードジャパンとか国際的に凄いか知らないですが彼らが言うには、なんかどうもFlashはいらないらしいです。ですが僕には納得できません。

僕が納得できないことと言うのは、つまり僕が知らないいろいろな事を相手は知っているという事で、もの凄く勉強のチャンスを得たと喜んでいます。

是非ともお話をお伺い存じたく奉りござ候でございますが、まあどうでもいいので、もしアクセス欲しさに「Flashはもういらない？」とかタイトルを 書いたのであればちょっとでも恥ずかしいと思ってくれたらそれでいいわけです。

仮にこんなすばらしいモーションを作ったとします。このすばらしいモーションを出来るだけ後生にまで伝えたい、素材を変えてモーションだけ再利用したい！
そんな願いを叶える方法です。
いちおうほとんど全て新モーショントゥイーンを対象に説明していますが、僕も今回やっと新モーショントゥイーンちょっと触った程度なので、旧モーショントゥイーンの再利用方法についても一番最後に説明をしておきます。

１：コピー&ペーストして再利用

一番簡単な方法がこれだと思います。
モーションガイドを選択した状態で右クリックして

「モーションをコピー」を選びます。
これでモーションがクリップボードにコピーされましたので、次は
別の素材を選択して右クリックから

「モーションをペースト」するだけでOKです。

２：モーションプリセットに保存して再利用

クリップボードにコピーしただけでは、このすばらしいモーションは保存されません。
何度も何度も、繰り返し再利用したいモーションはこのプリセットに保存する方法を使うといいかと思います。
モーションを選択して右クリック

「モーションプリセットとして保存」

プリセットに名前をつけろと言われるので、世界であなたのモーションだけの素晴らしい名前をプレゼントしましょう。

保存したモーションはメニューの「ウインドウ」→「モーションプリセット」からいつでも呼び出せることが出来ます。

自分が保存したモーションの他にも、「デフォルトプリセット」といってAdobeがあらかじめ用意した使いどころの難しい僕のモーションよりもずっと素晴らしいプリセットもあります。

ちなみに、モーションプリセットの具体的な保存場所は、
Macだと
/Users/＜ユーザー名＞/Library/Application Support/Adobe/Flash CS5/ja_JP/Configuration/Motion Presets
winだと
C:\Users\＜ユーザ名＞\AppData\Roaming\Adobe\Flash CS5\ja_JP\Configuration\Motion Presets
あたりにあるのではないでしょうか（Winは未確認）。
adobe系のこういったユーザー定義ファイルの保存場所は覚えておくと何かと便利です。

３：AS3のコードとして再利用

実用的かどうかはまだ未知数なのですが、僕が一番おもしろいなと思ったのがこれです。
モーションをActionScript3.0のコードに変換してしまう方法です。

モーションを選択後右クリックで「as3.0にモーションを書き出してコピー」
これで今選択したモーションがクリップボードにActionScriptのコードとしてコピーされました。
試しにタイムラインにアクションスクリプトをペーストしてみましょう。

任意のタイムラインを選択してアクションパネルを開きます。
そこでおもむろにペーストしてみてください。

import fl.motion.AnimatorFactory;
import fl.motion.MotionBase;
import fl.motion.Motion;
import flash.filters.*;
import flash.geom.Point;
var __motion_kao_5:MotionBase;
if(__motion_kao_5 == null) {
    __motion_kao_5 = new Motion();
    __motion_kao_5.duration = 35;

    // Call overrideTargetTransform to prevent the scale, skew,
    // or rotation values from being made relative to the target
    // object's original transform.
    // __motion_kao_5.overrideTargetTransform();

    // The following calls to addPropertyArray assign data values
    // for each tweened property. There is one value in the Array
    // for every frame in the tween, or fewer if the last value
    // remains the same for the rest of the frames.
    __motion_kao_5.addPropertyArray("x", [0,5.96283,12.2405,18.8772,25.9359,33.4796,41.634,50.516,60.2874,71.1639,83.2892,96.5736,110.379,123.662,135.795,146.678,156.446,165.326,173.477,181.017,188.073,194.706,200.98,206.95,188.338,169.716,151.072,132.439,113.806,95.1561,76.5351,57.9093,39.2788,20.6491,2]);
    __motion_kao_5.addPropertyArray("y", [0,-12.4844,-24.8276,-36.9843,-48.9072,-60.5021,-71.7026,-82.3267,-92.1163,-100.674,-107.31,-111.064,-111.069,-107.324,-100.691,-92.1305,-82.3435,-71.7214,-60.5223,-48.9285,-37.0062,-24.8498,-12.5067,0,-0.258063,-0.404897,-0.470401,-0.473853,-0.429182,-0.347192,-0.237801,-0.111154,0.0184064,0.120505,0]);
    __motion_kao_5.addPropertyArray("scaleX", [1.000000]);
    __motion_kao_5.addPropertyArray("scaleY", [1.000000]);
    __motion_kao_5.addPropertyArray("skewX", [0]);
    __motion_kao_5.addPropertyArray("skewY", [0]);
    __motion_kao_5.addPropertyArray("rotationConcat", [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]);
    __motion_kao_5.addPropertyArray("blendMode", ["normal"]);
    __motion_kao_5.addPropertyArray("cacheAsBitmap", [false]);

    // Create an AnimatorFactory instance, which will manage
    // targets for its corresponding Motion.
    var __animFactory_kao_5:AnimatorFactory = new AnimatorFactory(__motion_kao_5);
    __animFactory_kao_5.transformationPoint = new Point(0.500000, 0.500000);

    // Call the addTarget function on the AnimatorFactory
    // instance to target a DisplayObject with this Motion.
    // The second parameter is the number of times the animation
    // will play - the default value of 0 means it will loop.
    // __animFactory_kao_5.addTarget(<instance name goes here>, 0);
}

なにやらぞわーっとスクリプトが貼り付けられました。
今自分が作ったモーションがActionScriptに変換されたことが分かります。
あとは動かしたいインスタンスにインスタンス名をつけてやって（今回は「icon」とつけました）

39行目の箇所の

    // __animFactory_kao_5.addTarget(<instance name goes here>, 0);

こうなってる箇所のコメントアウトを外して、addTargetの一番目の引数に先ほどの動かしたいインスタンスのインスタンス名を入れてやります。

    __animFactory_kao_5.addTarget(icon, 0);

いろいろごちゃごちゃと書かれていますが、ほとんどが動きの定義ばっかりで、実際に実行しているのはこの最後の一行だけです。

この機能、まだ調べたわけではないのであれなんですが、憶測では結構低レベルのAPI叩いてるっぽくて、うまくオレオレモーションライブラリと組み合わせるとお気に入りの軽い動作が出来るんじゃないかとほくそ笑んでます。

４：XMLとしてモーションをコピーして再利用する

今までは新モーショントゥイーンでの再利用方法だったわけですが、最後にもう一つ、旧モーショントゥイーンでも使える再利用の仕方も調べてみました。
それがこのXMLとしてモーションをコピーして再利用する方法です。

クラシックトゥイーンでモーションを作ったら、タイムライン上でコピーしたいフレームを全選択しておいて
「コマンド」→「XML形式でモーションをコピー」を選びます。
これでモーションがXMLの形式でクリップボードにコピーされました。
これをどう使うのかというとActionScriptで使用しますのでタイムラインアクションを出してみましょう。

そこでクリップボードのXMLを変数に入れます。

var motion_xml:XML = 
	
		
			
				
			

				
			
		
	

	
		
			
		
	

	
		
			
		
	

	
		
			
		
	

	
		
			
		
	

	
		
			
		
	

ぞわーっとコードが増えましたが、XMLコピペしたぶん長いだけなので、実質は
var motion_xml:XML =
て書いてペーストしただけです。
さらに続けて

var motion:Animator = new Animator(motion_xml, icon);
motion.play();

こう書き足していきます。
Animatorコンストラクタの引数にそれぞれ、XML、動かしたいインスタンスのインスタンス名を入れます。
CS5などのアクションパネルでコード補完が効いていれば必要なimportも自動で行ってくれるはずなので、最終的にはこうなっているはずです。

import fl.motion.Animator;

var motion_xml:XML = 
	
		
			
				
			

				
			
		
	

	
		
			
		
	

	
		
			
		
	

	
		
			
		
	

	
		
			
		
	

	
		
			
		
	


var motion:Animator = new Animator(motion_xml, icon);
motion.play();

ちなみにモーションとは関係ないですが、変数にXMLを入れる場合は「ダブルクオート（”）」などの引用符は付けないです（ASが内部にパーサーを備えているのでXMLの開始タグと終了タグを理解するため）。

まとめ

モーションの再利用について今回改めて調べてみて、いろいろな方法があることがわかりました。
他にも「XMLとして保存、読み込み」とか「モーションを特殊ペースト」など僕がまだまだわからない方法もありますが、うまいこと使いどころを考えていくとなかなかに便利なのかなという気もします。

宇都宮家に第一子が誕生しました。
3274g 女の子　母子共に健康です！


まだまだこれから先の方が長いですが、とりあえず出産に至るまでにも我々は多くのことを学びました。

この子が産まれることは完全に我が家の都合なのに、本当に多くの方々に支えて頂きました！
直接に出産まで専門的にサポートして頂いた産院先生や助産婦さんから、仕事のスケジュールをわざわざ都合つけて頂いたお取引皆様方、応援やお祝いのメッセージ頂いた方々、親戚家族一同、その他諸々、皆様方のお力添えのたまものであり私たちはそうとうな幸せ者です。

万感の思いもあり、これからもばりばり働いてこの子を社会の役に立つ立派な大人に育てることが恩返しと感じていますが、まずは当事業所のスタッフでもある母体の回復に努め、その間幸せに浸っておこうかと思います。

具体的には、WEBカメラをつなげていろいろ顔を動かしてみると中の3D空間も連動して動くというような奴です。ニンテンドーDSのアッタコレダっていうゲームをヒントに作ってみました。
さっそくみてみましょう。
（要FlashPlayer10）

モデルは毎度おなじみの、みんなの人気者愛媛県西予市げんき君です。
やってることは、顔認識を使ってWEBカメラから顔の位置を検出して、その位置を元に3Dのカメラを動かしてるだけです。
顔認識はライブラリを使っているのですが、使っているライブラリが今現在公開停止しているのか、DLできないようになっているので紹介していいものかどうか悩みます。

2011/08/26追記：今みると公開されているようです！
http://www.libspark.org/wiki/mash/Marilena

いちおうソースの説明はしてみたいと思います。

ソースの書き方はとても汚く、またとっちらかってるのでお見せするのはとても恥ずかしいんですが、何かの参考になれば嬉しいです。
ソースコードのDLはこちら
別途

• Progression4
• Papervision3D
• Marilena

が必要です。

tools.Detecto

実際に顔認識を行っているクラスは「tools.Detector」クラスになります。
顔認識はとても重い処理なので、なるべく軽くなるように工夫しています。

private function _onTimerHandler(event:TimerEvent):void
{
	_prevTime = getTimer();
	var video:Video = _tool.video;
	_bitmapData.draw(video, _mat);
	_detector.detect(new Bitmap(_bitmapData));
}

タイマーイベントを駆動して、顔認識を開始するようにしています。
カメラ映像は一度Bitmapにする必要があるんですが、ある程度縮小することによって顔認識も軽くするようにしています。

private function _onDetectionCompleteHandler(event:ObjectDetectorEvent):void
{
	if(event.rects.length > 0){
		_rect = event.rects[0] as Rectangle;
	}
	_timer.reset();
	_timer.start();
	dispatchEvent(new Event(RECTANGLE_UPDATE));
}

顔認識が完了するともう一度タイマーイベントを駆動して次の顔認識を始めるようにしています。
Event.ENTER_FRAMEにしなかったのは、顔認識にかかった時間を計測して、もし遅れるようであれば顔認識の更新の間隔を遅らせるなどの処理をゆくゆくははさみたかったからです。

pages.TopPage

3Dの描写は直接「pages.TopPage」で行っています。
顔認識が完了する度に、顔の位置を検出してカメラをそこに持って行っています。

private function _detectorUpdateHandler(e:Event):void
{
	var rect:Rectangle = _detector.rect;
	if(!(!rect)){
		var rX:Number = (rect.x / VideocameraTool.VIDEO_SCALE) - ((_tool.video.width - (rect.width / VideocameraTool.VIDEO_SCALE)) * 0.5);
		var rY:Number = (rect.y / VideocameraTool.VIDEO_SCALE) - ((_tool.video.height - (rect.height / VideocameraTool.VIDEO_SCALE)) * 0.5);
		var rZ:Number = (rect.width - _RECT_MIN) * _renge;
		var cX:Number = rX * _viewScaleX * _SCALE_VIEW;
		var cY:Number = -rY * _viewScaleY * _SCALE_VIEW;

		_view.camera.zoom = rZ + 40;

		var matX:Matrix3D = Matrix3D.rotationMatrix(0, 1, 0, cX * _PI);
		var matY:Matrix3D = Matrix3D.rotationMatrix(1, 0, 0, cY * _PI);
		var mat:Matrix3D = Matrix3D.multiply(matX, matY);
		_view.camera.transform = Matrix3D.multiply(mat, _cameraMatrix);

	}
}

なんかごそごそとややこしいことをしてそうに見えますが、僕のコードの書き方が下手なだけで、実際には顔認識の位置をカメラの位置に変換しているだけです。
実は今回のソースで一番苦労したのは、
Matrix3D.rotationMatrix
で、カメラをX方向に何度、Y方向に何度動かしたときのXYZ座標への持って行き方が一番苦心しました。
Matrix3D.rotationMatrixがそれらしい処理を行ってくれそうなのはわかったんですが、引数が謎すぎるのと、X方向、Y方向、デフォルトのカメラの位置、それぞれ3つの行列を合成させるという答えに行き着くまでが、一番時間がかかりましたｗ

まとめ

どうでしょうか。
現実的な速度で動作させるために顔認識の精度を落としているのですが、これが将来的にもっと高速になればなかなか面白いことが出来るのではないでしょうか。
個人的には顔の位置をカメラとリンクさせるだけ、というアイデアの簡潔さがとても気に入っています。