Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
ZeroWatchのUIをカスタマイズするGreasemonkey。公式で対応した部分は順次機能削除していく予定です。
// ==UserScript==
// @name ZeroWatch UI Customize by is
// @version 0.3.0
// @namespace nplll.com
// @description ZeroWatchのUIをカスタマイズするGreasemonkey。公式で対応した部分は順次機能削除していく予定です。
// @include http://www.nicovideo.jp/watch/*
// @see https://gist.github.com/2575225
// @license MIT License(http://en.wikipedia.org/wiki/MIT_License)
// ==/UserScript==
// Version History:
// 0.0.1 - 2012/05/04 リリース
// 0.1.0 - 2012/05/04 再生数/コメント数/マイリスト数を投稿者情報の下に
// 0.1.1 - 2012/05/04 投稿者名の見栄えを改善
// 0.2.0 - 2012/05/05 投稿日時をファーストビューに表示
// 0.2.1 - 2012/05/05 ページ遷移した場合に投稿者情報が更新されない問題を修正
// 0.2.2 - 2012/05/05 ページ遷移した場合の様々な問題を修正
// 0.2.3 - 2012/06/09 [69の日] 文字サイズの微調整など
// 0.2.4 - 2012/06/18 プレイヤー下のHTML変更などに対応
// 0.2.5 - 2012/06/19 投稿者情報のCSSを微調整
// 0.2.6 - 2012/08/22 コメント欄下の広告を削除
// 0.3.0 - 2012/10/17 「Q」に対応
// Copyrights:
// コードの一部を@toriimiyukkiさんのZeroFixからいただいています。
// @toriimiyukkiさん記述以外の部分については@nobdoyplaceに所属します。
(function(){
//処理
var createTags = function () {
var $ = function(name) { return document.querySelector(name); }
var htmlEscape = function(str){
var map = {"<":"&lt;", ">":"&gt;", "&":"&amp;", "'":"&#39;", "\"":"&quot;", " ":"&nbsp;", " ":"&#8195;"};
var replaceStr = function(s){ return map[s]; };
return str.replace(/<|>|&|'|"|\s| /g, replaceStr);
}
//基礎データ
var header = $('#videoHeaderDetail');
var expand = $('.videoDetailExpand');
var commentPanel = $('#playerCommentPanelOuter');
var profile = $('#userProfile').cloneNode(true);
var icon = profile.querySelector('.usericon');
var id = location.pathname.match(/watch\/(.+)$/)[1];
var titleArea = expand.querySelector('h2');
var title = titleArea.innerHTML;
var author = profile.querySelector('.userName').innerHTML;
var videoStats = $('#videoStats').cloneNode(true);
var videoDate = $('#videoInfoHead').querySelector('.videoPostedAt').innerHTML;
var videoInfo = $('#videoDetailInformation');
//動画タイトルを小さくする(150%)
titleArea.style.fontSize = '150%';
expand.style.height = 'auto';
//投稿日時をファーストビューに表示
var vd = $('#videoPostedAt');
if(vd == null) {
vd = document.createElement('div');
vd.id = 'videoPostedAt';
vd.style.padding = '0 4px';
vd.style.color = '#F5C92E';
vd.style.opacity = '0.5';
header.insertBefore(vd, header.firstChild);
}
vd.innerHTML = videoDate;
//投稿者情報を左上に表示
profile.style.width = '85px';
profile.style.position = 'fixed';
profile.style.top = '40px';
profile.style.left = '5px';
profile.style.padding = '5px';
profile.style.zIndex = '10';
profile.style.fontSize = 'x-small';
profile.style.backgroundColor = '#eaeaea';
icon.style.border = 'solid 1px #999';
icon.style.width = '83px';
icon.style.height = '83px';
icon.alt = author;
icon.title = author;
profile.querySelector('.userName').style.textShadow = "none";
profile.querySelector('.userName').style.fontWeight = "bold";
profile.querySelector('.userName').style.fontSize = "110%";
profile.querySelector('.userIconContainer').style.cssFloat = "none";
profile.querySelector('.profile').style.cssFloat = "none";
profile.querySelector('.profile').style.margin = "10px 0";
profile.querySelector('.favVideoOwner').style.display = "block";
//再生数/コメント数/マイリスト数を投稿情報の下に
videoStats.id = 'videoStatsAdded';
videoStats.style.marginTop = '5px';
videoStats.style.paddingTop = '5px';
videoStats.style.borderTop = 'solid 1px #ccc';
var vc = videoStats.querySelector('.viewCount');
var cc = videoStats.querySelector('.commentCount');
var mc = videoStats.querySelector('.mylistCount');
vc.style.marginLeft = '10px';
vc.style.fontWeight = 'bold';
vc.style.display = 'block';
cc.style.marginLeft = '10px';
cc.style.fontWeight = 'bold';
cc.style.display = 'block';
mc.style.marginLeft = '10px';
mc.style.fontWeight = 'bold';
mc.style.display = 'block';
profile.appendChild(videoStats);
//既にある場合には差し替え(ページ遷移対応)
var u = $('#userProfileAdded');
if(u == null) {
profile.id = 'userProfileAdded';
$('#content').appendChild(profile);
} else {
u.innerHTML = profile.innerHTML;
}
//ブログパーツをコメントパネルに表示
if(!id || !title) return;
//外部プレイヤー
var extPlayer = '<script type="text/javascript" src="http://ext.nicovideo.jp/thumb_watch/'+id+'"></script>' + '<noscript><a href="http://www.nicovideo.jp/watch/'+id+'">'+title+'</a></noscript>';
//動画情報
var movieInfo = '<iframe width="312" height="176" src="http://ext.nicovideo.jp/thumb/'+id+'" scrolling="no" style="border:solid 1px #CCC;" frameborder="0"><a href="http://www.nicovideo.jp/watch/'+id+'">'+title+'</a></iframe>';
//表示するテキストを作成
var str =
'<table cellspacing="0">'+
'<tr><th class="font10">外部プレイヤー</th></tr>'+
'<tr><td><form name="form_script"><input type="text" style="width: 250px;" readonly="true" name="script_code" onclick="javascript:document.form_script.script_code.focus(); document.form_script.script_code.select();" value="'+htmlEscape(extPlayer)+'"></form></td></tr>'+
'<tr><th class="font10">動画情報</th></tr>'+
'<tr><td><form name="form_iframe"><input type="text" style="width: 250px;" readonly="true" name="iframe_code" onclick="javascript:document.form_iframe.iframe_code.focus(); document.form_iframe.iframe_code.select();" value="'+htmlEscape(movieInfo)+'"></form></td></tr>'+
'</table>'
;
//表示
var dId = 'blog_parts_area'; //二重表示防止のため
var t = $('#'+dId);
if(t) {
t.innerHTML = str;
} else {
var d = document.createElement('div');
d.id = dId;
d.style.marginLeft = "7px";
d.style.marginTop = "15px";
d.style.color = "#000";
d.style.fontSize = "x-small";
d.style.cssFloat = "right";
d.innerHTML = str;
videoInfo.insertBefore(d, videoInfo.firstChild);
}
//コメント欄の広告を削除
$('#ichibaPanelAd').style.display = 'none';
$('#commentDefault').style.height = $('#commentDefault').offsetHeight + 238 + 'px';
}
//コントロール
//Greasemonkeyで取得出来るページ情報は初回ページ読み込み時しか更新されないので
//タイトルの更新をListenして把握する
//問題はDOMNodeInsertedが同期なこととdeprecatedなこと
//ちなみにそれでもwatchAPIDataContainerの取得は捕捉出来ないので利用を断念
var timer = 0;
var titleArea = document.getElementsByTagName('h2')[0];
titleArea.addEventListener('DOMNodeInserted', function() {
if(timer) return;
timer = setTimeout(function() {
if(titleArea.innerHTML) {
//動画読み込み時の処理
createTags();
timer = 0;
return;
}
timer = 0;
}, 30);
}, false);
//動画視聴ページを直接開いたときの処理
createTags();
})();
// ==UserScript==
// @name ZeroWatch UI Customize by is [textarea]
// @version 0.3.0
// @namespace nplll.com/t
// @description ZeroWatchのUIをカスタマイズするGreasemonkeyのブログパーツがtextareaのバージョン。公式で対応した部分は順次機能削除していく予定です。
// @include http://www.nicovideo.jp/watch/*
// @see https://gist.github.com/2575225
// @license MIT License(http://en.wikipedia.org/wiki/MIT_License)
// ==/UserScript==
// Version History:
// 0.0.1 - 2012/05/04 リリース
// 0.1.0 - 2012/05/04 再生数/コメント数/マイリスト数を投稿者情報の下に
// 0.1.1 - 2012/05/04 投稿者名の見栄えを改善
// 0.2.0 - 2012/05/05 投稿日時をファーストビューに表示
// 0.2.1 - 2012/05/05 ページ遷移した場合に投稿者情報が更新されない問題を修正
// 0.2.2 - 2012/05/05 ページ遷移した場合の様々な問題を修正
// 0.2.3 - 2012/06/09 [69の日] 文字サイズの微調整など
// 0.2.4 - 2012/06/18 プレイヤー下のHTML変更などに対応
// 0.2.5 - 2012/06/19 投稿者情報のCSSを微調整
// 0.2.6 - 2012/08/22 コメント欄下の広告を削除
// 0.3.0 - 2012/10/17 「Q」に対応
// Copyrights:
// コードの一部を@toriimiyukkiさんのZeroFixからいただいています。
// @toriimiyukkiさん記述以外の部分については@nobdoyplaceに所属します。
(function(){
//処理
var createTags = function () {
var $ = function(name) { return document.querySelector(name); }
var htmlEscape = function(str){
var map = {"<":"&lt;", ">":"&gt;", "&":"&amp;", "'":"&#39;", "\"":"&quot;", " ":"&nbsp;", " ":"&#8195;"};
var replaceStr = function(s){ return map[s]; };
return str.replace(/<|>|&|'|"|\s| /g, replaceStr);
}
//基礎データ
var header = $('#videoHeaderDetail');
var expand = $('.videoDetailExpand');
var commentPanel = $('#playerCommentPanelOuter');
var profile = $('#userProfile').cloneNode(true);
var icon = profile.querySelector('.usericon');
var id = location.pathname.match(/watch\/(.+)$/)[1];
var titleArea = expand.querySelector('h2');
var title = titleArea.innerHTML;
var author = profile.querySelector('.userName').innerHTML;
var videoStats = $('#videoStats').cloneNode(true);
var videoDate = $('#videoInfoHead').querySelector('.videoPostedAt').innerHTML;
var videoInfo = $('#videoDetailInformation');
//動画タイトルを小さくする(150%)
titleArea.style.fontSize = '150%';
expand.style.height = 'auto';
//投稿日時をファーストビューに表示
var vd = $('#videoPostedAt');
if(vd == null) {
vd = document.createElement('div');
vd.id = 'videoPostedAt';
vd.style.padding = '0 4px';
vd.style.color = '#F5C92E';
vd.style.opacity = '0.5';
header.insertBefore(vd, header.firstChild);
}
vd.innerHTML = videoDate;
//投稿者情報を左上に表示
profile.style.width = '85px';
profile.style.position = 'fixed';
profile.style.top = '40px';
profile.style.left = '5px';
profile.style.padding = '5px';
profile.style.zIndex = '10';
profile.style.fontSize = 'x-small';
profile.style.backgroundColor = '#eaeaea';
icon.style.border = 'solid 1px #999';
icon.style.width = '83px';
icon.style.height = '83px';
icon.alt = author;
icon.title = author;
profile.querySelector('.userName').style.textShadow = "none";
profile.querySelector('.userName').style.fontWeight = "bold";
profile.querySelector('.userName').style.fontSize = "110%";
profile.querySelector('.userIconContainer').style.cssFloat = "none";
profile.querySelector('.profile').style.cssFloat = "none";
profile.querySelector('.profile').style.margin = "10px 0";
profile.querySelector('.favVideoOwner').style.display = "block";
//再生数/コメント数/マイリスト数を投稿情報の下に
videoStats.id = 'videoStatsAdded';
videoStats.style.marginTop = '5px';
videoStats.style.paddingTop = '5px';
videoStats.style.borderTop = 'solid 1px #ccc';
var vc = videoStats.querySelector('.viewCount');
var cc = videoStats.querySelector('.commentCount');
var mc = videoStats.querySelector('.mylistCount');
vc.style.marginLeft = '10px';
vc.style.fontWeight = 'bold';
vc.style.display = 'block';
cc.style.marginLeft = '10px';
cc.style.fontWeight = 'bold';
cc.style.display = 'block';
mc.style.marginLeft = '10px';
mc.style.fontWeight = 'bold';
mc.style.display = 'block';
profile.appendChild(videoStats);
//既にある場合には差し替え(ページ遷移対応)
var u = $('#userProfileAdded');
if(u == null) {
profile.id = 'userProfileAdded';
$('#content').appendChild(profile);
} else {
u.innerHTML = profile.innerHTML;
}
//ブログパーツをコメントパネルに表示
if(!id || !title) return;
//外部プレイヤー
var extPlayer = '<script type="text/javascript" src="http://ext.nicovideo.jp/thumb_watch/'+id+'"></script>' + '<noscript><a href="http://www.nicovideo.jp/watch/'+id+'">'+title+'</a></noscript>';
//動画情報
var movieInfo = '<iframe width="312" height="176" src="http://ext.nicovideo.jp/thumb/'+id+'" scrolling="no" style="border:solid 1px #CCC;" frameborder="0"><a href="http://www.nicovideo.jp/watch/'+id+'">'+title+'</a></iframe>';
//表示するテキストを作成
var str =
'<table cellspacing="0">'+
'<tr><th class="font10">外部プレイヤー</th></tr>'+
'<tr><td><form name="form_script"><input type="text" style="width: 250px;" readonly="true" name="script_code" onclick="javascript:document.form_script.script_code.focus(); document.form_script.script_code.select();" value="'+htmlEscape(extPlayer)+'"></form></td></tr>'+
'<tr><th class="font10">動画情報</th></tr>'+
'<tr><td><form name="form_iframe"><textarea style="width: 250px;" readonly="true" name="iframe_code" onclick="javascript:document.form_iframe.iframe_code.focus(); document.form_iframe.iframe_code.select();">'+htmlEscape(title)+''+htmlEscape(author)+''+"\n"+htmlEscape(movieInfo)+'</textarea></form></td></tr>'+
'</table>'
;
//表示
var dId = 'blog_parts_area'; //二重表示防止のため
var t = $('#'+dId);
if(t) {
t.innerHTML = str;
} else {
var d = document.createElement('div');
d.id = dId;
d.style.marginLeft = "7px";
d.style.marginTop = "15px";
d.style.color = "#000";
d.style.fontSize = "x-small";
d.style.cssFloat = "right";
d.innerHTML = str;
videoInfo.insertBefore(d, videoInfo.firstChild);
}
//コメント欄の広告を削除
$('#ichibaPanelAd').style.display = 'none';
$('#commentDefault').style.height = $('#commentDefault').offsetHeight + 238 + 'px';
}
//コントロール
//Greasemonkeyで取得出来るページ情報は初回ページ読み込み時しか更新されないので
//タイトルの更新をListenして把握する
//問題はDOMNodeInsertedが同期なこととdeprecatedなこと
//ちなみにそれでもwatchAPIDataContainerの取得は捕捉出来ないので利用を断念
var timer = 0;
var titleArea = document.getElementsByTagName('h2')[0];
titleArea.addEventListener('DOMNodeInserted', function() {
if(timer) return;
timer = setTimeout(function() {
if(titleArea.innerHTML) {
//動画読み込み時の処理
createTags();
timer = 0;
return;
}
timer = 0;
}, 30);
}, false);
//動画視聴ページを直接開いたときの処理
createTags();
})();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.