RunをクリックするとSource Codeに記述したコードが実行され、実行結果がOutputへ出力されます。場合によっては（というかPreset Codeでは Hello, World! 以外全て）入力待ち状態になるのでその際はInputに要求された文字列もしくは数値を入力してSendをクリックします。

Whitespace？なにそれおいしいの？
Whitespaceは簡単なプログラミング言語です。ただし見えないことを除いては。なぜならばWhitespaceのソースコードは半角スペース、タブ、改行のみで構成されているからです。それ以外の文字は全てコメントとして扱われます。

ちなみに、公式サイトに掲載されているHello Worldのソースです。なんだろうこのドヤ感。
» Hello World

スタックマシンとしての動作と文法
Whitespaceは記憶領域としてスタック、ヒープというものを使います。ASで言うならばスタックはArray、ヒープはObjectと言ったところでしょうか。スタックは値を一番上に積み上げるか、一番上から取り出すことしかできませんし、値を見るだけでもいちいち取り出さなければいけません。ヒープは任意のラベル（アドレス）に値を保存したり、保存しておいた値を取り出しすことができます。

//スタックのイメージ
stack.push(value);           //値の積み上げ
var value:int = stack.pop(); //値の取り出し

//ヒープのイメージ
heap[address] = value;         //値の保存
var value:int = heap[address]; //値の取り出し

ソースコードは処理命令の羅列となっているので、Whitespaceはソースコードの最初から順番に処理命令を読み取りながら、スタックとヒープを操作してプログラムを実行していきます。ひとつの処理命令は「IMP + コマンド + パラメータ」のセットになっています。それぞれの役割は次のようになっています。

• IMP ･･･ Instruction Modification Parameterの略で、処理命令の大まかなカテゴリを表します（AS的にはパッケージのようなものです）。
• コマンド ･･･ 処理命令の具体的な種類を表します（AS的にはメソッドのようなものです）。
• パラメータ ･･･ コマンドを実行するための引数です。コマンドによっては無い場合があります。

それぞれの具体的なコードは以下で解説されているので、心の目で見るといいと思います。
» Whitespace基礎文法最速マスター

ソースコード
こちらからダウンロードして自由に使ってください。496行目辺りからインタプリタのクラスが記述してあります。本当は正規表現でスマートにやりたかったんですけど、汚くなっちゃいました。

サンプル
ご覧いただければ何が目的のライブラリなのか、だいたい分かると思います。

ダウンロード
» 通常版はこちら
» BoundaryResizer.asファイルのみ （拡張子をasに変更してください）

使い方
コードはこんな感じで。

var bmp:Bitmap = ...
var target:Rectangle = bmp.bitmapData.rect;
var boundary:Rectangle = new Rectangle(50, 50, 300, 300);
var scaleMode:String = BoundaryResizer.NO_BORDER;
var align:String = BoundaryResizer.TOP_LEFT;
var resized:Rectangle = BoundaryResizer.resize(target, boundary, scaleMode, align);
bmp.x = resized.x;
bmp.y = resized.y;
bmp.width = resized.width;
bmp.height = resized.height;

BoundaryResizer.resizeメソッドの引数はこんな感じで。

• target:Rectangle ･･･ 第1引数。リサイズ対象オブジェクトの矩形を指定します。上の例ではリサイズしたい画像の矩形となります。
• boundary:Rectangle ･･･ 第2引数。リサイズの基準となる矩形を指定します。上の例ではリサイズ後の画像を収める枠となります。
• scaleMode:String（省略可） ･･･第3引数。 リサイズ時のスケールモードを指定します。このパラメータはStageScaleModeと互換性があります。このパラメータを省略した場合はBoundaryResizer.NO_SCALEとなり、リサイズはおこなわれません。
• align:String（省略可） ･･･ 第4引数 。boundaryに対するtargetの基準位置を指定します。このパラメータはStageAlignと互換性があります。このパラメータを省略した場合はBoundaryResizer.CENTERとなり、縦横ともに中央揃えとなります。
• 戻り値:Rectangle ･･･ リサイズ後の矩形が返されます。target及びboundaryは変更しません。

リサイズ方法を操作するscaleModeには以下の定数を指定できます。

// targetとboundaryが完全に一致するようにリサイズされます。多くの場合、targetの縦横比は保たれません。
BoundaryResizer.EXACT_FIT

// targetが縦横比を保ち、かつtargetがboundaryの内側にフィットするようにリサイズされます。targetがトリミングされることはありませんが、上下または左右に隙間ができることがあります。
BoundaryResizer.SHOW_ALL

// targetが縦横比を保ち、かつboundaryがtargetの内側にフィットするようにリサイズされます。targetとboundaryの間に隙間ができることはありませんが、targetがトリミングされることがあります。
BoundaryResizer.NO_BORDER

// リサイズがおこなわれず、alignによる基準点合わせのみがおこなわれます。
BoundaryResizer.NO_SCALE

リサイズ後のオブジェクトの基準点を操作するalignには以下の定数を指定できます。

BoundaryResizer.TOP_LEFT     // x軸方向:左　, y軸方向:上
BoundaryResizer.TOP          // x軸方向:中央, y軸方向:上
BoundaryResizer.TOP_RIGHT    // x軸方向:右　, y軸方向:上
BoundaryResizer.LEFT         // x軸方向:左　, y軸方向:中央
BoundaryResizer.CENTER       // x軸方向:中央, y軸方向:中央
BoundaryResizer.RIGHT        // x軸方向:右　, y軸方向:中央
BoundaryResizer.BOTTOM_LEFT  // x軸方向:左　, y軸方向:下
BoundaryResizer.BOTTOM       // x軸方向:中央, y軸方向:下
BoundaryResizer.BOTTOM_RIGHT // x軸方向:右　, y軸方向:下

追記 09.10.08
・多少最適化しました。以前のバージョンをお使いの方はBoundaryResizer.asを入れ替えて頂ければ大丈夫です。
・wonderflのサンプルを更新しました。

追記 09.10.22
・使い方のサンプルコードに間違いがあったので修正しました。

» SimpleXMLLoader.as （拡張子をasに変更してください）

例をどうぞ。使い方としては、loadメソッドにオプションとして文字コードを指定できようになっただけで、他は変わっていません。なお、エラー処理付きのサンプルは先日のエントリに載せています。

//Shift-JISで書かれたxmlを読み込む
var loader:SimpleXMLLoader = new SimpleXMLLoader();
loader.onLoadComplete = onLoadComplete;
loader.load("shift-jis.xml", SimpleXMLLoader.SHIFT_JIS);

