今回はFlashPlayer10で実装されているプロパティの
z、rotationY、rotationX、rotationZを試してみました。
3Dだからって難しく考えずFlashPlayer10ならもっと簡単に再現できるはずです。

こんな感じに

まず地面となる表示要素にrotationX=-90で地面が視線から水平に傾きます。
次に地面に乗っけたい表示要素を地面にaddChildして、rotationX=90。
これで地面と垂直に表示されることになります。
地面のどこに立っているかは地面のX、Y座標を考えるだけです。
表示要素をMovieClipにすれば、アニメーションつきます。

面倒なのが深度管理です。
今回のように地面の上だけで深度管理すればすむ場合はシンプルですが、
3Dオブジェクトを複数管理することは・・・、
そこまでするのならPapervision3Dとか使った方がいいと思います。
おそらくそこが、分かれ目かとおもいます。

あとはパースや、消失点の設定はPerspectiveProjectionクラスで変更可能です。
あまりパースをかけすぎると、「生成されるビットマップが大きすぎる！」
と警告が出やすいです。

気をつけなければならないのはフレームアニメーションでも、
3D回転ツールが使えますが結構思うように動きません。
一度経験したのは、3D回転フレームアニメーションを追加した子ムービーが、
単体では再生されるのに、ロードして表示したとたん、まったく表示されなくなりました。
他には、自分の知らないメソッドのエラーが出たり・・・。
深追いする前に、使うのをやめました。
これらが安定するともっといいのですが。

ちなみにFlashPlayer10の2010/3月の普及率はJapanで 97.3%だそうです。
http://www.adobe.com/products/player_census/flashplayer/version_penetration.html

今回触ってみての率直な感想です。
これは楽しい！！！
でも無駄にz軸いじりすぎてしまわないように気をつけましょう。

OpenGLで作るiPhone SDKゲームプログラミング

この本は内容そんなに難しくないのですが、
構成や流れが制作者目線で良かったです。
リファクタリングに紙面を惜しみなくつぎ込んでいるのが
ホントにほほえましいです。

著者は私より年齢が一回りくらい下なんですが、
すごいですね。

3Dのところはまだ読んでませんが、とりあえず2Dゲームを
OpenGL ESで作ろうと思っているので、制作ははじめてます。
簡単なゲームといえど、1人作ると結構大変です。
4月中目標で仕上げたいと思ってます。
iPad版も作れるといいけど。

プログラム自体はObjective-C++で
制作しているのですが、
言語がJavaやActionScriptと違うので
多少戸惑いがありますね。

動くと思って組んだ単純なプログラムが
動かなかったとき、必死で一二時間デバッグして
原因を突き止めたと思ったら、
型が違うだけだったとか...

慣れてない言語だと凡ミスに注意ですね！
慣れてると理論的に対処できるのですが、
そうでないと、疑心暗鬼になってしまい
色々無駄な作業をしてしまいます。

コンピューターって人間が理論的に
作り出したものであるため100％理屈が
通るはずです。

自らが順調でないときに不具合が出ても、
がむしゃらにデバッグしないで、
一旦引いて考えてから動かないと、ですね。

とはいえ、ソフトウェアはOSに依存するし
ましてやFlashなんてプラグインだから、
不具合は自らの原因だけではないんですけどね...。

つい最近、現在公開中のコンテンツの改修のお仕事のご相談を
いただきまして、ソースを提供されました。

それをつらつらとチェックしてると、
結構インターフェースを多用していて、なかなかできる人だな
と感心していると、下記のようなソースに出くわしました。

interface IHoge extends IBitmapDrawable,IEventDispatcher{
...
}

インターフェースの継承についてはもちろん理解していたのですが、
多重継承できるとは思ってなかった...。

確かにインターフェースはクラスの多重継承ができないから
作られたものだと読んだことがありますが、
インターフェースならば多重継承できるんですね。

自前のインターフェースで早速適用してみたら、案の定上手くいきましたね。
Javaでもそうなっているようです。知らんかった...

これで、単機能的なインターフェースを無理やり継承させず、
上手く設計できると思いましたね。
複数の単機能インターフェースを備えたインターフェースを
設計することもできます。
（A,BをそなえたCを作るために
B extends AとしてC extends Bとしたくないので、泣きながら
諦めていたのですが、多重継承だとC extends B,Aとでき、
Bを他のBだけを要するインターフェースおよびクラスに
使うことができます。）
やりたかったんだなぁ、これ。

でも適当に設計するとすぐにぐちゃぐちゃになると思うので
ご注意を。

そのことを話すとインターンのmoriyak君はワクワクしてましたね。
こういう新人がもっと増えるとうれしいですね。

物事は隅々まで読まないとなぁと思いました。

サンプルファイルは以下
knockknock20100120.lzh

使用ステップは以下の通りです。

１）まずはグレーアウトしない部分を選択範囲として選びます。

２）ファイル＞スクリプト＞参照、からサンプルファイルの「選択範囲以外をグレーアウトしてJPEGに書き出す.jsx」を選択します。

３）確認アラートがでます。

４）書き出すJPEGファイル名を聞かれます。

５）あとは自動処理が終わるのを待つだけです。
これが出力結果のJPEGです。

ディレクターの方（PhotoshopCS以降がインストールされてれば・・）、デザイナーの方、是非ご利用ください。
ちなみに自分は使う機会がないですが。
では、次回の自動化をお待ちください。

U/ALaboリニューアルおめでとうございます。
すごく使いやすくなりましたね。
コーディング担当してくれたDECOさんに感謝です。

今回は「ビットマップのテキストを文字ごとに分割してトランジションをかける」の最終回。
ジェネレーター的なものを作ってみました。

一枚のビットマップを文字ごとに分割してアニメーションをかけるライブラリです。
ためしに「reference」ボタンで画像を選んで「start」ボタンをクリックしてください。
※選択する画像は背景が透過してあるPNGでないといけません。

アニメーションの種類はいろいろといじって確認してください。

実際の組み込み方法は、以下の通りです。
---------------------------------------------------------
１）以下のクラスファイルをクラスパスに指定してあるフォルダにコピーしてください。

これでテキストトランジションは終了です。
さっそく案件で使ってみましたが今のところ良好です。
機会があれば使ってみていただけると嬉しいです。

公開されてからもう半年を過ぎまして、
記者も減りましたが、まだまだがんばってゆきたいと思います。

今回は、つい最近ハマったプチ問題をメモ代わりに書きますね。

NaNというものをご存知だと思いますが、NaNというのは
Numberの型で数字で無いもの（Not a Number）を指します。

ここでいう数字とは正確には「倍精度浮動小数点数」といいます。

var num:Number = Number("あああ");
trace(num);

NaN

というトレース結果になり、

Number,uint,intなどの数字以外は
NaNになります。

そしてNumberの初期値、つまり
下記のように何も代入しない場合も
トレース結果がNaNになります。

var num:Number;
trace(num);

このNaNをDisplayObjectクラスの
xおよびyに代入すると
ブラウザによって挙動が変わってしまいます。

たとえば

var sp:Sprite = new Sprite(); 
var g:Graphics = sp.graphics; 
g.beginFill(0xff0000,1); 
g.drawRect(0,0,100,100); 
this.addChild(sp); 
sp.x = NaN; 
sp.y = 200; 

wonderflでも一応書いておきました。各ブラウザでも確認してもらえればと思います。

■パブリッシュプレビュー
0になります。

■XP+IE7
表示されません。

■XP+FF
0になります。

■XP+GC
0になります。

■Vista+IE7
0になります。

■Vista+FF
表示されません。

■Vista+GC
表示されません。

OSとブラウザによって全然変わりますね...。
筆者はこれだけしか確認できてませんが、
他のも確認してもらえればと思います。

プレビュー上で表示されていたので
安心していましたが
ブラウザによって表示されなくなる場合もあるので
注意してください。

座標にはハッキリした値を代入できれば問題ないのですが
プロパティ変数を座標に入れ込むとなった際に
そのプロパティ変数も別のプロパティ変数の
四則演算を施した後ですと、
どれかがnullやNaNであればNaNになってしまいます。
しかも、例外をthrowしないのでバグが潜伏して
しまいます。
setterのx,yにNaNを代入しようとすると例外をthrowするように
してほしかったのですけどね。

このブラウザだと消えてしまうんだけど...と言われたときに
思い出してもらえれば嬉しいですね。

結構遊べますね。

次回は、これをUAのフレームワークに組み込むために
リーダーからいろいろと指摘を受けたのを反映させて、
ジェネレーターちっくなものを作ろうかと思っています。

では、また。

サンプルファイルはこちら

TextInfoクラス：
コンストラクタの引数に分割する対象のDisplayObjectContainerを渡して
initializeすると文字の情報を取得します。

TweenTextクラス：
コンストラクタの引数に分割する対象のDisplayObjectContainerを渡して
initializeすると文字情報を元に、文字ごとにビットマップを作成します。

分割ロジックは対象オブジェクトをビットマップにDrowして
すべてのピクセルのアルファチャンネルを取得して文字の描画してある範囲を取得します。

注意点
※文字が縦横1ピクセル以上離れていないと（アンチエイリアスの部分がかぶっててもダメ）同一の文字として判定されてしまいます。
※横並びの文字のみ対応です。
※今回トランジションにはTweenerを利用しています。
※座標は左上に合わせてください。

肝心のトランジションに関してはTweenTextクラスのstartTweensをオーバーライドして
何かこった演出を加えてください。

という感じです。次回にこれを利用したいろいろなトランジションを紹介しようと思います。

よろしくお願いします。

