ニコニコ動画：Qマイページ省スペース化

なんか白い。		こんな感じにすると情報量2倍。
	→

前提

firefoxでしかチェックしてない
「Stylish」アドオンを使用してスタイル変更
「greasemonkey」アドオンを使用してHTML書き換え
ニコニコがマイページのHTMLを少し変えただけで崩れる可能性がある

やってること

スタイルの変更

各隙間を微妙に詰める
フッター（時間やニコるボタン）を右回り込みにし、動画情報（サムネとタイトル）と同列に
生放送の放送タイトル横のサムネは、そこまで重要じゃないので非表示

HTMLの書き換え

フッターを右回り込みにした関係上、動画情報とフッターをfloat解除するためのラッパで覆う
マイリストコメントが動画情報より上なのは個人的に不自然なので、下に持ってくる
「動画」「イラスト」と同様に「生放送」「予約」にもテキストアイコンをつける

ユーザースタイルシート

firefoxのStylish用。

@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document url-prefix("http://www.nicovideo.jp/my"), url-prefix("http://www.nicovideo.jp/user")  {
.clearfix {width:100%;}
.clearfix:after{
    content: ""; 
    display: block; 
    clear: both;
}

#nicorepo .articleBody {
    margin-top: 0 !important;
    padding-top: 0 !important;
}
.log {
    margin: 4px 0 !important;
    padding-top: 6px !important;
}
.log-reslist {
    margin: 4px 0 0 !important;
}

.log-details {
    float:left;
}
.log-footer {
    margin-top:0 !important;
    float:right;
}

.log-body{
    margin-bottom:4px !important;
    padding-top:0 !important;
}
.nicorub-balloon {
    width: 48px !important;
}
.log-subdetails {
    margin:2px 0 !important;
}

.log-target-live-program .log-target-thumbnail {
    display: none;
}
.log-target-live-program .log-target-info {
    margin-left: 4px !important;
}
.log-target-type-live {
    background-color: #008000;
    color: #FFFFFF;
    display: inline-block;
    font-size: 90%;
    margin-right: 4px;
    padding: 1px 4px;
}

.userDetail {/* nlFilter header_light(9)用 */
    margin: 48px auto 0 !important;
}
}

greasemonkeyスクリプト

greasemonkey用。「NicoSmartMypage.user.js」という名前で保存してブラウザにD&Dしたらインストールされる。

ただし「過去のニコレポを見る」から追加で読み込んだ分には適用されない。追加されたタイミングで書き換えを実行する方法が何かあると思うけどわからん。

追加で読み込んだ内容もそれなりに見えるが、「コメントする」を押すと動画情報とフッタに被ってコメント入力欄が出る。

// ==UserScript==
// @name        NicoSmartMypage
// @namespace   ikatakos
// @include     http://www.nicovideo.jp/my*
// @include     http://www.nicovideo.jp/user/*
// @require     http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js
// @version     20121107
// ==/UserScript==

//jQueryの競合を防ぐおまじない
this.$ = this.jQuery = jQuery.noConflict(true);

(function(){

// config
//生放送や予約のニコレポに「生放送」「予約」と表記する
var doAddLogoToLive   = true;
//マイリスコメントを、動画情報とフッターの下に移動
var doMoveDownComment = true;
//動画情報とフッターをclearfix要素で挟む（float解除）
var doMoveRightFooter = true;
// config おわり

var addLogoToLive = function() {
	$(".log-community-live-broadcast, .log-user-live-broadcast")
		.find(".log-target-info")
		.prepend("<span class=\"log-target-type-live\">生放送</span>");
	$(".log-community-live-reserve, .log-user-live-reserve")
		.find(".log-target-info")
		.prepend("<span class=\"log-target-type-live\">予約</span>");
};
var moveDownComment = function() {
	var $mylistComments = $(".log-subdetails");
	$mylistComments.each(function(){
		$this = $(this);
		$this.nextAll(".log-footer").after($this);
	});
};
var moveRightFooter = function() {
	$(".nicorepo .log").each(function() {
		$(this).find(".log-details, .log-footer")
			.wrapAll("<div class=\"clearfix\"></div>");
	});
};

$(function() {
	if (doAddLogoToLive) { addLogoToLive(); }
	if (doMoveDownComment) { moveDownComment(); }
	if (doMoveRightFooter) { moveRightFooter(); }
});

})();

ニコニコ動画, css, javascript, 作ってみた

目次