FlashSprite.js

Flashspritejs by mach3

Adobe Flash CS6+ で出力されたスプライトアニメーションシートを再生するjQueryベースのライブラリ。

前回の処理に加えて停止や逆再生、各種設定やイベント発火等の機能を付け足した物です。 使い方は上記URLで概ねわかると思いますが、簡単にご紹介しておきます。

簡単な使い方

1. FlashCS6+でスプライトシートを生成する

FlashIDE上で、ステージに配置したアニメーションインスタンスを右クリックし、 コンテキストメニューから「スプライトシートを生成」を選択してダイアログを開きます。

データ形式は「JSON-Array」を選択し、「書き出し」を行います。 ステージ上でインスタンス名を付けておけばその名前でファイルが作成されます。

2. 配置する

画像ファイルとJSONファイルが出力されるので、任意の場所に保存しましょう。 今回はこんな感じにしてみます。

./
├ data/
│ ├ sprite.json
│ └ sprite.png
└ index.html

3. ロードする

jQueryとFlashSprite.jsを読み込んで、新しい要素を生成してスプライトアニメーションを初期化します。

(function(){
    var myAnimation = $("<div>");
        myAnimation.flashSprite({
                src : "data/sprite.json"
        })
        .appendTo($("body"));
}());

$.fn.flashSprite() にオプションを渡す事で初期化され、要素にロードされます。 デフォルトの設定では自動再生がオンになっているので、初期化した時点で再生がはじまります。

無事再生されましたか？

イベントとメソッドを使ってみる

イベントとメソッドを使う事でもう少し細かい処理をする事ができます。 下の例では、データロードの完了を待って、アニメーションを配置・フェードインさせています。

(function(){
    var myAnimation = $("<div>");

        // JSONと画像がロードされると "flashSpriteReady" イベントが発火します
        myAnimation.on("flashSpriteReady", function(){
                $(this).hide()
                .appendTo($("body"))
                .flashSprite("config", { fps : 60 }) // "config" メソッドで設定変更
                .flashSprite("play") // "play" メソッドで再生
                .fadeIn();
        });

        myAnimation.flashSprite({
                src : "data/sprite.json",
                autoPlay : false, // 自動再生をオフに
                repeat : false // 繰り返し再生をオフに
        });
}());

イベントには、ロード完了時に発火される “flashSpriteReady” の他に、 停止時の “flashSrpiteEnd”、フレーム毎に発火する “flashSpriteEnterFrame” が用意されています。

また、jQuery.fn.flashSprite() にメソッド名を文字列で渡すことでメソッドを呼び出す事ができます。 第二引数以降はそのメソッドに渡されます。

それぞれの詳細はドキュメントをご参照ください。

まとめ

と、こんな感じで作ってみました。

実際のところ、機能豊富なCreateJSを利用すべき場面の方が多いと思いますが、 その為に大きなソースを追加で読み込まなければならないのも事実。

ただパラパラ漫画を再生する為だけに大仰な…と感じるようなケースなら、 こんな単機能のライブラリも使い道があるのかな、と思います。

スプライトシートってなに

スプライトシートは、CSSスプライトを利用したアニメーションテクニックです。 アニメーションの全フレームを一つの画像に並べて配置し、 要素の背景画像として埋め込んで background-position を変更していくことで パラパラ漫画のようなアニメーションを再生します。概要はこんな感じ。

一年程前、CS6が出るちょっとだけ前に似たような記事を書いたことがありました。

• シンプルなスプライトアニメーションライブラリ 「MovieCrop.js」 | Mach3.laBlog

上の記事はまだCS6が出る前だったので自力でスプライトシートを作成する前提のものですが、 せっかく出力する機能があるんだから利用させて頂こうという事で、今回の記事なわけです。

CreateJSでやればよくない？

その通りです。その方が効率的なのでそれでいいと思います。

今回の記事は、あまり多くの依存ライブラリを読み込みたくなかったり、 宗教上の理由や遺言、あるいは政治的外圧等でjQueryで処理せざるを得ないケースを想定したものです。 CreateJSでの利用の仕方については、おそらく多くの方が詳しい記事を書いてくださっているので、そちらをご参照ください。

FlashCS6+でスプライトシートを生成する

例えば、FlashCS6でアニメーションのムービークリップ等を作り、それをステージに設置します。 その設置されたインスタンスを右クリックすると、コンテキストメニューに「スプライトシートを生成」が表れます。

それを選択すると現れるのがこんなダイアログ。