bola.scaleX = bola.scaleY = _camera.focus / (_camera.focus + bola3d.screen.z) * _camera.zoom

 private function _sort(arr:Array):void {
		var i:int
		var j:int;
		var temp:DisplayObject3D;

		for (i = 0; i < arr.length - 1; i++) {
			for (j = arr.length - 1; j > i; j--) {
				if (arr[j - 1].screen.z >arr[j].screen.z) {  /* 前の要素の方が大きかったら */
					temp = arr[j];        /* 交換する */
					arr[j] = arr[j - 1];
					arr[j - 1]= temp;
				}
			}
		}
	}
}

さて、これまでPhotoShopから各画像の書き出しと、クラスの作成、Flashオーサリングといった自動化の流れを考えてきましたが、今回の自動化は最近、シーン遷移のライブラリとして普及してきているProgressionを利用した自動化です。大まかな流れは変わりませんが、クラス生成時に「Progression用のクラスを書き出してしまおう」ということです。これまでは自動化後はシーン遷移等のASのコーディングを行わなければなりませんでしたが、Progression用のクラスとして書き出してしまうことで、簡単なコンテンツでしたら一切のコーディングを必要としなくなります。こうして大幅に省略した時間をクリエイティブに利用することができます。

さっそく方法をご紹介と言いたいのですが、まずはProgressionの概念に関して最低限、シーンとキャストに関して知っておく必要があります。シーンとはその名のとおりシーン遷移のシーンです。ただし表示の実態はありません。キャストとは関連付けられたシーンで表示させたいシンボルの設定のことを言います。つまりシーンを変更すると、そのシーンに関連付けられたキャストの表示がそれぞれ制御されることになります。これから紹介する自動化の最初のステップにPhotoShopのレイヤーを整理する作業がありますが、シーンとキャストの関係を考えながら整理していく必要があります。

基本部分オーサリング自動化_Progression用.jsxbin　：　PhotoShopJS
基本部分オーサリング自動化_Progression用.mxp　：　Flash拡張ファイル（ダブルクリックで拡張可能）
※今回の自動化実行環境はCS4以降となります。

では、その自動化方法の説明です。動作確認状況はCS3、CS4のPhotoShopとFlashです。

1. PhotoShopレイヤーの整理
2. PhotoShop自動化用JavaScript実行
3. Flash自動化用JSFL実行
4. その他設定
5. パプリッシュ

ステップ1：PhotoShopレイヤーの整理

デザイン済みのPSDファイルを、自動化用に整理します。

1) インデックスシーンとして最上位にレイヤーセットを作成

まずシーンをPhotoShopのレイヤーセットで定義していきます。シーンとして必ず必要なものとしてインデックスシーンとなります。ローディング後、一番はじめに表示されるシーンです。このインデックスシーンとして最上位の階層にレイヤーセットを作成します。レイヤー名は何でも構いませんが接頭に必ず「SC_」をつけてください。

2) 下層シーンとしてインデックスシーンレイヤーセット以下にレイヤーセットを作成

インデックスレイヤーセットの直下に第二階層となる下層シーンレイヤーセットを作成します。さらに下層がある場合、各下層シーンレイヤーセットの直下に同じようにレイヤーセットを作成し、レイヤーセットの入れ子構造を作ります。

注意点は以下の通りです。

• シーン用レイヤーセットのレイヤー名には接頭に必ず「SC_」をつけてください。
• シーンIDがレイヤーセットの名前で登録されますので、シーン用レイヤーセットの名前は一意のものにしてください。

これでシーンの定義は完了です。

3) 各シーンに紐づくキャストとしてそのシーンレイヤーセット直下にレイヤーセットを作成

次にシーンの登場人物ともいえるキャストを定義します。各シーンレイヤーセットの直下にシーン名と同一名でそのシーンに紐づくキャストとして、レイヤーセットを作成します。シーン遷移の際、行き先がそのシーンの場合だった時に表示されるキャストです。つまりProgression用に書き出されるクラスでは_onInitでAddChildされるキャストです。各シーンに紐ずくキャストは複数作成することができます。同一シーンレイヤーセット内で一意の名前を付けてください。シーン遷移の際、行き先がそのシーンもしくは、子シーン以下の場合に表示されるキャストです。

ここでの注意点としては以下の通りです。

• シーンレイヤーセット直下には必ず同一名のキャストレイヤーセットをひとつ作成してください。
• キャストレイヤーセットには必ず接頭に「MC_」をつけてください。

キャストが定義されました。

4) シーン遷移のためのキャストボタンとしてレイヤーセットを作成

シーン遷移のためのキャストボタンを定義します。各シーンレイヤーセットの直下または、キャストレイヤーセットに飛び先シーン名と同一名でキャストボタンとして、レイヤーセットを作成します。キャストボタンレイヤーセット名がそのキャストボタンのIDとなります。レイヤー名にそれぞれ「over」「out」を設定するとロールオーバー、ロールアウトのアニメーションが設定されます。

ここでの注意点としては以下の通りです。

• キャストボタンレイヤーセットには必ず接頭に「BT_」をつけてください。

5) キャストに静的配置するMovieClipとしてレイヤーを作成

キャスト、キャストボタンの表示要素を定義します。キャストレイヤーセットまたは、キャストレイヤーボタン直下に静的配置するMovieClipレイヤーを作成してください。またキャストにキャストを入れ子にすることもできます。その際はキャストレイヤーセット直下にキャストレイヤーセットを作成してください。

ここでの注意点は以下の通りです。

• 親のキャストと同一名は避けてください。
• MovieClipレイヤーはシーンの直下ではなく必ずキャストレイヤーセットの直下に配置してください。

最後に1レイヤーセットが1シーンおよび1シーン、1レイヤーが1MovieClipとなりますので、それ以外のレイヤー（ガイドやマスクなども含む）は削除、および統合してください。

例）
SC_index
--MC_index
----image
--MC_navigation
----BT_content0
------over
------out
----BT_content1
------over
------out
--SC_content0
----MC_content0
--------image
----MC_item
--------image
--SC_content1
----MC_content1
--------image
----MC_item
--------image
--MC_bg
----image

これで自動化のためのPhotoShopレイヤー整理は完了です。

戻る

ステップ2：PhotoShop自動化用JavaScript実行

ステップ1で整理したPhotoShopを開いた状態で、PhotoShopバッチ処理用に作成したJavaScriptを実行しします。バッチ処理でPNGデータ、クラスファイル、レイアウト情報テキストを書き出します。PhotoShopメニューのファイル＞スクリプト＞参照で「基本部分オーサリング自動化_Progression用.jsx」を選択、実行してください。ちなみに「C:\Program Files\Adobe\Adobe Photoshop CS4\Presets\Scripts」にjsxファイルを置いておくとスクリプトメニューに登録され、直接実行することもできます。「オーサリング自動化 Progression用」ダイアログが開きます。

1. PNGファイルを書き出す　：　materialsディレクトリが作成され、PSDレイヤーごとにPNGファイルを書き出します。
2. layout.txtを書き出す　：　materialsディレクトリ内にレイアウト情報を出力したlayout.txtファイルが書き出されます。
3. ActionScriptファイルを書き出す　：　classesディレクトリが作成され、Progression用のクラスファイルが書き出されます。
4. プロジェクト名　：　classesディレクトリ内にプロジェクトでパッケージを作成します。半角英数のみ使用可能です。
5. 著者　：　書き出されたクラスに@author情報を記述します。

PSDと同一階層にPSDと同一名のディレクトリを作成し、その中にmaterialsディレクトリ（PNGファイルとレイアウト情報テキストファイル）とclassesディレクトリ（クラスファイル）を作成します。

戻る

ステップ3：Flash自動化用JSFL実行

PhotoShopで書き出したデータをもとにFlashの自動化用JSFLでオーサリングを自動化します。
まずは以下のファイルをC:\Documents and Settings\ユーザー名\Local Settings\Application Data\Adobe\Flash CS4\ja\Configuration\Commandsに配置します。

• 基本部分オーサリング自動化_Progression用.jsfl
• 基本部分オーサリング自動化_Progression用.xml

Flashを起動して元となるflaファイルを新規作成し、保存します。
Flashメニューのコマンド＞基本部分オーサリング自動化_Progression用を選択、実行します。
「基本部分オーサリング自動化」ダイアログが開きます。

1. layout.as　：　PhotoShopで書き出したレイアウト情報テキストファイルをコピー&ペーストします。
2. プロジェクト名　：　PhotoShop自動化時にダイアログで入力したプロジェクト名と同一のものを入力します。
3. リンケージ　：　MovieClipにクラスファイルのリンゲージが追加されます。追加するを選んでください。
   追加しない
   追加する
4. ActionScriptレイヤー　：　各MovieClipの一番上のレイヤーにActionScriptレイヤーが作成されます。
   追加しない
   追加する
5. ActionScriptレイヤー名　：　ActionScriptレイヤー＞追加するを選んだ時のレイヤー名

「OK」ボタンで「layout.textを選択してください」ダイアログが開きますので、layout.textを選択してください。書き出したファイルとの位置関係を把握させるために選択が必要となります。

選択後、自動化処理が開始されます。アイテム数によってはしばらく処理に時間がかかりますが、処理が完了するまでお待ちください。

戻る

ステップ4：その他設定

自動化処理完了後、ステージサイズを調整し、ドキュメントクラスを設定します。ドキュメントクラスはPhotoShopから書き出したclasses/proj/プロジェクト名/display/インデックスシーン名/インデックスシーン名.asを指定してください。記入例としては「proj.プロジェクト名.display.インデックスシーン名.インデックスシーン名」になります。次に「パブリッシュ設定」ダイアログを開いてを行います。「リソースパス」をPhotoShopより自動で書き出されたclassesに設定します。ここで重要なのですが「ステージのインスタンスを自動宣言」のチェックを外してください。基本的に静的配置されたオブジェクトはクラス上に自動ですべて宣言されます。

戻る

ステップ5：パプリッシュ

設定が完了したらパブリッシュですが、パブリッシュ前に、Progressionライブラリをclasses以下に配置してください。今回自動で書き出したクラスはProgressionを使用していますので、Progressionライブラリがないとエラーを起こしてしまいます。パブリッシュしてシーン遷移が問題なく行われていれば完了です。

