ヒトナツログ

健康でハッピーになりたい

生存状況 powered by Pixela

YouTubeの再生バーを外側にする『Outside YouTube Player Bar』作った

YouTubeの再生バーが動画に重なってつい『邪魔だなぁ』と感じたことはありませんか?

このたびChromeエクステンションを作ったのでお知らせです。YouTubeの再生バーを動画の外側にするやつです。

f:id:hitonatsu:20180203151020p:plain

chrome.google.com

これでいよいよ自分もユーチューバーです、みなさんもインストールしていますぐユーチューバーになりましょう(?)

ご覧ください

f:id:hitonatsu:20180202224124p:plain
動画に重なった再生バーの様子

f:id:hitonatsu:20180202224134p:plain
外側にした様子

f:id:hitonatsu:20180202224149p:plain
切り替えボタンあります

2枚目右下の『Chile』の文字あたりをみると再生バーが表示されていても動画が全領域表示されているのがよくわかりますね。3枚目のようにYouTubeのボタン並びに密かにトグルボタンを追加している。デフォルト表示に戻したかったらこれでいつでも戻すことができる。

動作対象ページ

  • 新デザインのYouTube
    • 通常のビデオページ
    • ライブ放送ページ

この条件で動作します。チャンネルページでは意図的に動作しないようにしているので、ピックアップの固定動画で動かないのは壊れているわけではないです。

YouTubeは新デザイン(現行のデフォルト)と昔のデザインの2つが存在していて切り替えが実はできるのだけど、昔のデザインはサポートしていない。

インストール方法

chrome.google.com

Chromeウェブストアで全世界に公開しているので今すぐインストールしましょう。

インストール時になんかまがまがしい権限のアラートが出るけれどこれはChromeエクステンションの仕様でこう出るようになっているだけで、実際に僕がユーザーの情報を見たりできるわけではないので安心してインストールして欲しい。

対応言語

今のところ英語と日本語の2カ国語にローカライズしてある。

オープンソースコード

github.com

OSSでやっているのでPR歓迎です。

バグ報告・機能改善要望・ディスカッション

これらで受け付けているのでなにかあったらコンタクトして欲しい。Twitterのメンションでも可。

YouTubeの仕様が変わると高確率でぶっ壊れるのである日突然急にぶっ壊れると思う。壊れてたら報告頂けるとありがたいです。

YouTubeに沿う・ユーザーの目線を念頭に開発している

まるで標準機能かのような振る舞いをするように心がけて開発している。

トグルボタンのアイコンは複数書いて一番YouTube公式っぽいものを探って採用した。トグルボタンにマウスカーソルを重ねるとツールチップが表示されるけど、他のボタンと全く同じツールチップになるようにしている。

動画がどんなサイズになってもちゃんと動作するようにしている(フルスクリーンモードのときは拡張機能を一時的に無効化するようになっている)。普通のユーザーはブラウザの幅を変えたりはしないと思うけど、そういったリサイズが発生しても再生バーが壊れたりしないようにしている。

新デザインのYouTubeにはダークテーマという黒いデザインのモードがあって、

f:id:hitonatsu:20180202233946p:plain
右上のアカウントのところにある

つまりデザインのパターンが2つあるのだけどユーザーがどちらにしていても不自然なUIにならないようにしている。

ユーザー的には『ただ再生バーを下にするだけでしょ?』という感じだし開発者目線でもそう思うだろうけど、当エクステンションのようないわゆるガンバリで機能実現するタイプのものはたったそれだけでも一筋縄ではいかない。実装に際して様々な問題が発生する。ユーザーはYouTubeに動画を見にくるわけで、その動画を見る体験を拡張機能が損ねてはいけない。だからめちゃくちゃパフォーマンスと動作の安定に気を使っている。乱暴な実装をするとラクだけど動画の読み込みに時間がかかるようになったり動画がカクつくとかしてはいけないと思う。なによりそんな拡張機能は迷惑なので誰も使いたくないと思う。


気持ちです

以下は個人的な気持ちで、そもそもなんでこんなものを作っているかというはなしです。

ビデオの下部の情報を見たいときもある

YouTubeのプレイヤーバーは約3秒間表示されフェードアウトする仕様になっている(マウスを動画領域から外せばすぐに消える)。別に普通に視聴する分にはこの仕様で問題ないのだけど、たまに一瞬だけ動画の下部に映ったものをみたいときなどがあると思う。たとえば字幕が映像自体に表示されている場合…(アメリカ映画で英語以外の言語を喋るシーンには英語の字幕が映像下部に表示される)。

こういったときに字幕を一瞬で読みきれなかったらシークバーを戻すのだけど、再生バーが動画の下部を覆っているので字幕が見切れたり見にくかったりする。こういうときキーボードのキーで5秒戻すけど、再生バーは3秒で消えるので2秒しかない。字幕は2秒では読めないので、10秒前まで戻すことになる。でも10秒だと戻しすぎて読みたい字幕のシーンを待つ…ということになる。

このように再生バー分を考慮して巻き戻さないといけなくて気持ちよい視聴体験ができない。しかもYouTube再生バーは停止状態では常に表示されるのである。だから停止して字幕を読むこともできなく、非常にもどかしい。

画面の下部の映像情報をないがしろにされているような気分ですごくモヤモヤするからこのようなものを作っている。

なぜ動画の外ではなく上に透過表示するのか

そもそも、ウェブブラウザ上なのだから動画の上に再生バーを表示する必要はないのではないか。僕はこれはテレビの時代のデザインに引きずられていると思っていて、どう考えてもOSD(on screen display)文化の名残りだと思う。テレビはリモコンで各操作をすると映像の上に情報が表示されるけど、あれは画面上にしか表示するところがないからあのようになっている。映像が常にフルスクリーン表示なので致し方ないというやつだと思う。

ただウェブブラウザは動画の外側に再生バーを表示する領域はあるのだから、わざわざ動画の上に表示する必要などないと思う。高解像度ディスプレイの時代なのだからなおさらスペースはある。ユーザーは動画を見ることが一番の目的なのに、その動画の下部を再生バーが侵犯しているのはなんだかおかしい気がする。

こちらからは以上です。

そういうわけなのでニーズに合えばインストールして使ってください。みなさんのYouTube視聴体験に貢献できたら幸いです。

chrome.google.com

YouTubeについてはもう少し思うところがあるのでたぶん後日にまた日記を書きます。


様々なBarが世の中にはあります。