ここから「書き出し」を行うと、画像とデータ形式で指定したデータが出力されます。 指定出来るデータはJSON、各種ゲームエンジンの形式、そしてCreateJSのeaseljs形式です。

今回は使いやすそうだった “JSON-Array” 形式を使用します。

JSONデータの中身

“JSON-Array” で出力されたJSONデータの中身はこのような構成になっています。

{
        "frames": [
                {
                        "filename": "loading0000",
                        "frame": {"x":0,"y":0,"w":33,"h":33},
                        "rotated": false,
                        "trimmed": false,
                        "spriteSourceSize": {"x":0,"y":0,"w":33,"h":33},
                        "sourceSize": {"w":33,"h":33}
                }
                ,{
                        "filename": "loading0001",
                        "frame": {"x":33,"y":0,"w":33,"h":33},
                        "rotated": false,
                        "trimmed": false,
                        "spriteSourceSize": {"x":0,"y":0,"w":33,"h":33},
                        "sourceSize": {"w":33,"h":33}
                }

                ...

        ],
        "meta": {
                "app": "Adobe Flash CS6",
                "version": "12.0.0.481",
                "image": "sample.png",
                "format": "RGBA8888",
                "size": {"w":256,"h":256},
                "scale": "1"
        }
}

“frames” が実際のアニメーションのデータで、配列の中に個々のフレームの情報（サイズや座標等）を格納したオブジェクトが並んでいます。

“meta” にはスプライトシートの基本情報が格納されています。

このデータから再生するには…

アニメーションを再生するには、”frames”内のインデックスをひとつずつ進めてやり、格納されている座標情報を元に背景画像を移動してやる要領でしょうか。 座標は画像の左上からの座標なので、これを background-position に適用する際はマイナスの数値にしてやる必要がありますね。

再生させてみよう

では早速このデータを元にアニメーションを設置し、再生させてみましょう。 JSONデータも画像データもHTMLと同じディレクトリにある想定で進めます。

JSONを読み込む

まずJSONデータを読み込みます。

(function($){

    $.getJSON("sample.json")
    .then(function(data, status){
            var my = {};

            my.data = data;

            // この中でいろいろしよう
    });

}(jQuery));

アニメーションの要素を生成、配置する

受け取ったJSONのデータの内容から、アニメーション用のHTML要素を生成し、bodyに配置します。

my.node = $("<div>").css({
    "width" : my.data.frames[0].sourceSize.w,
    "height" : my.data.frames[0].sourceSize.h,
    "background-image" : "url(" + my.data.meta.image + ")"
})
.appendTo($("body"));

要素のサイズははじめのフレームの “sourceSize” から取得することにします。

画像は、前述の通り同じディレクトリで展開する想定なのでそのまま代入していますが、
恐らく運用時は他のディレクトリに入れると思うので、その時はその時で画像へのパスをなんやかんやする必要がありますね。

再生する

今回は、単純に setTimeout で再生用の関数をぶん回して繰り返し再生を行います。

my.index = 0; // 現在のフレームインデックス
my.length = my.data.frames.length; // 合計フレーム数
my.interval = Math.floor(1000/30); // 約FPS30ぐらいで再生

my.play = function(){
    var frame;

    my.index = (my.index + 1) % (my.length - 1);
    frame = my.data.frames[my.index].frame;
    my.node.css(
            "background-position",
            "-" + frame.x + "px -" + frame.y + "px"
    );
    setTimeout(my.play, my.interval);
};

my.play();

他にも、ページのスクロール位置やマウスの挙動などをトリガーにしたりすると表現の幅が広がりますね。

全体のコード

(function($){

    $.getJSON("sample.json")
    .then(function(data, status){

        var my = {};

        my.data = data;

        my.node = $("<div>").css({
            "width" : my.data.frames[0].sourceSize.w,
            "height" : my.data.frames[0].sourceSize.h,
            "background-image" : "url(" + my.data.meta.image + ")"
        })
        .appendTo($("body"));

        my.index = 0;
        my.length = my.data.frames.length;
        my.interval = Math.floor(1000/30);

        my.play = function(){
            var frame;

            my.index = (my.index + 1) % (my.length - 1);
            frame = my.data.frames[my.index].frame;
            my.node.css(
                    "background-position",
                    "-" + frame.x + "px -" + frame.y + "px"
            );
            setTimeout(my.play, my.interval);
        };
        my.play();
    });
}(jQuery));

めんどくさい！

