Created
May 4, 2012 04:32
-
-
Save nobodyplace/2592039 to your computer and use it in GitHub Desktop.
ZeroWatchのUIをカスタマイズするGreasemonkey。公式で対応した部分は順次機能削除していく予定です。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // ==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 = {"<":"<", ">":">", "&":"&", "'":"'", "\"":""", " ":" ", " ":" "}; | |
| 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(); | |
| })(); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // ==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 = {"<":"<", ">":">", "&":"&", "'":"'", "\"":""", " ":" ", " ":" "}; | |
| 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