function onLoadComplete(xml:XML):void {
  trace(xml + "を読み込みました。ね？簡単でしょ？");
}

動作確認済みの4種類の文字コード(左)と、第2引数への指定の仕方（右）を以下に示します。引数省略時はUTF-8で読み込みます。
UTF-8 ･･･ SimpleXMLLoader.UTF_8
Shift-JIS ･･･ SimpleXMLLoader.SHIFT_JIS
EUC-JP ･･･ SimpleXMLLoader.EUC_JP
JIS ･･･ SimpleXMLLoader.JIS

これ以外の文字コードは動作確認していませんが、Adobe ActionScriptリファレンス『サポートする文字セット』の文字コードであれば大丈夫だと思います、多分。

上記リファレンスの文字コードをミスタイプしそうだったり、文字列を直接書くのはどうなのという僕のような人のために、指定文字列をstatic変数化して1にまとめたCharsetクラスを作りました。アラビア語のxmlを読み込むときには、Charset.ASMO_708 を第2引数に指定してください。読み込めるかも知れません。

» Charset.as （拡張子をasに変更してください）

それでは、今回のバージョンアップ箇所まわりの中身がどうなっているのかを軽く解説しておきます。
まずFlashの特性として、検出したテキストを全部Unicodeとして見なしてしまうために、UTF-8以外の2バイト文字は化けてしまいます。
じゃあAS2時代よろしく System.useCodePage = true; すればいいじゃないかと思えば、今度はxmlデータの末尾にゴミが入ったりすることがあります。テキストの中身が組み変わったりすることもあるようで、あまり良くないようです。AS2のときはうまくいってたのに残念です。

結局どうしたのかというと、ByteArrayを使いました。バイナリデータを扱うアレです。ByteArrayには、指定した文字コードのバイナリ列をutf-8へとエンコードしながら読み出すというreadMultiByteメソッドがあるのでこれを使います。そのためには、まずURLLoaderの読み込みデータフォーマットをバイナリで指定しなければなりません。

具体的には、読み込み時には下記のようにURLLoaderクラスのdataFormatプロパティをURLLoaderDataFormat.BINARYで指定します。

var loader:URLLoader = new URLLoader();
loader.dataFormat = URLLoaderDataFormat.BINARY;
loader.load(new URLRequest("shift-jis.xml"));

そして、読み込み完了時に一度データをByteArrayに格納した後にreadMultiByteメソッドでUTF-8として読み取ります。下記の例ではShift-JISからUTF-8へエンコードしながらテキストを読み出しています。実装したコードよりもちょっとだけ丁寧に書いてます。

var ba:ByteArray = loader.data as ByteArray;
var utf8Str:String = ba.readMultiByte(ba.length, "shift-jis");
var xml:XML = new XML(utf8Str);

これでOK。

･･･かと思いきや、このreadMultiByteメソッドもバグ持ちで、EUC-JPを上手く読み込めません。おいおい。。。
そこで、クデラボ -KudeLab-さんが作られたEUC-JP→UTF-8変換ライブラリ『JCode.as』を使わせていただきました。ありがとうございます！

var ba:ByteArray = loader.data as ByteArray;
var utf8Str:String = Jcode.EUCtoUTF8(ba);
var xml:XML = new XML(utf8Str);

最終的な処理の流れとして、ちょっと分岐が不細工なのですが以下のようになりました。
1．UTF-8ならそのままテキストデータとして読み込む
2．EUC-JPならバイナリで読み込んだ後にJCode.asを使ってUTF-8テキストに変換
3．それ以外ならバイナリで読み込んだ後にreadMultiByteメソッドでUTF-8テキストに変換

このプロセスはxml以外のプレーンなテキストの読み込みにも使える話だと思うので、UTF-8以外のテキストを扱いたい方の参考になれば幸いです。

今回のプロジェクト一式はこちらです。
» Download

ちなみに先日のエントリでアップしたのプロジェクト内のSimpleXMLLoaderクラスも最新バージョンににすり替えています。

追記 09.07.31
無駄な処理が紛れていたので修正しました。

//修正前
var ba:ByteArray = new ByteArray();
ba = loader.data as ByteArray;

//修正後
var ba:ByteArray = loader.data as ByteArray;

» DelayExecutor.as （拡張子をasに変更してください）

以下の例は、全て3秒後にtrace(“完了！”)を実行します。
　
(1) new DelayExecutor()でインスタンスを生成して実行する

var exe:DelayExecutor = new DelayExecutor(func, 3000);
exe.start();

function func(executor:DelayExecutor):void {
  trace("完了！");
}

　
(2) インスタンスを生成後に、コールバック関数と遅延時間を設定して実行する

var exe:DelayExecutor = new DelayExecutor();
exe.onComplete = func;
exe.delay = 3000;
exe.start();

function func(executor:DelayExecutor):void {
  trace("完了！");
}

　
(3) インスタンス生成から実行までを、static関数を使って1行で繋げる

DelayExecutor.register(func, 3000).start();

function func(executor:DelayExecutor):void {
  trace("完了！");
}

　
(4) 無名関数を使った、さらなる省略形

DelayExecutor.register(function(executor:DelayExecutor):void {
  trace("完了！");
}, 3000).start();

内部的にaddEventListenerしたものは、タイマー完了時に全てremoveEventListenerしています。

また autoClear = true; とすれば、タイマー完了時に onComplete = null; が実行されます。上記のように、タイマーを再利用しない場合には autoClear = true; とすることをお勧めします。autoClearはコンストラクタやregisterの第3引数でも設定可能であり、デフォルトでtrueです。

ただし、あらかじめ autoClear = false; としておけば以前設定したonCompleteを再設定せずにタイマーを再実行することができます。次の例のように無名関数と組み合わせる場合に有効かも知れません。次の例では autoClear = false; とした上で遅延時間を3秒後、5秒後、7秒後・・・と増やしながら無名関数を実行していきます。
　
(5) autoClear = false で実行関数を再設定せずにタイマーを再利用する

DelayExecutor.register(function(executor:DelayExecutor):void {
  trace("完了！");
  executor.delay += 2000;
  executor.start();
}, 3000, false).start();

autoClear = false; とする場合、またはstop()でタイマーを停止した状態でタイマーが不要になったときには、必ず手動で onComplete = null; としてください。（メモリリークの原因となることがあります。）
　
register()、start()、stop()メソッドは戻り値としてDelayExecutorインスタンスを返すので、タイマーのキャンセルや再利用などに使ってください。

