文章fun-with-js-dynamic-title.md

ブログにちょっとした楽しみを：JSでページタイトルを変えてみよう

// 默认分类 · 2024-12-19 · 阅读 8 分钟 · 64 次阅读

最近、めっちゃクールなJavaScriptコードを書いてみました。自分のブログで試したら、効果抜群でした！ もしあなたのブログがカスタムJSに対応していれば、ぜひ試してみてください。ページがもっと生き生きと面白くなりますよ。

何ができるの？

ユーザーが他のタブに切り替えたり、ブラウザを最小化したりすると、タイトルが自動で「遠くに行かないでね…」に変わって、ユーザーを「引き留め」ます。そして、ユーザーがページに戻ってくると、タイトルが熱烈に「おかえり！ヾ(•ω•`)o」と表示され、2秒後には元のタイトルに自動で戻ります。

クールでしょ？コードをどうぞ！

コード実装

// 元のタイトルを定義
const originalTitle = document.title;
let timeoutId; // タイマーIDを格納

// ページの表示状態の変化を監視
document.addEventListener("visibilitychange", () => {
    if (document.hidden) {
        // ページが非表示の時にタイトルを変更
        document.title = "遠くに行かないでね…";
        // 残っているタイマーをクリア
        clearTimeout(timeoutId);
    } else {
        // ページが表示された時、2秒後にタイトルを変更
        document.title = "おかえり！ヾ(•ω•`)o";
        // さらに2秒後に元のタイトルに戻す
        timeoutId = setTimeout(() => {
            document.title = originalTitle;
        }, 2000);
    }
});

技術解説

1. document.title

これはシンプルながら強力なプロパティで、ブラウザのタブに表示されるタイトルを読み取ったり変更したりできます。動的に値を代入することで、タイトルを「生き生き」と動かせます。

2. document.hidden

このプロパティはブラウザのVisibility APIから提供され、ページが非表示状態かどうかを検出します。ユーザーがタブを切り替えたりブラウザを最小化するとtrueになり、戻ってくるとfalseに戻ります。

3. visibilitychange イベント

これはページの表示状態が変化した時に発生するイベントで、「ユーザーの行動を検知する」今回のような機能に非常に適しています。

4. setTimeout と clearTimeout

  • setTimeout を使うと、ユーザーが戻ってきた時に数秒遅れてタイトルを元に戻す処理を実行でき、より自然な動きになります。
  • clearTimeout は、余分な遅延処理が溜まってロジックが衝突するのを防ぎます。

特徴と課題

  • メリット：

    • 実装ロジックがシンプルで、コードがわかりやすい。
    • グローバル変数で状態を直接管理し、素早く機能を実現。

  • 課題：

    • グローバル変数originalTitleとtimeoutIdを使用しているため、他のコードと競合する可能性がある。
    • イベントリスナーをクリーンアップしていないため、ページがアンロードされる際にメモリリークが発生する可能性がある。

改良版：コメント欄のliuzhen932さんからの提案

liuzhen932 さんから、よりモジュール化されたバージョンを提案いただきました。コードを即時実行関数でラップし、イベントのクリーンアップ機構も追加されています。以下が改良版のコードです：

(function () {
  "use strict";

  // 元のタイトルを保存（後で復元するため）
  const originalTitle = document.title;

  // タイマーIDを格納（複数のタイマー競合を防止）
  let timeoutId;

  // ページの表示状態変化を処理する関数
  function handleVisibilityChange() {
    // 前回のタイマーをクリア
    clearTimeout(timeoutId);

    if (document.hidden) {
      // ページが非表示の時、タイトルを設定
      document.title = "遠くに行かないでね…";
    } else {
      // ページが表示された時、まずお知らせタイトルを設定
      document.title = "おかえり！ヾ(•ω•`)o";
      // 2秒後に元のタイトルに戻す
      timeoutId = setTimeout(() => {
        document.title = originalTitle;
      }, 2000);
    }
  }

  // ページがアンロードされる直前のクリーンアップ処理
  function beforeUnloadListener() {
    // 表示状態変化のイベントリスナーを削除（メモリリーク防止）
    document.removeEventListener("visibilitychange", handleVisibilityChange);
  }

  // ページの表示状態変化イベントをバインド
  document.addEventListener("visibilitychange", handleVisibilityChange);

  // ページアンロード前にイベントリスナーを削除
  window.addEventListener("beforeunload", beforeUnloadListener);
})();

改良点

  • モジュール化：
    • 即時実行関数を使用し、グローバル変数の汚染を回避。
  • イベントクリーンアップ：
    • ページアンロード時にvisibilitychangeリスナーを削除し、メモリリークのリスクを低減。
  • 簡潔さ：
    • 三項演算子や論理演算子のショートサーキットを活用し、コードをよりコンパクトに。

実際にどこで使うの？

特に決まった用途はありませんが、とにかく楽しいです。ブログのイースターエッグとしてもいいですし、何かのリマインダーとしても使えるかもしれません。あなたの使い方次第です！

ちょっとしたヒント

  • 適度に使う：タイトルが頻繁に変わると、うるさく感じる人もいるので、トリガー頻度はほどほどに。
  • 互換性の問題：最近のブラウザはほぼ全てVisibility APIに対応していますが、もしユーザー層に古いブラウザを使っている人がいるなら、互換性対策をしておくのがベストです。

こういったコードはこれからもどんどん共有していきますので、自由に使ってみてください。もしブログがあれば、コメント欄にURLを残してもらえれば、見に行くかもしれません（笑

#代码