しんスロットで
くるくるストーン

2006/04/14 (shibuya.js)
川崎 有亮
u-suke [at] kawa.net
http://www.kawa.net/

アニメーションエフェクトと
JSAN

2006/04/14 (shibuya.js)
川崎 有亮
u-suke [at] kawa.net
http://www.kawa.net/
Animation.Raster
JavaScript で擬似ラスタースクロール
もっと大きい画像も
Animation.Raster SYNOPSIS
var ras = new Animation.Raster(id,url);
ras.lineHeight  = 4;                    // スクロールさせるラインの高さ(ピクセル)
ras.clip        = false;                // 枠からはみ出した部分を隠すか否か(デフォルトtrue)
ras.background  = "#000000";            // アニメーション時の背景色
ras.downSeconds = 1.0;                  // 上から落ちてくるアニメーションの秒数
ras.fadeSeconds = 4.0;                  // 落ちた後、揺れの幅が収まるまでの秒数
ras.waveSpeed   = 0.5;                  // 揺れが移動する速度
ras.onComplete  = function () { ... };  // アニメ終了後に呼ばれるコールバック関数
ras.scroll();
Animation.Cube
サイコロ回転エフェクト ライブラリ
(rotating cube animation)
各速度一定でキューブを回転
三角関数すっかり忘れてた……。
計算してみた結果
Math.SQRT1_2 なんていう便利な定数が
あったんですね。初めて使った。
Animation.Cube SYNOPSIS
var cube = new Animation.Cube(id,url);
cube.rotateSeconds = 2.0;
cube.onComplete = function(){ ... };
cube.rotate();
JavaScript Archive Network
JSAN
"CPAN".replace(/CP/, "JS")
http://www.jsan.org/

日本動物看護学会
http://www.openjsan.org/

JSAN
JavaScript Authors Upload Server
JAUSE
"PAUSE".replace(/P/, "J")
外部ライブラリの動的ローディング
JavaScript は外部ライブラリファイルの
動的ローディングをサポートする構文がない。
<script src="/js/Lib/Foo.js" />
<script src="/js/Lib/Bar.js" />
<script src="/js/Hoge/Pomu.js" />
いちいち手で書かなければならない。
JSAN による動的ローディング
<script src="/js/JSAN.js" />
<script><!--
    JSAN.addRepository('/js');
    JSAN.use('Lib.Foo');
    JSAN.use('Lib.Bar');
    JSAN.use('Hoge.Pomu');
--></script>
しかし、ちっともシンプルになってないのでイマイチ…。
Opera ではキャッシュが効き過ぎてうまく処理されないことも。
その他の主な JSAN ライブラリ
DOM/Events.js
DOM.Events.addListener( elem,type,func )
DOM/Ready.js
DOM.Ready.onIdReady( id, func );
HTTP/Request.js
new HTTP.Request({ method: "get", uri: url });
Test/Builder.js を利用したテスト HTML
<script><!--
    var test = new Test.Builder();
    test.plan({tests: 10});

    var xotree = new XML.ObjTree();
    test.ok( xotree, "loaded." );
    var xml;
    var tree;

    xml = '<root>foo bar</root>';
    tree = xotree.parseXML( xml );
    test.ok( tree.root == "foo bar", "without xml decl." );
--></script>
beginAsync〜endAsyncによる遅延評価
<script><!--
    var test = new Test.Builder();
    test.plan({tests: 7});
    var xotree = new XML.ObjTree();
    test.ok( xotree, "loaded." );
    var async;

    var url1 = "examples/ping-response.xml";
    var func1 = function ( tree ) {
        test.ok( str.member[0].value.string == "Thanks for the Ping", "member[0].value.string" );
        test.endAsync( async );
    };
    xotree.parseHTTP( url1, func1 );
    async = test.beginAsync( 1000 );
--></script>
Test.Harness.Browser による連続テスト
<script><!--
    new Test.Harness.Browser().runTests(
        "load.html",
        "writexml.html",
        "parsedom.html",
        "parsexml.html",
        "parsehttp_ping.html",
        "parsehttp_rdf.html"
    );
--></script>
Test.Harness.Browser 実行結果
load.html............. ok
writexml.html......... ok
parsedom.html......... ok
parsexml.html......... ok
parsehttp_ping.html... ok
parsehttp_rdf.html.... ok
 
All tests successful.
Files=6, Tests=41, 5.266 seconds 
ただし、テスト plan 数の相違を検出できない…。
JSAN 向け .tar.gz パッケージ例
XML.ObjTree-0.21/lib/XML/ObjTree.js
XML.ObjTree-0.21/Changes
XML.ObjTree-0.21/MANIFEST
XML.ObjTree-0.21/META.yml
XML.ObjTree-0.21/README
XML.ObjTree-0.21/tests/index.html
XML.ObjTree-0.21/tests/load.html
XML.ObjTree-0.21/tests/writexml.html
XML.ObjTree-0.21/tests/parsedom.html
XML.ObjTree-0.21/tests/parsexml.html
XML.ObjTree-0.21/tests/parsehttp_ping.html
XML.ObjTree-0.21/tests/parsehttp_rdf.html
XML.ObjTree-0.21/tests/examples/kawanet-rdf.xml
XML.ObjTree-0.21/tests/examples/ping-response.xml
XML.ObjTree-0.21/tests/inc/JSAN.js
XML.ObjTree-0.21/tests/inc/Test/Base.js
XML.ObjTree-0.21/tests/inc/Test/Builder.js
XML.ObjTree-0.21/tests/inc/Test/Harness.js
XML.ObjTree-0.21/tests/inc/Test/Harness/Browser.js
XML.ObjTree-0.21/tests/inc/Test/Simple.js
XML.ObjTree-0.21/tests/inc/HTTP/Request.js
XML.ObjTree-0.21/make-dist.sh
日本国内では全く盛り上がってない…
YAPC::Asia 2006 Tokyo
2006年3月29日 YAPC::Asia 2006 Tokyo
YAPC::Asia 2006 Tokyo
Dave Rolsky が講演
[JSAN, Ajax, and Perl]
まとめ
著書宣伝 w
ajax 実装のための基礎テクニック
ajax 実装のための基礎テクニック
おしまい
川崎 有亮

http://www.kawa.net/