つぶやきティッカー の使い方

基本編

つぶやきティッカーは、!JavaScript のプログラムです。HJavaScriptは、次のような記述を該当の HTML 文書内に書き込んで、プログラムを読み込む必要があります。
<script type="text/javascript" src="path"></script>


「path」の部分に、`tsubuyakiTickr.js のパスを書きます。多くの場合、HTML 文書が存在するディレクトリからの相対パスで書き表します。
tsubuyakiTicker.js は、上記のようにして HTML に読み込んだだけでは動作しません。設定情報を !JavaScript で書き込む必要があります。最低限必要になるのは、ティッカーにつぶやきを流したい Twitter アカウンJavaScriptる方法は、バージョンによって 2 つのやり方に分かれます。バージョン 0.0.03系の場合は次のようにして行います。
<script type="text/javascript"><!--
tsubuyakiTickerSettings.users = 'mshio,tenkijp';
//--></script>


バージョン 0.0.05系の場合は、次のようになります。
<script type="text/javascript"><!--
TsubuyakiTicker({users: 'mshio,tenkijp'});
//--></script>


Twitter アカウントの設定は、上記のように 0.0.03 系では `tsubuyakiTickerSettings.users` で設定し、00.05 系では `!TsubyakiTicker 関数の引数に辞書形式で渡して設定します。Twitter アカウントは複数設定できますが、配列にせずに、上記の例のような、カンマで区切った文字列で指定します。
設定をしたら、HTML 文書内にティッカーを表示する要素を書き加えます。これは、次のようにして行います。

<div id="tsubuyakiTicker"></div>


このように、`tsubuyakiTiker という ID をもった `<div>` 要素を書き加ます。すると、そこにティッカーが表示されるようになります。ただし、Internet Explorer の場合、上記の記述ではうまく動作しないかもしれません。その場合は、`<div>` 要素の幅を設定してみてください。幅の設定は、たとえば次のようにします。
<div id="tsubuyakiTicker" style="width: 600px"></div>


ここまでを総合した、ごく単純な HTML 文書例は、次のようになります。まず、バージョン 0.0.03 系の場合です。
<html>
<head>
<title>Tsubuyaki Ticker Test</title>
<script type="text/javascript" src="./tsubuyakiTicker.js"></script>
<script type="text/javascript">
tsubuyakiTickerSettings.users = "mshio";
</script>
</head>
<body>
<div id="tsubuyakiTicker"></div>
</body>
</html>


0.0.05 系の場合は、次のようになります。
<html>
<head>
<title>Tsubuyaki Ticker Test</title>
<script type="text/javascript" src="./tsubuyakiTicker.js"></script>
<script type="text/javascript">
TsubuyakiTicker({users: "mshio"});
</script>
</head>
<body>
<div id="tsubuyakiTicker"></div>
</body>
</html>


各種設定編

設定値

つぶやきティッカーは、ユーザがカスタマイズできる設定情報を、バージョン 0.0.03 系の場合は `tsubuyakiTickerSettings` という辞書(連想配列)で、バージョン 0.0.05 系の場合は、`!TsubuyakiTicker` 関数にTsubuyakiTickerす辞書形式のパラメータで管理しています。設定できる値は、`users` 以外にも、次ようなものがあります。
フィールド名'''意味'''デフォルト値'''
numberOfRecordティッカーに流すつぶやきの数5
intervalつぶやきが左に 1 回移動する時間間隔100(ミリ秒)
movingQuantityつぶやきが左に 1 回移動する移動量7(ピクセル)
dateFormat日付フォーマットYYYY/MM/DD hh:mm
displayUserIDつぶやきの後にアカウント名を表示するかどうかon
displayDateTimeつぶやきの後につぶやいた日時時刻を表示するかどうかon
autoReload最新のつぶやきを自動で取得しにいくかどうかoff

日付フォーマットの指定は、`YY` や `hh` などの英文字で年や時間の表示置を指定します。このように特殊な意味をもった英文字には、次のようなものがあります。
英文字'''意味'''
YYYY年(4桁)
YY年(2桁)
MM月(2桁。1月から9月の場合は、前に `0` がつく)
M月(1〜2桁。1月から9月の場合にも、前に `0` がつかない)
DD日(2桁。1から9の場合は、前に `0` がつく)
D日(1〜2桁。前に `0` がつかない)
hh時(2桁。1桁なら前ゼロ)
h時(1〜2桁)
mm分(時と同様)
m分(時と同様)
ss秒(時と同様)
s秒(時と同様)

CSS

ティッカーの見栄えなどは、CSS で自由に設定してください。プログラムが自動で設定している CSS 属性は `overflow: hidden` だけです。
なお、このプログラムは、ID が `tsubuyakiTicker` である要素に子要 <span> を加えます。ですので、`tsubuyakiTicker` という D を持つ要素にあらかじめ子要素を加えてしまうと、必ずしも予定どおりの表示結果にはならないかもしれません。
ティッカーに流れるつぶやきには、次のようなクラスが設定されます。
部位'''HTML 要素の種類'''CSS クラス名'''
つぶやきの本文<span>tsubu-tweet
つぶやきの日時<span>tsubu-datetime
アカウント名<a>tsubu-user
つぶやきの区切り<span>tsubu-sep

階層は、`div#tsuuyakiTicker をルートにすると、次のようになります。
div#tsubuyakiTicker─span─`'''span.tsubu-tweet
上記のその他の要素も、`span.tsubu-tweet` と同じ層に並びます。

関数

また、このプログラムには、`stopTickerAnimation` と `rstartTickerAnimation という 2 つの関数が用意されています。前者を呼ぶとティッカーのアニメーションが停止し、後者を呼ぶとアニメーションが再開します。これは、ボタンなどに関連づけて使用するとよいでしょう。たとえば次のような感じです。まずは、バージョン 0.0.03 系の場合です。
<html>
<head>...
<script type="text/javascript">
var status = false;
var action = { 'true': {func:stopTickerAnimation, cap:'再開'},
'false': {func:restartTickerAnimation, cap:'停止'} };
function buttonOnClick() {
var a = action[status = ! status];
document.getElementById('button').innerHTML = a.cap;
a.func();
}
</script>
</head>
<body> ...
<div id="button" onclick="buttonOnClick()">停止</div>
</body>
</html>

バージョン 0.0.05 系の場合は、`stopTickerAnimation`、restartTickerAnimation それぞれの関数名の前に `!TsubuyakiTicker.` を付TsubuyakiTickerてください。
<html>
<head>...
<script type="text/javascript">
var status = false;
var action = { 'true': {func:TsubuyakiTicker.stopTickerAnimation, cap:'再開'},
'false': {func:TsubuyakiTicker.restartTickerAnimation, cap:'停止'} };
function buttonOnClick() {
var a = action[status = ! status];
document.getElementById('button').innerHTML = a.cap;
a.func();
}
</script>
</head>
<body> ...
<div id="button" onclick="buttonOnClick()">停止</div>
</body>
</html>