戻る

以上がProgressionを使用したPhotoShop書き出しと Flashオーサリングの自動化の流れです。Progressionのコンポーネントベースで開発をすればもちろんスクリプトを記述する必要はありませんが、クラスベースで開発した場合そうはいきません。しかし実際はProgressionはクラスベースの開発に利用されるケースがほとんどです。

今回はProgressionのクラスベースの開発を自動化しました。もちろんこれでサイトが完成するというわけではありません。トランジションや各アニメーションの調整をする必要はありますが、それまでの工数を大幅に削減することができるのです。

是非ご利用いただければと思います。

今回はクラス名の混同について、引っかかったので
メモ。

皆さんご存知のように、表示オブジェクトの中でSpriteクラスというものが
ありますが、こちらはflash.display.Spriteというのが
正式のクラス名です。
import宣言によって、短縮名で記述できるようになっています。

Spriteですが、デフォルトではmouseEnabledとmouseChildrenがtrueで
あるがゆえに、マウス操作に影響しないものの場合、
わざわざmouseEnabledとmouseChildrenをfalseにしないといけません。
そこで私は
jp.co.uniteair.display.Spriteというクラスを
flash.display.Spriteのサブクラスとして作成しました。

package jp.co.uniteair.display{
	public class Sprite extends flash.display.Sprite{
		public function Sprite() {
			this.mouseChildren = false;
			this.mouseEnabled = false;
		}	
	}
}

単なる四角とか点とかのムービークリップはjp.co.uniteair.display.Sprite
を基本クラスに指定することによって、
mouseEnabledとmouseChildrenをfalseにすることを省略できました。

そのまま平穏な日々が続いたのですが、
ちょっとややこしい事態がが発生しました。

下記のような場合、通常だったら

package {
	import flash.display.*;
	public class Hoge {
		public function Hoge() {
			var mc:MovieClip = new MovieClip();
			var sp:Sprite = mc as Sprite;
			trace(sp); 
		}	
	}
}

１フレーム目

var hoge:Hoge = new Hoge();

結果はこうなりますね。

[object MovieClip]

flash.display.MovieClipはflash.display.Spriteの
サブクラスなので、そのまま評価されるからです。

ところが、下記の場合は、

package jp.co.uniteair.display{
	import flash.display.*;
	public class Hoge {
		public function Hoge() {
			var mc:MovieClip = new MovieClip();
			var sp:Sprite = mc as Sprite;
			trace(sp); 
		}	
	}
}

１フレーム目

import jp.co.uniteair.display.Hoge;
var hoge:Hoge = new Hoge();

トレースの結果、下にようになってしまいます。

null

これだと何がおこっているか、よく分からないので、

package jp.co.uniteair.display{
	import flash.display.*;
	public class Hoge {
		public function Hoge() {
			var mc:MovieClip = new MovieClip();
			var sp:Sprite = Sprite(mc);
			trace(sp); 
		}	
	}
}

１フレーム目

import jp.co.uniteair.display.Hoge;
var hoge:Hoge = new Hoge();

TypeError: Error #1034: 強制型変換に失敗しました。flash.display::MovieClip@1e63c941 を jp.co.uniteair.display.Sprite に変換できません。

上記で分かることは
import flash.display.Spriteをしているにもかかわらず、
flash.display.Spriteよりjp.co.uniteair.display.Spriteを優先しているということです。
flash.display.MovieClipはjp.co.uniteair.display.Spriteのサブクラスではありませんので
エラーになります。

これはHogeがjp.co.uniteair.display.Hogeだからです。
（前の例だと正式クラス名もHogeでした。）

クラス名が競合した場合は、同パッケージが最優先だということがわかりました。
あまりクラス名は同じにしないほうがいいですね、と強く反省しました。
とりわけ、頻繁に使用するであろうビルドインクラスとは同じにしないほうがいいでしょう。

なので前述エセSpriteクラスはPlainSpriteと名を変えました...

ちょっと前ですが仕事上、Flashでサーバー上の
JavaアプリとSocket通信をしないといけない
案件をすることになりました。
未知の世界なので不安2割、楽しみ8割で挑みました。
Flash側としてはSocketクラスを作って、
指定のイベントをaddEventListerして...と
URLLoaderみたいなノリで意外にカンタンに
できます。ただ、その案件はSocket通信＋SSLだったので
一筋縄ではいきませんでしたが。
（でも、パケット盗聴、なりすましとか考えると、実務レベルでは
SSLにしないといけないんだろうなと実感）
さらにセキュリティーポリシーが追い討ちをかけて
私と、連携先のSEさんを苦しめました...

→ソケットポリシー

でもパケットキャプチャーソフトをデバッグ用に使って
何とかつなぐことができました！
パケットキャプチャーは通信ごとのデータを
モニタリングしてくれます。暗号化なしのパスワードとか
何でも分かってしまいます。
暗号化って必要なんだなと肌で実感してしまいます。

ぱけ見え【Protocol_EYE】 フリー版

下図のように通信ごとにパケットが丸見えです。

クリックで拡大します。

その案件はある事情がありまして、最後までお手伝い
できなかったのですが、それを契機に自分で一回、
ネットアプリを構築してFlashとつなげてみようと思いました。
Java経験がありましたし、自宅の本棚を探ると、
Javaネットワークプログラミングの本が！

平成15年とかなり昔の本ですが、
これで作れる！と思わせましたね。当時と今とでは
私の中でのオブジェクト指向の理解がかなり違うので
結構イケルと思いました。

・Javaネットワークプログラミング

・Javaネットワーク&ストリーム完全制覇

※前述しましたが、両方ともJavaの本です。

もっと新しい本買ったほうがいいかもしれないと思いましたが
とりあえずこれを使って、ネットアプリを作ろうと思います。
負荷とかはとりあえず考えないで。
最終的にはLinuxに入れられるように。

まず最初に前述のパケットキャプチャーソフトを使おう！と思い、
早速自宅のVistaにインストールしました。

......が
ぜんぜんトレースされない！会社ではできたのに！

別の有名な海外のソフトを調べてDLしてみました。

・Wireshark
http://jp.downpanda.com/wireshark-19423.html

でも駄目でした。

詳しく調べるとVistaって権限とか厳しいので
管理者権限で起動しないといけないのです。
下図のように、わざわざ右クリックして起動しないといけないようです。

管理者権限で起動し、適当なページを閲覧したら、
どんどんキャプチャーされていくことが確認できました。
（しかも上記の２つのソフト両方です！）

前述セキュリティーポリシーによって
FlashPlayerがSocketインスタンス作成しconnectしたら
"<policy-file-request/>"という文字列を
接続先のport843に強制的に投げます。
（パブリッシュプレビューでは投げません）

その文字列をキャプチャーできるかなと思い、
早速JavaでFlashPlayerからport843で受けるプログラムを
書いて、プロンプトで実行しておきます。
そして、ブラウザ上でSocketをconnectするFlashを実行。

......でも、出てきません。
同ＩＰ同士のパケットはキャプチャーできないみたいです。
理解度が低いせいかもしれません。
２つのソフトで行いましたがぜんぜん出てこないですね。
何かいい方法があるのかな。さすがに２，３時間では
見つからなかったか...。やっぱりテキストフィールド
つくってトレースするか...。

進展がありましたら、
さらにレビューさせていただきます。

package 
{
	import flash.events.Event;
	import flash.events.EventDispatcher;
	
	public class Model extends EventDispatcher implements IModel 
	{
		protected var _key:int;
		
		public function setKey(key:int):void {
			_key = key;
			this.update();
		}
		
		public function getKey():int {
			return _key;
		}
		
		protected function update():void {
			dispatchEvent(new Event(Event.CHANGE));
		}
	}	
}

package 
{
	import flash.events.KeyboardEvent;
	
	public class Controller implements IController 
	{
		private var model:Object;
		
		public function Controller(aModel:Object) {
			this.model = aModel;
		}
		
		public function keyPressHandler(event:KeyboardEvent):void {
			(model as IModel).setKey(event.keyCode);
		}
	}
}

package
{
	import flash.display.Sprite;
	import flash.errors.IllegalOperationError;
	import flash.events.Event;

	/**
	* Viewの基本クラス
	*/
	public class ComponentView extends Sprite
	{
		protected var model:Object;
		protected var controller:Object;
		
		public function ComponentView(aModel:Object = null, aController:Object = null) 
		{
			this.model = aModel;
			this.controller = aController;
		}

		public function setModelController(aModel:Object = null, aController:Object = null):void
		{
			this.model = aModel;
			this.controller = aController;
		}

		public function add(c:ComponentView):void
		{
			throw new IllegalOperationError("add operation not supported");
		}
		
		public function remove(c:ComponentView):void
		{
			throw new IllegalOperationError("remove operation not supported");
		}
		
		public function getChild(n:int):ComponentView
		{
			throw new IllegalOperationError("getChild operation not supported");
			return null;
		}
		
		//ABSTRACT Method
		public function update(e:Event = null):void{}
	}
}

package
{
	import com.chikathreesix.mvc.ComponentView;
	import flash.events.Event;
	
	/**
	* 複数のViewを持つView
	*/
	public class CompositeView extends ComponentView
	{
		private var aChildren:Array;
		
		public function CompositeView(aModel:Object = null, aController:Object = null) 
		{
			super(aModel, aController);
			this.aChildren = new Array();
		}
		
		override public function setModelController(aModel:Object = null, aController:Object = null):void 
		{
			super.setModelController(aModel, aController);
			for each(var c:ComponentView in aChildren)
			{
				c.setModelController(aModel, aController);
			}
		}
		
		override public function add(c:ComponentView):void 
		{
			aChildren.push(c);
		}
	
		override public function remove(c:ComponentView):void 
		{
			super.remove(c);
			for (var i = 0; i < aChildren.length; i++)
			{
				if (aChildren[i] == c)
				{
					aChildren.splice(i, 1);
				}
			}
		}
		
		override public function update(e:Event = null):void 
		{
			for each(var c:ComponentView in aChildren)
			{
				c.update(e);
			}
		}
	}
}