勿論毎度これは面倒なので、ライブラリ化してみましたが、それは後編で。

» FlashCS6+で生成したスプライトシートをjQueryでロードする実験（後編） | Mach3.laBlog

生のsetInterval/setTimeoutでいいんじゃない？

ごもっとも。そんなに複雑にはなりませんしね。
ただ、もうちょっと直感的に扱いたかったり、管理し易いクラスが欲しかった。
さらに強いて言えば、「書いてみたかった」のです。

以下に、2通りのパターンをライブラリにしてみました。
さりげなくjsdo.itデビューも果たしてみましたよ！

※いずれもjQueryを使用

Timeline.js

jQueryのbind/triggerを使ってイベントを拾っていくタイプです。
AS3のaddEventListenerに最も近くて馴染み易いのではないでしょうか。
…相変わらずコメントのほうが長い！

Source

timeline.js at master from mach3’s js-timeline-enterframe – GitHub

Demo

JavaScriptでEnterFrame：(1) Timeline.js – jsdo.it

使い方

var tl = new Timeline( 30 ); // 引数はfps
tl.bind( "enterFrame", function(){ /* do something */ } );
tl.start(); // タイムライン開始

コンストラクタの引数は省略可能。FPSの初期値は30です。

var func = function(){ /* do something */ };
tl.bind( tl.EVENT_ENTER_FRAME, func ); // イベントリスナの追加
tl.unbind( tl.EVENT_ENTER_FRAME, func ); // イベントリスナの削除

イベントリスナを削除したい時用に、unbindのwrapperも用意してございます。
また、イベント名（enterFrame）は定数EVENT_ENTER_FRAMEに格納してあります。

EnterFrame.js

こちらはもう少し簡略化したタイプで、わざわざjQueryのbind/triggerを介しません。
若干のパフォーマンス向上が見込めるのではないかと予想。
ただ、ActionScriptの実装とはだいぶかけ離れてしまった…

Source

enterframe.js at master from mach3’s js-timeline-enterframe – GitHub

Demo

JavaScriptでEnterFrame：(2) EnterFrame.js – jsdo.it

使い方

var ef = new EnterFrame( 30 ); // インスタンス生成
ef.add( function(){ /* do something */ });
ef.start();

addメソッドでイベントリスナを追加。その他はTimelineと同様です。

var func = function(){ /* do something */ } );
ef.add( func ); // イベントリスナの追加
ef.remove( func ); // イベントリスナの削除

削除にはremoveメソッドを使用します。

まとめ

画面いっぱい使ってヌルヌル動くギャラリーなんかは、
いがいと作り易いかもしれないですね。

追記 : 2013/10/13

今なら requestAnimationFrameとかもあるので、setTimeout等を使うより
こちらがある場合は利用した方がよさそうですね。
そのうち記事になると思います。

リンケージを設定

まずライブラリ内でリンケージを設定します。

お好きなクラス名を入力。
基本クラスは自動的にBitmapDataに設定されます。

クラス化→配置

var cls:Class = getDefinitionByName("MyImage") as Class;
addChild( new Bitmap( new cls() ) );

ライブラリにあるクラスを呼び出すにはgetDefinitionByNameを使います。
MyImageはBitmapDataを継承しているので、
Bitmapのコンストラクタにぶん投げてステージに配置します。

FlashCS4以下ではエラーになる

ここで困った事に、CS3でパブリッシュ中に下記のエラーが表示されました。
（後述のリンク先に記載されてますが、CS4迄は同じ症状のようです。）

myimage$iinit() の引数の数が一致していません。2 が必要ですが、0 が指定されました。

どうやらコンストラクタに引数を二つ渡さなければならない様子。
継承元のBitmapDataにあわせてwidth/heightを渡すのかな？と思いましたが
それだとスクリプト上で一々画像の縦横サイズを記述しておかなければならない。
これは、大変美しくない。

が、調べている内に余計な心配だったことが発覚しました。

N1005003 – [ライブラリ]のビットマップに自動設定したクラスに渡す引数 – Flash : テクニカルノート

ふたつの引数というのはインスタンスの幅と高さです。これは、「自動生成された」クラスの継承するBitmapDataクラスのコンストラクタメソッドが、同じふたつの引数を必須としていることに対応していると考えられます。もっとも、その数値は実際のビットマップの幅と高さでなくて構いません。引数にどんな数値を指定しようが、結果として値はビットマップの実際の幅と高さになます[*1]。また、後から変えられません(読取り専用)。したがって、引数には0をふたつ渡せば結構です。

