プログラミング

【PR】を含みます。

【JavaScript】期間を指定してバナーの切り替え・表示・非表示を制御する方法

JavaScript 期間を指定してバナーの切り替え・表示・非表示を制御する方法

フロントエンドの業務において、期間を指定して複数ページに表示しているバナーの切り替え・表示・非表示の制御を行いたいというご要望を頂くことが時々あります。

この記事では、JavaScriptファイルを更新することで、バナーの切り替え・表示・非表示の制御を行う方法を解説します。

以下の記事で、HTML側の日時更新のみで要素の表示切替を行う方法を解説してます。

あわせて読む
JavaScript 指定した日時で要素の表示・非表示を切り替える方法
【JavaScript】指定した日時で要素の表示・非表示を切り替える方法

もくじHTMLファイルの更新のみで要素の表示・非表示を制御実装コード使用方法１．HTMLを設置する２．CSSを設置する３．JavaScriptを設置する動作しないときに確認することdata-show・ ...

JavaScriptファイルの更新のみでバナーの切り替え・表示・非表示を制御

バナーを表示したいージに、HTML、CSS、JavaScriptファイルを設置することで、JavaScriptファイルの更新のみでバナーの表示切替を制御することが可能です。

以下のコードは複数のページに同じバナーを設置し、頻繁にバナーを切り替える必要がある場合に便利です。

実装コード

HTML
Copy
  1. <div class="banner js-banner"></div>
  2. <script src="/script.js"></script>
CSS
Copy
  1. .banner_inner {
  2.   display: flex;
  3.   justify-content: center;
  4.   margin-bottom: 20px;
  5. }
  7. .banner_inner:last-child {
  8.   margin-bottom: 0;
  9. }
  11. .banner_inner img {
  12.   display: block;
  13.   max-width: 100%;
  14.   height: auto;
  15. }
JavaSctipt
Copy
  1. // バナー設定
  2. addBanner({
  3.   targetContainer: '.js-banner', // バナー表示エリアを取得
  4.   imageUrl: 'https://webdesign-programming.com/img/banner1.jpg', // バナー画像のURL
  5.   bannerLinkUrl: 'https://webdesign-programming.com/javascript-time-limit-setting/', // バナーのリンク先URL
  6.   appearTime: '2020-01-01T00:00:00', // 表示開始（タイムスタンプまたは日付文字列）
  7.   disappearTime: '2090-12-31T23:59:59', // 表示終了日（タイムスタンプまたは日付文字列）
  8. });
  10. /**
  11.  * バナーを追加する関数
  12.  * @param {Object} params - バナー設定オブジェクト
  13.  */
  14. function addBanner(params) {
  15.   const bannerContainer = document.querySelector(params.targetContainer); // バナー表示エリアを取得
  16.   if (!bannerContainer) return; // バナー表示エリアを取得できない場合処理を中止
  18.   const imageUrl = params.imageUrl; // バナー画像のURL
  19.   // バナー画像URLが指定されていない場合は処理を中止
  20.   if (!imageUrl) return;
  22.   const appearTime = params.appearTime ? Math.floor(new Date(params.appearTime).getTime() / 1000) : false; // 表示開始時刻
  23.   const disappearTime = params.disappearTime ? Math.floor(new Date(params.disappearTime).getTime() / 1000) : false; // 表示終了時刻
  25.   // 日付形式の確認
  26.   const errors = [];
  27.   if (isNaN(appearTime)) {
  28.     errors.push('表示開始日の日付形式が不正です。');
  29.   }
  31.   if (isNaN(disappearTime)) {
  32.     errors.push('表示終了日の日付形式が不正です。');
  33.   }
  35.   if (errors.length) {
  36.     errors.forEach((err, i) => console.error(`${err}`));
  37.     return;
  38.   }
  40.   // 表示条件に合わない場合は処理を中止しバナーを表示しない
  41.   const currentTime = Math.floor(new Date().getTime() / 1000);
  42.   if ((appearTime && currentTime < appearTime) || (disappearTime && currentTime > disappearTime)) {
  43.     return;
  44.   }
  46.   // バナー表示処理
  47.   const bannerDiv = document.createElement('div');
  48.   bannerDiv.className = 'banner_inner';
  50.   const img = document.createElement('img');
  51.   img.src = imageUrl;
  52.   img.alt = 'バナー';
  54.   // リンクが設定されている場合はリンクを作成
  55.   const bannerLinkUrl = params.bannerLinkUrl ? params.bannerLinkUrl : false; // バナーのリンク先URL
  57.   if (bannerLinkUrl) {
  58.     const link = document.createElement('a');
  59.     link.href = bannerLinkUrl;
  60.     link.appendChild(img);
  61.     bannerDiv.appendChild(link);
  62.   } else {
  63.     bannerDiv.appendChild(img);
  64.   }
  66.   bannerContainer.appendChild(bannerDiv);
  67. }

