2004年10月11日 (月)
TellWords.js
(テキストスライドショー
JavaScript)
既にお気づきの方もいらっしゃるかと思いますが、右のナビゲーションエリアに「お知らせ」という欄を増設しました。これはエントリにするほどのお知らせではないが、一言お知らせしたいときのために設けました。
10月9日からテストとして表示を始めましたが、そのときの表示をご覧になったかたは、これがテキストのスライドショーになっていたことに気付かれたと思います。自分だけが使うのはもったいからスライドショーの制御ボタン群を追加して公開することにしました。
まずはデモをご覧下さい。
このデモで表示されているものと右のナビゲーションエリアに表示しているものは同じ JavaScript を利用しています。デモはテキストスライドショーとして表示されていますが、ナビゲーションエリアのは過去のお知らせも見ることができるお知らせの蓄積として表示されています。設定次第で色々な使い方ができるということです。
この JavaScript ファイルは
<http://homepage.mac.com/yuji_okamura/.Public/TellWords.js>
にあります。ここからダウンロードして下さい。
HTML の書き方
HTML のサンプルとして先ほどのデモファイルのソースをご覧下さい。以後このファイルの TellWords.js を使用するためのコード各所について説明します。
<script type="text/javascript" src="../../../TellWords.js"></script>
TellWords.js をロードしている部分です。通常は head 要素の中(<head> から </head> の間)に書くのがよいでしょう。ここでは、iBlog のナビゲーション項目として使用する場合を想定して、head 要素の中ではなく他のコードと一緒のところに書きました。iBlog のナビゲーション項目として使用する場合、ナビゲーションエディタでこの部分も含めて書いておけば、テンプレートファイルを編集する必要もありませんし、ナビゲーション項目の割当をやめたり、削除したら TellWords.js をロードする部分も一緒に消えてくれるので便利です。
<script type="text/javascript">
var tellWords = new TellWords();
</script>
テキストスライドショーのオブジェクト(データや機能の固まり)を新たに作成して、それに tellWords という名前(変数名)をつけているところです。この名前は任意ですが、半角英字で始まり、半角英数字または _ が幾つか続く名前にして下さい。オブジェクトを設けない方が使い方がわかりやすかったのですが、こうして一つのスライドショーのデータなどをオブジェクトとしてまとめることで、一つの HTML で複数のテキストスライドショーを使用することができます。
<script type="text/javascript" src="TellWordsData.js"></script>
テキストスライドショーに表示するテキストを設定した JavaScript ファイルをロードしているところです。このファイルの書き方については後述します。
<script type="text/javascript">
tellWords.Write();
</script>
テキストスライドショーを表示させている部分です。
テキストを設定する JavaScript ファイルの書き方
このファイルの基本的な書き方を説明します。TellWords.js を用いたテキストスライドショーは豊富な制御オプションがありますが、ここでは一切それらを省いて書き方を示します。
tellWords.m_NoticeString = new Array(
'表示する HTML',
...
'表示する HTML'
);
ここで、tellWords は HTML の書き方 で示したオブジェクトの変数名です。それ以降に 表示する HTML を書いて下さい。これはシングルクォーテーションで囲む必要があります。最後の 表示する HTML 以外は区切りとしてカンマを付けて下さい。一番上に書いた 表示する HTML が最初に表示されます。
例としてデモで用いたファイルを参照して下さい。
<Media/TellWordsData.js>
コントロールのカスタマイズ
テキストを表示している部分の上にスライドショーを制御するボタン群があります。これら一つ一つについて、表示/非表示、ボタンに表示される文字列、ボタンの title 属性の値、ボタンの アクセスキーを指定することができます。これはテキストスライドショーのオブジェクトのメンバー変数というものの値を変更することで指定します。(今、ここを読んで「うーわからん!」と思った人、書き方さえわかればいいので読み進めて下さい。)
これについても例を見てもらいましょう。このブログのサイドバーの「お知らせ」に使用しているファイルを見て下さい。
<../../TellWordsData.js>
このファイルの末尾の方に次のような記述があります。
tellWords.m_PlayCtrlID = null;
tellWords.m_StopCtrlID = null;
tellWords.m_ForwardCtrlID = null;
tellWords.m_RewindCtrlStr = '最新';
tellWords.m_RewindCtrlTitle = '最新のお知らせを表示';
tellWords.m_PrevCtrlStr = '次へ';
tellWords.m_PrevCtrlTitle = '一つ新しいお知らせを表示';
tellWords.m_NextCtrlStr = '前へ';
tellWords.m_NextCtrlTitle = '一つ古いお知らせを表示'; 一般化すると次のような行を羅列することで色々なカスタマイズができます。 オブジェクト.メンバー変数 = 値; 上の例と見比べて下さい。どんなメンバー変数があって、どういう役割を果たしているのかを次のセクションで説明します。なお、このカスタマイズ部分は表示するテキストを設定した JavaScript ファイルに書きましたが、必ずしもそうでなくてもよいです。どういうバリエーションがあるのかよくわからない方は、この例のようにテキストを記述したファイルの末尾で設定するようにして下さい。
メンバー変数
以下にテキストスライドショーオブジェクトが持つメンバー変数を説明します。全てではありません。利用者が変更することを意図しているもののみ説明します。
全体制御
- m_NoticeString
-
スライドショーで表示するテキストの配列です。
初期値は長さが 0 (つまり何もない) です。
上述したテキストを設定する JavaScript ファイルはこのメンバー変数を設定することがメインの役割です。 - m_ID
-
テキストを表示するブロック(div 要素)の ID 属性の値です。
デフォルトではTellWords
になっています。
これは後から変えることを意図していません。デフォルト以外の値を用いるときはオブジェクトの構築時に指定して下さい。例えば
としているところをvar tellWords = new TellWords();
とするとvar tellWords = new TellWords('FooBar');
FooBar
に設定されます。 - m_CtrlsID
-
コントロールボタン群を表示するブロック(div 要素)の ID 属性の値です。
デフォルトでは m_ID の値の後ろにCtrls
を付けた値になっています。
この値を null または 空文字列 に設定するとコントロールボタン群が一切表示されません。 - m_Interval
-
テキスト表示部の内容を入れ替える間隔です。ミリ秒単位です。
デフォルト値は 5*1000 ミリ秒つまり 5 秒です。
巻き戻しボタン関連
- m_RewindCtrlID
-
巻き戻しボタンの ID 属性値です。
デフォルト値は m_ID の値の後ろにRewindCtrl
を付けた値になっています。
この値を null または 空文字列 に設定すると巻き戻しボタンは表示されません。 - m_RewindCtrlStr
-
巻き戻しボタンに表示する文字列です。
デフォルト値は≪
です。
この値を null または 空文字列 に設定すると巻き戻しボタンは表示されません。 - m_RewindCtrlAK
-
巻き戻しボタンのアクセスキーです。
デフォルト値は空文字列です。
この値を null または 空文字列 に設定すると巻き戻しボタンにアクセスキーは付きません。 - m_RewindCtrlTitle
-
巻き戻しボタンの title 属性値です。
デフォルト値は巻き戻し
です。
前ボタン関連
- m_PrevCtrlID
-
前ボタンの ID 属性値です。
デフォルト値は m_ID の値の後ろにPrevCtrl
を付けた値になっています。
この値を null または 空文字列 に設定すると前ボタンは表示されません。 - m_PrevCtrlStr
-
前ボタンに表示する文字列です。
デフォルト値は＜
です。
この値を null または 空文字列 に設定すると前ボタンは表示されません。 - m_PrevCtrlAK
-
前ボタンのアクセスキーです。
デフォルト値は空文字列です。
この値を null または 空文字列 に設定すると前ボタンにアクセスキーは付きません。 - m_PrevCtrlTitle
-
巻き戻しボタンの title 属性値です。
デフォルト値は前
です。
再生ボタン関連
- m_PlayCtrlID
-
再生ボタンの ID 属性値です。
デフォルト値は m_ID の値の後ろにPlayCtrl
を付けた値になっています。
この値を null または 空文字列 に設定すると再生ボタンは表示されません。 - m_PlayCtrlStr
-
再生ボタンに表示する文字列です。
デフォルト値は|>
です。
この値を null または 空文字列 に設定すると再生ボタンは表示されません。 - m_PlayCtrlAK
-
再生ボタンのアクセスキーです。
デフォルト値は空文字列です。
この値を null または 空文字列 に設定すると再生ボタンにアクセスキーは付きません。 - m_PlayCtrlTitle
-
再生ボタンの title 属性値です。
デフォルト値は再生
です。
停止ボタン関連
- m_StopCtrlID
-
停止ボタンの ID 属性値です。
デフォルト値は m_ID の値の後ろにStopCtrl
を付けた値になっています。
この値を null または 空文字列 に設定すると停止ボタンは表示されません。 - m_StopCtrlStr
-
停止ボタンに表示する文字列です。
デフォルト値は■
です。
この値を null または 空文字列 に設定すると停止ボタンは表示されません。 - m_StopCtrlAK
-
停止ボタンのアクセスキーです。
デフォルト値は空文字列です。
この値を null または 空文字列 に設定すると停止ボタンにアクセスキーは付きません。 - m_StopCtrlTitle
-
停止ボタンの title 属性値です。
デフォルト値は停止
です。
次ボタン関連
- m_NextCtrlID
-
次ボタンの ID 属性値です。
デフォルト値は m_ID の値の後ろにNextCtrl
を付けた値になっています。
この値を null または 空文字列 に設定すると次ボタンは表示されません。 - m_NextCtrlStr
-
次ボタンに表示する文字列です。
デフォルト値は＞
です。
この値を null または 空文字列 に設定すると次ボタンは表示されません。 - m_NextCtrlAK
-
次ボタンのアクセスキーです。
デフォルト値は空文字列です。
この値を null または 空文字列 に設定すると次ボタンにアクセスキーは付きません。 - m_NextCtrlTitle
-
次ボタンの title 属性値です。
デフォルト値は次
です。
早送りボタン関連
- m_ForwardCtrlID
-
早送りボタンの ID 属性値です。
デフォルト値は m_ID の値の後ろにForwardCtrl
を付けた値になっています。
この値を null または 空文字列 に設定すると早送りボタンは表示されません。 - m_ForwardCtrlStr
-
早送りボタンに表示する文字列です。
デフォルト値は≫
です。
この値を null または 空文字列 に設定すると早送りボタンは表示されません。 - m_ForwardCtrlAK
-
早送りボタンのアクセスキーです。
デフォルト値は空文字列です。
この値を null または 空文字列 に設定すると早送りボタンにアクセスキーは付きません。 - m_ForwardCtrlTitle
-
早送りボタンの title 属性値です。
デフォルト値は早送り
です。
メンバー関数
メンバー変数を説明したのでメンバー関数についても言及しておきます。JavaScript が書ける人は活用して下さい。全ては説明しません。コントロールボタンに使用されるもの＋αについて説明します。
- PlayTellWords()
-
次のテキストを表示し、自動スライドショーを開始します。もしあれば再生ボタンを無効にし、停止ボタンを有効にします。
配列 m_NoticeString の長さが 1 よりも大きくないと次のテキストは表示せず、今のままです。自動スライドショーが実行されていると、自動スライドショーを新たには実行しません。 - StopTellWords()
-
自動スライドショーを停止します。もしあれば再生ボタンを有効にし、停止ボタンを無効にします。
自動スライドショーが実行されていないと何もしません。 - NextTellWords()
-
次のテキストを表示します。
配列 m_NoticeString の長さが 1 よりも大きくないとなにもしません。 - PrevTellWords()
-
前のテキストを表示します。
配列 m_NoticeString の長さが 1 よりも大きくないとなにもしません。 - RewindTellWords()
-
最初のテキストを表示します。
配列 m_NoticeString の長さが 1 よりも大きくないとなにもしません。 - ForwardTellWords()
-
最後のテキストを表示します。
配列 m_NoticeString の長さが 1 よりも大きくないとなにもしません。 - Html()
-
現在のオブジェクトのメンバー変数を元に、制御部と表示部の HTML を作成して返します。
返される HTML はメンバー変数のデフォルト状態では次のようなものです。
{ } で囲まれた部分にはその JavaScript コードの値が入ります。<div id="{this.m_CtrlsID}">
<input type"button" id="{this.m_RewindCtrlID}" value="{this.m_RewindCtrlStr}" title="{this.m_RewindCtrlTitle}" />
<input type"button" id="{this.m_PrevCtrlID}" value="{this.m_PrevCtrlStr}" title="{this.m_PrevCtrlTitle}" />
<input type"button" id="{this.m_PlayCtrlID}" value="{this.m_PlayCtrlStr}" title="{this.m_PlayCtrlTitle}" />
<input type"button" id="{this.m_StopCtrlID}" value="{this.m_StopCtrlStr}" title="{this.m_StopCtrlTitle}" disabled="disabled" />
<input type"button" id="{this.m_NextCtrlID}" value="{this.m_NextCtrlStr}" title="{this.m_NextCtrlTitle}" />
<input type"button" id="{this.m_ForwardCtrlID}" value="{this.m_ForwardCtrlStr}" title="{this.m_ForwardCtrlTitle}" />
</div>
<div id="{this.m_ID}">
{this.m_NoticeString[this.m_CurrentCount]}
</div>
Posted: 19:48 | Comment | Trackback
以下、類似エントリです。
.Mac および .Mac 配布アプリケーションを利用するためのノウハウやツールを提供しているウェブログです。iBlog の諸問題を克服し様々な機能を追加するためのツール iblogPatcher とそのプラグインや iBlog のバックアッププログラム iBlogFreezer の開発と公開、.Mac カウンタなど .Mac 提供機能の流用&カスタマイズ方法の紹介などがメインコンテンツです。
![[Valid RSS]](http://homepage.mac.com/yuji_okamura/image/valid-rss.png){kind=small}
うっかりすると駄目になってしまいます。エラーが検出されたときは Blog コメントでお知らせください。
Total entries in this category:
Published On: 2006-08-10 20:42
DotMac Counter:
