ZeroWatchのUIをカスタマイズするGreasemonkey。公式で対応した部分は順次機能削除していく予定です。

zerowatch_ui_customize.user.js

// ==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();
})();

zerowatch_ui_customize_t.user.js

// ==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();
})();