画像リンクのリストを作る

まず、表示する選択肢になる「画像リンク」のリストを作る必要があります。 これは、前回の記事で解説したとおり、以下のように記述します。

<script type="text/javascript"><!--
   // 画像・URLリストを配列で作る
   var imglist = [
      [ "photoA.jpg", "写真A", "pageA.html" ] ,
      [ "photoB.jpg", "写真B", "pageB.html" ] ,
      [ "photoC.jpg", "写真C", "pageC.html" ] ,
      [ "photoD.jpg", "写真D", "pageD.html" ] //注
   ];
// --></script>

※詳細は、前回の記事の2ページ目をご参照下さい。
※「//注」の位置(配列の最後)にカンマは不要です。

日付を元に1つを選んで、HTMLを生成するJavaScriptを作る

次に、上記の「画像リンク群」の中から、日付を元にして1つを選んで表示するJavaScriptを書きます。 以下のソースを先ほどのソースの続きに記述します。

※ここは、すべてをコピー&ペーストするだけで構いません。(何も編集する必要はありません。)

<script type="text/javascript"><!--
function DailyImageLink() {
   // 日付を元にどれか1つを選ぶ
   var selectnum = Math.floor((new Date()).getTime() / (1000*60*60*24)) % imglist.length;
   // 画像とリンクを生成
   var output =
      '<a href="' + imglist[selectnum][2] + '">' +
      '<img src="' + imglist[selectnum][0] + '"' +
      ' alt="' + imglist[selectnum][1] + '"><br>' +
      imglist[selectnum][1] + '</a>';
   // 生成したHTMLを出力
   document.write(output);
}
// --></script>

前回の記事のソースと異なっているのは、次の2点だけです。

解説を飛ばして、HTMLの記述に進む >>

1.関数の名前

毎日変化するので「DailyImageLink」としました。関数名は何でも構わないのですが、同じ関数名が複数あるとうまく動きません。 前回に作成した関数「RandomImageLink」と共存させたい場合は特に、同じ関数名にはしないで下さい。

2.どれか1つを選ぶ計算

ランダムに選ぶのではなく、日付を元にして1つを選ぶよう書き換えています。

Math.floor((new Date()).getTime() / (1000*60*60*24)) % imglist.length;

この行の意味は、下記の通りです。

  • 《A》 (new Date()).getTime()
    … 1970年1月1日から現在までの経過時間をミリ秒で得ます。
  • 《B》 1000*60*60*24
    … 1日の時間をミリ秒で表しています。1日は、24時間×60分×60秒×1000ミリ秒なので、86,400,000ミリ秒です。計算式ではなく、直接「86400000」という値を書いても同じです。(計算式で書いておくと、後のカスタマイズが分かりやすくなります。)

上記の《A》を《B》で割ることで、「1970年1月1日から現在までの経過日数」が求まります。(1日未満の値は小数点以下で表されています。)

  • 《C》 Math.floor( … )
    … 小数点以下を切り捨てて整数にします。Math.floor( 《A》 / 《B》 ); で、小数点以下を除いて日数だけになります。
  • 《D》 imglist.length
    … 用意した「画像リンク」の個数です。

上記の《C》を《D》で割った余りを計算することで、「日付を元にして1つ選んだ番号」が得られます。

※JavaScriptで「/」記号は「割り算」を表し、「%」記号は「割った余り」を表します。 例えば、「 6 / 4 」は「 6÷4 」なので「1.5」になります。 「 6 % 4 」は「 6÷4の余り 」なので「2」になります。

それ以外のソースに関しては、前回とまったく同じなのでここでの説明は省きます。 詳しくは、前回の記事の3ページ目をご参照下さい。

「2日に1回更新」や「半日に1回更新」も

上記のソースで、「 1000*60*60*24 」と書いた部分を修正すれば、更新頻度を「2日に1回」や「半日に1回」、「毎時更新」など様々にカスタマイズできます。

  • 7日に1回にする場合: 1000*60*60*24*7
  • 2日に1回にする場合: 1000*60*60*24*2
  • 半日に1回にする場合: 1000*60*60*12
  • 3時間に1回にする場合: 1000*60*60*3
  • 15分に1回にする場合: 1000*60*15

「 1000*60*60*24 」が「1日分の総ミリ秒数」を表しています。ですから、「2日分の総ミリ秒数」を記述すれば「2日に1回」の更新にできます。

日本標準時での0時に画像を変化させるには

上記のソースの場合、画像が変化するのは午前0時ではなく午前9時です。 これは、先ほどの計算式が「GMT(グリニッジ標準時)」を基準に計算されているからです。 日本標準時(JST)は、GMTより9時間進んでいるので、GMTの0時はJSTの9時です。 ですから、日本標準時の環境では、午前9時に画像が変化します。

JSTでの0時に画像を変化させたい場合は、「getTime()」で1970年1月1日からの経過時刻を出すところで、9時間分のミリ秒「1000*60*60*9」を足しておくと良いでしょう。 以下のように記述します。

var selectnum = Math.floor(((new Date()).getTime()+1000*60*60*9) / (1000*60*60*24)) % imglist.length;

最後に、上記で作った関数を呼び出して表示するHTMLを書きましょう。

表示するためのHTMLを書く方法へ >>