使用方法

１．バナーを表示させたいページにHTMLコンテナを設置する

まず、バナーを表示するためのHTMLコンテナを設置します。

以下はその例です。

HTML
Copy
  1. <div class="banner js-banner"></div>
  2. <script src="/script.js"></script>

このjs-bannerクラスが付いたdivが、JavaScriptでバナーを動的に追加するターゲットエリアになります。

divタグ直下でJavaScriptファイルを読み込んでますが、読み込み場所は適宜変更してください。

js-bannerクラスが付いたdivより前(headタグ内等)でJavaSctiptファイルを読み込む場合、別途JavaScriptファイルの調整が必要になります。

２．バナーを表示させたいページにCSSを追加する

次に、バナーのスタイルをCSSで設定します。

実装コードのCSSはバナーを中央に配置し、画像をレスポンシブにする例です。

必要に応じて変更してください。

３．addBanner関数に渡すパラメータの調整

最後に、addBanner関数に渡すパラメータを調整します。

JavaSctipt
Copy
  1. // バナー設定
  2. addBanner({
  3.   targetContainer: '.js-banner', // バナー表示エリアを取得
  4.   imageUrl: 'https://webdesign-programming.com/img/banner1.jpg', // バナー画像のURL
  5.   bannerLinkUrl: 'https://webdesign-programming.com/javascript-time-limit-setting/', // バナーのリンク先URL
  6.   appearTime: '2020-01-01T00:00:00', // 表示開始（タイムスタンプまたは日付文字列）
  7.   disappearTime: '2090-12-31T23:59:59', // 表示終了日（タイムスタンプまたは日付文字列）
  8. });
targetContainer
バナーを表示したい場所のクラス名、ID名、またはタグ名を指定します。
※クラス名等が他の要素と重複しないように設定する必要があります
imageUrl
バナー画像のURLを指定します。
bannerLinkUrl
バナーにリンクを設定したい場合、リンク先のURLを指定します。
指定しない場合、リンク先なしのバナーを表示することが可能です。
appearTime
バナーを表示し始める日時を指定します。
appearTimeを指定しない場合、バナーはすぐに表示されます。
disappearTime
バナーを非表示にする日時を指定します。
disappearTimeを指定しない場合、バナーはページに表示されたままになります。

動作しないときに確認すること

開始日・終了日で指定する日付文字列について

2024-12-31 23:59:59のような一般的な日付と時刻の表記形式で記述すると、一部ブラウザ（古いバージョンのsafari等）で日付と認識されない場合があります。

日付文字列が原因で動作しない場合、ISO 8601という国際標準の日時表記形式に基づいて記述してみてください。

実装コードでは、ISO 8601という国際標準の日時表記形式に基づいて記述しています（2020-01-01T00:00:00）。

ISO 8601では、日付と時刻の間にT入れることで、日付と時刻が一緒に書かれているということを示しています。

使用例

期間を指定せずにバナーを常に表示する

appearTimeとdisappearTimeを指定しないことで、バナーを常に表示することができます。

