堀北真希うさぎ
主な作品
アイドルをモデルにした制作者の創作キャラクタを用いたイラストの一例とアニメーション動画

ページ案内▼

スクロールするメッセージ。

スクロールするメッセージは、視覚に訴える効果があると考えられているのか、しばしば使われます。

スクロールするメッセージ・目次。

スクロールするメッセージのサンプル。

スクリプトを実行できる環境なら、メッセージがスクロールして表示されます。

スクリプトを実行できない環境でも、以下に<noscript>要素でマークアップしているメッセージが表示されます。

スクロールするメッセージのサンプルスクリプトのソース。

この機能を実現するスクリプト「PullDownMenu.js」は以下の通りです。

//  初期設定。
size=32;
mess='いらっしゃいませ。しらぎくさいとへようこそ。';
interval=300;
//  スクロール文字列の補正。
while(mess.length<size) {
    mess+='　';
    }
//  <form>要素の書出し。
document.write('<form action="#"><div>'+
    '<input type="text" name="Message" value="'+mess+'" size="'+size+'" />'+
    '</div></form>');
//  スクロール函数の起動。
tm=setTimeout("msg()",interval);
//  スクロール函数。
function msg() {
    //  setTimeoutのキャンセル。
    clearTimeout(tm);
    //  メッセージの入ったフォームを探し出して操作する。
    i=document.forms.length;
    while (--i>=0) {
        //  メッセージの入ったフォームか。
        if (document.forms[i].Message) {
            //  メッセージをスクロールする。
            str=document.forms[i].Message.value;
            document.forms[i].Message.value= str.substring(2,str.length)+ str.substring(0,2);
            break;
            }
        }
    //  再度このスクロール函数を起動させる。
    tm=setTimeout("msg()",interval);
    return;
}

スクリプトの流れ。

このスクリプトの流れは、以下のようになります。

  1. 必要な初期設定をする。
  2. フォームを書出す。
  3. スクロール函数を起動させる。
  4. スクロール函数本体。

1. 必要な初期設定をする。

スクリプト冒頭の以下の部分が必要な初期設定です。

//  初期設定。
size=32;
mess='いらっしゃいませ。しらぎくさいとへようこそ。';
interval=300;
//  スクロール文字列の補正。
while(mess.length<size) {
    mess+='　';
    }

第一ステップ…必要な変数の設定。

//  初期設定。
size=32;
mess='いらっしゃいませ。しらぎくさいとへようこそ。';
interval=300;

第一ステップとして、必要な変数を設定しています。

第二ステップ…スクローリングメッセージの長さの補正。

//  スクロール文字列の補正。
while(mess.length<size) {
    mess+='　';
    }

次のステップで、スクローリングメッセージの長さを補正しています。

mess.lengthで与えられるmessの字数が、sizeで指定したフォームの幅に満たない場合は、後ろに全角空白をつけています。

2. フォームを書出す。

//  <form>要素の書出し。
document.write('<form action="#"><div>'+
    '<input type="text" name="Message" value="'+mess+'" size="'+size+'" />'+
    '</div></form>');

フォームの<input>要素に、name="Message"属性が与えられています。メッセージ本体はvalue属性で、フォームの幅はsize属性でそれぞれ与えます。

3. スクロール函数を起動させる。

//  スクロール函数の起動。
tm=setTimeout("msg()",interval);

setTimeoutで、intervalで指定した時間経過後に初めてスクロール函数が起動されます。

4. スクロール函数。

//  スクロール函数。
function msg() {
    //  setTimeoutのキャンセル。
    clearTimeout(tm);
    //  メッセージの入ったフォームを探し出して操作する。
    i=document.forms.length;
    while (--i>=0) {
        //  メッセージの入ったフォームか。
        if (document.forms[i].Message) {
            //  メッセージをスクロールする。
            str=document.forms[i].Message.value;
            document.forms[i].Message.value= str.substring(2,str.length)+ str.substring(0,2);
            break;
            }
        }
    //  再度このスクロール函数を起動させる。
    tm=setTimeout("msg()",interval);
    return;
}

この函数の動作を解説すると以下のようになります。

  1. まず、「clearTimeout(tm);」でsetTimeoutでの指定をキャンセルします。こうしないと旧いブラウザではクラッシュの原因となるからです。
  2. 続いて「i=document.forms.length;」で文書中の<form>の個数を調べます。<form>要素はFormオブジェクトとしてスクリプトが処理できます。Formオブジェクトは「document.forms[]」という配列となっており、この中から適切なオブジェクトを探す事になります。それにはまずFormオブジェクトの個数を調べる必要があります。「document.forms.length」で「document.forms[]」の要素の個数、すなわちFormオブジェクトの個数を得られます。
  3. 「if (document.forms[i].Message) {」は撰んだFormオブジェクトの下位にMessageオブジェクトがあれば実行されるというものです。スクローリングメッセージを表示している<input>要素には「name="Message"」属性が与えられていました。
  4. 以下の部分でスクロールの動作をします。 
    str=document.forms[i].Message.value;
document.forms[i].Message.value= str.substring(2,str.length)+ str.substring(0,2);
break;

    具体的には「document.forms[i].Message.value」で<input>要素のvalue属性値(スクローリングメッセージ)を得て、先頭二文字を末尾に移したもの<input>要素のvalue属性値に返す動作をしています。最後に必要な動作が終わったのでもうフォーム探しも不要となり、break文で脱出します。

  5. 最後の「tm=setTimeout("msg()",interval);」はintervalで指定した時間が経過したら再度この函数を呼出すと言うものです。呼び出された函数が再度自分自身を呼出すように設定する事で、無制限にこの函数が繰返し実行されることになります。

しらぎくのウェブサイト作成入門サイトマップ

marguerite.site@gmail.com