まだなにもない空間： JavaScript実験場

時刻に合わせたメッセージ表示

ここでは、時刻に合わせてメッセージを表示させるスクリプトを作っていきます。ここでのスクリプトの流れとしては、まず表示するメッセージを変数として定義します。次に、Dateオブジェクトを定義してそこから時刻を取り出します。最後に取り出した時刻によって表示する内容を切り替えるようにして、メッセージの表示を行います。では、順に定義していきます。

メッセージの設定

まず、メッセージとして表示する内容を決めておきます。時刻に合わせていくつかの変数を用意し、それぞれに表示するメッセージを格納しておきます。なお、状況によっては、変数の代わりに配列を利用して、全体的にスクリプトを簡潔にすることも可能です。それぞれのケースについて、合わせて考えていきましょう。

今回は、朝、昼、夜、深夜の4パターンのメッセージを用意しておくことにします。朝は「おはようございます」、昼間は「こんにちは」、夜は「こんばんは」、深夜は「ZZZZZ」というメッセージにしておきましょう。まず、これらを定義します。

例1(変数利用)：
var msg0="ZZZZZ";
var msg1="おはようございます";
var msg2="こんにちは";
var msg3="こんばんは";

例2(配列利用)：
var msg=new Array();
msg[0]="ZZZZZ";
msg[1]="おはようございます";
msg[2]="こんにちは";
msg[3]="こんばんは";

なお、設定するメッセージの数が多くなれば、配列を利用する方が若干有利に取り扱えるようになります。

時刻の取得

時刻の取得のスクリプトの書き方は、前ページのものと同じです。今回利用するのは時間に関する値だけですのでそれだけを取得します。

例：
var now=new Date();
hrs=now.getHours();

メッセージの切り替え

取得した時刻に合わせて、表示するメッセージを振り分けします。ついでに、一気に表示の指定までをここでやってしまいます。表示するメッセージの振り分けはif文を、メッセージの表示はdocument.write()メソッドを利用します。スクリプトを書きましょう。

例(変数利用)：
if (6>hrs || hrs==23) {document.write(msg0);}
else if (12>hrs) {document.write(msg1);}
else if (17>hrs) {document.write(msg2);}
else {document.write(msg3);}

なお、配列を利用している場合は、if文による分岐を設定しないで表示内容を切り替えることができます。その場合は、時刻の時を格納した変数hrsを、配列番号を指定する値として利用します。もしメッセージが24個用意されているのであれば、この部分の記述は、

document.write(msg[hrs]);

のみで完了します。そうでない場合でも、hrsの値を適宜計算・加工して、配列番号を指定する値に利用すれば、それでもif文を利用せずにスクリプトを簡潔にできます。このケースでは、一日を6時間ごと4つに区分するとして、変数hrsを0から3までの値に変換します。実例を挙げます。

例(配列利用)：
hrs++;
hrs=Math.ceil(hrs/6)-1;
document.write(msg[hrs]);

こちらの例では、1行目でまず計算時に備えてhrsの値を1増やしています。次の割り算の時に0の値が出ないようにするためです。次の行では、hrsを6で割り、値を切り上げて、さらに1を引くことで0から3の値を得ています。値の切り上げには、「Math.ceil()」メソッドを利用しています。これは、括弧内で指定している小数点以下の値を持つ数において、その値をはさむ二つの整数値の内、大きいほうの値を返します。従って、正の値であれば切り上げと同等の処理になります。その次の行で、配列の内容を特定してそれを表示させています。このように、配列を利用した場合は、時刻の範囲の指定に柔軟性がなくなりますが、スクリプトは簡潔に記述できるようになります。

これでスクリプトの内容はすべてまとまりました。このスクリプト群を順に一つの<script>要素内に収め、その<script>要素を、メッセージを出力したい位置に配置すれば完成です。

まとめ

では、上記のスクリプトをまとめたソースを示し、実装例も合わせて置いておきます。

ソース例(変数利用)：
<script type="text/javascript">
<!--
var msg0="ZZZZZ";
var msg1="おはようございます";
var msg2="こんにちは";
var msg3="こんばんは";

var now=new Date();
hrs=now.getHours();

if (6>hrs || hrs==23) {document.write(msg0);}
else if (12>hrs) {document.write(msg1);}
else if (17>hrs) {document.write(msg2);}
else {document.write(msg3);}
// -->
</script>

ソース例(配列利用)：
<script type="text/javascript">
<!--
var msg=new Array();
msg[0]="ZZZZZ";
msg[1]="おはようございます";
msg[2]="こんにちは";
msg[3]="こんばんは";

var now=new Date();
hrs=now.getHours();

hrs++;
hrs=Math.ceil(hrs/6)-1;
document.write(msg[hrs]);
// -->
</script>

実装例(変数利用)：現時刻では「」
6時の場合:「」 13時の場合:「」 17時の場合:「」 23時の場合:「」

実装例(配列利用)：現時点では「」
6時の場合:「」 13時の場合:「」 17時の場合:「」 23時の場合:「」

以上で、時刻に合わせたメッセージを表示させるスクリプトは完成です。取得する時間や表示するメッセージを調整すれば、祝祭日や曜日ごとのメッセージの表示などをさせるような応用も可能でしょう。

ここまでできれば、時刻を利用したスクリプトの概要は理解できると思います。今回のテーマは、以上です。参考になれば幸いです。

JavaScript実験場

時刻の利用 -メッセージ編-

Index

時刻に合わせたメッセージ表示

メッセージの設定

時刻の取得

メッセージの切り替え

まとめ