JavaSctipt
Copy
  1. // バナー設定
  2. addBanner({
  3.   targetContainer: '.js-banner', // バナー表示エリアを取得
  4.   imageUrl: 'https://webdesign-programming.com/img/banner1.jpg', // バナー画像のURL
  5.   bannerLinkUrl: 'https://webdesign-programming.com/javascript-time-limit-setting/', // バナーのリンク先URL
  6. });
  8. /**
  9.  * バナーを追加する関数
  10.  * @param {Object} params - バナー設定オブジェクト
  11.  */
  12. function addBanner(params) {
  13.   const bannerContainer = document.querySelector(params.targetContainer); // バナー表示エリアを取得
  14.   if (!bannerContainer) return; // バナー表示エリアを取得できない場合処理を中止
  16.   const imageUrl = params.imageUrl; // バナー画像のURL
  17.   // バナー画像URLが指定されていない場合は処理を中止
  18.   if (!imageUrl) return;
  20.   const appearTime = params.appearTime ? Math.floor(new Date(params.appearTime).getTime() / 1000) : false; // 表示開始時刻
  21.   const disappearTime = params.disappearTime ? Math.floor(new Date(params.disappearTime).getTime() / 1000) : false; // 表示終了時刻
  23.   // 日付形式の確認
  24.   const errors = [];
  25.   if (isNaN(appearTime)) {
  26.     errors.push('表示開始日の日付形式が不正です。');
  27.   }
  29.   if (isNaN(disappearTime)) {
  30.     errors.push('表示終了日の日付形式が不正です。');
  31.   }
  33.   if (errors.length) {
  34.     errors.forEach((err, i) => console.error(`${err}`));
  35.     return;
  36.   }
  38.   // 表示条件に合わない場合は処理を中止しバナーを表示しない
  39.   const currentTime = Math.floor(new Date().getTime() / 1000);
  40.   if ((appearTime && currentTime < appearTime) || (disappearTime && currentTime > disappearTime)) {
  41.     return;
  42.   }
  44.   // バナー表示処理
  45.   const bannerDiv = document.createElement('div');
  46.   bannerDiv.className = 'banner_inner';
  48.   const img = document.createElement('img');
  49.   img.src = imageUrl;
  50.   img.alt = 'バナー';
  52.   // リンクが設定されている場合はリンクを作成
  53.   const bannerLinkUrl = params.bannerLinkUrl ? params.bannerLinkUrl : false; // バナーのリンク先URL
  55.   if (bannerLinkUrl) {
  56.     const link = document.createElement('a');
  57.     link.href = bannerLinkUrl;
  58.     link.appendChild(img);
  59.     bannerDiv.appendChild(link);
  60.   } else {
  61.     bannerDiv.appendChild(img);
  62.   }
  64.   bannerContainer.appendChild(bannerDiv);
  65. }

複数のバナーを表示する

JavaSctipt
Copy
  1. // バナー設定
  2. addBanner({
  3.   targetContainer: '.js-banner', // バナー表示エリアを取得
  4.   imageUrl: 'https://webdesign-programming.com/img/banner1.jpg', // バナー画像のURL
  5. });

addBanner()部分を複数回実行することで、複数のバナーを表示することができます。

JavaSctipt
Copy
  1. // バナー設定
  2. addBanner({
  3.   targetContainer: '.js-banner', // バナー表示エリアを取得
  4.   imageUrl: 'https://webdesign-programming.com/img/banner1.jpg', // バナー画像のURL
  5. });
  7. addBanner({
  8.   targetContainer: '.js-banner', // バナー表示エリアを取得
  9.   imageUrl: 'https://webdesign-programming.com/img/banner2.jpg', // バナー画像のURL
  10. });
  12. /**
  13.  * バナーを追加する関数
  14.  * @param {Object} params - バナー設定オブジェクト
  15.  */
  16. function addBanner(params) {
  17.   const bannerContainer = document.querySelector(params.targetContainer); // バナー表示エリアを取得
  18.   if (!bannerContainer) return; // バナー表示エリアを取得できない場合処理を中止
  20.   const imageUrl = params.imageUrl; // バナー画像のURL
  21.   // バナー画像URLが指定されていない場合は処理を中止
  22.   if (!imageUrl) return;
  24.   const appearTime = params.appearTime ? Math.floor(new Date(params.appearTime).getTime() / 1000) : false; // 表示開始時刻
  25.   const disappearTime = params.disappearTime ? Math.floor(new Date(params.disappearTime).getTime() / 1000) : false; // 表示終了時刻
  27.   // 日付形式の確認
  28.   const errors = [];
  29.   if (isNaN(appearTime)) {
  30.     errors.push('表示開始日の日付形式が不正です。');
  31.   }
  33.   if (isNaN(disappearTime)) {
  34.     errors.push('表示終了日の日付形式が不正です。');
  35.   }
  37.   if (errors.length) {
  38.     errors.forEach((err, i) => console.error(`${err}`));
  39.     return;
  40.   }
  42.   // 表示条件に合わない場合は処理を中止しバナーを表示しない
  43.   const currentTime = Math.floor(new Date().getTime() / 1000);
  44.   if ((appearTime && currentTime < appearTime) || (disappearTime && currentTime > disappearTime)) {
  45.     return;
  46.   }
  48.   // バナー表示処理
  49.   const bannerDiv = document.createElement('div');
  50.   bannerDiv.className = 'banner_inner';
  52.   const img = document.createElement('img');
  53.   img.src = imageUrl;
  54.   img.alt = 'バナー';
  56.   // リンクが設定されている場合はリンクを作成
  57.   const bannerLinkUrl = params.bannerLinkUrl ? params.bannerLinkUrl : false; // バナーのリンク先URL
  59.   if (bannerLinkUrl) {
  60.     const link = document.createElement('a');
  61.     link.href = bannerLinkUrl;
  62.     link.appendChild(img);
  63.     bannerDiv.appendChild(link);
  64.   } else {
  65.     bannerDiv.appendChild(img);
  66.   }
  68.   bannerContainer.appendChild(bannerDiv);
  69. }

