javascript 時間帯表示切り替え

JavaScriptで時間帯に合わせて表示を切り替える方法

この記事では、JavaScriptを使用して、ユーザーのローカル時間帯に基づいてWebサイトに表示される挨拶メッセージを動的に変更する方法を紹介します。

時間帯に合わせた挨拶表示のメリット

ユーザーエクスペリエンスの向上: ユーザーのローカル時間帯に合わせた挨拶を表示することで、よりパーソナルでフレンドリーな印象を与えることができます。
エンゲージメントの向上: ユーザーの状況に合わせたメッセージを表示することで、ユーザーの注意を引き付け、サイトへの関心を高めることができます。
ブランドイメージの向上: 細部にまで気を配ったWebサイトは、ユーザーにプロフェッショナルな印象を与え、ブランドイメージの向上に繋がります。

JavaScriptで時間帯を取得する方法

JavaScriptでは、Dateオブジェクトを使用して現在の時間帯を取得できます。getHours()メソッドを使用すると、0から23までの数値で現在の時刻を取得できます。

<script>
  const now = new Date();
  const currentHour = now.getHours();
  console.log(currentHour); // 例: 14 (午後2時)
</script>

条件分岐で挨拶メッセージを切り替える方法

取得した時刻に基づいて、if文やswitch文などの条件分岐を使用して、表示する挨拶メッセージを切り替えます。

例:
- 午前5時から午前11時までは「おはようございます」
- 午前11時から午後6時までは「こんにちは」
- 午後6時から午後11時までは「こんばんは」
- その他の時間帯は「こんばんは」

<script>
  const now = new Date();
  const currentHour = now.getHours();
  let greeting;

  if (currentHour >= 5 && currentHour < 11) {
    greeting = "おはようございます";
  } else if (currentHour >= 11 && currentHour < 18) {
    greeting = "こんにちは";
  } else {
    greeting = "こんばんは";
  }

  console.log(greeting); 
</script>

HTMLに挨拶メッセージを表示する方法

JavaScriptで生成した挨拶メッセージは、innerHTMLプロパティなどを使いHTML要素に挿入して表示します。

<h2 id="greeting"></h2>

<script>
  // ... (上記のJavaScriptコード) ...

  document.getElementById("greeting").innerHTML = greeting;
</script>

まとめ

JavaScriptを使用すると、時間帯に合わせてWebサイトの表示を簡単に変更できます。ユーザーエクスペリエンスの向上、エンゲージメントの向上、ブランドイメージの向上などに繋がるため、ぜひあなたのWebサイトにも実装してみてください。

参考資料

Date - JavaScript | MDN

関連QA

質問	回答
時間帯に合わせて表示する画像も変更できますか？	はい、可能です。JavaScriptで時間帯に応じて画像のURLを変更し、HTMLの`img`タグの`src`属性に設定することで実現できます。
ユーザーのタイムゾーンはどのように取得できますか？	ブラウザの機能を使用してユーザーのタイムゾーンを取得できます。詳細については、TimeZone APIを参照してください。
この機能をWordPressサイトに実装するにはどうすればよいですか？	JavaScriptコードをテーマファイル内の適切な場所に挿入するか、プラグインを使用して実装することができます。

その他の参考記事:jquery 時間指定