JavaScript
YouTube
Electron

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