ニコニコ動画Zeroの動画視聴ページ「ZeroWatch」をユーザスタイルシートとGreasemonkeyでカスタマイズしてみた



新しい記事を書きました。こちらを利用するとGreasemonkey1つでいろいろ捗ります。

【続】ニコニコ動画Zeroの動画視聴ページ「ZeroWatch」をカスタマイズするGreasemonkey


ニコニコ動画が「Zero」にアップデートされ、動画プレイヤーも「ZeroWatch」という名前のスタイルに移行しました。従来に比べてかなり使用感が変わったのでかなり違和感はあります。非難囂々と言うことらしいですがまぁそうですねぇ。こりゃ批判は出るでしょうねぇ。純粋に今までしていた活動がしづらいですからねぇ。


  • コメント:マウスオーバーで動画にかぶる形でコメント欄が表示される。視聴の邪魔になる上、コメントするタイミングでいちいちマウス動かさないといけない。
  • 動画情報:デフォルトで閉じていてクリックで表示。動画タイトルが大きいので動画情報を表示すると動画が見えなくなること多し。
  • 投稿者情報:投稿者さんの名前、画像は動画の下の方に移動。まとまって見やすくなったものの、動画見ながら投稿者さんの名前を横目で見ていたので不便かなぁ。
  • マイリスト:ボタンを押さないと表示されない。普通のマイリストはともかく「とりあえずマイリスト」にも一手間はいるようになっちゃったら意味ないんじゃ無いの?あと、マイリストはいつになったら別ウィンドウじゃ無く出来るようになるんですか?
  • ブログパーツ:共有ボタンに代わるものはページ下部にあるものの、まだTwitterとFacebookのみ。ブログパーツはないので何とかしないと。


ただ個人的には批判ばかりでも無くて、「動画を見る」という機能に限って言えば凄く見やすくなってると思うんですよ。動画視聴中は動画再生画面以外がグレーになるとかもの凄く良いアイディア。映画を見るときに部屋を暗くするのと同じ。同じ路線で言うと「残り時間その他のボタンが表示されない」というのも動画視聴に集中するためのデザインと言えるだろうけどこれは…ふとしたときに不便だねぇ。動画視聴に没頭したい時ばかりでは無いし、個人的には残り時間とか視認する機会って結構多いので。視線がトリガーになって表示してくれると一番良いけど無理だし、せめて常時表示/非表示を切り替え・設定出来ると良かったのにね。


というわけでタイトル。

システム的な部分は「仕方ないね」で基本的に諦めつつ(あんまり複雑なことはしない)、表示/デザイン関連を自分で出来る範囲で勝手にカスタマイズするという方向性です。ブログパーツはGreasemonkeyで表示させ、投稿者名の位置や動画タイトルが異常に大きいといった表示面での調整はユーザースタイルシートで対応しています。

以下、内容とサンプル的な。




CSS

動画タイトルを小さくする

#videoHeader #videoHeaderDetail h2 {
font-size: 100% !important;
}
#videoHeader #videoHeaderDetail .videoDetailExpand {
height: 30px !important;
min-height: 30px !important;
}
#videoHeader #videoHeaderMenu {
height: 40px !important;
}

動画説明文をデフォルトで表示する

#videoHeader #videoHeaderDetail #videoDetailInformation {
display: block !important;
}

動画投稿者名をファーストビューに表示する


.sidebar #userProfile {
width: 150px;
position: absolute !important;
top: 40px !important;
left: 0 !important;
z-index: 10;
}
.sidebar #userProfile .profile {
width: 75px !important;
}
.sidebar #userProfile p {
display: none;
}



Greasemonkey

ブログパーツの表示

これの応用。

ニコニコ動画のブログ貼り付け用コードを動画画面に表示するGreasemonkey(Zero対応) ― Gist

インストールはこちらから出来ます。

https://gist.github.com/raw/2573333/nico_blogparts.user.js

表示位置の選定がとても大変だったのですが、とりあえずコメントパネルの一番下に追加しておきました。マウスオーバーでこっちに出てくる感じ。


追記(2012/05/02 13:49)
動画プレイヤーがページ遷移せずにリクエストするようになったため現在これは上手く動いていません。違う動画に移動しても前の動画と同じブログパーツが表示されてしまいます。

追記(2012/05/02 16:41)
0.2.1で一応解決




サンプル

以上を盛り込んだ動画再生画面はこんな感じ。

02_01.jpg

うん、大体良くまとまってる。

しばらくこれで使ってみます。



注意点

  • ウィンドウの幅に大きく左右されます。画面が狭いと多分投稿者名が説明文にかぶります。その辺は各自で調整すると吉だと思います。
  • 動画説明分を強制表示にしているため閉じれない&タグ欄の開閉でタイトルが上にずれるときがあります。タグ欄を開閉し直すと直ります。
  • 個人的な好みで「お気に入り登録」「関連動画」のリンクを削除しています。必要な人は適宜表示で。