縦スクロールと横スクロール JavaScript

文章をスクロールさせたい！『JavaScript編』

縦スクロールと横スクロール JavaScript

『サイト情報』...etc.テキスト差し替えアニメの例
[画像左上]

　JavaScriptを使うとホームページ上で文字や画像を縦や横にスクロールさせることもでき、この基本と言うべきか、応用というべきか、スクロールだけでなく文章が入れ替わるアニメーションのような表現もできます。

　ここでは、文章をスクロールさせる方法について記しますが、これを使うと例えば、サンプル画像にあるサイトのように『サイト情報』、『What's New』、『お知らせ』といったような告知や『掲載ショップ例』としてショップ名をスクロールさせるといった使い方もできます。

　尚、サイト情報は、テキストが入れ替わるアニメーション、掲載ショップ例は、横スクロールです。

JavaScriptで縦スクロール

　次の縦スクロールサンプルではボタンで開始と終了を指定します。

JavaScriptで横スクロール

　次の横スクロールサンプルはページの読み込みと同時に自動的に開始するようになっています。

　これは一体どのようにして行っているのでしょうか？

　ブラウザにInternet Explorer(IE)を使用している方でホームページを作った事がある方はHTMLの<MARQUEE>タグを使うんだよ！とおっしゃるかもしれませんね。

　それも確かに一案であり、以下は<MARQUEE>タグによるものですが、この<MARQUEE>タグはIE独自拡張である為、NetscapeNavigatorでは動作が保証されていませんし、まして縦スクロールはできません。

A)ある文章を用意する B)ある一定時間でCとDを繰り返す C)Aの文章の先頭から一文字抜き出す D）Aの文章にCの文字を順番につなげる

　というわけでいろんなブラウザで使えるJavaScriptを使ってみましょう(但し、ブラウザ設定でJavaScriptをoffにしている場合には使えません)。

JavaScriptを使って横スクロールさせる方法

　同じJavaScriptでもいくつかやり方はありますが、今回ご紹介するのは

A）ある文章を用意する
B）一定時間間隔でC）とD）を繰り返す
C）A）の文章の先頭から一文字抜き出す
D）A）の文章にC）の文字を順番につなげる

という方法です。

　設定の仕方もいくつかありますが、ここではJavaScriptのプログラムを外部ファイルとして作成する事にします。

全体の手順は以下の通りです。

1. JavaScriptの外部ファイルを作成
2. htmlファイルでJavaScript外部ファイルを読み込む
3. 下記何れかの方法でJavaScript外部ファイルの関数を呼ぶ
3-1. JavaScript外部ファイル内で当該関数をコールするように工夫
3-2. <body>開始タグ内でイベントハンドラを利用(この場合onLoad)
4. htmlファイルにformタグとinputタグのテキストボックスを用意

　3.項については、ここでは3-1. の方法でコーディングするものとします。

　外部ファイルの中身を見る前に2度め以降のスクロールした文字や文章・メッセージの位置をわかりやすくしたい場合には、元のテキストデータ末尾には適度に空白を入れましょう。

　そうすれば繰り返し先頭に戻ってスクロールした時に末尾に先頭がつながった状態にならず文字が判別しやすくなります。

    // msg = "あなたの表示したいメッセージ＋「空白」";
    // msg = "char1 char2 char3  ";
    // msg = "message  ";
    // 尚、スラッシュ2つは単一行用JavaScriptのコメントアウト記号

　というわけで早速、JavaScriptだけが書かれた外部ファイルの中身を見てみましょう。

// ◆『任意のファイル名.js』
var msg = "横スクロールさせたいんだけど、どうやってやるの？  ";
var timerID = setTimeout("msg_scroll()",220);
function msg_scroll(){
     clearTimeout(timerID);
     document.scrolltext.text1.value = msg;
     msg = msg.substring(1,msg.length) + msg.substring(0,1);
     timerID = setTimeout("msg_scroll()",220);
}

　このファイルの説明は後述しますのでhtmlファイルにこの外部ファイルを設定しましょう。

　『任意のファイル名.js』をhtmlファイルに読み込みます。

【推奨】
<script src="任意のファイル名.js" type="text/javascript"></script>
【非推奨】
<script src="任意のファイル名.js" language="JavaScript"></script>