例によって、今回使ったソースファイル一式を置いておきます。
» Download

JPPScrollbar

Just（ただ） Put（置けば） Play（動く） Scrollbar（スクロールバー）
サンプルファイルのライブラリからステージに置けば動いてくれるActionScript3.0製のスクロールバーです。個人的に作っていましたが、割と高機能になったので公開します。

主な機能

• 任意のSpriteやMovieClipをスクロールバーのパーツとしてバインド可能です
• 滑らかな減速スクロールを使用可能です
• コンテンツ量に合わせて縮むスクロールバーを使用可能です
• スライダーの高さを0ピクセルとして扱うことが可能です
• iPhoneのような、スクロールが行き過ぎて戻る演出が使用可能です
• エンドロールのような自動スクロールを実行可能です
• 外部からメソッド呼び出しでスクロールさせることが可能です
• スクロール量など、こと細かく決められます
• スライダーやスクロール対象コンテンツを整数値に吸着できます
• y座標でなくても、任意のプロパティをスクロール可能です
• ライブラリからコピペしなくてもnewして使えます
• SWFWheelを使用しているので大抵の環境でマウスホイールを使えます

などなど色々ありますが、とりあえず目的にかなったサンプルのフォルダからごそっとコピペすれば動くようになっています。もう少し詳しい使い方はSpark Projectのほうに書いてあります。

サンプル

• samples/01 ･･･ コンテンツ量に合わせて伸縮するスライダーを使用した減速スクロールバー（デフォルト）
• samples/02 ･･･ 減速スクロールを使わないスクロールバー
• samples/03 ･･･ iPhoneっぽいスクロールとイベントの使用例 （matsumosさんに作成していただきました）
• samples/04 ･･･ リキッドレイアウトに対応したスクロールバー
• samples/05 ･･･ useIgnoreSliderHeight = true （スライダーの高さを0として扱う）の使いどころ → スライダーの基準点をスクロールエリアの上から下までめいっぱい動かしたいとき
• samples/06 ･･･ 水平スクロールバーのサンプル
• samples/07 ･･･ ASファイルだけで作ったサンプル （matsumosさんに作成していただきました）
• samples/08 ･･･ Papervision3Dのテクスチャに組み込んだサンプル （matsumosさんに作成していただきました）
• サンプルどしどし受付中です！

つーわけでこのJPPScrollbar、ガンガン使ってもらえると嬉しいです。
めんどくさい部分はちゃちゃっと済ませちゃいましょー。

追記 10.05.12　バージョン1.03への移行について
バージョン1.03へのアップデートに伴い、これまでの使い方ではエラーが出るようになりました。詳しくはSparkProjectに追記していますのでそちらをご覧ください。バージョン1.02もダウンロード可能です。

追記 10.07.04　バージョン1.04をリリースしました
MagicMouse使用時の不具合に対処しました。詳しくはSparkProjectに追記しています。

WP-Al-SWFObject
I made the plug-in to embed on the entry of WordPress easily, so it introduces it. This is powerful plug-in for embedding swf on WordPress. It is possible to specify parameters more in detail than WP-SWFObject.

Download
How to use
・How to use (In a location other than the entry)
Control panel
Examples
Version of SWFObject used
License

- Download
>>Download (Enblish)
>>Download (Japanese)

- How to use

1. The wp-al-swfobject folder is created by defrosting downloaded zip, and you up-load the folder to the wp-content/plugins directory of the server.
2. The WP-Al-SWFObject plug-in is made effective from set screen -> plug-in of WordPress.
3. Describe the following codes at the position in which you want to embed swf. Please replace [ /embedSWF] with [/embedSWF].

[embedSWF]swf, width, height, align, version, expressInstall, flashvars, params, attributes[ /embedSWF]

The parameter of the deficit is indispensable, and other parameters is optional (It is possible to omit it).

• swf（indispensable） ･･･ The path to embedded swf
• width（optional） ･･･ The width of swf.  If you omit it, the default value specified on a control panel is used.
• height（optional） ･･･ The height of swf. If you omit it, the default value specified on a control panel is used.
• align（optional） ･･･ The position of swf. You can choose from the “left”, the “right”, or the “center”.
  If you omit it, the value isn’t specified especially.
• version（optional） ･･･ The version of necessary FlashPlayer. It becomes 9.0.0 when omitting it.
• expressInstall（optional） ･･･ The path to express-install-swf. It is displayed when the player doesn’t meet the requirement. SWFObject default “expressInstall.swf” is displayed when omitting it.
• flashvars（optional） ･･･ The flashvars a.k.a the variable that html passes swf. It is described by the format {name1:”value1″, name2,”value2″}.
• params（optional） ･･･ The parameters when swf is embedded is described by flashvars and the same format.
• attributes（optional） ･･･ The attributes on html when swf is embedded is described by flashvars and the same format.

・How to use (In a location other than the entry)
If you want to paste swf to the outside of the entry (For example, header and sidebar), you can call the following php function in where you want to paste swf.

<?php wp_al_swfobject_echo('[embedSWF]swf, width, height, align, version, expressInstall, flashvars, params, attributes[／embedSWF]'); ?>

- Control panel
The default value of each parameter can be set from the plug-in Control panel.
The default value is applied to all swf embedded by WP-Al-SWFObject.
The priority level when the same variable is set in two or more parts becomes the following.

Settings in [embedSWF] tag > {name1:”value1″, name2:”value2″} at Control panel > Supplementary setting in control panel(only params can be set).

It is overwrited by the variable with a high priority level. Moreover, for flashvars and params and attributes, the superscription is judged individually in each variable.

For instance, when the following code is set from Control panel,

aaa:"30", bbb:"50"

flashvars (aaa=”50″, bbb=”30″) is passed to all embedded swf by using WP-Al-SWFObject. Under such a condition, as follows is done and swf is embedded.

[embedSWF]hoge.swf,,,,,,{aaa:"10"}[ /embedSWF]

In this case, because variable aaa is alse specified with flashvars in [embedSWF] tag, the default value is not applied to variable aaa. In a word, this swf will receive flashvars as aaa=”10″, bbb=”50″.

- Example
It embeds without specifying the option (Be set it to 300 in width and 50 in height on the Control panel).

[embedSWF]hoge.swf[ /embedSWF]