package 
{
	import flash.events.Event;
	import flash.events.KeyboardEvent;
	
	public class View extends ComponentView
	{
		public function ComponentView(aModel:Object = null, aController:Object = null) 
		{
			super(aModel, aController);
			this.addEventListener(KeyboardEvent.KEY_DOWN, _onKeyPress);
		}
		
		private function _onKeyPress(event:KeyboardEvent):void {
			(controller as IController).setKey(event);
		}
		
		
		override public function update(e:Event = null):void 
		{
			super.update(e);
			trace((model as IModel).getKey());
		}
	}
}

package 
{
	import flash.display.Sprite;
	import flash.events.Event;
	
	public class DocumentClass extends Sprite 
	{
		public function DocumentClass() {
			var model:IModel = new Model();
			var controller:IController = new Controller(model);
			
			var view:View = new View(model, controller);
			model.addEventListener(Event.CHANGE, view.update);
		}
	}
}

SilverlightをやるためにC#と奮闘中です。
Silverlightをやってみたいが、C#のAPIを
調べるのがメンドクサイという方のために
これからメモ代わりに掲載してゆきたいと思います。
まだまだ始めたばかりで間違いもあるかもしれませんが
よろしくおねがいします。

Silverlight向け .NET Frameworkライブラリ
http://msdn.microsoft.com/ja-jp/library/cc838194(VS.95).aspx

ActionScriptでもっとも重要なクラスとは
と聞かれると、ほとんどの人がMovieClipクラスと
答えると思います。(AS3では「表示オブジェクト」
と答える人もいると思いますが...)

Silverlightでは表示オブジェクトがどうなっているのか？

FlashではMovieClipはタイムライン上で配置できる
静的配置とコード上でインスタンスを生成する
動的配置があります。

最初のドキュメント生成は下記を参照ください。
http://ua-labo.com/#/pid000026

上記の方法でプロジェクトを
生成すると
App.xaml・App.xaml.csと
Page.xaml・Page.xaml.csが自動生成されます。

App.xamlおよびApp.xaml.csはまだ深く突っ込んでいませんが、Applicationというクラスの
サブクラスですので、Silverlightアプリを
司るクラスのようです。

App.xaml.cs

using System.Windows;
using System;

namespace Sample0906
{
	public partial class App : Application 
	{
		public App() 
		{
			this.Startup += this.OnStartup;
			this.Exit += this.OnExit;
			this.UnhandledException += this.Application_UnhandledException;

			InitializeComponent();
		}

		private void OnStartup(object sender, StartupEventArgs e) 
		{
			// メイン コントロールをここに読み込みます
			this.RootVisual = new Page();
		}

		private void OnExit(object sender, EventArgs e) 
		{
		}

		private void Application_UnhandledException(object sender, ApplicationUnhandledExceptionEventArgs e) 
		{
			// デバッガの範囲外でアプリケーションが実行されている場合、ブラウザの
			//例外機能を使用して例外が報告されます。IE では、この例外はステータス バーの
			//黄色の警告アイコンで示されます。Firefox では、スクリプト エラーが表示されます。
			if (!System.Diagnostics.Debugger.IsAttached)
			{
				// メモ: これにより、例外がスローされたが処理されなかった場合でも、
				//アプリケーションは実行を継続できます。
				// 実稼働アプリケーションでは、このエラー処理を、他の機能 (Web サイトへエラーを報告し、
				//アプリケーションを停止するような機能) に置き換える必要があります。
				e.Handled = true;
				Deployment.Current.Dispatcher.BeginInvoke(delegate { ReportErrorToDOM(e); });
			}
		}

		private void ReportErrorToDOM(ApplicationUnhandledExceptionEventArgs e)
		{
			try
			{
				string errorMsg = e.ExceptionObject.Message + @"\n" + e.ExceptionObject.StackTrace;
				errorMsg = errorMsg.Replace("\"", "\\\"").Replace("\r\n", @"\n");

				System.Windows.Browser.HtmlPage.Window.Eval("throw new Error(\"Unhandled Error in Silverlight 2 Application " + errorMsg + "\");");
			}
			catch (Exception)
			{
			}
		}
	}
}

App.xaml

Page.xaml.csがFlashCS3でいうドキュメントクラスです。

Page.xaml.csつまりPageクラス

using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

namespace Sample0906
{
	public partial class Page : UserControl
	{
		public Page()
		{
			// 変数を初期化するときに必要となります
			InitializeComponent();
		}
	}
}

Page.xaml

Page.xamlがタイムラインみたいなもので、下記のようにApp.xaml.cs内でルート指定してます。（OnStartUpはアプリ開始のイベントみたいなものです。）

private void OnStartup(object sender, StartupEventArgs e) {
	// メイン コントロールをここに読み込みます
	this.RootVisual = new Page();
}

静的配置→XAMLで設定
タイムライン的なもの→XAMLで設定
動的配置→newで作成

GridとCanvasですが、GridはFlashにはありません。
CanvasがSpriteみたいなものです。

つまりこういう風に書きます。

■子表示オブジェクトの追加

ActionScript

var sp:Sprite = new Sprite();
var sp2:Sprite = new Sprite();
sp.addChild(sp2);
sp.removeChild(sp2);

C#

Canvas canvas = new Canvas();
Canvas canvas2 = new Canvas();
canvas.Children.Add(canvas2);
canvas.Children.Remove(canvas2);

先ほども述べましたがUserControlには子表示オブジェクトが
1つしか設定できないため、私はUserControl.ContentにCanvasを
設定し、そこにどんどん子表示オブジェクトを追加しています。

■座標の設定

ActionScript

sp2.x = 100;
sp2.y = 200;

C#

Canvas.setLeft(canvas2,100);
Canvas.setTop(canvas2,200);

※staticです。

■座標の参照

ActionScript

var x:Number = sp2.x;
var y:Number = sp2.y;

C#

double x =  Canvas.getLeft(canvas2);
double y =  Canvas.getTop(canvas2);

■アルファ

ActionScript

sp2.alpha = 0.5;

C#

canvas2.Opacity = 0.5;

■mouseEnabledについて

ActionScript

sp.mouseEnabled = true;

C#

canvas.IsHitTestVisible = true;

（UIElementクラスのプロパティのようです）
※デフォルトではtrueです。

分かってきたらこの部分は更新してゆきます。

■今回のクラス

• Canvasクラス
• UserControlクラス

確かに近頃のプロモーションFlashは100%表示が多いです。
ということで、要望に応えるために初めてコンポーネントを作ってみました。

→reSizerPx

・Position
　　どの位置を基準にするか（top left、top、top right、left、center、right、bottom left、bottom、bottom right）

・Scale
　　拡大縮小するか（No Scale：拡大縮小無なし、x 100%：横100%拡大、y 100%：縦100%拡大、Show All：stageいっぱいに拡大/縦横比率変更、Fit Short：短辺合わせで拡大/縦横比率維持、Fit Long：長辺合わせで拡大/縦横比率維持）

・xPos(px)
　　基準からx方向へのずれ（ピクセル単位）

・yPos(px)
　　基準からy方向へのずれ（ピクセル単位）

スクリプトは一行も書いていなくても、このreSizerPxと
Progressionのコンポーネントでここまでできます。

→サンプル

コンポーネントの制限はありますが
アイデア次第で実案件こなせるかもしれないですね。

まずはデータベースとつないで、テーブル作成。
テーブルの「flag」はデリート時に変更し表示上から削除するため。
つまり後で復活できるようにしておく。

■データベースを作成するとき

private var _connection:SQLConnection;
private var _sqlstmt:SQLStatement;

var dbfile:File = File.applicationDirectory.resolvePath("data.db");
this._connection = new SQLConnection();
this._connection.addEventListener(SQLEvent.OPEN, connectOpen);
this._connection.addEventListener(SQLErrorEvent.ERROR, viewError);
this._connection.open(dbfile);

■テーブルを作成するとき

this._sqlstmt = new SQLStatement();
this._sqlstmt.sqlConnection = this._connection;
this._sqlstmt.text = "CREATE TABLE IF NOT EXISTS data (no INTEGER PRIMARY KEY, name TEXT, address TEXT, tel TEXT, email TEXT, flag INTEGER)";
this._sqlstmt.addEventListener(SQLEvent.RESULT, viewComp);
this._sqlstmt.addEventListener(SQLErrorEvent.ERROR, viewError);
this._sqlstmt.execute();

■追加するとき

this._sqlstmt.text = "INSERT INTO data (no, name, address, tel, email, flag) VALUES (@no, @name, @address, @tel, @email, @flag)";
this._sqlstmt.parameters["@no"] = null;
this._sqlstmt.parameters["@name"] = this.uname.text;
this._sqlstmt.parameters["@address"] = this.address.text;
this._sqlstmt.parameters["@tel"] = this.tel.text;
this._sqlstmt.parameters["@email"] = this.email.text;
this._sqlstmt.parameters["@flag"] = 1;
this._sqlstmt.addEventListener(SQLEvent.RESULT, viewComp);
this._sqlstmt.addEventListener(SQLErrorEvent.ERROR, viewError);

this._sqlstmt.execute();

■削除するとき
※デリートではなく「flag」のアップデートで対応。

this._sqlstmt.text = "UPDATE data SET flag = @flag WHERE no = @no";
this._sqlstmt.parameters["@no"] = dgData.no;
this._sqlstmt.parameters["@flag"] = 0;
this._sqlstmt.addEventListener(SQLEvent.RESULT, viewComp);
this._sqlstmt.addEventListener(SQLErrorEvent.ERROR, viewError);
this._sqlstmt.execute();

