Help us understand the problem. What is going on with this article?

YouTube Live コメントビューアーを作ってみた

More than 1 year has passed since last update.

経緯

以前、YouTube Live Player「Madoka」を作った時に、コメビュの部分がAPIの都合上、ポーリングでしか取得できず、なかなか厳しいものがあったので、リアルタイムで取得できないかと考えていました。
よくよく考えて見たら、WebViewで乗っけちゃえばよくね?って思ったのでやってみました。

ソースコード及びダウンロード

ソースコード: https://github.com/minakawa-daiki/YLCV
ダウンロード: https://github.com/minakawa-daiki/YLCV/releases/tag/v0.1.0
※動作は Mac/Windows で確認しています。

YLCV -YouTube Live Comment Viewer-

できたコメビュはこんな感じです。
YLCV_plain.png

使い方

  • 設定画面の開き方
    アプリケーションにマウスカーソルを乗っけると右上に歯車アイコンが出るのでそこをクリックしてください。
  • チャットに接続
    https://www.youtube.com/live_chat?v=???」の形式で入力してください。
  • CSSの変更
    https://chatv2.septapus.com」を利用するとCSSを簡単に変更できます。
    変更した例はこんな感じです。 YLCV_css.png

アプリ自体の透過処理を行いたかったのですが、Windowsだとうまく動作しなかったので断念しています。
配信者の方のお役に立てれば良いと思っています。

技術よりのはなし

WebView

https://electron.atom.io/docs/api/webview-tag/
ここに書いてある通りです。
htmlにタグを記述するだけで簡単に使用できました。

index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>YouTube Live コメントビューアー</title>
  <link rel="stylesheet" type="text/css" href="stylesheets/style.css">
</head>
<body>
    <webview
      id="wv"
      src="https://www.youtube.com/live_chat?v=">
    </webview>
</body>

js側で色々いじくれるので便利です。

app.js
const webview = document.querySelector('webview');
webview.addEventListener('dom-ready', () => {
  //WevView専用のDevToolが開きます。
  webview.openDevTools()
  //WebView上の要素のCSSを書き換えることも可能です。
  const css = '#overflow.yt-live-chat-header-renderer{ margin-right: 32px; }';
  webview.insertCSS(css);
});

document.getElementById('connect-button').addEventListener('click', ()=>{
  //WebViewの表示内容を変更
  webview.loadURL('https://hogehoge.com');
});

未解決

Windowsでのアプリ透過

終わりに

YouTubeLiveのコメント取得はAPIを経由するとポーリング期間が定められており、なかなかリアルタイム感が出なかったのですが、WebViewにすることで解決できたと思っています。
ぜひよかったら配信者の方は使ってみてください。

HP: https://minakawadaiki.com
GitHub: https://github.com/minakawa-daiki
Twitter: https://twitter.com/oliver_diary
FaceBook: https://www.facebook.com/minakawa.daiki

fringe81
Fringeは、最新のテクノロジーとプロフェッショナルによるサービスにより、社会課題に仮説を立てて市場に広げていくことで、数十年という長期的なスパンで価値を生み出し続け、より良い世界を創る集団です。 既存の領域に限らず、時流を読み、仮説を生み出し、テクノロジーの力で優れたサービスを生み出し続けます。
https://www.fringe81.com/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした