Contents
春よ来い…
こんにちは！
3月になって、少しずつ暖かい日が増えてきました。
春までもう少しですね。
Webサイトやサービス内で、バナーや広告が貼られていることが多いと思うのですが、
それらの画像を指定日時で自動で切り替えたり、ランダムで表示させたい〜という要望、結構ありますよね。
ということで今回は、
と題して、具体的な書き方を以下に記載していきたいと思います。
前回ブログはこちらから↓
PHPで指定の日時が来たら自動でバナー(画像)を切り替える方法
ある指定の日時を過ぎたら、画像を自動で切り替える、という実装をやってみます。
ソースコード( HTML & PHP )
date_default_timezone_set('Asia/Tokyo'); // タイムゾーン設定
$nowDate = strtotime(date('Y-m-d H:i:s')); // 現在時刻
$switchImageDate = strtotime('2021-03-01 00:00:00'); // 画像切替日時
$image = ''; // 画像のパスを格納する変数
$link = ''; // 画像のリンクを格納する変数
if($nowDate < $switchImageDate){
// 現在時刻が 2021-04-01 00:00:00 より前である場合
$image = './hoge.jpg';
$link = 'https://tsuchippo.com/hogehoge';
}else{
// 現在時刻が 2021-04-01 00:00:00 より後である場合
$image = './fuga.jpg';
$link = 'https://tsuchippo.com/fugafuga';
}<body>
<div>
<a href="<?=$link?>">
<img src="<?=$image?>" alt="">
</a>
</div>
</body>まずタイムゾーンを設定して、現在時間と画像を切り替えたい時間をそれぞれ定義します。
あとは現在時間が指定日より前だった場合と、後だった場合とで if 文で分岐してそれぞれ表示させたい画像・リンクのパスを指定するだけ。
簡単でしたね。
(上記ソースコード内の画像とリンクは適当に書いただけです)
JavaScriptで複数のバナー(画像)をランダムで切り替える方法
今度はページアクセスするたびにランダムに画像を切り替える実装をやってみます。
画像を貼る際は、alt やリンク先を設定することがほとんどだと思うので、それらも一緒に動的に切り替わるようにします。
ソースコード( JavaScript )
const bannerArea = document.querySelector('.banner');
// 表示させるバナーのリスト
const bannerLists = [
{ src: '/blog/img/checkbox_validation.jpg', link: 'https://tsuchippo.com/programming-checkbox-validation', alt: 'JavaScriptで複数のチェックボックスの空欄チェックをする方法' },
{ src: '/blog/img/scg_color.png', link: 'https://tsuchippo.com/htmlcss-svgcolor', alt: 'SVG ファイルを外部読み込みして CSS で色を変更する方法' },
{ src: '/blog/img/heredoc.jpg', link: 'https://tsuchippo.com/programming-heredoc', alt: '[PHP] foreach の中でヒアドキュメントを使う方法' },
];
// ランダムにバナーのリストのインデックスを取得する
const bannerListsIndex = Math.floor(Math.random() * bannerLists.length);
// 動的に a タグ、img タグを生成する
const bannerLink = document.createElement('a');
bannerLink.href = bannerLists[bannerListsIndex].link;
const bannerImage = document.createElement('img');
bannerImage.src = bannerLists[bannerListsIndex].src;
bannerImage.alt = bannerLists[bannerListsIndex].alt;
bannerLink.appendChild(bannerImage);
bannerArea.appendChild(bannerLink);まずランダム表示させたい画像群を配列で定義します。
どの画像を表示させるかは、Math オブジェクトを使って先ほど定義した配列のインデックスをランダムに取得します。
あとは createElement で a タグと img タグを生成し、 bannerLists[bannerListsIndex(先ほどランダムに取得したインデックス)] にドットでキー( link 、src 、al)にそれぞれアクセスして値を取得、 最後に画像を表示させたい要素に appendChild すれば完成。
上記には書かなかったですが、もし別窓でリンクを開きたい場合は下記のようにすればok。
(個人的には、あまり別窓で開くのは好きではない…)
なんか JavaScript で書けると嬉しいww(単純
まとめ
今回は、PHP/JavaScriptでバナー(画像)を自動で切り替える方法についてまとめてみました。
画像をランダムで切り替える方法については、src属性だけを動的に変化させる方法はググればいろいろ見つかったのですが、
alt と href も一緒に動的に生成する方法は見つからず、自分なりに書いてみました。
自分が書いたコードっていつも「もっといい書き方ないのかな〜」って思っちゃうんですが…。
何かご参考になれば幸いです。
ここまでお読みいただき、ありがとうございました！