つまり、引数に何を突っ込もうが
ちゃんと画像サイズはオリジナルの物が使用されるという事ですね。安心。
したがって引数には適当な物をつっこんでおきましょう。

var cls:Class = getDefinitionByName("MyImage") as Class;
addChild( new Bitmap( new cls( 0, 0 ) ) );

尚、引数の型には縛りがないようで、
文字列や配列等いろいろ突っ込んでみましたが正常に動作します。

addChild( new Bitmap( new cls( "しごと", "めんどい" ) ) );

お好みで彩りを添えてあげてください。

WTF is HTML5 (Infographic)

ちびっと文字が小さいですが、わかりやすくまとまっていますね。
HTML5を独習する際の目安としても使えそうです。

さて気になるのは下段のFlashに関する項ですが…

FlashとHTML、Webを席巻するのはどちらか？

HTML5 VS. FLASH. WHO WILL OWN THE WEB’S INTERACTIVE FUTURE ?

このインフォグラフィックでは、FlashとHTML5を4つの要素で比較しています。

• どちらが安いか
• どちらがパワフルか
• どちらがより広く受け入れられるか
• どちらが有能か

結果は画像を見ての通りですが、「どちらが安いか」については…

Flash Playerはフリーだが、Adobe製の開発環境は非常に高価だ。HTML5は開発者にとっても無料だ。

確かにFlashIDEもFlashBuilder(Flex)も製品を購入すると高価ですが、
FlashにはオープンソースのFlexSDKがあります。
Flex SDK – Flex SDK – Adobe Open Source
高価な統合環境を使用しない前提でHTML5と比較するのであれば、
こちらと比較したほうがフェアな気はしますね。

最後は次のように締めくくっています。超訳。

これらのチョイスは排他的ではなく、場合によって、開発者は両方ともに使用する。
長い目でみれば、HTML5が要求に叶う選択になるだろう。

要は、当面の間は適材適所だという事です。

私見

開発者にとっては、インタラクティブなWebアプリを作るにあたって
まだまだFlashに軍配があがるのではないでしょうか。
HTML5にはFlashのような優れた開発環境がまだ無いからです。

ただ、遅かれ早かれFlashIDEは、HTML5+CSS3+JSで
プロジェクトの書き出しが出来るようになるのではと予想しています。
ASとJSは親戚ですし、Flashの得意なベクターもSVGで解決出来ます。
相性は非常に良いでしょう。

既にちょっと違った方法でswf→HTML5を実現してしまっているライブラリも存在しますね。
Smokescreen

問題はAdobeがその後FlashPlayerをどうするのか。
それまでの間に、HTML5ではとても実現出来ないような素晴らしい表現が可能になるか、
そうでなければFlashPlayerはHTML5が表示出来ない、
古い環境の面倒を見る為の存在になってしまいかねません。

AdobeとしてはFlashが売れればそれでよさそうな気もしますが、
1ファンとして、Flashの底力をまだまだ見てみたいですね。

Download : simpletogglebutton.as3.zip

大した行数はないので貼りつけておきます。

package jp.mach3.ui
{
    import flash.display.DisplayObject;
    import flash.display.SimpleButton;

    public class SimpleToggleButton extends SimpleButton
    {
        private var _upState:DisplayObject;
        private var _selectedState:DisplayObject;
        private var _selected:Boolean = false;

        public function SimpleToggleButton( upState:DisplayObject = null,
        overState:DisplayObject = null, downState:DisplayObject = null,
        hitTestState:DisplayObject = null, selectedState:DisplayObject = null )
        {
            super(upState, overState, downState, hitTestState);
            _selectedState = selectedState;
            render();
        }

        public function render(n:* = null):void
        {
            _upState = upState;
        }

        public function set selected( selected:Boolean ):void
        {
            if (selected) {
                upState = _selectedState;
                mouseEnabled = false;
            } else {
                upState = _upState;
                mouseEnabled = true;
            }
            _selected = selected;
        }

        public function get selected():Boolean
        {
            return _selected;
        }

        public function set selectedState( selectedState:DisplayObject ):void
        {
            _selectedState = selectedState;
        }

        public function get selectedState():DisplayObject
        {
            return _selectedState;
        }

    }
}

SimpleButtonと違う点

SimpleButton – ActionScript 3.0 コンポーネントリファレンスガイド
基本的な使い方はSimpleButtonと同じですが、
SimpleToggleButtonクラスには以下の二つのメンバが追加されています。

