「動く掲示板」を作る



JavaScript の電光掲示板というと、テキストボックスやステータスバーの上に文字が右から左へ繰り返し流れるというものが定番ですが、ここで紹介するのはご覧の通り、文字通りの「掲示板」です。 そこでこれを「動く掲示板」と呼ぶことにしました。

上のサンプルをご覧になってもわかるように、テキストエリアの中の文章を一定間隔ごとに切り替えることができます。 切り替えのタイミングも、あらかじめ秒ごとに設定できるだけでなく、ある画面は1秒間、ある画面は3秒間、というように画面に応じた表示時間の設定もできる賢い掲示板です。 上のサンプルでは、最初の6画面を4秒間隔、最後の(顔文字が手を上下させる)4画面を1秒間隔にしてループさせています。

原理は簡単です。要するにテキストエリアの1つ1つの画面をタイマーでコマ送りしているのです。では作り方を説明しましょう。まず「動く掲示板」を表示したいページの HTML ファイルを用意します。そして <BODY>〜</BODY> 間に "animation" という名のフォームと "screen" という名のテキストエリアを作ります。

<FORM NAME="animation">
<TEXTAREA NAME="screen" cols=50 rows=10></TEXTAREA>
<INPUT TYPE="button" VALUE="スタート" onClick="Animex()">
</FORM>

テキストエリアの cols は横の長さ(大体文字数)、rows は縦の長さ(大体行数)を表します。ここの50、10というのは上のサンプルの大きさですが、大きさは好みに応じて自由に変えてかまいません。実行してみて大きすぎたり小さすぎたりしたら、あとから修正できるのですから。

さて「動く掲示板」に使うコマは下のフォームで作成します。まず基本的に何秒間隔で動かすかを決めます。1秒から10秒まで設定可能ですので、下のドロップダウンリストから選んで下さい(デフォルトは1秒です)。 文章ならば3,4秒、長めの文章ならそれ以上にした方がよいでしょう。

設定が終わったら「開始」ボタンをクリックします。1プログラムを始めるためには必ず「開始」ボタンをクリックして下さい。次に、プログラムの最初の1コマをその下の作成用テキストエリアに入力します。直接書き込んでもいいし、他のテキストファイルからコピーしたものを貼り付けてもいいです。 もし間違えても、1度登録したものを途中で部分修正できませんので、慎重に入力して下さい。うまく入力できたら「登録」ボタンをクリックします。

その右横に「追加継続時間」というのがありますが、これは今登録したコマを最初の設定時間より長く表示させたいときに使います。例えば1秒間隔で設定していて、あるコマは4秒表示させたいとき、追加継続時間は3秒ですから、ドロップダウンリストから+3秒を選びます。 これは必ず「登録」ボタンを押したあとに選択するようにします。選択した直後には別のボタンを押さないで入力画面に移って下さい。また追加継続時間の設定はそのまま続きますから、元の表示時間に戻したいコマは「登録」のあと+0秒に設定し直します。

2つ目のコマも今と同じように、テキストエリアに入力してから「登録」ボタンをクリックするというプロセスを繰り返します。登録してもテキストエリアの文字が自動的には消えませんが、これは前の画面の一部を引き続き使いたい、という場合があるからです。もし前画面を消したければ、「クリア」ボタンをクリックします。これはテキストエリア内の文字を消すだけで、設定がクリアされるわけではないので注意して下さい。

こうして登録した順に表示プログラムが作られます。何十登録でも可能です。すべて登録し終わったら、「完成」ボタンをクリックします。こうして Aimex() という名のプログラムが完成しました。その下の「プレビュー」ボタンを押してみて下さい。あなたの作ったプログラムがどう表示されるかが、確認用エリアで展開します。但し「プレビュー」では、表示は1回だけで、ループしません。 もう1度見たければ再び「プレビュー」ボタンをクリックします。また、もし途中で「追加継続時間」を設定している場合、この「プレビュー」では表示の継続という形では現れず、「・・継続中・・」という文字が表示されるだけです。

「プレビュー」で確認したら、いよいよ HTML ファイルにこのプログラムを貼り付けてみましょう。「プログラムの作成」ボタンをクリックして下さい。新しいウィンドウが開いて Animex() のプログラムがソース表示されるので、これをコピーします。あなたの HTML ファイルに移り、</TITLE> と </HEAD> の間に今コピーしたものを貼り付けます。(コピーし終わったら、ソース・ウィンドウはかならず閉じてください。) ファイルを上書き保存し、実際にどう実行されるかブラウザで確かめて下さい。

秒間隔

作成用テキストエリア


 追加継続時間+ 秒   

確認用エリア



Animex() のプログラムは、「スタート」ボタンをクリックすると「動く掲示板」が展開し始めるというものですが、このページのサンプルのようにページがロードされたら自動的に開始するには、ページの <BODY> タグの中に onLoad="Animex()" を書き加えます。「スタート」ボタンは必要なくなります。

この「動く掲示板」プログラムを使えば、(ちょっと手間はかかりますが)文字や記号を上下左右どんな方向にも(工夫次第では「斜め」にも)流すことができますし、努力次第では文字や記号を使ったアニメーションも作れます。「動く画像」ばやりの昨今ですが、こういう「動く文章」も十分面白いし、珍しがられることは請け合いです。

ただ注意しなければならないのは、Internet Explorer 4.0 と 他のブラウザでは表示の仕方に違いがあることです。テキストエリア内の文字は Internet Explorer 3.0 や Netscape では ANSI 文字を使用していたのに対し、Internet Explorer 4.0 では Unicode 文字を使用しているからです。ですから Internet Explorer 4.0 で作ったものは Netscape では文字化けし、Netscape か IE 3.0 で作ったものは Internet Explorer 4.0 では文字化けしてしまうことになります。

それを回避するには、Internet Explorer 用と Nescape 用の両版を作っておき、ユーザのブラウザ情報を取得して、IE 4.0 なら IE 4.0 で作ったバージョン、それ以外なら Netscape か IE 3.0 で作ったバージョンを起動するように設定しなければなりません。それが無理な人は、あなたが使っているブラウザ名を示して、

と付け加えておいたほうがいいでしょう。

「動く掲示板」の面白い実例は、西さんのホームページ「Home Page 西〜つぶやき〜」の中で紹介されています。アクセスしてみましょう。




次のトピックは「パスワードでアクセス制限」です。

目次 | ← 前のトピック | ↑ページのトップ | 次のトピック →

ご意見・ご質問がありましたら「ザ・掲示板」またはメールにて梅ちゃん堂まで