■更新するとき

this._sqlstmt.text = "UPDATE data SET name = @name, address = @address, tel = @tel, email = @email WHERE no = @no";
this._sqlstmt.parameters["@no"] = dgData.no;
this._sqlstmt.parameters["@name"] = dgData.name;
this._sqlstmt.parameters["@address"] = dgData.address;
this._sqlstmt.parameters["@tel"] = dgData.tel;
this._sqlstmt.parameters["@email"] = dgData.email;
this._sqlstmt.addEventListener(SQLEvent.RESULT, viewComp);
this._sqlstmt.addEventListener(SQLErrorEvent.ERROR, viewError);
this._sqlstmt.execute();

■表示するとき
※UIコンポーネントのデータグリッドを使用。
データは「flag」が0でないもので、名前の順で取り出している。

public var dg:DataGrid;

//データ取得
private function getParam(e:MouseEvent = null):void {
	this._sqlstmt = new SQLStatement();
	this._sqlstmt.sqlConnection = this._connection;
	this._sqlstmt.text = "SELECT * FROM data WHERE flag > 0 ORDER BY name DESC";
	this._sqlstmt.addEventListener(SQLEvent.RESULT, getComp);
	this._sqlstmt.addEventListener(SQLErrorEvent.ERROR, viewError);
	this._sqlstmt.execute();
}
//データ表示
private function getComp(e:SQLEvent):void {
	var result:SQLResult = this._sqlstmt.getResult();
	var records:Array = result.data;
	this.dg.editable = true;
	this.dg.columns = ["name", "address", "tel", "email"];
	this.dg.columns[0].sortable = false;
	this.dg.columns[1].sortable = false;
	this.dg.columns[2].sortable = false;
	this.dg.columns[3].sortable = false;
	var dp:DataProvider = new DataProvider(records);
	this.dg.dataProvider = dp;
}

AIRでSQLiteを使ってみて、簡単という印象だった。
データベースの確認はFirefoxのアドオン 「Sqlite Manager」を使えばさらに簡単。
できたアプリも公開。

どんなゲームにしようか迷いましたが、
既存のトランプゲームで、１人でできるものにしました。
(VSCOMやネット対戦は次回にしたいと思います。)
私は初めて知ったのですが、「ピラミッド」という
ゲームにしました。
調べてみると簡単なロジックなので、余裕でいけるん
じゃないかと思ったので、結局プログラミングは最終日
の１日だけにしました。
でも、意外に言語や挙動の差異に戸惑ってしまって、
きわどかったです。

デザインも簡素でHELPもなく、フォントも埋め込まず...
と作りかけ感がかなりありますが、一応プレイ可能です。
バグがあったらゴメンナサイ。

↑こちら

遊び方

ゲーム上のピラミッド型になった札と、それ以外の
場札（画面下にあります）で構成されます。場札は一番上が
表向いています。
ゲーム上での場札は一番上とそれ以外で左右に配置しています。

表向いているカード（ピラミッド型のカード・
場札の一番上のカード）の中で2枚の数字の
合計が13になる組み合わせをクリックすると、
そのカードが消化されます。
キングの場合は最初にクリックすると、単独で消化されます。

場札の裏向いている方をクリックすると次のカードが
一番上になり表になります。

ピラミッドカードをすべて消化するとクリアになります。

ゲームらしさをつけるために、
特別ルールとして最初に200ポイント付与するように
しました。
このポイントが0になるとゲームオーバーです。

ポイントが減るのは下の3つのパターンです。
・1秒経過　1ポイント減
・おてつき（13にならない組み合わせ）　10ポイント減
・場札をすべてめくって、おかわりをしたとき　30ポイント減

右下の「リトライ」ボタンで最初からやり直せます。

作った後で気づいたのですが、これって、画像(XAMLでいう
Imageタグ)はFlashのように本体にインクルードせず、外部画像と
して扱われるんですね...
なので、初回は秒数が過ぎてしまった状態で全部の画像が
表示されるという状態になってしまいました。。。

試作品なので、かなりユーザーに優しくない感がありますが、
今回でSilverlight関連のＣ＃がかなり分かったきましたので
Flashのクラスと対応する記事がかければと思います！

追記：現在はカードの配置はランダムです。おかわりせずに
解けるようなカードの配列を作成するロジックができたら
実装したいですね。
そしたらゲームのルールを変えると思います。

追記2：使用画像をxapの中に含めることができました。
Expression Blend上で[プロジェクト]→[既存のアイテムの追加]で
画像を指定すればよいだけです。Ctrl+IでもＯＫです。
多量のpngファイルなので500KBを超えてしまいました。
ビルド時間も若干長くなります。

Silverlightのトランプゲームを作るため、
昔Flashで試みた(今はAIRですが)トランプゲーム用の
Illustratorデータでpng画像を書き出そうと考えました。
その手段としてIllustratorからPhotoshopデータを
レイヤー保持して書き出したところ、こっちが期待
してない結果になってしまったのでメモしておきます。
ちなみにどちらもCS4です。昔はうまくいったのですが...

こういったレイヤー数の多い
Illustratorデータを
[ファイル]→[書き出し]で
ファイル形式をPhotoshop(.psd)で。

嫌な予感のダイアログが。

Photoshopで開くと、一番上だけ？レイヤーセットに
なっていて、あとは無理やり統合されてました。

色々調べると、レイヤーの解釈がパス単位になっており、
メモリが足りないのだとか。
Illustrator8+Photoshop5なら上手くいくのかな
とも考えましたが、Vistaだし、インストールするのも
不具合おきたら困るので、やめました。

あきらめかけてましたが、最近トライアル版を取得した
前回の記事でお話したExpression Designという
ソフトがaiファイルをそのまま読み、psdファイルを
書き出してくれるということを思い出し、早速やって
みました。

Expression Design上でaiファイルを読み、レイヤー状態がちゃんと
保持されていることを確認後、[ファイル]→[エクスポート]で下図のように
「PSD」を選択し、「レイヤー保持」チェックをして、
「すべてをエクスポート」ボタンを押下すると...

レイヤー保持がされてpsdが書き出されていました！やった～！
（レイヤー数によっては書き出しの時間がかかります）
もちろんXAMLも書き出せます。Canvasタグの構造も
しっかりしているかも。

これって別に感動することではないとは
思うのだけど、なんでイラレはこうなったのだろう？
私のやりかたが間違っているのでしょうか？

あと1日でSilverlightの簡単なトランプゲームができるか
微妙ですが、なんとかがんばります。

今回は全くの初心に返って、簡易なインタラクション＆
アニメーションをつくってみました。
女の子をクリックするとハートがでます。

↑こちら

SilverlightはFlashと違って、編集中のあらゆるところで
テキスト(XAML)で管理しています。上の例では、イラスト類は
もともとIllustratorで作られたものであり、これをXAMLで
保持しています。
XAMLを作成するツールはExpression Design、Expression Blend
とあるのですが、Flash制作の中での役割に置き換えると、
Expression Degisn→Illustrator(PhotoShop?)、Expression Blend→Flash
と考えてもらっていいと思います。

Illustratorのパスをコピーして、Expression Blendにペーストする
ことはできないようです。
そのため、一旦Expression Designにペーストして、再コピーして
Expression Blend上でペーストする必要があります。
パスの精度ですが、下図のようにほとんど変化しません。
※同じ400％なのですが、Illustratorだけ小さく見えるのは
等倍でペーストできていないのかな？

または、Illustratorに「XAMLExport」というプラグインが
ありますので、こちらを使うと、XAMLに書き出ししてくれます。
Expression Degisnがない場合はこれが使えます。

→Adobe Illustrator to XAML Export

使い方
[ファイル]→[書き出し]→ファイルの種類からXAMLを選択して、
書き出します。（WPFとSilverlightがあるようです）

↑のレイヤー構造が↓のXAML（一部です）になります。100KBぐらいのテキストになりました。

パスごとにコメントが書かれるので分かりやすいです。
但し、部分パーツごとにコピーペーストには向いてないかもしれません。

現時点ではこの位しかやっていませんが、動的にイメージを表示を
することができれば何でもできるようになると思いますので、
GW終わるまでにカンタンなゲームを作れてるといいですね。

まず第一回として、デザインパターンをActionScriptで考え話した内容を共有しようと思います。
といいましてもみんなで考えたというより自分はこのように使っているという話だったので、
まだまだ考えが浅い面はあると思いますがお付き合いください。

まずもともとプログラマーでない方にはなじみのない言葉だと思いますが「デザインパターン」というものがあります。
これはプログラムを書く上で経験を積むうちに「こういった問題を解決するには、
こういう構造のプログラムを書けばいい」というノウハウを他人が参照できるように明示的に整理したものです。
クラスとインターフェースをそれぞれどのように設計していけばカプセル化、拡張性が保てるか、
またデザインパターンを作法として利用することで可読性をあげることができます。

Javaをはじめとするオブジェクト指向言語ではこのデザインパターンがよくつかわれますが、
ActionScriptでも同じでデザインパターンを導入することでその恩恵にあずかることができると思います。
実際はProgressionやTweenerなどのライブラリですでに利用していることではありますが。

前置きが長くなりましがデザインパターンはおもに23パターンあります。
それぞれが用途に応じて存在しますが、今回は「Bridge」を見ていきたいと思います。

1) Bridgeの概略

まず「Bridge」とは機能と実装のクラスを分けるパターンです。
あるクラスに新しい機能を追加したいと考えたときクラスを拡張して派生クラスを作ることが出来ますが、
さらに新しい機能を追加したいと考えると、またさらに拡張して派生クラスを作っていくことになります。
そうしているうちにクラスの階層がどんどん深くなってしまい、さらにはクラス同士の関係が密接に絡み合ってしまいます。
結果としてカプセル化と拡張性はクラス階層が深くなる程なくなってしまいます。
もちろんそれが間違っているわけではありません。クラスの継承関係がゆるぎなければそれはそれで問題ないかと考えます。
ただ、もうちょっと柔軟に機能を追加していきたいなと考えたときにこのBridgeが役に立ちそうです。

