Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
35
Help us understand the problem. What is going on with this article?
@minakawa-daiki

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

More than 3 years have 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

35
Help us understand the problem. What is going on with this article?
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
minakawa-daiki
常に本気
halprogramming
専門学校HALのプログラミングが好きな人が集まっている同好会です。HALの在学生に限らず、OB, OGなども存在します。

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
35
Help us understand the problem. What is going on with this article?