気の向くままに辿るIT/ICT/IoT
JavaScript

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

ホーム前へ次へ
文章をスクロールさせたい!『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タグとテキストボックスを用意するには次のようにします。


<form name="scrolltext(FORMの任意の名前)">
  <input type="text" name="text1(textboxの任意の名前)">
</form>

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

<!-- doctype宣言 追加 -->
<html>
<head>
<!-- JavaScript用metaタグ 追加 -->
</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が書かれた外部ファイルを下記の要領で読み込みます。

<script src="任意のファイル名.js" type="text/javascript"></script>

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);

(1文字ずつこれが順次繰り返されることによって左の1文字が消えると、その文字が右にセットされるのでスクロールして見えるようになります。)

(msg宣言時にメッセージの末尾に空白を入れていれば2回め以降のスクロール文字開始位置がわかりやすくなります。)

7.手順4.で解除したタイマーを再度セットしてスクロール(を再開)させます。

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

 少し難しいと感じた方もいらっしゃるかもしれませんが、何度か眺めているうちに「あ!なるほど。」と思えれば、ばっちりです。

 慌てず少しずつ慣れていきましょうね。

次は

アニメーションを作りたい!『JavaScript』

ECMAScript ECMA-262 第5.1版ベースのJavaScript

【ECMAScript / ECMA-262 Edition 5.1 訳】

 尚、下記リンクは、多くの場合、ページ情報量の過多を回避する為、場合によって更に章、節、句ごとに、任意に細分化し、ネストしている部分があります。

旧来掲載のJavaScript

ホーム前へ次へ