サンプル

期間を指定して複数のバナーの表示切り替えを制御する

以下のコードは、2020-01-01 00:00:00 から 2024-08-31 23:59:59 までは「banner1.jpg」のバナーを表示し、2024-09-01 00:00:00 以降は「banner2.jpg」を表示するように設定しています。

JavaSctipt
Copy
  1. // バナー設定
  2. addBanner({
  3.   targetContainer: '.js-banner', // バナー表示エリアを取得
  4.   imageUrl: 'https://webdesign-programming.com/img/banner1.jpg', // バナー画像のURL
  5.   appearTime: '2020-01-01T00:00:00', // 表示開始（タイムスタンプまたは日付文字列）
  6.   disappearTime: '2024-08-31T23:59:59', // 表示終了日（タイムスタンプまたは日付文字列）
  7. });
  9. addBanner({
  10.   targetContainer: '.js-banner', // バナー表示エリアを取得
  11.   imageUrl: 'https://webdesign-programming.com/img/banner2.jpg', // バナー画像のURL
  12.   appearTime: '2024-09-01T00:00:00', // 表示開始（タイムスタンプまたは日付文字列）
  13. });
  15. /**
  16.  * バナーを追加する関数
  17.  * @param {Object} params - バナー設定オブジェクト
  18.  */
  19. function addBanner(params) {
  20.   const bannerContainer = document.querySelector(params.targetContainer); // バナー表示エリアを取得
  21.   if (!bannerContainer) return; // バナー表示エリアを取得できない場合処理を中止
  23.   const imageUrl = params.imageUrl; // バナー画像のURL
  24.   // バナー画像URLが指定されていない場合は処理を中止
  25.   if (!imageUrl) return;
  27.   const appearTime = params.appearTime ? Math.floor(new Date(params.appearTime).getTime() / 1000) : false; // 表示開始時刻
  28.   const disappearTime = params.disappearTime ? Math.floor(new Date(params.disappearTime).getTime() / 1000) : false; // 表示終了時刻
  30.   // 日付形式の確認
  31.   const errors = [];
  32.   if (isNaN(appearTime)) {
  33.     errors.push('表示開始日の日付形式が不正です。');
  34.   }
  36.   if (isNaN(disappearTime)) {
  37.     errors.push('表示終了日の日付形式が不正です。');
  38.   }
  40.   if (errors.length) {
  41.     errors.forEach((err, i) => console.error(`${err}`));
  42.     return;
  43.   }
  45.   // 表示条件に合わない場合は処理を中止しバナーを表示しない
  46.   const currentTime = Math.floor(new Date().getTime() / 1000);
  47.   if ((appearTime && currentTime < appearTime) || (disappearTime && currentTime > disappearTime)) {
  48.     return;
  49.   }
  51.   // バナー表示処理
  52.   const bannerDiv = document.createElement('div');
  53.   bannerDiv.className = 'banner_inner';
  55.   const img = document.createElement('img');
  56.   img.src = imageUrl;
  57.   img.alt = 'バナー';
  59.   // リンクが設定されている場合はリンクを作成
  60.   const bannerLinkUrl = params.bannerLinkUrl ? params.bannerLinkUrl : false; // バナーのリンク先URL
  62.   if (bannerLinkUrl) {
  63.     const link = document.createElement('a');
  64.     link.href = bannerLinkUrl;
  65.     link.appendChild(img);
  66.     bannerDiv.appendChild(link);
  67.   } else {
  68.     bannerDiv.appendChild(img);
  69.   }
  71.   bannerContainer.appendChild(bannerDiv);
  72. }

udemyでJavaScriptを学ぶ

講座名
【2023年最新】【JavaScript＆CSS】ガチで学びたい人のためのWEB開発実践入門（フロントエンド編） icon
学習時間
24.5時間
学習内容
  • 本格的なWEBサイトを作成する方法について学びます。
  • Sass（※以下CSSと記載）、JavaScriptの基礎について深く学びます。
  • CSS、JavaScriptの実践的な記述について深く学びます。
  • CSS、JavaScriptアニメーションの実装について学びます。
  • 最新の実践的なWEB画面の作成方法について深く学びます。
  • CSS、JavaScriptのコードの最適化、安定化について学びます。
  • 維持管理、持続可能なコードの記述方法について学びます。