2) ActionScriptにおけるBridgeの利用例

FlashではMovieClipやSpriteなどDisplayObjectの表示制御が重要です。
addChildした後にどのように表示、非表示していくかの機能をクラス化した例です。

• Displayクラス：DisplayImpl型のインスタンスを所有（コンストラクタで受け取る）し、そのインスタンスのメソッドを実行します。
• DisplayImplクラス：実装の抽象クラス。
• InOutDisplayImplクラス：DisplayImplの派生クラス。visible = false, trueによる表示、非表示制御を実装しています。
  durationプロパティによって遅延処理されます。
• FrameInOutDisplayImplクラス：DisplayImplの派生クラス。
  フレームラベルに「open」「close」を設定することでフレームアニメーションでの表示、非表示制御を実装しています。
  durationプロパティによって遅延処理されます。
• FadeInOutDisplayImplクラス：DisplayImplの派生クラス。
  スクリプトによるフェードイン、フェードアウト制御を実装しています。
  durationプロパティによって遅延処理されます。transitionプロパティによってトランジションが変更できます。
  timeプロパティによってフェードイン、フェードアウトの時間を変更できます。

3) 作成したInOutDisplayクラスの利用

作成した表示、非表示制御クラスを利用するには、以下のようになります。

// 表示、非表示の機能を実装したインスタンス
this._obj0InOut = new Display( new InOutDisplayImpl( this.obj0 ) );
this._obj1InOut = new Display( new FrameInOutDisplayImpl( this.obj1 ) );
this._obj2InOut = new Display( new FadeInOutDisplayImpl( this.obj2 ) );

// プロパティの設定
this._obj1InOut.duration = 1;
this._obj2InOut.transition = "easeOutCubic";
this._obj2InOut.time = 0.5;

// 表示
this._obj0InOut.show(); // visible = true;
this._obj1InOut.show(); // 1秒後にフレームアニメーションによる表示
this._obj2InOut.show(); // 0.5秒のスクリプトアニメーションによる表示

// プロパティの設定
this._obj1InOut.duration = 0;
this._obj2InOut.transition = "easeInCubic";
this._obj2InOut.time = 1;

// 非表示
this._obj0InOut.close(); // visible = true;
this._obj1InOut.close(); // 0秒後にフレームアニメーションによる表示
this._obj2InOut.close(); // 1秒のスクリプトアニメーションによる表示

4) 利用における感想

利用していて感じたことは

• クラス同士の関係が弱い（委譲）ので、変更に強い。
• 新しい機能が欲しければ機能のクラスを作成してインスタンスを作ればいい。
• クラス内のインスタンスが多くなるので、少々ややこしくなる。
• DisplayObjectにリンゲージされているクラスに実装するべき機能か、追加機能のクラスに実装する機能かを慎重に考える必要がある。
• 表示処理開始や表示処理終了のイベントはaddEventListenerしておかなければならない。
• 追加機能から派生したクラスをあまり作らず、なるべくシンプルにした方がいい。

今回は詳しくは説明しませんが、ボタンやチェックボックス、ラジオボタンも機能のクラスとして作成しています。

// シンプルなロールオーバー機能付きボタン
this._button0Simple = new Button( new simpleButtonImpl( this.button0 ) );
this._button0Simple.current = false; // カレント表示
this._button0Simple.enable = true; // クリック可能

といった感じです。

まだまだ考えなければならないことはあると思いますが、
以上がActionScriptにおける自分なりのBridgeパターンの活用方法です。

この他にもたくさんデザインパターンがあります。
特にIteratorやSingletonなどは利用しやすいパターンです。
次の機会にでもご紹介していこうとおもいます。
では第2回Flash座談会をお待ちください。

今後ここでSilverlightに関して気になったこと、TIPSなどを紹介していく予定です。

今回はSilverlight 2の開発にあたり、Expression Blend 2のインストールに関する注意点と自作ボタンの作成方法を記載します。
特にわかりにくかったので。。。

・Expression Blend 2のインストールに関する注意点

 まず、Expression Blend 2をインストールします。Windows XPなどで.NET Framework 3.5が入ってない方でもセットアップ時に自動的にインストールされます。

次にExpression Blend 2 SP1 をインストールします。これを忘れてしまうと以下のように「Silverlight 2アプリケーション」が表示されません。

・自作ボタンの作成

まずボタンにするグラフィックを作成します。ここでは簡単に楕円を描きました。

次に[ツール]⇒[ボタンの作成]をクリックします。
（ここがわかりにくい。。）

以下の画面は必要に応じて名前など変更してください。

右にあるプロパティの上にある種類が「Button」になっていればOK。 

今度はボタンにロールオーバーアクションをつけます。
レイヤー上の[button]またｈデザインビュー上のボタンオブジェクト上で右クリックをして[コントロールパーツ（テンプレート）の編集]⇒[テンプレートの編集]をクリック。
（ここもわかりにくい。。）

 そうすると左手の「ステート」と「オブジェクトとタイムライン」が変わります。
ここでボタンのロールオーバーのアニメーションなどを追加できます。

ステートで「MouseOver」を選択します。この時「⇒+」みたいなボタンをクリックし、[MouseOver ⇒ Normal]を選択します。
これでロールアウトのアニメーションが自動的に設定されます。戻る時間はこの後作成するアニメーションの時間が基準に決めると良いです。

[MouseOver]を選択したタイミングで「オブジェクトとタイムライン」がストーリーボード作成状態になっています。早速にアニメーションを作ってみましう。
後は[Pressd]など必要に応じて作成していけばOKです。

これで、ボタンが簡単に作れることがわかりましたが、説明は大変なこともわかりました。。。

↓こちら

※別窓で開きます。昔ケータイで遊びで作った
スイカ割りゲームのキャラの流用です。
デザイナーではないので淡白なインターフェースで
すみません。

「ADCreator」みたいなコンテンツで作成した画像を
サーバーを介することなく、ローカルで取得できるわけです。
スクリーンキャプチャでいいじゃん、と思われる方もいらっしゃるでしょうけど、
たとえば、プレビューは小さめで、解像度の高いjpgを出したいときに裏で絵を描画して、
jpg出力することも可能です。

実際アップしてみて、試してみましたが自宅のVistaのIE7でIO_ERRORがでてしまいました。
下図のようにスイカ君がしゃべったら保存できない状態です。

調べたところIE7には「保護モード」があるらしくデフォルトでONになっているようです。 

こいつのせいで、IO_ERRORが発生してしまうということです。
外したらうまくいきましたが、脅しのようなメッセージが
すでに開いているIE7からすべて出てきます。
これって結構ハードル高いですね。。
ヘルプをつけても実用レベルとして使えるかどうか。。。

いきなりこんな怖いメッセージが！！さらされるのかよ！！

追い討ちをかけるように開いているIEの各ウインドウに警告がでます。。。

FireFoxやXP+IE6では問題なかったですがIE7のシェアって
高いですよね。いい方法がないもんですかね。

現状では問題はありますが、面白そうなので、色々調査改良してみます。

追記：XP+IE7では保護モードがなかったので上手くできてました。

で、今回ですが、前からやりたかったんですがなかなか手をつけられずにいた自動化ツール、
「基本部分オーサリングの自動化」です。
Webのお仕事ではPhotoShopでデザインデータ作られることが多いかと思います。
PhotoShopからPNGデータを書き出して、flaに読み込んでといった作業でありますが、
これらは下準備のようなものですが結構時間がかかります。
本当はロジックや演出を考える時間が欲しいのに・・・。

PhotoShopはJavaScriptでコマンドを実行することが出来ますが、
同じようにFlashもJavaScriptでコマンドを実行することが出来ます。知ってのとおりJSFLです。
今回はPhotoShopJSとJSFLを利用して基本的な部分のオーサリングを自動化してしまおうと。

まずは以下のファイルをダウンロードしてください。

knockknock090414.lzh

基本部分オーサリング自動化.jsxbin　：　PhotoShopJS
基本部分オーサリング自動化.mxp　：　Flash拡張ファイル（ダブルクリックで拡張可能）
※今回の自動化実行環境はCS4以降となります。

使用方法

１）　PhotoShopのデザインデータを整理します。

デザインデータはサンプルとしてこんな感じ。
大切なのはPSDのレイヤー情報の整理です。以下のように整理します。

このレイヤー情報がflaに反映されますので、ここでflaのMovieClipの階層を意識して整理します。

PhotoShopからはレイヤーグループ名、とレイヤー名を元に、
クラスファイルとPNGファイルが作成されます。

レイヤーグループはflaではグループ以下のオブジェクトを内包するMovieClipになります。
クラスファイルではパッケージが作成され、パッケージ直下にメインとなるクラスが作成されます。

レイヤーは接頭にオプション文字を置くことで、生成され方が変わります。
オプション文字は以下の通りです。
・「*」　：　MovieClip
・「-」　：　GraphicSymble
・「MC_」　：　MovieClipを継承したクラスをリンケージしたMovieClip
※オプションを何も記述しない場合は「MC_」と同じになります。

以下の注意点があります。
・同じレイヤーグループ内に同一名称の名前のものは置かないでください。
（※オプション文字を含まず）
・レイヤーグループとレイヤーのオプション「-」以外は名前に半角英数以外は使用しないでください。
また頭文字に数字は使えません。

２）　PhotoShopJSの実行

メニューの「ファイル > スクリプト > 参照」でダウンロードした「基本部分オーサリング自動化.jsxbin」を実行してください。
以下のダイアログが開きます。