　htmlファイルにformタグとテキストボックスを用意するには次のようにします。

　これを一緒に記述するとhtmlファイルでは次のようになります。

<html>
<head>

</head>
<body>

  <script src="任意のファイル名.js" type="text/javascript"></script>
  <form name="scrolltext(FORMの任意の名前)">
    <input type="text" name="text1(textboxの任意の名前)">
  </form>

</body>
</html>

　お作法に沿ってdoctype宣言、メタタグを適宜追加、これを保存してhtmlファイルを開くと文字がスクロールするようになると思います。

　外部ファイルとしたJavaScriptの内容については下記のようになっています。

【var】
JavaScript唯一の変数宣言時の型

【msg】
msgはユーザー定義変数(変数名は任意)
スクロールするテキストを代入

【timerID=""】
timerIDはユーザー定義変数(変数名は任意)
外部ファイルで使用する変数で『=』の右辺の結果を格納

【setTimeout()】
【clearTimeout()】
JavaScript組み込みタイマー関数

【setTimeout("msg_scroll()",220)】
第1引数はタイマーをセットしたい関数
第2引数はタイムアウトする時間／ミリ秒(1/1000秒)単位
220㍉秒 = 0.22秒

【function msg_scroll() { }】

【function】
JavaScript関数を定義する際に関数宣言として唯一必要な定型句
【msg_scroll()】
外部ファイルで作成するユーザー定義関数で関数名は任意
【 { } 】
関数やif文、for文などの制御構造の処理部分は波カッコで括られた範囲に記述

【document.scrolltext.text1.value = msg;】
JavaScriptを実行したHTMLファイルのformタグ =>nbsp;inputタグのvalue属性に値(ここでは変数msg)を代入

【document】
JavaScriptが実行されたHTMLファイルを指すJavaScriptのオブジェクト

【scrolltext】
JavaScriptを実行したHTMLファイルのformタグのname属性の設定値

【text1】
JavaScriptを実行したHTMLファイルのform開始タグと終了タグ内にあるinputタグのname属性の設定値

【value】
JavaScriptを実行したHTMLファイルのformタグ => inputタグのvalue属性

この時点でHTMLの当該テキストボックスに変数msgに代入したままのテキストが表示されることになります。

【msg = msg.substring(1,msg.length) + msg.substring(0,1);】
【substring(start,end)】
JavaScript組み込み関数
第1引数startから第2引数endまでの長さの部分文字列を取得
長さは0からカウント(0は1文字め、1は2文字め...)

【length】
JavaScript組み込み関数
msg.length
変数msgの長さ(サイズ)を算出

【 + 】
JavaScript組み込み関数
文字列の結合

　手順を整理するとポイントは次の7点です。

1.HTMLファイルに(必要に応じてパス付で)JavaScriptが書かれた外部ファイルを下記の要領で読み込みます。

2.読み込まれたJavaScriptファイルでは、まず後の式が見やすいようにという意味も込めて変数(msg)を宣言してスクロールするメッセージを代入しておきます。

msg = "横スクロールさせたいんだけど、どうやってやるの？ ";

3.ファイルが読み込まれただけではユーザー定義関数は実行されないので作動させる為、読み込み時に1度だけ実行されるJavaScript組み込み関数setTimeout()を使ってユーザー定義関数msg_scroll()をコールします(前述の3-2の場合は、ここに書かずにonLoadに書きます)。

var timerID = setTimeout("msg_scroll()",220);

4.msg_scroll()関数では、関数内処理が長すぎて時間切れで止まってしまうことを回避する目的で念のため、一度セットされたタイマーを解除しています。

clearTimeout(timerID);

5.変数msgにセットした内容をHTMLファイルのname属性が"scrolltext"であるformの開始タグと終了タグの内側にセットしたname属性が"text1"であるinput要素のvalue属性にセットします。

document.scrolltext.text1.value = msg;

6.変数msgに格納された値の(0が1文字め、1が2文字めなので)2文字めから全体の長さ(0から始まるので実質、全長マイナス1文字)までの部分文字列を取得し、その後ろに変数msgに格納されている値の1文字めをセットします。

msg = msg.substring(1,msg.length) + msg.substring(0,1);