OSDN > 브라 우즈 소프트웨어 > Internet > WWW/HTTP > Dynamic Content > Mashup > Tsubuyaki Ticker > Howto

Tsubuyaki Ticker

How to use Tsubuyaki Ticker

基本編

つぶやきティッカーは、!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>





   Download File List
   Wiki