· 織田 悠希 · blog  · 7 min read

拡張機能でYouTubeのレイアウトを変更する

Chrome拡張機能、YouTubeLayoutFixerをリリースしたのでその機能についてご紹介します。

Chrome拡張機能、YouTubeLayoutFixerをリリースしたのでその機能についてご紹介します。

合同会社TUNI代表社員の織田です。

Chrome拡張機能、YouTubeLayoutFixerをリリースいたしましたので、そのご紹介をさせていただきます。

DLリンク Chromeウェブストア

2024/03/19 ver0.0.1リリース 2024/03/26 ver0.0.2リリース(コメント優先モードの追加)

YouTubeLayoutFixer作成のモチベーション

YouTubeLayoutFixerを作成するに至ったきっかけは、最近のYouTubeにおけるシアターモード時のライブコメントの表示仕様変更です。 仕様変更以前は、ライブコメント欄よりも動画幅が優先される仕様になっておりましたが、仕様変更が行われた現在では、ライブコメントの表示が優先され、以前より動画幅が狭く表示されるような状況になっていました。 そこで、本拡張機能では、シアターモード時のコメントの表示仕様変更による不満を解消するほか、個人的に実現されていたらうれしいと思う機能を盛り込みました。

実現されている機能

本拡張機能で実現されている機能は大きく分けて以下の4つになります。

動画再生欄の固定

  • 動画視聴時に、コメントなどを見るため画面をスクロールすると、動画も共にスクロールされてしまい、動画視聴の継続が難しいという問題を解決しました。
  • 既存の拡張機能でも、動画をポップアウトさせるような形式でこの問題の解消を試みているものがありましたが、個人的には不連続な変化がしっくりこなかったので今回採用したブラウザに対して表示位置を固定する方法を採用しました。
  • 現状ですと、この機能のON/OFF切り替えは対応していないのですが、要望が多ければ対応させていただきますのでお気軽にお問い合わせください。

ライブコメント表示位置の変更

  • シアターモードの場合
    • ブラウザの横幅が1720px以下の場合、シアターモードにおけるライブコメントの表示位置を下げ、動画が画面いっぱいに表示されるようにしました。
      • ブラウザ横幅が十分に大きい場合での仕様については十分な吟味ができていないと考えているので是非ご意見いただけますと幸いです。
  • 通常時の場合
    • ライブコメント欄を動画同様画面に対して固定するようにしました。
      • こちらの機能についても現状だと動画固定同様ON/OFF切り替えに対応していません。

ライブコメント幅の変更

  • シアターモードにおけるライブコメント欄の幅を300,400(デフォルト),500px設定できるようにしました。

タイムスタンプクリック時の画面スクロール阻止

  • 現状のYouTubeの仕様ですと、コメント欄や概要欄に存在するタイムスタンプをクリックした際に画面最上部にスクロールされてしまうような仕様になっています。こちらの仕様は、今回実装した動画再生欄の固定と大変相性が悪い仕様であると捉え、こちらの仕様を無効化するような機能を追加しました。

コメント優先モード(ver0.0.2にて追加)

  • 本来、シアターモードはブラウザ横幅一杯になるように動画を引き延ばしすようなモードになっており、そちらを尊重した既存の機能の組み合わせでは、自らがライブに対しコメントを行うことが難しい環境が存在していました。本機能では、そういった環境においてもコメントができるよう、動画縦幅に対して制限をかけ、コメントの投稿と確認の両立の実現を意図しました。
    • また、こちらの機能を利用される場合は、ブラウザ横幅による条件分岐は不要であると考え、それによる表示の分岐を排し常に動画下側にライブコメントが表示されるようになっていますのでご注意ください。
  • こちらは試験機能であり、チェックをオンにした場合、「ライブコメント表示位置の変更」のオンオフよりも優先して適用されます。ライブコメントの表示位置を変更したくない利用者の方々は機能をオンにしないようご留意ください。

ON/OFF切り替えが可能な機能については、ブラウザ右上の拡張機能のアイコンをクリックすることにより展開されるポップアップより設定変更が可能なので、それぞれお試しください。

お問い合わせ

本拡張機能に関するご意見、ご要望などがありましたら当社お問い合わせフォームよりお伝えください。 また、当社の開発に少しでもご興味を持っていただけたら、同様に当社お問い合わせフォームからご連絡いただければ幸いです。

Back to Blog

Related Posts

View All Posts »
ブログ開設のご挨拶

ブログ開設のご挨拶

ホームページ開設に伴い、技術的な情報や我々についてをお伝えするためのブログを開設いたしました。