Next, width and height are embedded specifying it.

[embedSWF]hoge.swf, 200, 100[ /embedSWF]

Next, it makes to right adjust, and flashvars is passed.

[embedSWF]hoge.swf, 200, 100, right,,,{aaa:"10"}[ /embedSWF]

Next, the id and the name attribute of html are added.

[embedSWF]hoge.swf, 200, 100,,,,{},{},{id:"sample", name:"sample"}[ /embedSWF]

Next, all parameters are specified (Flashplayer 9.0.0 or later is required. When the player version is low, http://hogehoge.jp/alt.swf is displayed. The variable named aaa=10 is passed to swf. The context menu is not given. The connection between html and swf is always permitted. The id and the name attribute of html is sample).

[embedSWF]hoge.swf, 400, 360, center, 9.0.0, http://hogehoge.jp/alt.swf, {aaa:"10"}, {menu:"false", allowScriptAccess:"always"}, {id:"sample", name:"sample"}[ /embedSWF]

- Version of SWFObject used
You can switch the version of SWFObject on COntrol panel (It is 2.1 in default).
It corresponds to version from 1.5 to 2.2. But, Callback method that is the new features included of 2.2, and the attributes of 1.5 cannot be specified at current version.

- license
GPL license. Because WP-SWFObject that is origin of WP-SWFObject is GPL license.

WP-Al-SWFObject
WordPressのエントリにswfを簡単に貼り付けるためのプラグインを作ったので紹介します。WP-SWFObjectよりも細かくパラメータを指定できます。

ダウンロード
使い方
使い方（エントリー以外の場所に貼り付ける）
管理画面
使用例
使用するSWFObjectのバージョン
ライセンス

・ダウンロード
>>Download （英語版）
>>Download （日本語版）

・使い方

1. ダウンロードしたzipを解凍するとwp-al-swfobjectフォルダができるので、フォルダごとサーバのwp-content/pluginsディレクトリにアップロードします。
2. WordPressの設定画面->プラグインから、WP-Al-SWFObjectプラグインを有効化します。
3. エントリー内のswfを貼り付けたい位置に以下のコードを記述します。[／embedSWF]は[/embedSWF]に置き換えてください。

[embedSWF]swf, width, height, align, version, expressInstall, flashvars, params, attributes[／embedSWF]

赤字のパラメータは必須、黒字のパラメータはオプション(省略可能)です。

• swf（必須） ･･･ 貼り付けるswfへのパスを記述します。
• width（省略可） ･･･ swfの幅を指定します。省略するとプラグインの設定ページで指定したデフォルト値が用いられます。
• height（省略可） ･･･ swfの高さを指定します。省略するとプラグインの設定ページで指定したデフォルト値が用いられます。
• align（省略可） ･･･ swfを貼り付ける際の位置を指定します。左寄せ、右寄せ、中央寄せに対してそれぞれleft、right、centerで指定します。省略すると特に指定されません。
• version（省略可） ･･･ 必要なFlashPlayerのバージョンを記述します。省略すると9.0.0となります。
• expressInstall（省略可） ･･･ プレイヤーが要件を満たさない場合に表示するswfへのパスを記述します。省略するとSWFObjectデフォルトのexpressInstall.swfを表示します。
• flashvars（省略可） ･･･ HTMLからflashに渡す変数（flashvars）を、{変数名1:”値1″, 変数名2:”値2″}という形式で記述します。
• params（省略可） ･･･ swfを貼り付ける際のパラメータを、flashvarsと同形式で記述します。
• attributes（省略可） ･･･ swfを貼り付ける際のhtml属性を、flashvarsと同形式で記述します。

・使い方（エントリー以外の場所に貼り付ける）
ヘッダーやサイドバーなど、エントリ以外の場所に貼り付ける場合は、貼り付けたい場所で以下のphp関数を呼び出します。引数として、エントリー内に貼り付ける場合のタグと同様のものをまるごと文字列で渡します。

<?php wp_al_swfobject_echo('[embedSWF]swf, width, height, align, version, expressInstall, flashvars, params, attributes[／embedSWF]'); ?>

・管理画面
WP-Al-SWFObjectは管理画面から各パラメータのデフォルト値を設定できます。
デフォルト値はWP-Al-SWFObjectによって貼られる全てのswfに適用されます。
同じ変数を複数の箇所で設定した場合の優先順位は
[embedSWF]タグ内 > 設定画面の{変数名1:”値1″, 変数名2:”値2″} > 設定画面の補助設定（paramsのみ設定可）
となっており、優先順位の高い変数に上書きされます。また、flashvars、params、attributesに関しては各変数ごとに上書き判定がなされます。

例えば、管理画面からflashvarsの項目に

aaa:"30", bbb:"50"

を設定すると、WP-Al-SWFObjectを使って貼る全てのswfに aaa=”30″, bbb=”50″ としてflashvarsが渡されます。この状態で、以下のようにしてswfを貼り付けます。

[embedSWF]hoge.swf,,,,,,{aaa:"10"}[／embedSWF]

この場合、タグ内でデフォルト値と同名の変数名aaaでflashvarsを指定しているため、デフォルト値は変数aaaに対して適用されません。つまり、このswfは aaa=”10″, bbb=”50″ としてflashvarsを受け取ることになります。

・使用例
オプションを指定せずに貼り付ける（管理画面で幅300、高さ50に設定してあります）

[embedSWF]hoge.swf[／embedSWF]

幅と高さを指定して貼り付ける

[embedSWF]hoge.swf, 200, 100[／embedSWF]

右寄せにしてflashvarsを渡す

[embedSWF]hoge.swf, 200, 100, right,,,{aaa:"10"}[／embedSWF]

htmlのidとname属性を付加する

[embedSWF]hoge.swf, 200, 100,,,,{},{},{id:"sample", name:"sample"}[／embedSWF]

全パラメータを指定する（プレイヤーは9.0.0以上、プレイヤーバージョンが低い場合はhttp://hogehoge.jp/alt.swfを表示、aaa=10という変数をswfに渡す、右クリックメニューを出さない、htmlとswfの通信を常に許可する、htmlのidとname属性をsampleとする）

[embedSWF]hoge.swf, 400, 360, center, 9.0.0, http://hogehoge.jp/alt.swf, {aaa:"10"}, {menu:"false", allowScriptAccess:"always"}, {id:"sample", name:"sample"}[／embedSWF]

・使用するSWFObjectのバージョン
管理画面から切り替えられます（デフォルトでは2.1）。
バージョン1.5～2.2まで対応していますが、現在のところ1.5のattributesと2.2の新機能であるCallback methodは指定できません。

・ライセンス
元にしたWP-SWFObjectがGPLライセンスなのでGPLでお願いします。

追記 09.04.24
使用方法が2エントリに分割されていたので、1つにまとめました。
swfの幅と高さが省略可能となりましたので、それに伴いエントリ内容を修正しました。
プラグインの紹介に特化するため、前段部分の文章（下記のもの）を削除しました。

前回のエントリにも書いたのですが、WordPressにswfを貼り付けるにはWP-SWFObjectプラグインが便利です。が、どうにもparamsとattributeを指定できないようなので、プラグインを自作しました。（WP-SWFObjectでのflashvarsの渡し方はコメント欄でまつもとさんに教えていただきました、ありがとうございます！）

追記 09.05.11
SparkProjectにコミットしました。

追記 09.05.18
英語版エントリを書きました。

追記 09.06.30
v2.1にバージョンアップしました。wp_al_swfobject_echo関数により、エントリー以外の場所でもswfの貼り付けが可能となりました。

第1回、第2回と連載してきた、一体誰が得をするのか分からないこのEseclock改造版の解説シリーズも、今回をもって最後とさせていただきます。最後は、
『時計表示（と下のテキスト）を好きなビジュアルにしよう』
です。でもあまり解説することがないです（ぉぃ

5．時計下のテキスト部分（以下テキスト）を書き換える
これは簡単で、

description = "EBISU / JAPAN"

などとすれば良いです。これでデフォルトの「TOKYU / JAPAN」が「EBISU / JAPAN」となります。恵比寿とした理由は職場が恵比寿だからです。僕の怠慢により、EseclockがaddChildされた後に書き換えないと例外エラーが出るかも知れません。ごめんなさい。
　

6．時計やテキストを好きな形式のTextFieldで表示する
この場合、表示に使用したいTextFieldをもったカスタムクラスを作成する必要があります。

まず、時計やテキストを好きなフォントで表示する場合です。この場合、表示に使用したいテキストフィールドをもったカスタムクラスを作成する必要があります。今回、サンプルではテキストののカスタムクラスをCustomClockFieldクラスとして、Helveticaフォントで表示することにしました。flaファイル内のライブラリに、TextFieldをもったCustomDescriptionFieldというムービークリップがあり、CustomDescriptionFieldクラスに関連づけられています。

そして、CustomDescriptionField.asを見てみると、CustomDescriptionFieldクラスはEseclockDefaultDescriptionTextFieldを継承しているのが分かるかと思います。このEseclockDefaultDescriptionTextFieldクラス（以下デフォルトクラス）は、Eseclockにデフォルトで表示されるテキストを管理するクラスです。

今回のようにデフォルトの表示からの変更点がTextFormatのみの場合、カスタムクラスにデフォルトクラスを継承させるとほとんど何もすることがありません。カスタムクラスのコンストラクタ内で、表示に使用したいTextFieldインスタンスを_fieldプロパティに渡してあげればカスタマイズ完了です。以下、テキスト部分のカスタムクラスです。ソースコードはsample\06に入っています。

package {
    import flash.text.TextField;
    import flash.text.TextFormat;
    import org.libspark.eseclock.textfield.EseclockDefaultDescriptionTextField;

    //時計に使うクラスはEseclockDefaultClockTextFieldを, テキストに使うクラスはEseclockDefaultDescriptionTextFieldをそれぞれ継承させる
    public class CustomDescriptionField extends EseclockDefaultDescriptionTextField {

        //ライブラリのCustomDescriptionFieldシンボルの中に配置してあるTextField
        public var tf:TextField;

        //コンストラクタ
        public function CustomDescriptionField():void {

            //tfというTextFieldインスタンスを表示に使う
            _field = tf;

            //ボールド表示にしてみる
            var fmt:TextFormat = _field.defaultTextFormat;
            fmt.bold = true;
            _field.defaultTextFormat = fmt;
        }
    }
}

>>Sample
　

7．時計やテキストを好きなように表示する
デフォルト表示では例えば「01 23 45」のように、時分秒の間に半角スペースを入れることで時間を1つのTextFieldのみで表示しています。しかし今回は字詰めの関係で時分秒を3つのTextFieldに分けることにしました。このカスタマイズは、デフォルトのTextFieldのtextFormatを変更するだけでは対応できません。そこで、時計部分のデフォルトクラス（EseclockDefaultClockTextFieldクラス）を継承させずにカスタムクラスを作ります。継承させてもいいのですが、この場合ほとんどのメソッドをオーバーライドしないといけないので継承させない方がてっとり早いと思います。。。

実際どうやるかというと、ライブラリのCustomClockFieldというムービークリップに3つのTextFieldを入れて、CustomClockFieldクラスに関連づけておきます。ここで大事なのは、CustomClockFieldクラスにIEseclockTextFieldインターフェースを実装させるということです。

IEseclockTextFieldインターフェースは、カスタムクラスがEseclockの時計もしくはテキストとして振る舞うために、最低限必要なメソッドをまとめたインターフェースとなっており、カスタムクラスは以下のメソッドを実装する必要があります。

・objectWidth、objectHeight メソッド
時計またはテキストの幅および高さを取得するためのgetterメソッドです。

function get objectWidth():Number;
function get objectHeight():Number;

・setColor メソッド
表示オブジェクトの色を変更するメソッドです。
表示オブジェクトを、引数で指定された色へと変更するコードを実装することになります。

function setColor(color:uint):void;

・updateClock メソッド
時計を表示するカスタムクラスの場合、毎秒updateClockメソッドが呼び出されます。
引数としてh（時）、m(分)、s(秒)を受け取れるので、その情報を元に時計を書き換えることになります。

function updateClock(h:uint, m:uint, s:uint):void;

・updateDescription メソッド
テキストを表示するカスタムクラスの場合、テキストが書き換わったタイミングでupdateDescriptionメソッドが呼び出されます。
引数としてmessage（テキストの内容)を受け取れるので、その情報を元にテキストを書き換えることになります。

