前置き
この記事を投稿した経緯
皆さんはVTuberって知ってますか？
詳細な説明はgoogleを検索すればいくらでも出てくるので割愛しますが、最近は生放送が主流になっており、放送中のコメント（ライブチャット）に非常に丁寧に対応されている方も多く見受けられます。
そんな中、ある作業配信を見ていた時のこと。
コメント欄に海外の方が外国語でコメントをしました。
配信者さんは外国語に強くないので、普段はコメント欄に出てきた外国語は片っ端から翻訳ツールにかけているそうなのですが、作業中だと手が離せないのでそれも難しいとのこと。
そこで思いつきました。
それ、自動化できるんじゃないか、と。
そこから先はエンジニアによくある好奇心です。
その人でも別の人でも、使ってくれる人がいれば嬉しいことこの上ないですが、別に誰かのために作るわけじゃなくて、実現方法を考えるのを楽しみたかったという。
要件
配信したことがないので分かりませんが、配信者さんは主に下記の方法で画面にコメントを表示しているとのこと。
https://vip-jikkyo.net/youtube-live-chat-on-screen
外部ツールが絡むと一気に難易度が上がるため、今回は上記記事の中で一番分かりやすい「4 通常どおりキャプチャーする方法」を想定します。
OS：windows10
ブラウザ：google chrome
作り方
翻訳API
google翻訳のAPIも用意されてはいるのですが、使い勝手がよくなさそうだったので、こちらの記事を参考にGASでAPIを作成。
https://qiita.com/satto_sann/items/be4177360a0bc3691fdf
ページへの組み込み
独自ページやラッピングページを作るとURLが怪しくなったりと面倒なので、ユーザースクリプトを使ってコメントページ（https://www.youtube.com/live_chat?is_popout=1&v=xxx）にJavaScriptを追加することで実現することにしました。
要素の追加の検出にはMutationObserverを使用しています。
(function() {
let mutationObserver = new MutationObserver(function() {
if (document.querySelector("#item-scroller #items").childNodes.length) {
// コメントが追加された時に動作
var element = document.querySelector("#item-scroller #items").childNodes[document.querySelector("#item-scroller #items").childNodes.length-1].querySelector("#message");
// スタンプのみのコメントを除外
if(element.innerText){
// 翻訳APIへリクエスト
var param = encodeURI(element.innerText);
fetch("https://script.google.com/macros/s/AKfycbzU8mU59MnDvhgnOyCVQITJiLgDztcaElh7zxBXgzOAMUfNx0JZ5xbbXzMIDXFd_cQL/exec?text=" + param, {
method: "GET",
redirect: 'follow'
}).then(response => response.text())
.then(text => {
var honyaku = JSON.parse(text).text;
console.log(honyaku);
if(element.innerText != honyaku){
// 翻訳結果を追加
element.innerHTML += "<br>訳：" + honyaku;
}
});
}
}
});
// 要素の追加を監視
mutationObserver.observe(
document.querySelector("#item-scroller #items"),
{
childList: true
}
);
})();
使い方
恐らくこれでいけると思います。
1.chrome拡張機能のtampermonkeyをインストール
https://chrome.google.com/webstore/detail/tampermonkey/dhdgffkkebhmkfjojejmpbldmpobfkfo?hl=ja
2.下記URLからユーザースクリプトをインストール
https://github.com/coh-rogi/custom_script/raw/main/comment_convert.user.js
3.Youtubeの視聴画面から「チャットをポップアウト」→そのまま使うか、URLを別タブにコピー
※翻訳のためにサーバーへの通信をしています。
翻訳APIの内容は本記事に記載してある通りで、送っているのもコメントの本文だけですが、よく分からないところと通信をしたくないという場合は自分で翻訳APIを作り、スクリプトの22行目のURLを変更してご使用下さい。
参考
翻訳API
https://qiita.com/satto_sann/items/be4177360a0bc3691fdf
MutationObserver
https://gomafrontier.com/technical/javascript/3108
ユーザースクリプトの配布
https://hepokon365.hatenablog.com/entry/2020/06/07/235856