YouTube の歌枠のセトリコメントを別ウインドウで浮かせる

YouTube の歌枠のセトリ（setlist）コメントってタイムスタンプ付きで凄く便利ですよね、その歌枠でどんな曲を歌ってくれているのかも一目で分かりますし、タイムスタンプをクリックすれば簡単にその曲の再生位置まで移動する事もできちゃいます、このようなセトリコメントは「配信者」または配信者から権限を与えられた「モデレーター」がコメントのトップに固定してくれている場合が多いのであまり困ることは無いかと思いますが、絶対にコメントのトップに固定されているという訳でもないのでそういう時はスクロールしてその位置まで移動するのが大変じゃないですか？、そこでこちらでは対象のコメントをピクチャインピクチャで浮かせるブックマークレットの作成方法をご紹介してみたいと思います、使い方は簡単でまずは別ウインドウで浮かせたいコメントの一部をマウスのドラッグで選択、次に作成したブックマークをクリックすればピクチャインピクチャでそのコメントが開きます、常に最前面に固定されているので何かの作業をしながらタイムスタンをクリックするだけで曲の歌いだしまで移動することができますし、余分なユーザーインターフェースは何も無い非常にシンプルで小さなミニウインドウ（サイズは変更可能）なので邪魔にもなりにくいんですよね。

では選択したコメントをピクチャインピクチャで開くブックマークレットを作成してみましょう、まずブックマークバーを右クリックしてメニューから「ページを追加」を選択してください。

「ブックマークを編集」のウインドウが開いたらまずは「名前」を設定します、ブックマークバーにはこの名前が表示されますので分かりやすければどんな名前でも大丈夫です、今回は「YouTube セトリを浮かす」という名前にしてみますね。

次に下記のコマンドをコピーして「URL」のボックスに貼り付けてください、最期に「保存」ボタンをクリックしたら完成です。

javascript:(async()=>{const s=window.getSelection();if(!s.rangeCount){alert('浮かせたいセトリコメントのテキストをマウスでドラッグして選択してから実行してください。');return;}let p=s.getRangeAt(0).startContainer;while(p&&p.nodeName!=='YTD-COMMENT-THREAD-RENDERER'){p=p.parentNode;}if(!p){alert('コメントが見つかりませんでした。コメントの文字を選択した状態で実行してください。');return;}const targetComment=p.querySelector('#comment');if(!targetComment){return;}const pip=await documentPictureInPicture.requestWindow({width:400,height:550});const d=pip.document;d.body.style.margin='0';d.body.style.padding='20px';d.body.style.background='#0f0f0f';d.body.style.color='#f1f1f1';d.body.style.fontFamily='Roboto, Arial, sans-serif';const style=d.createElement('style');style.textContent='#author-thumbnail,#reply-button-end,#moderation-buttons,ytd-comment-action-buttons-renderer,#action-buttons{display:none!important;}a{color:#3ea6ff!important;text-decoration:none;font-weight:bold;cursor:pointer;}a:hover{text-decoration:underline;}#content-text{font-size:14px;line-height:1.4;white-space:pre-wrap!important;}#author-text{color:#fff;font-weight:500;font-size:13px;margin-bottom:4px;display:inline-block;}';d.head.appendChild(style);const cloned=targetComment.cloneNode(true);d.body.appendChild(cloned);d.querySelectorAll('a').forEach(a=>{const urlStr=a.getAttribute('href')||'';if(urlStr.includes('t=')){const url=new URL(urlStr,window.location.href);const t=url.searchParams.get('t');a.removeAttribute('href');a.onclick=()=>{const v=window.document.querySelector('video');if(v){if(t.includes('s')){v.currentTime=parseInt(t);}else if(t.includes('m')){const matches=t.match(/(?:(\d+)h)?(?:(\d+)m)?(?:(\d+)s)?/);const h=parseInt(matches[1]||0);const m=parseInt(matches[2]||0);const sec=parseInt(matches[3]||0);v.currentTime=(h*3600)+(m*60)+sec;}else{v.currentTime=parseInt(t);}}}}});})();

では作成したブックマークレットでコメントをピクチャインピクチャで表示してみましょう、まずマウスのドラッグで浮かしたいコメントの一部を選択します、マウスの左ボタンを押したままコメントをなぞって上の画像のように青く反転した状態になったら選択できています、コメントを選択する時はコメント全体ではなくコメントの一部で構いません。