広告なし・0円。自力で『記事読み上げボタン』を作るのがコスパ最強すぎた

【GTM設置】JavaScriptでサイトに無料の「読み上げ機能」を実装してみた

「記事を読むのが疲れる」「家事をしながら内容を知りたい」という読者のために、ブラウザの標準機能（Web Speech API）を使った読み上げボタンを設置してみました。
外部サービスを使わず、完全無料・広告なしで実装できるのがメリットです。
今回はGoogleタグマネージャー（GTM）を使って、全記事に一括反映させる方法をまとめます。
GTMの使い方については割愛します。

1. 読み上げ用JavaScriptコード

まずは、GTMの「カスタムHTML」に貼り付けるコードを準備します。以下のコードは、記事本文（`.entry-content`）を取得して読み上げる仕組みです。

<style>
  .speech-btn-container {
    margin: 20px 0;
    display: flex;
    gap: 10px;
  }
  .gtm-speech-btn {
    padding: 10px 18px;
    background-color: #4CAF50; /* 緑色 */
    color: white;
    border: none;
    border-radius: 25px;
    cursor: pointer;
    font-weight: bold;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    transition: 0.3s;
  }
  .gtm-speech-btn:hover {
    background-color: #45a049;
    transform: translateY(-2px);
  }
  .gtm-stop-btn {
    background-color: #f44336; /* 赤色 */
  }
</style>

<script>
  (function() {
    // ボタンを挿入したい場所のセレクタ（例: h1タグのあと）
    var target = document.querySelector('h1'); 
    if (!target) return;

    // ボタンのHTMLを作成
    var html = '<div class="speech-btn-container">' +
               '<button id="gtm-play" class="gtm-speech-btn">🔊 記事を聴く</button>' +
               '<button id="gtm-stop" class="gtm-speech-btn gtm-stop-btn">停止</button>' +
               '</div>';

    // 指定した要素の直後に挿入
    target.insertAdjacentHTML('afterend', html);

    // 読み上げの処理
    var playBtn = document.getElementById('gtm-play');
    var stopBtn = document.getElementById('gtm-stop');

    playBtn.addEventListener('click', function() {
      window.speechSynthesis.cancel();
      // 読み上げる範囲（例: articleタグの中身）
      var content = document.querySelector('article') ? document.querySelector('article').innerText : document.body.innerText;
      var msg = new SpeechSynthesisUtterance(content);
      msg.lang = 'ja-JP';
      window.speechSynthesis.speak(msg);
    });

    stopBtn.addEventListener('click', function() {
      window.speechSynthesis.cancel();
    });
  })();
</script>