ニコカレにTimeline表示を追加してみるテスト

.NET

っというわけで、ニコカレにTimeline表示機能を追加してみました(・∀・)
使ったのはSIMILEのTimelineです。

まあ、既存のデータに時間軸や位置情報を組み合わせるというのは王道なので(・∀・)


で、Timeline機能を作っていて気になった点を2つばかり(´Д`;)


Timeline上のイベントをクリックするとバブルが表示されるわけですが。
IEで見ると、表示後にバブルが直ぐ閉じてしまうという問題に遭遇して(´・ω・`) *1
で、なにが問題かと思ったら、バブル表示後にウィンドウリサイズ時に行う以下の処理が動いていまスた。

var resizeTimerID = null;
function onResize() {
    if (resizeTimerID == null) {
        resizeTimerID = window.setTimeout(function() {
            resizeTimerID = null;
            tl.layout();
        }, 500);
    }
}

別にウィンドウのサイズなんて変更してないのにな〜と思って調査していくと、Timelineのタグがform要素で囲まれた中にあると、バブル表示後にリサイズ処理が動いちゃうようで…(゜Д゜)
ASP.NETでWebフォーム使って作っているのでねぇ〜、form要素は外せないんですが(´Д`;)
けど、ウィンドウのリサイズ時にレイアウトしなおさないとちょっと問題もあるのわけで、なんか逃げはあるのかしら？*2


あと、最初はTimelineをスクロールしたときに必要な範囲のイベントを取得するようにこういうコードを書いていたんですけど。

tl.getBand(1).addOnScrollListener(function(band) {
    var minDate = band.getMinDate();
    var maxDate = band.getMaxDate();
    Timeline.loadXML(..., function(xml, url) {
        eventSource.clear();
        eventSource.loadXML(xml, url);
    });
});

重(゜Д゜)
スクロールの度にデータを取得するようにしたら、重すぎてまともにスクロールできないし(´Д`;)
しょうがないのでロード時にのみデータを読み込む方法でガマンの子。
全件データを取得しても大量になって困るので、上限付きで。
あと、デフォルトではEmotion.Angry以下のデータのみを取得するように。


なんかFeel so badなニコカレのTimelineというカンジで〜。
イヤン(´ω`)

*1:IE 7で問題に遭遇。Firefox 2.0では問題無し。

*2:とりあえずwindow.resize = onResize();はコメントにしておこう…