function updateDescription(message:String):void;

以下、テキスト部分のカスタムクラスです。時計部分を3つのTextFieldに分けています。ソースコードは上記と合わせてsample\06に入っています。

package {
    import flash.display.Sprite;
    import flash.text.TextField;
    import flash.text.TextFormat;
    import org.libspark.eseclock.Eseclock;
    import org.libspark.eseclock.textfield.IEseclockTextField;

    public class CustomClockField extends Sprite implements IEseclockTextField {

        //ライブラリのCustomDescriptionFieldシンボルの中に配置してあるTextField
        public var hours:TextField;
        public var minutes:TextField;
        public var seconds:TextField;

        /**
         * objectWidth, objectHeightは時計全体のサイズを返す
         */
        public function get objectWidth():Number { return seconds.x + seconds.textWidth; }
        public function get objectHeight():Number { return hours.textHeight; }

        /**
         * コンストラクタ
         */
        public function CustomClockField():void
        {
            //それぞれのTextFieldのフォーマットを調整
            var fmt:TextFormat = hours.defaultTextFormat;
            fmt.letterSpacing = -3;
            hours.defaultTextFormat   = fmt;
            minutes.defaultTextFormat = fmt;
            seconds.defaultTextFormat = fmt;
        }

        /**
         * 色を設定する関数
         * @param color 16進数で表された色情報
         */
        public function setColor(color:uint):void
        {
            //それぞれのTextFieldの色を更新
            var fmt:TextFormat = hours.defaultTextFormat;
            fmt.color = color;
            hours.defaultTextFormat   = fmt;
            minutes.defaultTextFormat = fmt;
            seconds.defaultTextFormat = fmt;
        }

        /**
         * 時計表示を更新する関数
         * @param h 時
         * @param m 分
         * @param s 秒
         */
        public function updateClock(h:uint, m:uint, s:uint):void
        {
            //それぞれのTextFieldのtextを更新
            hours.text   = Eseclock.toDigitString(h);
            minutes.text = Eseclock.toDigitString(m);
            seconds.text = Eseclock.toDigitString(s);
        }

        /**
         * テキストを更新する関数
         * @param message 表示文字列
         */
        public function updateDescription(message:String):void
        {
            //CustomClockFieldは時計用クラスなので何も書かなくて良い
            //テキスト用のカスタムクラスを作るときは textField.text = message; などと書く
        }
    }
}