・　PNGファイルを書き出す　：　レイヤー名を元にpngを作成します。
・　layout.textを書き出す　：　flaファイルにレイアウトするためのテキストデータ。
（※これがないとJSFLは実行できません。）
・　ActionScriptファイルを書き出す　：　レイヤーグループ名とレイヤ名を元にasファイルを書き出します。
・　プロジェクト名（半角英）　：　クラスパッケージを作成する際やライブラリを整理する際に使用します。（※必須項目）
・　著者　：　クラス内部にauthorを記述します。
・　デフォルトで非表示　：　クラス内部コンストラクタに「visible = false」を記述します。
（※ロジックがない状態でいっぺんにクラスファイルと表示オブジェクトが展開されるので、とりあえず非表示にしておかないと編集が困難になります。）

PSDファイルと同階層に同じ名前でファイル一式が作成されます。

「classes」の中にクラスファイルが作成され、「materials」の中にpngファイルが作成されます。
同じ様な階層構造でしまわれるので、後の更新作業もやりやすくなります。

今回作成されるクラスファイルは、レイヤーグループとオプションに「MC_」をつけたレイヤー。
クラスの頭に「MC_」がつくのはMovieClipとクラスが1対1になっている場合につける
弊社での決まり事にならったものです。弊社仕様ですいません。

自動で書き出されたクラスのサンプルです。静的配置したものに関してはpublicで宣言され、
クラスに紐づくものはクラスファイルがimportされます。

３）　layout.txtをコピーする

今度は書き出した情報をJSFLで利用するためにPhotoShopから書き出された
layout.txtをコピーします。layout.txtは「materials」ディレクトリにあります。

テキストエディタで開いて「ctrl + a」、「ctrl + c」ですべてのテキストをメモリ上にコピーします。

４）　flaファイルの初期設定をする

自動配置するためのflaを新規で作成します。
ステージサイズを調整して、パブリッシュ設定をして保存します。
どこに保存してもかまいませんが、先ほど書き出したファイル一式が近い方が、
後々便利かと思います。

「リソースパス」をPhotoShopより自動で書き出されたclassesに設定します。
ここで重要なのですが「ステージのインスタンスを自動宣言」のチェックを外してください。
基本的に静的配置されたオブジェクトはクラス上に自動ですべて宣言されます。

５）　JSFLを実行

実行の前に「基本部分オーサリング自動化.mxp」をダブルクリックで、
拡張機能をインストールしておいてください。
ファイルメニューの「コマンド > 基本部分オーサリング自動化」で自動化を実行します。

「基本部分オーサリング自動化」ダイアログが開きます。
・　layout.as　：　先ほどコピーしたlayout.asの内容をペーストします。
・　プロジェクト名　：　PhotoShopの自動処理時に設定したプロジェクト名と同じものを入力してください。
・　リンゲージ　：　書き出されたクラスファイルへリンゲージを設定します。
・　ActionScriptレイヤー　：　MovieClipの一番上のレイヤーにActionScript用の空のレイヤーを作成します。
・　ActionScriptレイヤー名　：　レイヤー名を指定します。

次に「layout.textを選択してください」ダイアログが開きますので、layout.textを選択してください。
書き出したファイルとの位置関係を把握させるために選択が必要となります。

６）　パブリッシュ

アイテム数によってはしばらく処理に時間がかかりますが、処理が完了するまでまってください。
500アイテム程度までは試したことがあります。

完了しました。こんな感じです。

あとはパブリッシュして完了ですが、PhotoShop自動化処理時に「デフォルトで非表示」にチェックを入れていると、
すべてのクラスのコンストラクタに「this.visible = false」が挿入されるので何も表示されません。

あとはロジックを埋め込みながら関連するクラスの「this.visible = false」を削除しながら作業することとなります。
もしくはFlash自動化処理時に「リンゲージ：追加しない」を選ぶことでリンゲージを後で自分で設定することもできます。

以上が主な流れになります。

このように機械的な流れをなるべく自動化することにより、あまった時間を演出やロジックにあてることができますが、
今回の利点はそれだけではなく、同じツールで自動化することで、頭で考えなくとも、
自動で同じルールにのっとって構築することができることです。
仕事となれば複数人数で作業することが多いかと思います。
もしくは、何かしらの理由で引き継ぐ必要があったり、休みのときに緊急作業の依頼が来たり・・。
構築が個人に依存するようだと、やはり個人に負担がかかるのは目に見えてきます。

それを回避するために必要なのはルール決めだと考え、弊社では色々と模索していますが、
このツールがその役に立ればと思っています。

まあ、堅い話は抜きにして、まだ作成したばっかなのでデバッグもろくにしていません。
今後バージョンアップを重ねていく予定です。

次回も何かしらご紹介していきますのでお待ちください。

private function _enterFrameAction(e:Event):void {
	_nowBmp.draw(_nextBmp);
	_nowBmp.draw(_video, null, null, BlendMode.DIFFERENCE);
	_nextBmp.draw(_video);
	
			
	_nowBmp.threshold(_nowBmp, _rect, _point, "<=", 0xFF333333, 0xFF000000);
	_nowBmp.threshold(_nowBmp, _rect, _point, "!=", 0xFF000000, 0xFFFFFFFF);
}

ちょっとサンプルをアップデートしました。
内容はアプリを立ち上げると
タスクバーやドックのアイコンから見られます。
まずはインストールしてみてください。

今回は本にも書いた注意点。
AIR作成時には以下の注意が必要です。

・NativeWindowの最小は123x34
（これ以上小さく指定しても小さくならない）
・HTMLLoaderでswfを表示するにはNativeWindowInitOptionsのtransparentはfalse
（trueにするとswfが表示されない）

こんな微妙な制限があります。

関連記事

>プロとして恥ずかしくないActionScript 3.0の大原則
>クリップウィンドウ　その一

TweenerTester.lzh

Timeにトゥイーンアニメーションの時間を設定（デフォルトは1秒）して、
確認したいトランジションのサムネイルボタンをクリックすると、
画面上部のオレンジ色のボールが移動します。
あくまでトランジションの雰囲気の確認なのでプロパティの変化はyのみです。

結構昔に作ったんですが、いまだに重宝してますんで紹介しました。
次期バーションとして複数のコマンドとプロパティも設定出来るように考えてます。

話を戻しまして、Flashは相変わらずSEOに弱いので、肝心の記事の部分はHTMLにしました。ということは分かりますよね？
このHTMLは現在はあまり見られないフレームを使っています。
右フレーム記事のタイトル部分と左フレームのナビ部分がFlashでできています。

左右のフレームの背景色を合わせたり、右フレームのタイトルのブックマークボタンから左のナビのブックマークに反映させるためにFlashのLocalConnectionを使用しています。

背景色も右フレームのロード後に左フレームに色情報を送信しているのですが、１回目でうまくいかなかったときのために、ENTER_FRAMEで何度も送っています。左フレームが正常に色替えをした後、右フレームに送り続けるのをやめさせるよう、送信します。
普通これでうまくいくのですが、複数のウインドウを立ち上げたときに挙動がおかしくなってしまいます。LocalConnectionの同じコネクション名で送信しているため、ウインドウ１の右フレームから、ウインドウ２の左フレームに送信してしまう事態に陥るのです。

そこで、インデックスのHTMLのjavascript上で変数を作成し、それを左フレームのナビと右フレームのタイトルにFlashVarsとして付与します。
その変数は、MathクラスのrandomでもDateクラスのgetTimeでも構いません。
後者の方が被りづらいということで選択しました。
その名前をコネクション名として、LocalConnectionを使用した場合、１ウインドウで１コネクションということになりますので、他のウインドウを起動した場合も元ウインドウ間のコマンドの受け渡しを干渉しないようにすることに成功しました。

結構、LocalConnectionって大変ですね...普段やらないのでチョット苦労しました。

AIRはアプリケーションなので
当然インターネットに繋がらない環境もありうる。

ということで
流れは以下である。

1.回線チェック
　↓OK　　　　　　　　　　→NG　通常表示
2.バージョンデータロード
　↓OK　　　　　　　　　　→NG　通常表示
3.バージョンチェック
　↓アップデート有り　　　　　　　　　　→なし　通常表示
4.アップデートするしない確認
　↓する　　　　　　　　　　→しない　通常表示
5.アップデート

private var _monitor:URLMonitor;//通信モニター

//通信チェック
private function checkHttp():void {
	this._monitor = new URLMonitor(new URLRequest("http://www.adobe.com"));
	this._monitor.addEventListener(StatusEvent.STATUS, announceStatus);
	this._monitor.start();
}
//通信監視
private function announceStatus(e:StatusEvent):void {
	if (this._monitor.available) {
		//バージョンデータロードへ
	} else {
		//通常表示へ
	}
}

private var _versionXML:XML;

public function loadXml():void {
	var ran:uint = Math.floor(Math.random() * 10000000000);
	var loader:URLLoader = new URLLoader;
	loader.addEventListener(Event.COMPLETE, completeHandler);
	loader.addEventListener(IOErrorEvent.IO_ERROR, errorHandler);
	loader.load(new URLRequest("version.xml?" + ran));
}
//ロードエラー
private function errorHandler(e:IOErrorEvent):void {
	//通常表示へ
}
//ロード完了
public function completeHandler(e:Event):void {
	this._versionXML = new XML(e.target.data);
	//バージョンチェックへ
}
//バージョン
public function rVersion():String {
	return this._versionXML.version.@latest;
}

<?xml version="1.0" encoding="UTF-8" ?>
<clipWindow>
	<version latest="1.0" />
</clipWindow>

private var _update:UpdateClass;//アップデートウィンドウ
private var _appVersion:String;//現在のバージョン
private var _newVersion:String;//新しいバージョン

//バージョンチェック
private function checkVersion(e:Event):void {
	var appXml:XML = NativeApplication.nativeApplication.applicationDescriptor;
	var ns:Namespace = appXml.namespace();
	this._appVersion = appXml.ns::version[0];
	this._newVersion = this._versionData.rVersion();
	if (this._newVersion != this._appVersion) {
		this._update = new UpdateClass(this._appVersion, this._newVersion);
		this.addChild(this._update);
	} else {
		//通常表示へ
	}
}

