毎日自動更新。「今日のおすすめ」欄を作る(2ページ目)

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

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

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

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

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

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

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

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

１．関数の名前

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

２．どれか1つを選ぶ計算

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

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

• 《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」を足しておくと良いでしょう。 以下のように記述します。

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

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