対象受講者
  • ドットインストールでCSS、JavaScriptの入門編を終えたレベルの方
  • 他の先生のフロントエンドの入門編を終えたレベルの方
  • 自分で本格的なWEBサイトを作ってみたい方
  • CSS、JavaScriptの実践的な基礎を効率的に学びたい方
  • CSS、JavaScriptを今後仕事で使う予定の方
  • CSS、JavaScriptのコードの整理方法について学びたい方
  • CSS、JavaScriptのアニメーションを学びたい方
  • CSS、JavaScriptのレベルアップしたいWeb開発初級者の方
  • CSS、JavaScriptでどのようにすればレベルアップできるのか悩んでいる方
アイコン画像

もみじ

HTML・CSS・JavaScripの基礎的なことを理解しており、Webのフロントエンジニアを目指している方にオススメの講座です。

講座内容は実践で使用するものが多く、実務でも役立つ内容でした。

講座名
【JS】ガチで学びたい人のためのJavaScriptメカニズム icon
学習時間
20.5時間
学習内容
  • JavaScriptの動作原理について深く学びます。
  • JavaScriptがどのように実行されるのかについて深く学びます。
  • ES6+の最新のJavaScriptの記法について幅広く学びます。
  • 変数や参照の仕組みについて深く学びます。
  • オブジェクトのメカニズムについて深く学びます。
  • 関数のメカニズムについて深く学びます。
  • スコープの仕組みについて深く学びます。
  • プロトタイプのメカニズムについて深く学びます。
  • 反復処理のメカニズムについて深く学びます。
  • ジェネレーターやイテレーターについて深く学びます。
  • コールバック関数について深く学びます。
  • 非同期処理のメカニズムについて深く学びます。
  • モジュールの仕組みについて深く学びます。
  • クロージャーの仕組みについて深く学びます。
  • レキシカルスコープの仕組みについて深く学びます。
  • アロー関数の特徴について深く学びます。
  • レキシカルスコープの仕組みについて深く学びます。
  • アロー関数の特徴について深く学びます。
  • thisの仕組みについて深く学びます。
  • bind、apply、callの動作原理について深く学びます。
  • クラスと継承の仕組みについて深く学びます。
  • ReflectやProxyなどの強力なオブジェクトへの理解を深めます。
  • Map，Setなどの強力なコレクションについて実践を交えて学びます。
  • よく使用される強力な実装パターンを演習を交えて学びます。
  • 独自のフレームワークを構築していく中でJavaScriptのメカニズムについて理解を深めます。
対象受講者
  • JavaScriptをコアの動作原理からキチンと理解したい方。
  • 自分の思った通りコードが動かずに悩んでいる方。
  • 自分の思った通りに動かず、気付いたら解決するのに１日経ってしまっていた経験のある方。
  • React, Vue, Angularが使いこなせず悩んでいる方。
  • JavaScriptの不可解な動きが理解できず、苦しんでいる方。
  • 少し複雑なコードを書こうとすると、ぐちゃぐちゃになって整理しきれず、悩んでいる方。
  • JavaScriptを本気で勉強したいと思っている方。
  • JavaScriptの変態仕様に苦しんでいる方。
  • JavaScriptが苦手なプログラマーの方。
アイコン画像

もみじ

JavaScripの基礎的なことを理解しており、より深くJavaScriptについて理解したいという方にオススメの講座です。

初心者の方が一度の受講で全てを吸収するのは難しいですが、繰り返し受講することでフロントエンドの業務で役立つ知識を身に付けることができます。

HTMLとCSSの知識がありJavaScriptを学びたいという方におすすめの1冊

アイコン画像

もみじ

HTMLとCSSの知識がありJavaScriptを学びたいという方に入門書としておすすめの書籍です。

実務で役立つサンプルを手を動かしながら学ぶことができ、実践的なスキルを身に付けることができます。

JavaScriptのフロントエンドエンジニアを目指している方におすすめの1冊

アイコン画像

もみじ

この本はJavaScript初心者からフロントエンドエンジニアを目指す方にぴったりの1冊です。

非同期処理やAJAXなど、現代の開発で必要なスキルがわかりやすく解説されており、実務で役立つスキルを学ぶことができます。

-プログラミング
-