private var _airLoader:URLLoader;

//ダウンロード
private function downloadAirFile(e:MouseEvent):void {
	this._airLoader = new URLLoader();
	this._airLoader.dataFormat = URLLoaderDataFormat.BINARY;
	this._airLoader.addEventListener(IOErrorEvent.IO_ERROR, errorHandler);
	this._airLoader.addEventListener(Event.COMPLETE, downloadAirFileCompleteHandler);
	this._airLoader.load(new URLRequest("clipWindow.air"));
}
//ダウンロードエラー
private function errorHandler(e:IOErrorEvent):void {
	//エラー表示
}
//アップデート
private function downloadAirFileCompleteHandler(e:Event):void {
	var airFile:File = File.applicationStorageDirectory.resolvePath("clipWindow.air");
	var fs:FileStream = new FileStream();
	fs.open(airFile, FileMode.WRITE);
	fs.writeBytes(this._airLoader.data);
	fs.close();
	var updater:Updater = new Updater();
	updater.update(airFile, this._newVersion);
}

以上、チェックが面倒だが
今後を考えると入れておくべきである。

 
業務が込んでいる等の言い訳をたくさん作りながら？構想から9ヶ月以上も経ってしまいましたが、公開までできて一安心です。

AIRGRAPHに何度か投稿させていただいたのですが、これからはこちらで実験的なコトを書かせていただきます。
またあのイラストのヤツか...と覚えていただいている方もこれからもよろしくお願いします。

私はFlashで仕事をしているのですが、今年はAIRとかiPhoneアプリとか、Android等、他のことにも挑戦したいと思います。
プライベートでもやりたいですが、１人でできることは限界があるので、どれかに絞りたいなと思います。
幸い、後輩のchikathreesix君はiPhoneアプリにやる気を見せているので、やる機会があれば、教えてもらいつつ何か面白いものが作れれば嬉しい限りですね。

実験的なものをつくりつつ、Flashを覚えたい人用の教室的な記事も書こうと考えています。

なのでFlashをあまり知らない人、Flashをこれから上達させたい人も、ご期待ください。

関連記事

>プロとして恥ずかしくないActionScript 3.0の大原則
>クリップウィンドウ　その二

ActionScriptのエディターとしてFlashDeveloperが代表的ですが、私はEmEditorを使っています。
多分UAでも数少ないコアユーザーです。。
当然ながら、FlashDeveloperほどActionScriptに特化した機能はないですが、エディターとして
純粋に好きで使っていますｗ。

別にEmEditorだから出来る！というわけではないですが、強調文字の設定はコダワリがあります。
（↓は実際の表示画面）

強調文字を設定できる構文ファイルをアップしたので興味のある方はお試しあれ。

⇒ActionScriptのEmEditorの構文ファイル

設定の仕方

• ダウンロードしたactionscript.lzhを解凍すると以下2つのファイルがあります。
  1. actionscript.ESY
  2. actionscript.eetheme
• とりあえず自分のASファイルをEmEditorを開きます。
• [ツール]⇒[設定の選択]⇒[設定の定義]
• [設定の定義]ウィンドウが開いたら[新規作成]⇒[規定の設定を使用]にチェックして[OK]
• 名前を適当に入れてください（例えば「actionscript」など）。
• 作成した設定を選択して[プロパティ]を開きます。
• [強調（1）]タブを選択して先ほどダウンロードした「actionscript.ESY」をインポートしてください。
  （↓こんな感じ）
  
• 次に[表示]タブを選択してテーマをインポートします。
  ※既に自作テーマを設定されている方はactionscript.eethemeの[ActionScript]部分だけを追加してください。
  

これで出来上がりです。
後は[単語補完] プラグインを使うとFlashの「コードヒント」のように補完できたりするので便利ですよ。

案外知られていないの機能ですがPhotoshopでスクリプト使用することができます。
使用できるスクリプトはVBScript、AppleScript、JavaScriptの３つがあります。
その中でもWindowsとMACの両方で対応できるJavaScripを使っていわゆるバッチ処理を行わせたいと思います。

今回はPhotoShopからFlash用の素材としてのPNGを書き出すスクリプトです。 

knockknock090331.lzh

使用方法

1. まず、PhotoShopで以下のようにグループ、レイヤーを整理してそれぞれ名前を付けます。
   
   
   
2. 次に、書き出したいPhotoShopをアクティブにした状態でJavaScriptを実行します。
   実行方法は、ファイル＞スクリプト＞参照
   実行途中「マージン」を設定することで画像の端に透明ピクセルを設けることができます。
   
   
   
3. 自動処理が完了するとPSDと同階層にPSD名と同名のディレクトリが作成されます。
   
   
   
4. 書き出し結果は以下のようにPSD内のグループがディレクトリに、レイヤーがPNGファイルに書き出されます。
   
   
   

といった流れになります。

書き出す用にPSDファイルを整理する必要はありますが、
いっぺんに書き出せるのはとても便利だと思いますので是非ご活用ください。

次回も何かしらご紹介していきますのでお待ちください。

public class LoaderTest extends Sprite 
{
	private var _loader:Loader;
	private var _img:DisplayObject;
		
		
	public function LoaderTest() {
		_loader = new Loader();
		_loader.contentLoaderInfo.addEventListener(Event.COMPLETE, _loadedImg);
		_loader.load(new URLRequest("sample1.jpg"));
			
			
		var timer:Timer = new Timer(3000, 1);
		timer.addEventListener(TimerEvent.TIMER_COMPLETE, _completeAction);
		timer.start();
	}
		
		
	private function _loadedImg(e:Event):void
	{
		_img = _loader.content;
		addChild(_img);
	}
		
		
	private function _completeAction(e:TimerEvent):void {			
		_loader.load(new URLRequest("sample2.jpg"));
	}
}

private function _loadedImg(e:Event):void
{
			
	_img = _loader.content;
	_loader.unload();
	addChild(_img);
}

public class Loader extends DisplayObjectContainer{
	...
	public load(request:URLRequest, context:LoaderContext = null):void 
		if(this.content != null && this.contains(this.content)) this.removeChild(this.content);
		...
	}
}

private function _loadedImg(e:Event):void
{		
	_img = _loader.content;
	addChild(_img);
	_loader.unload();
}

private function _loadedImg(e:Event):void
{	
	_img = _loader.content;
	addChild(_img);
			
	try {
		loader.unload();
	}catch (e) {
	}
}

「第4章　ActionScript 3.0によるWebコンテンツ」の
「4-4 AIRのHTMLレンダリングを使ったガジェット」です。

この前のAdobe MAXでも
おされまくっていたAIRですが
基本的な作り方から、配布の仕方まで
一通りおさえてあります。

特に自分のところにお金が入るわけではないですが
皆さん買ってください!

>プロとして恥ずかしくないActionScript 3.0の大原則

関連記事

>クリップウィンドウ　その一
>クリップウィンドウ　その二

色々書きたいことが溜まっていますが、最近感じたことから。

■グローバル・モディファイア

MovableTypeには数多くの『グローバル・モディファイア』が存在しており、テンプレートタグの中で属性として配置することで、テンプレート構築を色々と手助けしてくれます。

▼参考リンク：グローバル・モディファイアリファレンス

中でも多く使用されるのが

• replace
• setvar

あたりでしょうか。
replaceモディファイアについて言えば

<mt:EntryLink replace="foo","bar" />
  

といった使い方が可能なので、

<mt:EntryLink replace="http://ua-labo.com/","/" />
  

のようにリンク記述をフルパスから、ドキュメントルート基準のパスに変更できたりします。
一見するとかなり地味なことに思えますが、ステージングサーバにMovableTypeが設置されていて、最終的にサーバ間で差分ファイルのみを引き渡して表示させる場合に無駄な処理を入れることなく記述を変更することができます。

中には『URLの表示をフルパスから変換する』という名目でAbs2Relだったりとか、MTTruncateURLといった優秀なプラグインが配布されていて、URLのリプレイスだけであればreplaceモディファイアを使用する必要が無かったりもします。

ただし、インデックステンプレート／アーカイブテンプレート／テンプレートモジュールと横断した形でお互いが依存したテンプレート構造且つ、再構築のタイミング次第でうまくリプレイスが行われなかったりした場合等に最終手段としてreplaceモディファイアを使用することがあります。

というかつい先日、まさに同様の処理を行う必要があったのでまぁ覚書程度に。

ここまでだと単純にURL置き換えだけにしか使えないようにも思えますが、むしろ使用方法としては前述のパターンはあくまでも局地的というか、実際には

• 置換リストを変数群としてテンプレートモジュール辺りで保持しておいて、一斉トンマナ置換
• 正規表現との組み合わせによってコードの一貫性を保つためのフィルタ

辺りをカスタマイズ次第で実装することができる、非常に強い味方と言えるのではないでしょうか。

とはいえコレに頼りすぎてると思考のゆとり化が進んでしまって、『テンプレート構築ってレベルじゃねーぞｗｗｗｗｗ』ってことになるので、あくまでも正攻法で組むことを考えつつ、方法論の一つとして考えておくのが吉かと。

setvarモディファイアについて言えば4.1以降でそのまんま、

<ul>
<mt:Entries lastn="5" setvar="last5">
<li><mt:EntryLink /></li>
</mt:Entries>
</ul>
  

こんなに短く書けますよ、っていうことで少しでもテンプレートのコードを短くキレイにアーバンな感じに整えてくれます。

とまぁ色々書いてきましたけれども、MovableTypeについてはこれからあまり多く書いていく心算はなく、どちらかと言えばFlash（ActionScript）にチャレンジしていきたいなと考えているわけです。

というわけで皆さん、よろしくお願いいたします。