jquery.jaticker.js2011-12-08

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

使い方

上部の Download リンクから zip ファイルをダウンロードして解凍すると、css ファイルと js ファイルが 1 つずつ含まれているのでそれを読み込みます。
jQuery プラグインですので、jQuery 自体は先に読み込んでおいて下さい。

<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript" src="jquery.jaticker_1.0.0.js"></script>
<link rel="stylesheet" href="jquery.jaticker_1.0.0.css" type="text/css">
</head>

jQuery オブジェクトにプラグインの jaticker メソッドが追加されるので、対象となる要素に対して呼び出すと、その要素に含まれるテキストをタイプしている風にアニメーションして表示します。
この時点で、英数字、ひらがな、カタカナはそれなりにちゃんと表示されますが、漢字については読みの情報がないため変換のアニメーションはしません。
これで十分という場合はこのまま使っても構いません。

<div id="jaticker-1">
ひらがな、カタカナだけならこれだけで OK !<br />
漢字が混ざるとちょっと残念な感じ。
</div>
<script>
$('#jaticker-1').jaticker();
</script>

ひらがな、カタカナだけならこれだけで OK !
漢字が混ざるとちょっと残念な感じ。

漢字に対して読みを指定するときは、ruby 要素を使います。ruby 要素に囲まれた中に rt 要素があると、それを読みとして使って日本語変換のアニメーションを行います。
変換を行うアニメーションは ruby 要素の単位になるので、漢字だけにルビを振るのではなく、送り仮名などまで含めたルビを振るとそれらしくなります。

<ruby>漢字の読みは<rt>かんじのよみは</rt></ruby><ruby> ruby 要素で<rt> ruby ようそで</rt></ruby><ruby>指定して下さい。<rt>していしてください。</rt></ruby>

漢字の読みはかんじのよみは ruby 要素で ruby ようそで指定して下さい。していしてください。

インライン要素による書式指定などは、そのままに反映されます。

<span style="color:red"><ruby>文字の色を<rt>もじのいろを</rt></ruby><ruby>変えたり、<rt>かえたり、</rt></ruby></span><span style="font-size:200%;"><ruby>文字の大きさを<rt>もじのおおきさを</rt></ruby><ruby>変えたりしても、<rt>かえたりしても、</rt></ruby></span><ruby>大丈夫。<rt>だいじょうぶ。</rt></ruby>

文字の色をもじのいろを変えたり、かえたり、文字の大きさをもじのおおきさを変えたりしても、かえたりしても、大丈夫。だいじょうぶ。

アニメーションの速度を落とすとよく分かりますが、タイプしている内容はちゃんとローマ字に分解してアニメーションしています。

ちゃんとローマ字入力ろーまじにゅうりょくしています。

アニメーション中のフォントの書式については、デフォルトの css を修正したり、追加の css を指定することで変更できます。

/* カーソル */
.jaticker-cursor {
  font-weight: bold;
  color: red;
}
/* 入力中 */
.jaticker-input {
  color: green;
  background-color: white;
}
/* 変換中 */
.jaticker-convert {
  color: blue;
  background-color: white;
}

アニメーションのあにめーしょんの書式もしょしきも変更できます。へんこうできます。

オプション

jaticker の実行時に引数でオプションを指定する事で、動作を色々と変更する事が出来ます。
オプションの名前とデフォルト値は以下の通りです。

名前	意味	デフォルト値
inputSpeed	キータイプアニメーションの速度 (msec)	60
convertSpeed	変換アニメーションの速度 (msec)	120
autoStart	アニメーションを自動的に開始するか	true
cursorStr	カーソルの文字列	'\|'
cursorInterval	カーソルの点滅速度 (msec)	500
hideCursor	カーソルを隠すか	false
leaveCursor	アニメーション完了後にカーソルを消すか	false
onFinished	アニメーション完了時に呼ばれるコールバック関数	undefined

autoStart を false として初期化した場合、アニメーションが自動的には始まりません。アニメーションを開始するためには、jaticker を実行した要素に対して、jatickerStart を実行します。

// 初期化のみ
$('#jaticker').jaticker({'autoStart': false});
// アニメーション開始
$('#jaticker').jatickerStart();

onFinished に関数を指定すると、アニメーションが完了した時に実行されます。
例えばこれを使って、複数のアニメーションを連携させる事などが出来ます。

$('#jaticker-2').jaticker({'autoStart': false});
$('#jaticker-1').jaticker({'onFinished': function() {
  $('#jaticker-2').jatickerStart();
}});

実行環境・ライセンス

jQuery 1.4 以降の環境で動作します。

動作確認を行ったブラウザは、Firefox3.6 / Google Chrome 15 / IE6 / IE7 です。恐らく、古い Chrome / Firefox4+ / 最近のSafari / 最近の Opera 辺りは動きます。未確認ですが IE8 / IE9 もたぶん動くでしょう。
これらについても、動作報告があれば有り難いです。

ライセンスは MIT License (日本版 wikipedia の項) で公開しています。