こんにちは、さち です。
iPhone の画面収録をした動画をツイッターに投稿することがあります。しかし、PC でその動画を見ると超低画質になってしまうんです……。
ツイッター側で対処してくれるのが一番ですが、待っていてもいつ改善されるか分かりません。せめて自分だけでも動画の画質を良くできるように、対策をしてみます。
PC で動画を見ると画質が最悪
実際に、PCウェブ版ツイッター でこちらのツイートの動画を見たのが上の状態です。低画質すぎて最早何が映っているのかよく分かりません。
このようなことが起きる原因は、動画の表示エリアの広さが足りていないからです。
原因の詳細は下記の記事で書いているので、興味がある方は読んでみて下さい。
ツイッター：PCから動画を見ると画質が悪すぎる件
こんにちは、さち です。iPhone で撮影した動画をツイッターに投稿することがあるんですが、その動画を PC から見ると凄まじく低画質になってしまいます。さすがに、まともに見られないレベルの画質は勘弁なので、何とかしたい……。
at.sachi-web.com
2019.11.11
対策方法
概要
ユーザーCSS を使って、動画の表示エリアを広げます。
ただし、タイムラインのプロフィール画像の配置位置の関係で、「ホーム」で動画の表示エリアを広げるとサイトの幅が広くなり過ぎます。そのため、ツイートを開いたページ（URLの例： https://twitter.com/uminosachi_/status/1193508862046789633）の時だけ広げるようにします。
操作手順
- 下記から拡張機能「Stylus」をインストール。（ユーザーCSS を書ける他の拡張機能や方法でもOK）
- Stylus に下記のような新しいスタイルを追加します。
main > div { width: 1010px !important; } .r-1ye8kvj { max-width: 620px !important; } - スタイルの適用先は「正規表現に一致する URL」にして
^https?:\/\/twitter\.com\/.+\/status\/\d+と入力。
- 「保存」します。
- これで、動画を含むツイートを開いた状態であれば、iPhone の横長の動画（アスペクト比 19.5：9 ）をそこそこの画質で見られます。また、音声もステレオになります。
ユーザーCSS による改善前／後を比べると、画質の違いは一目瞭然。ほんの少し幅を広げただけなのに効果は絶大ですね。
コメント
ご参考ですが拡張機能を作った方がいらっしゃいます。
2020年6月19日に公開されています。
Twitter動画を最高画質で
ttps://addons.mozilla.org/ja/firefox/addon/twitter%E5%8B%95%E7%94%BB%E3%82%92%E6%9C%80%E9%AB%98%E7%94%BB%E8%B3%AA%E3%81%A7/
Firefox 78.0.1で本文のツイート例を再生して効果を確認できました。
これ便利ですね。記事で紹介させてもらっても良いでしょうか？（まあくさんのコメントで教えてもらったことも明記します）
お心遣い恐縮です。
情報入手のいきさつを書きますので、よろしくお取り計らいください。
私はたまたまフリーウェア紹介サイトがらみの複数ツイートで知りました。
大本を探してたどり着いたのがこちらです。
拡張機能紹介記事のツイート
ttps://twitter.com/gigafreenet/status/1274630672968069120
上のツイートがリンクしている記事
Twitter の動画を、いつも最高画質で再生できるようにする Chrome 拡張機能＆ Firefox アドオン「Twitter動画を最高画質で」 – GIGA！無料通信
ttps://www.gigafree.org/google-chrome/twitter-videos-highest-quality/
Firefox用拡張機能のファイルサイズは14KB。小粒だけどぴりりと辛い感じがします。
今のユーザー数はChrome用200人弱、Firefox用30人弱。リリースして間もないですものね。
ありがとうございます。参考にします。
それでは、準備ができたら後日記事にさせてもらいますね。
初めまして
「Firefox： UIデザイン を変える「userChrome.css」の使い方」の記事と併せて、この記事も読ませて頂きました
拡張機能「Stylus」をインストール。（ユーザーCSS を書ける他の拡張機能や方法でもOK）
との情報を読んで、
以前からF12 デベロッパーツールのCSSを変更して その時見てるサイトページでスクロールしても固定されて隠れない邪魔なヘッダーを退かしたりして見やすくした時、その設定が自動では保存できないので何か操作するか拡張機能を入れないとダメだなとは思いつつほったらかしにしてたんですが今回この記事を見て、拡張機能を入れない保存のやり方を書いた記事もあれば紹介して貰えないでしょうか？
ちなみに
qumeru.com/magazine/65
こういう方法があるらしいですが理解できませんでした
こちら様の記事は分かりやすいので、このサイトで上記のような方法を解説した記事があれば分かるかも？と思い、コメントさせて頂きました
使用PCのOSはW10 64bit
使用しているPCブラウザはChrome、Firefox、Vivaldi、Edge
です
拡張機能を入れたくないのは、PCが余りにも古くて低スぺ(CPUが第一世代のモバイル用Core i3)の為ブラウザが重く遅くなりそうな事は避けたいので、インストールする以外に方法が無い場合以外はなるべくインストールしたくないと言うのが理由です
残念ですが、当ブログに拡張機能を入れない方法を紹介した記事はありません。
「userContent.css」を使えばできる可能性はありますが、記事の本題から外れてしまうので、詳細は検索して調べてみて下さい。
回答ありがとうございました
了解です