そのUI、自分で直せない?

By: Daiki Nimura
Posted: 2020-09-04
Movies

最近おすすめされたドラマをみるために FOD プレミアム契約したんだけど、UI が使いにくくて結構ストレスたまる。

これが実際の画面なんだけどなんかこのちゃっちい標準モードかフルスクリーンにするかの二択しかない。

https://res.cloudinary.com/dw86z2fnr/image/upload/v1620383431/titanicrising.jp/fix-uiself/_2020-09-02_13.03.24_uhme06.png

自分は職場でサブモニターを縦で使っているのでフルスクリーンで視聴出来ない。

となるとこの標準モード 1 択なんだけど画面がちっさくて全然快適じゃない。

こういう時は自分で直すしかないですね!

Amino を使う

Amino は自分でサイト毎にスタイルシートを上書きできる拡張機能。

会社のプロダクトの管理画面もこれで上書きしたりして快適に使ってます。

まずはデベロッパーツールで要素を取得していく。

#video_container という div に video 要素がラップされているようだ。

https://res.cloudinary.com/dw86z2fnr/image/upload/v1620383432/titanicrising.jp/fix-uiself/_2020-09-02_13.08.56_y9gpzc.png

コードをみてみると width と height が決め打ちされてますね。

ここで Amino を開いて配下要素ごと important で倍の大きさを指定します。

https://res.cloudinary.com/dw86z2fnr/image/upload/v1620383432/titanicrising.jp/fix-uiself/_2020-09-02_13.15.01_kahnvv.png

いい感じにくっそでかくなったけどなんか寄ってる

https://res.cloudinary.com/dw86z2fnr/image/upload/v1620383431/titanicrising.jp/fix-uiself/_2020-09-02_13.16.15_aieizt.png

追加でビデオコンテナの Wrapper 要素である#fod_player の width を固定ではなく自動にしてあげます。

https://res.cloudinary.com/dw86z2fnr/image/upload/v1620383431/titanicrising.jp/fix-uiself/_2020-09-02_13.19.26_lqoxhn.png

いい感じになりましたね。

https://res.cloudinary.com/dw86z2fnr/image/upload/v1620383432/titanicrising.jp/fix-uiself/_2020-09-02_13.19.02_kqutsn.png

これで問題なく画面下段に TweetDeck、上段に FOD という盤石の体勢で挑めます。

仕事中何みてんだよみたいなツッコミは無しで…

まあ今回思ったけど Netflix とか Amazon プライムとか自分が普段利用している動画系サブスクサービスの UI は流石にしっかりしてるなあ。

あと FOD の字幕の出し方全然わかんないんだけどもしかしてないの?

人気の記事