selectedState : DisplayObject

選択状態を表示する為のDisplayObjectを、upStateやoverState等と同様に設定します。

selected : Boolean

トグルに使用するBool値。trueにする事でselectedStateが表示され、マウスイベントが効かなくなります。falseにすると元に戻ります。

render()

コンストラクタではなく、プロパティアクセスでDisplayObjectを設定した場合に、これを呼ぶ必要があります。苦し紛れのメソッド。後述。

また、コンストラクタの引数が一つ追加されています。

SimpleToggleButton( upState:DisplayObject = null, overState:DisplayObject = null, downState:DisplayObject = null, hitTestState:DisplayObject = null, selectedState:DisplayObject = null )

selectedState

選択状態のDisplayObjectを格納します。

簡単な使い方(1)

myUpState、myOverState、myDownState、myHitTestState、mySelectedStateには
それぞれの状態に使用するDisplayObjectが格納されていると想定します。

var myButton:SimpleToggleButton = new SimpleToggleButton();

myButton.upState = myUpState;
myButton.overState = myOverState
myButton.downState = myDownState;
myButton.hitTestState = myHitTestState;
myButton.selectedState = mySelectedState;
myButton.render(); // Don't miss it !

addChild( myButton );

選択状態にトグルする場合は、プロパティアクセスでselectedをtrueにします。

myButton.selected = true;

簡単な使い方(2)

SimpleButton同様、プロパティアクセスでDisplayObjectを設定する事も出来ますが、
その場合、格納し終えた後にrender()を呼ぶ必要があります。

var myButton:SimpleToggleButton = new SimpleToggleButton();

myButton.upState = myUpState;
myButton.overState = myOverState
myButton.downState = myDownState;
myButton.hitTestState = myHitTestState;
myButton.selectedState = mySelectedState;
myButton.render(); // Don't miss it !

addChild( myButton );

render()は、upStateをプライベートメンバの_upStateにコピーするだけのメソッドです。
このクラスは、upStateをselectedStateで上書きする事でトグルを実現しているので
この処理がないとselectedが再びtrueにされた場合に表示するためのDisplayObjectが見つからなくなります。

本来であれば、upStateのセッターで記述すべきものなのですが…
元祖SimpleButtonのupStateが内部でどのように処理されているかがわからなかった為、
このようなスマートではない方法を取ることになりました。

もっと良い方法はないだろうか…
（え、まだつづくの！？）

XMLファイルへのパスをスタティックに指定してしまうと、
こういう事態に対処出来なくなり、メンテナンス性を欠くのでは？
という事でflashvarsでXMLファイルへのパスを渡す方式にして解決しました。

こんな感じでflashvarsは渡してあげます。

<param name="flashvars" value="xmlpath=/the/path/to/" />

AS3で受け取ります。

public class Main extends MovieClip{
    public function Main() {
        var xmlpath = loaderInfo.parameters["xmlpath"];
        var ul:URLLoader = new URLLoader;
        ul.addEventListener(Event.COMPLETE, onXmlLoaded);
        ul.load( new URLRequest( xmlpath + "config.xml" ) );
    }
    private function onXmlLoaded(e:Event):void{
        // do something
    }
}

モノによってはそうすべきではないケースもあるかもしれませんが、
お客さんが直接手作業で更新するようなローテーションバナー等は
こういう仕様にしてあげたほうが安心ですね。

途中までは前記事と似たような処理なのでちょっと割愛してるところもあるのでご注意。

1. 画像の読み込み

private var bl:BulkLoader = new BulkLoader("imageloader");

/* 中略 */

bl.add( "images/button_normal.png" );
bl.add( "images/button_over.png" );
bl.add( "images/button_down.png" );
bl.addEventListener( BulkProgressEvent.COMPLETE, initialize );
bl.start();

2. SimpleButtonをつくる

var btn:SimpleButton = new SimpleButton(
    new Bitmap(bl.getBitmapData("images/button_normal.png")),
    new Bitmap(bl.getBitmapData("images/button_over.png")),
    new Bitmap(bl.getBitmapData("images/button_down.png")),
    new Bitmap(bl.getBitmapData("images/button_normal.png"))
);
addChild(btn);

SimpleButton – ActionScript 3.0

使い方は上記リンク参照。余計なもの（!?）をimportしなくていい分心地よいです。

ただし、このままではBitmapButtonにはあった「選択時」の状態が使用できません。
この点は今頭を悩ましているところですね。

