使い方

チャプター機能: 目次の項目をクリックすると、動画の該当箇所にジャンプします
文字起こし表示: 「📝 文字起こしを表示」をクリックすると、トランスクリプトが表示されます
自動スクロール: 動画の再生に合わせて、現在話されている部分が自動的にハイライトされ、スクロールします
同期機能: チャプターをクリックすると、文字起こしも該当箇所に自動的にスクロールします
インタラクティブ: 文字起こしの各セグメントをクリックすると、その箇所から再生できます

最後に：AIによるプロンプトで出力させた流れ。(長文注意）

ナオ：あなたは、優秀なプログラマーです。
今回作成するのは、Youtube Frame APIを用いて、以下の機能のコードを実装します。目的は、この技術を共有し、聴覚障害者のためのアプローチやユーザービリティに向上するために使用する開発となります。

実装済み

Youtube Frame APIとチャプター機能でブログで目次をクリックすると、シーケンスが移動する「0:00 こんにちは」→開始地点に動画が移動
Youtubeの動画IDをデータ属性に埋め込んで自動でYoutubeのFlamePlayerを生成させる
チャプターは、現在箇条書きでまとめられている。（ネタバレ防止）

要件

Youtubeの完全文字起こし（素材）をアコーディオンをが開いたときに、動画のシーケンスに応じて移動して、ボックス内で文字腰をスムーズスクロールを実装してください。DOM監視必要あり。（htmlタグのsummaryタグなどでopenになった時に自動で文字起こしをする。）

素材

#0 ナオのポッドキャストのルール - YouTube
https://www.youtube.com/watch?v=_yyBJeZgACA

Transcript:
(00:01) 大抵の初回のポッドって自己紹介から始まることが多いですよねそれで思ったんですけれども初回のポッドキャストは自己紹介を必ずしも入れなくてはいけないのかについてをふと疑問に思いまして自己紹介って概要欄にかけるから別にいいのかなってふと考えたんですよでラジオの上収率の 9りっていうのは実は開始10秒で聞くか聞かないかを判断されるっていうことがあってすごいシビアな世界なんですねなのでこれはポッドキャストも音声配信なので当然ながら適用されるルールだと思っていますそのため先ほどあげた自己紹介っていうのを初回でもちろん挨拶も含めて入れるっていう風になると魅力的な自己紹介であれば確かに今後も聞いてみようっていう風にリスナーさんには届くかもしれないんですけれどもそこまで魅力的ではないなって思ったら残念ながらその初回だけは一時
(01:07) 的に聞いてくださる方が多くなって次回以降も聞こうかっていう風になると微妙になっくるのではないのだろうかっていうふと考えたんですねそこで今回タイトルにもあるように初回だからこそなおこの私のポッドキャストについてルールを設けることにしましたやはり個人のポッドキャストだからこそオリジナルのルールを設けることで他のポッドキャストと一戦を隠すというやり方ですこれがこうすかどうかは分からないんですけれどもちょっと実験的にやってみようかなと思いまして今回設けたルールは3つありまして1つ目は冒頭の挨拶すらせずに本題に入るということですこれ実はこのエピソードからすでに導入されてるんですよ普通だったらこんにちはなおです今回のえー初回のエピソードになるから今回は私の自己紹介については話したいと思います
(02:12) みたいな感じになると思うんですよねそれかポドキャストの説明してえ私のポッドキャストではこういうことをしてこういうことをしますみたいなことを冒頭に入れると思うんですけどこういった冒頭の挨拶させずに本題に入ることをしていますで自己紹介は興味がある方は概要欄を見るはずなんですよなのでえ本題に入ってこのポッドキャストの配信者はどういう人なんだろうっていう風に思ったら必ず概要欄を見るはずなのでこの冒頭の挨拶を不要にしてね効率化を測ってみるというそういうやり方をしてみようかなと思いますやはり本題にスピーに入るっていうことはリスナーにとってもストレスがなくなるのではないのかっていうちょっと実験的なことをやってみたいなと思ったからですその次のルールは背景BGMは一切使用しないこれは音声に集中しやすくするためとリスナーがその聞きたいBGMとは限らないっていうのもあって別にBGMは実際
(03:18) 使用しなくてもいいのではないのだろうかっていう風に思ったんですねそれにこのポッドキャストを聞いてる間になんか音楽がないとつまらないなって思えば裏でねまた音声というか音楽を流しても聞けるようにすることも可能にできると思うのでまそういうこともできると思う思う多分できるはずなのでえ私はパソコンからやってるのでできるんですけどスマホだと多分アプリを利用すれば多分できると思うんですよねバックグラウンドでなのでこれもそういう配慮となっておりますでできるよねちょっと自信ないけどえでルール3は概要欄に時間を入れた目次と説明を追加するを実行していますこのポッドキャストでもすでに目次が追加されてると思うんですけどこのようにねポッドキャストを聞くかどうかの判断材料になることや聞きたい部分だけを聞けるため長くなっても時間短縮ができるための配慮として実行さ
(04:23) せていただきたいと思いますということでえ完璧な配信っていうのは私は最初からできるとは思っていなくて今さっきもねちょっとグダグダになってしまった部分もあるかもしれないしちょっと話し方もねえ不自然に見えたかもしれないしっていうのも多分あると思うんですけれども初回のエピソードで完璧をモぜすってことは私自身はしてないのでこれもあくまでスタイルとして少しずつアップデートしていっでより一層エピソードであのお聞きになられる方リスナーの方々に楽しんでもらえるようにえ役に立っていただけるようなそんなポドキャストを目指したいと思っていますのでえ今後ともよろしくお願いいたしますということで今回はこちらのポッドキャストのルールについてご説明させていただきましたえ以上なんですけれどもまた次回もね是非とも聞いていただけることを切に心から願っており
(05:31) ます次回もなるべくいい配信にあ今いい配信だったのかわからないですけどでもいい配信になれるように頑張りますので是非とも期待して聞いていただければ幸いでございます以上です

実装コード

// ============================================
// グローバル変数
// ============================================
let player; // YouTubeプレーヤーオブジェクト

// ============================================
// YOUTUBEAPI
// ============================================
let tag = document.createElement('script');
tag.src = 'https://www.youtube.com/iframe_api';
let firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

// ============================================
// API準備完了時の処理
// ============================================
function onYouTubeIframeAPIReady() {
  // YouTubeの動画IDを取得
  const videoId = document.getElementById('player').getAttribute('data-id');

  if (!videoId) {
    return;
  }
  // frontmatterElが存在するか確認
  const ytVideo = document.getElementById('player');
  if (!ytVideo) {
    return;
  }

  console.log(`Initializing player for video ID: ${videoId}`); // ログ追加

  try {
    player = new YT.Player('player', {
      height: '360',
      width: '640',
      videoId: videoId,
      events: {
        // 'onReady'イベントハンドラを追加
        onReady: onPlayerReady,
        // 必要であれば他のイベントも追加
        // 'onStateChange': onPlayerStateChange
      },
    });
    console.log('YT.Player object created.'); // ログ追加
  } catch (error) {
    console.error('Error creating YT.Player:', error); // エラーハンドリング
  }
}

// ============================================
// プレーヤー準備完了時の処理
// ============================================
// YT.Playerの準備ができたら呼び出される関数
function onPlayerReady(event) {
  console.log('Player is ready.'); // ログ追加: プレーヤー準備完了を確認
  // プレーヤーが準備できてからクリックイベントを設定
  setupChapterClickEvents();
}

// ============================================
// チャプターリスト関連
// ============================================

// 時間文字列 (HH:MM:SS or MM:SS) を秒に変換する関数
function timeToSeconds(timeString) {
  const parts = timeString.split(':').map(Number);
  let seconds = 0;
  if (parts.length === 3) {
    // HH:MM:SS
    seconds = parts[0] * 3600 + parts[1] * 60 + parts[2];
  } else if (parts.length === 2) {
    // MM:SS
    seconds = parts[0] * 60 + parts[1];
  }
  return seconds;
}

// チャプターリストのクリックイベントを設定する関数
function setupChapterClickEvents() {
  console.log('Setting up chapter click events.'); // ログ追加
  const chapterListElement = document.getElementById('chapter-list');
  let text = chapterListElement.innerHTML;

  if (!chapterListElement) {
    console.warn('Element with id "chapter-list" not found.');
    return;
  }

  const lines = text.split('\n').filter((line) => line.trim() !== ''); // テキストを行ごとに分割
  const chapters = [];

  // 正規表現でタイムスタンプとタイトルを抽出
  const regex = /^(\d{1,2}:\d{2}(?::\d{2})?)\s+(.+)$/;

  lines.forEach((line) => {
    const match = line.trim().match(regex);
    if (match) {
      const time = match[1]; // 時間文字列 (例: '1:15')
      const title = match[2]; // タイトル (例: 'トピックA')
      const seconds = timeToSeconds(time); // 秒に変換 (例: 75)
      chapters.push({ time, title, seconds });
    }
  });

  if (chapters.length === 0) {
    chapterListElement.innerHTML =
      '<p>チャプター情報が見つかりませんでした。</p>';
    return;
  }

  // 目次リストのHTMLを生成
  const ul = document.createElement('ul');
  chapters.forEach((chapter) => {
    const li = document.createElement('li');
    li.textContent = `${chapter.time} ${chapter.title}`;
    li.setAttribute('data-seconds', chapter.seconds); // 秒数をdata属性として保持
    // 既存のイベントリスナーを削除（複数回呼ばれた場合の重複防止）
    // ※ より堅牢にするなら、関数自体を渡して削除する
    // chapter.removeEventListener('click', handleChapterClick);

    // 新しいイベントリスナーを追加
    li.addEventListener('click', handleChapterClick);
    ul.appendChild(li);
  });
  chapterListElement.innerHTML = ''; // 古い内容をクリア
  chapterListElement.appendChild(ul); // 生成したリストを追加
}

// クリックイベントのハンドラ関数
function handleChapterClick(event) {
  const chapter = event.currentTarget; // クリックされたli要素
  const seconds = chapter.getAttribute('data-seconds');

  if (seconds === null) {
    console.warn(
      'Clicked item is missing data-seconds attribute:',
      chapter.textContent
    );
    return;
  }

  console.log(
    `Chapter clicked: ${chapter.textContent.trim()}, seeking to ${seconds}s`
  ); // ログ追加

  // playerオブジェクトとseekToメソッドの存在を確認
  if (player && typeof player.seekTo === 'function') {
    player.seekTo(seconds, true); // 指定秒数に移動し、再生を開始
  } else {
    console.error(
      'Player is not ready or seekTo function is unavailable when clicking chapter.'
    );
  }
}

## 音声配信

こんにちは、ナオです。今回は、初回ですが、私自身がポッドキャストにルールを設けることによってリスナーさんにとって、聴きやすいポッドキャストを目指すという趣旨を説明した音声配信となっております。

<div id="player" class="youtube-ratio" data-id="_yyBJeZgACA"></div>

## 目次

<div id="chapter-list">
00:00 初回のポッドキャストの自己紹介って必要性ある？
00:26 ラジオの聴取率の9割は開始10秒で決まる
01:28 ポッドキャストのオリジナルルールの必要性
01:47 ルール１：冒頭のあいさつすらせずに、本題に入る
02:59 ルール２：背景BGMは一切使用しない
04:00 ルール３：概要欄に、時間を入れた目次と説明を追加する
04:26 配信は、日々のアップデートしながらクオリティーの向上を目指す
05:14 最後の挨拶
</div>

ここまで、JSで文字起こしを記載しようとしているコードを発見したため、指示を変える。

ナオ：ありがとうございます、汎用性を高くするために文字起こしはhtmlから取得して、活用できるようにするとありがたいです。たとえばWordpressやGhostなどのテーマ（カスタムテーマだと金額が高くなってしまう）の拡張性で毎回スクリプトに文字起こしを入れるのは不便なため、文字起こしは、HTMLの要素をタイムスタンプから取得して（素材の時間をデータ属性に入れるでもありです）JSで制御するような作りだとさらに制作側も、手間をかけずに実装ができるため、多くの人に活用できるコードが可能となると考えられます。実装お願いしてもよろしいでしょうか？

CSSの調整と、指示の仕方で、汎用性の高いコードが実現しました。
Wordpressなどのテーマにも活用できるため、ぜひ、動画を入れてサイト構築される方h活用してみるといいかもしれません！