>>Sample（上記サンプルと同じもの）

最後に、時計部分にTextFieldすら使用しないサンプルを置いておきます。基本方針は上述の、TextFieldを3つに増やすカスタマイズと同じです。ライブラリに空のシンボルを作り、CustomClockFieldクラスに関連付けておきます。ソースコードは上記と合わせてsample\07に入っています。
>>Sample

Eseclockは時計の下にテキストが配置されるように、objectHeightを用いて自動でy座標を調整します。上記サンプルでは時計とテキストを常にEseclockの中心に配置したかったので、objectWidthとobjectHeightが0を返すようにしています。こうすることで座標調整はおこなわれず、両インスタンスの原点が常にEseclockの中心に揃うよう配置されるようになります。（インスタンスそれぞれの原点が、時計の中心もしくはTextFieldの中心に無ければなりませんが）。
　

終わりに
3回にわたって書いたEseclockのエントリですが、これで終わりにしたいと思います。いったいどれくらいの人が読んでくれているのかは分かりませんが（笑）、楽しいEseclockライフを送ってもらえればうれしいです。
僕はEseclockばかり考えすぎて、ついUNIQLOで買い物をしてしまいました、1万円分（笑）

質問事項はコメント欄やメールでお気軽にどうぞー(o’c_,`人)・:*:・

前回のエントリに引き続き、今回もEseclockについてです。

テーマはずばり
『改造版Eseclockの使い方』
色々やり方はあると思いますが、ドキュメントクラスにEseclockを継承させる方法を紹介します。誰も使わないかも知れない（ていうかむしろいつ使えるの？）なライブラリをこつこつ紹介するという、なんともストイックな企画です。

0．ライブラリをダウンロードする
SparkProjectはSubversion（以下SVN）というファイル管理ソフトによって全てのプロジェクトが管理されています。まず、このSVNから手元にライブラリをダウンロードする必要があります。詳しくはzyass_takさんのこちらの記事がわかりやすいので参考にしてください。

さて、無事にライブラリを落とし終わって中身をのぞいてみると、いくつものフォルダがあると思います。とりあえず、http://www.libspark.org/svn/をチェックアウトしたものとして、as3\Eseclock\branches\alumican\srcフォルダの中にあるcaurina、org、jpフォルダをコピーして、自分のflaファイルのあるフォルダにペーストします。別階層にペーストする場合には、ライブラリフォルダまでのクラスパスを適宜通しておいてください（CS3の場合は[パブリッシュ設定]->ActionScriptのバージョンの隣の[設定]->クラスパス）。これで準備は完了です。おそらく.svnという隠しフォルダもペーストされたかと思いますが、これは削除していただいて構いません。なお、サンプルはソースコード含めCS3形式でas3\Eseclock\branches\alumican\samplesフォルダに入っています。
　

1．とりあえず動かしてみる
何はともあれ、ドキュメントクラスを作ります。今回はMain.asという名前のクラスを作りました。MainクラスにEseclockを継承させているだけです。サンプルのソースコードはsample\01に入っています。

package {
    import org.libspark.eseclock.Eseclock;

    //Eseclockクラスを継承させる
    public class Main extends Eseclock {

        public function Main():void {
        }
    }
}

>>Sample
ドキュメントクラスとして設定するのを忘れずにパブリッシュすると、白黒の時計の合間に水玉が表示される何とも味気のないUNIQLOCKもどきができるかと思います。これがプレーンな状態ですが、この時点で時計部分の大きさを保ったまま自動でステージにフィットするようになっています。これを元に拡張していきます。
　

2．色を変えてみる
白黒だとつまらないので、ランダムな色のカラフルな時計にします。本家UNIQLOCKを真似して、白黒からランダム色と白色に変えます。Mainクラスのコンストラクタ内で、親クラス、つまりEseclockのコンストラクタを呼び出します。サンプルのソースコードはsample\02に入っています。

package {
    import org.libspark.eseclock.Eseclock;

    public class Main extends Eseclock {

        public function Main():void {
            //1番目と2番目の引数で色を指定する
            super(uint(Math.random() * 0xffffff), 0xffffff);
        }
    }
}

>>Sample
最初の引数と2番目の引数で、テキストと背景の2色を指定できます。ここでは、最初の引数で0から0xffffffまでのランダムな数値を渡し、2番目の引数で固定の白色を渡しています。ちなみに、色はコンストラクタで指定できる他にも、後からcolor1、color2プロパティで変えることができます。
ちょっと華やかなEseclockができました。
　

3．好きな動画を時計の合間に表示する
やはり、UNIQLOCKもどきなるもの、時計の合間には水玉ではなく好きなコンテンツを表示したいです。改造版Eseclockでは、_createContentメソッドをオーバーライドすることでこれを実現できます。_createContentメソッドはコンテンツが表示される直前に毎回呼ばれ、2つの引数wとhを受け取ってDisplayObjectを返します。要は、wとhのサイズ作ったビジュアルをreturnすれば次の瞬間それが表示されるというわけです。サンプルでは、FLVPlaybackコンポーネントを使って動画を再生してみます。動画を何本も用意するのは面倒なので、1本の動画をランダムにシークさせて再生するようにします。

手順は少し複雑です。まず、動画を読み込むまで時間がかかるので、Eseclockを停止しておきます。そして、動画の読み込みが終わった後に、Eseclockをスタートさせます。Eseclock実行中、_createContentが呼ばれる度に動画をランダムにシークして再生させます。そして動画から時計に戻る瞬間に、動画がバックグラウンドで再生され続けないようにFLVPlaybackを一時停止します。

ひとつずつ考えていきます。

>Eseclockを停止しておきます。
EseclockはデフォルトでaddChildされた瞬間にスタートしますが、コンストラクタの第6引数（autoPlay）をfalseに設定することで自動再生させないようにできます。この場合、任意のタイミングでstartメソッドを呼び出すことでEseclockをスタートさせられます。

>Eseclock実行中、_createContentが呼ばれる度に動画をランダムにシークして再生させます。
_createContentメソッド内で、FLVPlaybackをseekしてplayすればいいかと思います。

>動画から時計に戻る瞬間に、動画がバックグラウンドで再生され続けられないように一時停止します。
改造版Eseclockでは、_createContentメソッドの他にもいくつかオーバーライド可能なメソッドが定義されています。その一つが_removeContentで、このメソッドはコンテンツが完全に隠れる瞬間に呼び出されます。このメソッドをオーバーライドして、FLVPlaybackをpauseなどすれば良さそうです。

以上をふまえたサンプルはこちらです。swfファイルと同階層にmovie.flvを置いておいてください。flv含めソースコードはsample\03に入っています。

package {
    import fl.video.FLVPlayback;
    import fl.video.VideoEvent;
    import fl.video.VideoScaleMode;
    import flash.display.DisplayObject;
    import flash.events.Event;
    import org.libspark.eseclock.Eseclock;

    public class Main extends Eseclock {

        //時計の合間に表示するFLVを再生させるFLVPlayback
        private var _flvp:FLVPlayback;

        public function Main():void {
            //自動スタートさせないように第6引数（autoPlay）をfalseにしておく。第3、第4、第5引数はとりあえずデフォルトのまま
            super(uint(Math.random() * 0xffffff), 0xffffff, 640, 320, true, false);

            addEventListener(Event.ADDED_TO_STAGE, _initialize);
        }

        //addChildされるのを待ってから初期化をおこなう
        private function _initialize(e:Event):void {
            removeEventListener(Event.ADDED_TO_STAGE, _initialize);

            //FLVの読み込み
            _flvp = new FLVPlayback();
            _flvp.autoPlay = false;
            _flvp.autoRewind = false;
            _flvp.scaleMode = VideoScaleMode.EXACT_FIT;
            _flvp.addEventListener(VideoEvent.READY, _flvpRedyHandler);
            _flvp.load("movie.flv");
        }

        //動画の再生準備完了時に呼び出されるイベントハンドラ
        private function _flvpRedyHandler(e:VideoEvent):void {
            _flvp.removeEventListener(VideoEvent.READY, _flvpRedyHandler);

            //Eseclockスタート
            start();
        }

        //コンテンツが表示される直前に呼び出されるメソッド
        override protected function _createContent(w:Number, h:Number):DisplayObject {
            //再生開始位置をランダムで選択(動画が途中で終わらないように, 6秒ほど余裕を持たせておく)
            var head:uint = uint(Math.random() * (_flvp.totalTime - 6));

            //EseclockのサイズにFLVPlaybackをフィットさせる
            _flvp.width  = w;
            _flvp.height = h;

            //FLVPlaybackを再生する
            _flvp.seek(head);
            _flvp.play();

            return _flvp;
        }

        //コンテンツが完全に隠れる直前に呼び出されるメソッド
        override protected function _removeContent(content:DisplayObject):void {
            //動画がが裏側で再生され続けないように一時停止処理をかけておく
            FLVPlayback(content).pause();
        }
    }
}

>>Sample
ちょっと長いですが、大半は動画の読み込み処理のコードです。大事なのはコンストラクタのautoPlay、startメソッド、_createContentメソッド、_removeContentメソッドです。ちなみに_removeContentでは引数として表示中のコンテンツを受け取れます。サンプルではこのcontent引数を使ってFLVPlaybackを停止させていますが、この例ではFLVPlaybackをインスタンス変数_flvpとして保持しているので、_flvp.pause();で全く問題ありません。
だんだんそれっぽくなってきました。
　

4．ピッピッピッピッポーン音を付ける
よりそれらしくするために、時報の音（ピッ音とポーン音）を付けたいと思います。どうやらピッ音は秒数の一の位が0以外の時に鳴って、ポーン音は秒数の一の位が0の時になるようです。改造版Eseclockでは、こういった毎秒の処理を簡単におこなうために_tickメソッドをオーバーライドできるようになっています。_tickメソッドは毎秒呼び出され、引数として時分秒を表す3つの引数h、m、sを受け取ることができます。サンプルでは、リンケージされた2つのライブラリのサウンドオブジェクトSound1（ピッ音）とSound2（ポーン音）を使って時報の音を鳴らします。
実際のコードはこちらです。サウンドデータ含めソースコードはsample\01に入っています。

package {
    import fl.video.FLVPlayback;
    import fl.video.VideoEvent;
    import fl.video.VideoScaleMode;
    import flash.display.DisplayObject;
    import flash.events.Event;
    import org.libspark.eseclock.Eseclock;

    public class Main extends Eseclock {

        private var _flvp:FLVPlayback;

        private var _sound1:Sound1; //ピッ音
        private var _sound2:Sound2; //ポーン音

        public function Main():void {
            super(uint(Math.random() * 0xffffff), 0xffffff, 640, 320, true, false);
            addEventListener(Event.ADDED_TO_STAGE, _initialize);
        }

        private function _initialize(e:Event):void {
            removeEventListener(Event.ADDED_TO_STAGE, _initialize);
            _flvp = new FLVPlayback();
            _flvp.autoPlay = false;
            _flvp.autoRewind = false;
            _flvp.scaleMode = VideoScaleMode.EXACT_FIT;
            _flvp.addEventListener(VideoEvent.READY, _flvpRedyHandler);
            _flvp.load("movie.flv");

            //ライブラリのサウンドを割り当てる
            _sound1 = new Sound1();
            _sound2 = new Sound2();
        }

        private function _flvpRedyHandler(e:VideoEvent):void {
            _flvp.removeEventListener(VideoEvent.READY, _flvpRedyHandler);
            start();
        }

        override protected function _createContent(w:Number, h:Number):DisplayObject {
            var head:uint = uint(Math.random() * (_flvp.totalTime - 6));
            _flvp.width  = w;
            _flvp.height = h;
            _flvp.seek(head);
            _flvp.play();
            return _flvp;
        }

        override protected function _removeContent(content:DisplayObject):void {
            _flvp.pause();
        }

        //_tickメソッドは毎秒呼び出される
        override protected function _tick(h:uint, m:uint, s:uint):void {

            if (s % 10 == 0) {
                //秒数の一の位が0ならポーン音を鳴らす
                _sound2.play();

            } else {
                //それ以外ならポーン音を鳴らす
                _sound1.play();
            }
        }
    }
}

>>Sample
だいぶ良い感じに仕上がってきました。

さらに、コンテンツが表示されるときには音量がフェードインし、コンテンツが隠れるときには音量がフェードアウトする演出を、TweenerのSoundShortcutsを使って実装したサンプルを置いておきます。ソースコードはsample\05フォルダに入っています。
>>Sample

今回は必要ないのですが、ついでに紹介しておくと、オーバーライド可能なメソッドはもう1つあります。それは、コンテンツを表示中にEseclockがリサイズされたときにだけ呼び出される_resizeContentメソッドです。このメソッドでは3つの引数content、w、hを受け取れて、それぞれ表示中のコンテンツ、リサイズ後のEsclockの幅、リサイズ後のEseclockの高さを表しています。_resizeContentメソッドはデフォルトで

content.width  = w;
content.height = h;

を実行するため、今回のようにFLVPlaybackを縦横比無視でEseclockのサイズにフィットさせるぶんには特にオーバーライドする必要がありません。しかし、コンテンツの縦横比を無視したくない場合などには適宜オーバーライドする必要があるかと思います。

今回はここまでです。

次回は、時計表示部分と時計下のテキスト表示部分を好きなフォーマットに組み替える方法を紹介します。
みんなでおもしろいEseclock作品を作ると楽しそうですね～(o’c_,`人)・:*:・