2010/05/17

さすがに端折りすぎたのでコードを追記

2010/05/24

フォロー記事書きました。
AS3実験室: SimpleButtonクラスをトグル出来るように拡張した「SimpleToggleButton」

BitmapButton

Download : BitmapButton

パブリック プロパティ

hitRect : Rectangle = null

ヒット領域をRectangleで設定。 nullの場合は画像にあわせたヒット領域になります。

selected : Boolean = false

ボタンの選択状態を示すBoolean値。

パブリック メソッド

render() : void

setImagesで渡されたBitmapDataを元にボタンを生成します。

setImages( _config : Object ) : void

normalImage（通常時）、overImage（マウスオーバー時）、downImage（マウスダウン時）、selectedImage（選択時）の画像をBitmapDataで格納したオブジェクトを渡します。

簡単な使い方

インポートをお忘れなく。

import jp.mach3.ui.BitmapButton

1. 画像の用意

こんな感じで画像を用意しましょう。

2. 画像の読み込み

以前記事で紹介したBulkLoaderを使ってみます。

private var bl:BulkLoader = new BulkLoader( "imageloader" );

/* 中略 */

bl.add( "images/button_normal.png" );
bl.add( "images/button_over.png" );
bl.add( "images/button_down.png" );
bl.add( "images/button_selected.png" );
bl.addEventListener( BulkProgressEvent.COMPLETE, initialize );
bl.start();

3. BitmapButtonインスタンスの生成

completeイベントに設定したinitializeでビットマップボタンを生成してみます。

private function initialize( e:Event ) : void {
    var btn:BitmapButton = new BitmapButton;
    btn.setImages( {
        normalImage: bl.getBitmapData( "images/button_normal.png" ),
        overImage: bl.getBitmapData( "images/button_over.png" ),
        downImage: bl.getBitmapData( "images/button_down.png" ),
        selectedImage: bl.getBitmapData( "images/button_selected.png" )
    } );
    btn.render();
    addChild( btn );
}

各ステータスの画像を設定するsetImages()は、
BitmapDataを格納したnormalImage, overImage,
downImage, selectedImageらをまとめたオブジェクトを引数として受け取ります。
あとはrender()でボタンイメージを生成し、addChild。

4. イベントなど

Spriteを継承しているので、イベントなどはよきにはからえ、で。

btn.addEventListener( MouseEvent.CLICK, myFunc );

5. 選択状態の変更

selectedプロパティをtrueにすることで、選択時の状態にする事ができます。
トグルボタンなどを作りたい時はこちらを利用します。

btn.selected = true

こんな感じで作ってみたわけですが、何かの役にたてば幸いです。
とりあえず自分で使おう。

2010/05/02

SimpleButtonを使えばもっと楽だという事に次の日気づきました

2010/05/03

フォロー記事書きました
AS3実験室: 画像を読み込んでボタンにする～SimpleButtonの巻

2010/05/24

フォロー記事書きました
AS3実験室: SimpleButtonクラスをトグル出来るように拡張した「SimpleToggleButton」

Twitterと連動するサービスは星の数ほどありますが、
今回ご紹介するのは「情報の可視化」を試みたWebサービス2点です。

POST-SEASON TWITTER PLAYOFFS

Nike NBA

まずはNikeが立ち上げた「POST-SEASON TWITTER PLAYOFFS」、
ツイートを集めてWeb上でプレイオフを楽しもうというサービスです。
ユーザがお気に入りのチームに関するツイートをすると、
投稿数によってチームのボックスが拡大縮小します。
THUNDERが消えそうだーーーっ！

こちらは「BRACKET」モードの画面。
最も投稿数が多かったチームがチャンピオン！
ユーザー参加型のWeb上の応援合戦ですね。

revisit

moritz.stefaner.eu – revisit – demo

お次は、ツイート間の関連性を可視化した「revisit」。
見ての通り、どのツイートがどのツイートに対するリアクションなのかが
うねうねとビジュアル化されています。

右カラムの「Search terms」に、ツイッター検索の文法で入力すると
その検索結果をもとにビジュアライズされます。

残念ながら日本語は表示されないようですが、
旬なキーワードと「RT」等を組み合わせて検索すると、
なかなか美しい図形を描画してくれますよ。

情報を可視化した作品やサービスを近頃よく目にしますが、
Twitterのリアルタイム性と併せると面白い化学反応が拝めそう。
そのあたりでまた新しいアイデアを拾いたいですね。