はじめに
Youtube のコメント欄に x:xx のような時間が書かれたコメントを見たことがありますか?
クリックするとその時間まで飛ばしてくれる便利なコメントです。ですが、このコメントはどうやって入力しているのでしょう。手動でしょうか。
手動以外で、入力できないの?
ということで
作った物
動作映像 pic.twitter.com/HcvI47AVfF
— かるた (@ThreeColorDumpl) August 20, 2020
動画を載せることができなかったため、twitterに投稿しました。
How to use
・Youtube 上のハートボタンをクリックする ・F10 を押す (F10 : ショートカットキーとして登録した場合)
詳細
作ったもの : Chrome 拡張機能 プログラミング言語 : Javascript (html, json) GitHub
詰みポイント
Youtubeで拡張機能が動作しない
Youtube では history state を書き換えることで、高速な読み込みを可能としています。そのため、URLが変わっても、拡張機能のコンテンツスクリプトは再実行されません。ここを参考にしました。
Youtube ではこのJSフレームワークを使用しているようです。詳しくは、ここを読めば、理解できます。
私の場合 : 解決法(クリックで展開)
window.addEventListener('yt-navigate-start', process);
if (document.body) process();
else document.addEventListener('DOMContentLoaded', process);
function process(){
// なんらかの処理
}
ソースコード
再生時間の取得とコメントに挿入(クリックで展開)
var currentTime = document.getElementsByTagName("video")[0].currentTime;
// sec -> hour + min + sec
var hour = zeroPadding(parseInt(Math.floor(currentTime)/60/60), 2);
var min = zeroPadding(parseInt(Math.floor(currentTime)/60)%60, 2);
var sec = zeroPadding(parseInt(Math.floor(currentTime))%60, 2);
var previousComment = document.getElementById("contenteditable-root").innerText;
previousComment = (previousComment=="") ? previousComment + "" : previousComment + "\n";
//コメント欄にフォーカス
document.getElementById("simplebox-placeholder").click();
// すべてを結合
var insertComment = (hour == "00") ? previousComment + min + ":" + sec + " : " : previousComment + hour + ":" + min + ":" + sec + " : ";
//コメント欄に挿入
document.getElementById("contenteditable-root").innerHTML = insertComment;
さいごに
でも、結局 x:xx のような時間が書かれたコメント を簡単に入力する方法があったなら何の意味もないんですけどね!! 方法を知っている方は、コメント等で教えていただければ、うれしいです。
Youtube ってだからあんなに早かったんですね。ブラウザの履歴の書き換えなんてサイト側でできることが初めて知りました。History.pushState()とか使っているのかな?Google ってやっぱりすごいですね。
