OTCHY.NET

jquery.jaticker.js はjquery.jaticker.js は日本語のにほんごの変換アニメーションにへんかんあにめーしょんに対応した、たいおうした、ティッカーのてぃっかーの jQuery プラグインです。ぷらぐいんです。文字列をもじれつをタイプしている風にたいぷしているふうに順に表示する事がじゅんにひょうじすることが出来ます。できます。

画面上で誰かがタイピングしているようにアニメーションできるjQueryプラグイン「jticker」:phpspot開発日誌 で紹介されていた jticker を見た時に、

「カッコイイ！…けど、違う。おれたちの使ってる日本語は漢字仮名交じりの文章なんだ。変換もアニメーションしてなんぼでしょ？日本語の変換アニメーションを採用した CM とかクールじゃない？」

…と思ったので、かなり時間がかかってしまいましたが jticker の日本語対応版とも言える、jaTicker を作りました！

色々とオプションも用意してあるので、使いやすいんじゃないかと思います。
詳しくは、jaTicker を参照して下さい！

古いアプリをメンテしてて、元々の jQuery のバージョンが 1.0 だの 1.1 だのだとすごく残念な気持ちになりますね。やっぱり、最新の jQuery でサクサク書きたいものです。
バージョンを上げてしまえればいいんですが、動作確認の手間まで考えると、そこまでやる時間もない。いま、ちょっとこの画面だけ手直し出来ればいいんだけど…という場合は、複数のバージョンの jQuery を共存させてしまいましょう。

jQuery には $ の競合を避けるための jQuery.noConflict という function が用意されていますが、これに引数で true を渡すと、window.jQuery オブジェクトの競合も避けるように動作します。

ですので以下のように書けば、複数のバージョンの jQuery が共存出来ます。
現実的にやる事はないと思いますが、onload を追加する事で、3つでも 4 つでも共存可能という事です。

<script>
$(function() {
    var func = function() {
        // 実際に動作させたい部分
        var $16 = jQuery.noConflict(true);
        alert($.fn.jquery);  // old version
        alert($16.fn.jquery);  // ver 1.6
    }
    // 使いたいバージョンの jQuery を用意し、load イベントを設定
    var s = $('<script>').attr('src', 'http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js').load(func).get(0);
    // IE の場合は script の onload が発生しないので onreadystatechange で検知
    s.onreadystatechange = function() {
        if (this.readyState == 'loaded' || this.readyState == 'complete') {
            func();
        }
    }
    // jQuery.append だと load イベントが発生しない(？)ようなので、生 DOM で head に script を追加
    $('head').get(0).appendChild(s);
});
</script>

旧版である、Greasemonkey で 超お手軽に jQuery を使うスニペット は Firefox で使用する分には問題ないのですが、Chrome ではセキュリティ上の都合か、Greasemoneky 上における unsafeWindow が unsafe では無いようで (？) unsafeWindow.jQuery などに Greasemoneky からアクセスすることが出来ません。

そこで、Chrome 対応版のスニペットを用意しました。
ただ、いわば Chrome のセキュリティを回避した書き方になるため、旧版にあった、「該当ページですでに jQuery が読み込まれていればそれを利用」という特徴が失われてしまっています。
逆に言えば、常に自分で指定したバージョンを利用できるので、jQuery の新しい機能を使ったスクリプトを書く場合などは、こちらのほうが優れています。

スクリプト

(function (d, func) {
    var h = d.getElementsByTagName('head')[0];
    var s1 = d.createElement("script");
    s1.setAttribute("src", "http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js");
    s1.addEventListener('load', function() {
        var s2 = d.createElement("script");
        s2.textContent = "jQuery.noConflict();(" + func.toString() + ")(jQuery);";
        h.appendChild(s2);
    }, false);
    h.appendChild(s1);
})(document, function($) {
    // ここにメインの処理を書く
    $('#button').click(function(){
        alert('clicked!');
    });
});

複数のパネルが上下に並んでいるようなデザインで、上下の位置を入れ替える UI はよく見ますが、それをぬるっとアニメーションさせるための jQuery プラグインです。

こんな感じに動きます。

詳細は以下の専用ページよりどうぞー。
jquery.smoothswap.js

Excel のウィンドウ枠の固定のように、テーブルのヘッダや左側を固定して、残りの部分をスクロールさせるための jQuery プラグインを書きました。
マークアップはシンプルで、普通にテーブルを書いたら、jQuery の作法でプラグインを呼び出すだけです。

jQuery のおれおれプラグインはいくつか書いた事がありましたが、こうやって公開するのは初めてです。ごてごての機能が欲しいんじゃなくて、単に既存のテーブルを固定スクロール化したいだけの時に、いいのが見つからなくて書いたので、けっこうニーズがあるんじゃないかと思ってます。

下記は簡単なサンプルです。詳細は専用ページを見てみて下さい。

HTML

<table id="tablefix">
    <thead>
    <tr>
        <th rowspan="2">ヘッダA</th>
        <th rowspan="2">ヘッダB</th>
        <th colspan="2">ヘッダC</th>
        <th rowspan="2">ヘッダD</th>
        <th rowspan="2">ヘッダE</th>
    </tr>
    <tr>
        <th>ヘッダ C-1</th>
        <th>ヘッダ C-2</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>データ</td>
        <td>データ</td>
        <td>データデータデータデータデータデータデータデータデータデータデータデータ</td>
        <td>データデータデータデータデータデータデータデータデータデータデータデータ</td>
        <td>データデータデータデータデータデータデータデータデータデータデータデータ</td>
        <td>データデータデータデータデータデータデータデータデータデータデータデータ</td>
    </tr>
    <tr>
        <td>データ</td>
        <td>データ</td>
        <td>データデータデータデータデータデータデータデータデータデータデータデータ</td>
        <td>データデータデータデータデータデータデータデータデータデータデータデータ</td>
        <td>データデータデータデータデータデータデータデータデータデータデータデータ</td>
        <td>データデータデータデータデータデータデータデータデータデータデータデータ</td>
    </tr>
    <tr>
        <td>データ</td>
        <td>データ</td>
        <td>データデータデータデータデータデータデータデータデータデータデータデータ</td>
        <td>データデータデータデータデータデータデータデータデータデータデータデータ</td>
        <td>データデータデータデータデータデータデータデータデータデータデータデータ</td>
        <td>データデータデータデータデータデータデータデータデータデータデータデータ</td>
    </tr>
    <tr>
        <td>データ</td>
        <td>データ</td>
        <td>データデータデータデータデータデータデータデータデータデータデータデータ</td>
        <td>データデータデータデータデータデータデータデータデータデータデータデータ</td>
        <td>データデータデータデータデータデータデータデータデータデータデータデータ</td>
        <td>データデータデータデータデータデータデータデータデータデータデータデータ</td>
    </tr>
    <tr>
        <td>データ</td>
        <td>データ</td>
        <td>データデータデータデータデータデータデータデータデータデータデータデータ</td>
        <td>データデータデータデータデータデータデータデータデータデータデータデータ</td>
        <td>データデータデータデータデータデータデータデータデータデータデータデータ</td>
        <td>データデータデータデータデータデータデータデータデータデータデータデータ</td>
    </tr>
    </tbody>
</table>

JavaScript

$(function() {
    $('#tablefix').tablefix({width: 500, height: 200, fixRows: 2, fixCols: 2});
});

実行結果