自作Chrome拡張機能「YouTube Live Comment Logger」の紹介

公開日: 

Chrome拡張機能とは?の記事から続く実例として、私が実際に開発してChrome Web Storeで公開中のChrome拡張機能「YouTube Live Comment Logger」を紹介します。

YouTube Liveのコメントをあとから見返したいと思うことがあります。配信中はコメントの流れが速く、気になった発言やスーパーチャット、盛り上がった時間帯をあとから確認しようとしても、手元に記録が残っていないと追いかけるのが大変です。

そこで、自作のChrome拡張機能として **YouTube Live Comment Logger** を作りました。

YouTube Live Comment Loggerのプロモーション画像
YouTube Live Comment Loggerのプロモーション画像

YouTube Live Comment Loggerとは

YouTube Live Comment Loggerは、YouTube Liveのライブチャットコメントをブラウザ内にローカル保存し、あとから一覧確認、検索、集計、CSV/TXT出力ができるChrome拡張機能です。

ライブ配信ページを開いた状態で拡張機能のポップアップから「保存開始」を押すと、画面上に表示されるライブチャットコメントを保存します。保存したコメントは配信ごとに確認でき、必要に応じてCSVやTXTとして出力できます。

保存データは利用者のブラウザ内のIndexedDBに保存されます。外部サーバー、開発者、第三者へコメントデータを送信しない設計にしています。

主な機能

主な機能は以下です。

  • YouTube Liveコメントのローカル保存
  • 配信ごとの保存済みコメント一覧
  • キーワード検索
  • 投稿者名検索
  • コメント数、投稿者数、有料コメント数、スパチャ合計の集計
  • コメント種別、投稿者ランキング、時間帯別コメント数、キーワード、有料コメントランキングの表示
  • CSV出力
  • TXT出力
  • 保存済みデータの削除

通常コメントだけでなく、取得できる範囲でスーパーチャット、スーパーチャットステッカー、メンバー加入通知、システム系メッセージも種別として扱います。

保存開始ポップアップ画面
保存開始ポップアップ画面

基本的な使い方

使い方はシンプルです。

  1. YouTube Liveの配信ページを開きます。
  2. Chromeの拡張機能アイコンからYouTube Live Comment Loggerを開きます。
  3. 対象ページとして認識されていることを確認します。
  4. 「保存開始」をクリックします。
  5. コメントが保存されたら「保存済み一覧を開く」から確認します。
  6. 必要に応じて集計を確認したり、CSV/TXTで出力します。

拡張機能を更新した直後など、すでに開いているYouTubeページにうまく接続できない場合があります。その場合はYouTubeページを再読み込みしてから、もう一度操作してください。

popup画面の作り方については、シリーズ内の記事でも解説しています。

保存済みコメントの確認

保存したコメントは、配信ごとの一覧画面で確認できます。

一覧画面では、コメント本文、投稿者名、表示時刻、コメント種別などを見ながら、キーワードや投稿者名で絞り込めます。配信後に「この話題が出ていたところだけ見たい」「特定の投稿者のコメントを確認したい」といった用途を想定しています。

保存済みコメント一覧画面
保存済みコメント一覧画面

保存される主なデータは以下です。

  • 取得日時
  • YouTube動画ID
  • 配信タイトル
  • チャンネル名
  • 画面上のコメント表示時刻
  • 投稿者名
  • コメント本文
  • コメント種別
  • スパチャ金額欄
  • 投稿者バッジ情報

YouTubeの画面構造から取得しているため、取得できない項目は空欄になることがあります。

集計画面

保存したコメントは、あとから集計画面でも確認できます。

集計画面では、総コメント数、投稿者数、有料コメント数、スパチャ合計のような概要に加えて、コメント種別、投稿者ランキング、時間帯別コメント数、キーワード、有料コメントランキングを確認できます。

配信のどの時間帯が盛り上がったのか、誰が多くコメントしていたのか、有料コメントがどのくらいあったのかをざっくり見るための画面です。

集計画面
集計画面

CSV/TXT出力

保存したコメントはCSVまたはTXTで出力できます。

CSVはExcelなどで扱いやすい形式にし、UTF-8 BOM付きで出力します。列は以下のような内容です。

capturedAt,videoId,streamTitle,channelName,messageTimeText,authorName,messageText,messageType,amountText

TXTは、あとからテキストとして読みやすいように、以下のような形式で出力します。

[capturedAt] authorName: messageText

本文が取得できないスーパーチャットステッカーや通知系メッセージでは、[messageType] や金額を含む補助テキストを出力します。

CSV/TXT出力画面
CSV/TXT出力画面

ローカル保存とプライバシー

YouTube Live Comment Loggerは、保存データを利用者のブラウザ内のIndexedDBに保存します。

保存したコメント、投稿者名、配信情報を外部サーバー、開発者、第三者へ送信しません。広告、分析、トラッキング目的で保存データを利用することもありません。

ただし、コメント投稿者名やコメント本文には個人情報が含まれる可能性があります。CSV/TXTとして出力したファイルの管理、共有、削除は慎重に行う必要があります。

IndexedDBを使ったローカル保存の考え方は、IndexedDBで履歴データを保存するの記事でも解説しています。Chrome拡張機能で扱う権限やデータ範囲については、Chrome拡張機能の権限設計も参考になります。

注意点

この拡張機能は、YouTube公式APIではなく、画面上のDOMを監視してコメントを取得しています。ページ内の変化を検知する仕組みは、Chrome拡張機能のcontent scriptで実装しています。

そのため、YouTube側の画面構造が変更された場合、コメント取得が動作しなくなる可能性があります。また、ライブチャットの流れが非常に速い場合、DOM監視方式のため取りこぼしが発生する可能性があります。

保存対象は、拡張機能で「保存開始」を押したあとに画面上で取得できたコメントです。保存開始前のコメントをさかのぼって保存するものではありません。

content scriptの基本については、content scriptでWebページを操作するの記事で紹介しています。

今後やりたいこと

今後の改善案としては、以下のようなものを考えています。

  • JSON出力
  • AI要約
  • YouTube公式API方式への切り替え
  • 自動保存開始
  • 配信終了検知
  • バックアップ、復元、インポート

機能を追加する場合は、Chrome Web Store公開後のアップデート方法で紹介した流れに沿って、順次アップデートしていく予定です。

まとめ

YouTube Live Comment Loggerは、YouTube Liveのコメントをブラウザ内にローカル保存し、あとから確認、検索、集計、CSV/TXT出力できるChrome拡張機能です。

  • 保存開始後のライブチャットコメントをローカル保存できる
  • 配信ごとの一覧、検索、集計であとから振り返れる
  • CSV/TXTで出力できる
  • 保存データを外部サーバーへ送信しない
  • Chrome Web Storeで公開中

Chrome拡張機能は、個人でも実用的なツールを作って公開できます。このシリーズでは、popupの作り方、content scriptの使い方、データ保存の方法、権限設計、Chrome Web Storeへの公開手順などを解説しています。興味のある方は、他の記事もあわせてご覧ください。

Chrome Web StoreでYouTube Live Comment Loggerを見る




Your Message

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

スポンサードリンク

記事が気に入ったらシェアお願いします

PAGE TOP ↑