先日開催されたSpark project 勉強会 #08で、BeInteractive!のyossyさんが自身の発表時にライブコーディングされていたEseclockライブラリを拡張したのでご紹介します。

http://www.libspark.org/wiki/Eseclock/

Eseclockライブラリとは、UNIQLOCKっぽい何かが作れるライブラリです。UNIQLOCKでいうダンス的な部分をユーザーが自由に変更しながら、UNIQLOCKっぽいビジュアルを簡単に作れちゃいます。

オリジナルの使い方

1. Eseclockクラスを継承したクラス（ここではMyEseclockクラスとする）を作ります。
2. MyEseclockクラスでは、EseclockクラスのcreateContentメソッドをオーバーライドしておきます。ここで、createContentメソッドには時計の合間に表示するコンテンツを返り値とします。このcreateContentメソッドはコンテンツが表示される直前（秒の一の位が6のとき）に毎回呼び出されます。
3. addChild(MyEseclock(0xff9933, 0xffffff));
   引数で時計と背景色の色を指定します。
4. ( ﾟДﾟ)ｳﾏｰ

今回僕が改造したオリジナルからの変更点はこちら

• 描画更新されるときの、色やコンテンツが切り替わるときのアニメーションを追加しました。
• 時計の下表示する文字列を追加および編集可能にしました。
• リサイズに対応し、自動でステージにフィットさせるようにしました。また、固定サイズでの表示にも対応しました。
• 色を途中で変更できるようにしました。
• addChildと同時にスタートさせないオプションを追加しました。それに伴い、任意のタイミングでスタートさせるためのメソッド（startメソッド）を追加しました。
• コンテンツが表示される直前に呼び出されるメソッドの名前を変更しました。（createContent→_createContent）
• コンテンツが表示されている間にEseclockがリサイズされた場合に呼び出されるメソッド（_resizeContentメソッド）を追加しました。
• コンテンツが非表示にされる直前に呼び出されるメソッド（_removeContentメソッド）を追加しました。
• 毎秒必ず呼び出されるメソッド（_tickメソッド）を追加しました。
• _createContent、_resizeContent、_removeContent、_tickを自由に定義するためには各メソッドをサブクラスでオーバーライドする必要がありますが、継承を用いない場合でもcreateContent、resizeContent、removeContent、tick変数に関数を代入することで同様の結果を得られるようにしました。
• IEseclockTextFieldを実装したクラスなら何でも、時計表示および文字列表示部分に使えるようにしました。これにより、好きなフォントを埋め込んだテキストフィールドやライブラリに登録したシンボルを時計や文字列部分に使えるようになりました。

改造版のソースコード（使うときはhttp://www.libspark.org/browser/as3/Eseclock/branches/alumican/src以下全部をごそっと持って行ってください）

こうして見ると結構拡張していますが、使い方は極力簡単にしました。trick7のteraさんの言葉をお借りすると、ライブラリは必殺技ですから。「メラ」のたった二文字で火が出たら格好いいじゃあないですか。

まぁそもそもalumican.netは長い詠唱が必要なほど強大な魔法を唱えるにはMPが足りていないので、メラヒャドギラバギで行かせていただきます。でも、その気になればオプション的に自由に拡張していける仕様にはしているつもりなので、次回よりその辺もふまえて段階的に説明していきます。

最後に、一番簡単な使い方

これだけです。0行でおわり
>>Sample

まさかの次回へ続く(o’c_,`人)・:*:・

　
追記 09.04.08
Shunsuke Ohbaさんが改造版Eseclockを使ってAir版Eseclockを作られました。Eseclockにドロップしたテキストファイルや画像ファイルがランダムに表示されます。