ビリビリ動画のコメントを整理する

ビリビリ動画は中国の動画サイトで、
Bilibili哔哩哔哩动画B站などと表記されます。

ニコニコ動画のように、動画上にコメントが流れるのが特徴で、
更にすごいのが、顔を認識して顔の上にコメントが重ならないように自動処理されたりというギミックまであるそうです。

というわけで相変わらずニッチな記事になりますが、
今日はビリビリ動画に投稿された生放送コメントを整理して見やすくする方法について解説します。


ビリビリ生放送のコメントは、赤線内に表示されます。
このコメント表示エリアは、左右の幅(width)が固定でとても狭い為、すぐ改行が入るので読みづらいです。。

なのでこんなブックマークレットを作りました。

javascript:(function()%7Bdocument.querySelector('#link-navbar-vm').remove();document.querySelector('#head-info-vm').remove();document.querySelector('.live-haruna-ctnr').remove();document.querySelector('.live-player-ctnr').style.display = 'none';document.querySelector('.app-content').style.paddingTop = '0px';document.querySelector('.player-section').style.display = 'none';document.querySelector('.gift-control-section').remove();document.querySelector('#sections-vm').remove();document.querySelector('.footer-content').remove();document.querySelector('.side-bar-cntr').remove();document.head.insertAdjacentHTML('beforeend', '<style>.aside-area { width: 100% !important; top: initial !important; right: initial !important; bottom: initial !important;} .chat-item {font-size: 20px; font-weight:bold; } .chat-history-panel { height: 500px !important;} .live-room-app .app-content .app-body { min-width: initial !important; max-width: initial !important; width: initial !important; } body { min-width: initial !important; }</style>');%7D)();

これを適当にブックマークしたもののURL部分にコピペしてクリックすると…

こんな感じで余計な表示を削除して、コメント表示エリアのwidthを拡大して表示されます。
ウィンドウの大きさを変えればフォームの大きさもレスポンシブに変わります。

これで簡易的なコメントビュワーになるのではないでしょうか(⊃∪`*)おしまい


あわせて読みたい

コメントを残す