【ホームページ作成】毎日自動更新。「今日のおすすめ」欄を作る

※この記事は、前回の記事「複数の画像リンクからランダムに1つを表示」がベースになっています。 まだお読みになっていない場合は先にそちらをどうぞ。

自動更新する「今日のおすすめ」欄を作る

たくさんある「お勧め」の中から、毎日1つを自動的に選んで表示する「今日のおすすめ」欄を作ってみてはいかがでしょうか。 毎日1つのコーナーを紹介したり、1つのイラストや写真を紹介したりするのに使うとおもしろそうです。

以下は、表示写真が自動的に毎日更新されるサンプルです。 写真はリンクになっていて、リンク先URLも写真に合わせて変化します。
※9時0分～翌日8時59分までは何度見ても同じ内容が表示されます。（朝9時に変わるのは日本標準時の環境のみ。詳しくは後述。）

1日1回しか変化しないので確認しにくいのですが、お使いの環境（パソコン）の日付設定を変更してからこのページを再読込すれば、写真が変化しているのが分かります。 （JavaScriptで作っているため、サーバではなく閲覧者側PCの日付が計算に使われます。）
※ここでは写真を4種類しか用意していないので、4日単位でずらすと常に同じ写真が表示されます。確認する際は、1～3日でずらしてみて下さい。

「毎回ランダム」ではなく「同日なら同内容」

前回の記事「複数の画像リンクからランダムに1つを表示」でご紹介したスクリプトでは、アクセスするたびにランダムに1つが選ばれました。 アクセス者によって表示される内容が異なりますし、同じ人物でもアクセスするたびに異なる内容が表示されます。
※ランダムに選ばれた結果、たまたま同じ内容が表示される可能性はありますが。

今回は、このスクリプトを改造して、1日のうちなら何度アクセスしても同じものが表示される「今日のおすすめ」機能を作ってみます。
1日のうちなら、何度見ても、誰が見ても同じ内容が表示されるため、「『今日のおすすめ』に表示されている写真の場所には私も行きましたよー。」のような会話ができます。 （閲覧するたびに異なる写真が表示されると、このような話はできません。）
※パソコンの日付設定が正しくない環境では、表示は同じになりません。

「今日のおすすめ」欄を作る（目次）

前回の記事と重複する箇所の解説は省いています。 もし、まだお読みになっていない場合は、先に「複数の画像リンクからランダムに1つを表示」をお読みいただく方が分かりやすいと思います。

1. 日付を元に1つを選んで、HTMLを生成するJavaScriptを作る
2. 表示するHTMLを書く
3. すべてのソースのまとめ

それでは、最初のステップへ >>