スポンサーサイト
投稿日時 : -------- --:--
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
-------- --:-- | スポンサー広告
ニコニコ動画でプレーヤ部分まで自動スクロールするスクリプト改良版『nicoscroll2』
投稿日時 : 2009-07-08 18:15
更新日時 : 2009-10-25 13:59
更新日時 : 2010-04-14 11:43
更新日時 : 2010-04-20 14:01
更新日時 : 2010-11-15 11:24
更新日時 : 2011-02-14 10:08
更新日時 : 2011-03-29 10:31
更新日時 : 2011-04-06 06:00
更新日時 : 2011-06-27 07:16
 
更新:2011-06-27 07:16
1.07リリース。Tridentエンジンでのスクロールずれ修正。
 
更新:2011-04-06 06:00
1.06リリース。ページ仕様変更に対応。
 
更新:2011-03-29 10:31
1.05リリース。ページ仕様変更に対応。
 
更新:2011-02-14 10:08
1.04リリース。Y方向のスクロール微調整ができないバグ修正
 
更新:2010-11-15 11:24
1.03リリース。ニコニコ生放送の新プレーヤに対応
 
更新:2010-04-14 11:43
1.02リリース。ニコニコ生放送に対応しました。
 
追記:2009-10-25 13:59
ブックマークレット版を公開しました。
ニコニコ動画用スクリプト『nicoscroll2』ブックマークレット版
 
 
 2008/04/09に公開した、「ニコ動でプレーヤ部分まで自動スクロールさせるスクリプト」の改良版『nicoscroll2』を作りました。Firefox+Greasemonkey / Chrome / Sleipnir+SeaHorse / Opera / IE+Trixie / IE+IE7Pro / Safari(Mac)+GreaseKit / Safari + NinjaKit など、多様な環境で動作します。
 

改良点

 旧バージョンでは機械的にプレーヤフレーム上部までスクロールしていましたが、今バージョンではプレーヤフレームの最下部がブラウザ表示領域の最下部の位置にくるようにしました。また、表示領域に余裕があると判定した場合はタイトル部分にスクロールします。さらに、すこし手を加えればユーザ好みに微調整ができるようになっています。
 
 以下のスクリーンショットは Google Chrome のウィンドウをプレーヤの映像表示部分ギリギリのサイズまで小さくした状態で視聴ページを開いてnicoscroll2で自動スクロールさせたものです。
nocoscroll2 demo chrome
 
ちなみに、本文と関係ないけど、↑の動画はテクノ系アーティスト Aphex Twin の曲 『Rubber Johnny』 に Chris Cunningham が映像つけたものです。マジ天才。リンク貼っておきますがグロ苦手な人は注意ww。
 
 
 もうひとつ。Opera でウィンドウの縦幅に余裕を持たせて視聴ページを開いたところ。タイトルもプレーヤも両方同時に表示できるほどウィンドウ縦幅があるならタイトル部分までスクロールする。
nicoscroll2 demo opera
 

動作確認

 多様な環境で動作します。以下動作確認に使用した環境を列挙します。
  • Firefox 5.0 + Greasemonkey 0.9.5
  • Firefox 4.0.1 + Greasemonkey 0.9.5
  • Firefox 3.6.17 + Greasemonkey 0.9.5
  • Opera 11.11
  • Google Chrome 12.0.742.100
  • Safari 5.0.5 + SIMBL 0.9.8d + GreaseKit 1.7
  • Safari 5.0.5 + NinjaKit 0.8
  • Sleipnir 2.9.7 + Seahorse 1.1.2
  • Internet Explorer 9.0.8112.16421 + Trixie 0.2.3
  • Internet Explorer 9.0.8112.16421 + IE7Pro 2.5.1
  • Internet Explorer 8.0.6001.18702 + Trixie 0.2.3
  • Internet Explorer 8.0.6001.18702 + IE7Pro 2.5.1
  • Internet Explorer 7.0.5730.13 + Trixie 0.2.3
  • Internet Explorer 7.0.5730.13 + IE7Pro 2.5.1
  • Internet Explorer 6.0.2900.5512 + Trixie 0.2.3
  • Internet Explorer 6.0.2900.5512 + IE7Pro 2.5.1
 

インストール

nicoscroll2 Ver 1.07 (2011-06-27 07:16更新)  
Firefox + Greasemonkey や 最近のChrome なら上記リンクをクリックするだけでインストールダイアログが出ます。その他は各環境ごとのヘルプなどを参考にしてください。一応参考になりそうなURLを貼っておきます。
 
[ Opera ]

 
[ Sleipnir + SeaHorse ]
 
[ IE + Trixie ]
 
[ IE + IE7Pro ]
 *ファイル名を nicoscroll2.user.js から nicoscroll2.ieuser.js に変更する必要あり  
[ Safari(Mac) + GreaseKit ]
 
[ Safari + NinjaKit]
 
 

ソース全文

 ソースの全文を貼っておきます。とても読みにくいソースになっていますが、ブックマークレット版へ自動変換するためです。IE6のブックマークッレットの文字数制限(508文字)へ対応するためにどうしてもこういうソースになってしまいます。
 
nicoscroll2.user.js Ver.1.07(2011-06-27 07:16更新)
// nicoscroll2
// auto scroll to the player object in nicovideo.jp
// ------------------------------------------------------------
// Version 1.07 (2011-06-20)
// Copyright (c) 2009-2011, itmst
// Contact itmst71@gmail.com
// ------------------------------------------------------------
// Tested on:
//    Firefox 5.0 + Greasemonkey 0.9.5
//    Firefox 4.0.1 + Greasemonkey 0.9.5
//    Firefox 3.6.17 + Greasemonkey 0.9.5
//    Opera 11.11
//    Google Chrome 12.0.742.100
//    Sleipnir 2.9.7 + Seahorse 1.1.2
//    Internet Explorer 9.0.8112.16421 + Trixie 0.2.3
//    Internet Explorer 9.0.8112.16421 + IE7Pro 2.5.1
//    Internet Explorer 8.0.6001.18702 + Trixie 0.2.3
//    Internet Explorer 8.0.6001.18702 + IE7Pro 2.5.1
//    Internet Explorer 6.0.2900.5512 + Trixie 0.2.3
//    Internet Explorer 6.0.2900.5512 + IE7Pro 2.5.1
//    Safari 5.0.5 + SIMBL 0.9.8d + GreaseKit 1.7
//    Safari 5.0.5 + NinjaKit 0.8
// ------------------------------------------------------------
// ==UserScript==
// @name           nicoscroll2
// @namespace      http://itmst.blog71.fc2.com/nicoscroll2.user.js
// @description    auto scroll to the player object in nicovideo.jp
// @include        http://live.nicovideo.jp/watch/*
// @include        http://www.nicovideo.jp/watch/*
// @version        1.07
// ==/UserScript==

(function(){
   try{
      var
      W = window,
      D = document,
      E = D.documentElement,
      $ = function(x){return D.getElementById(x)},
      P = $("flvplayer_container"),
      F = /^f|2$/.test(D.body.className),
      L = /^l/.test(D.domain),
      I = W.attachEvent && !W.opera,
      t = "offsetTop",
      H = ($("header") || $("PAGEHEADER")).offsetHeight,
      C = ($("all") || $("PAGECONTAINER"))[t],
      T = H + (F ? 0 : C) + (L ? 15 : 0),
      B = ($("WATCHFOOTER") || $("player_btm"))[t]
        + (I ? C + (L ? H : 0) : 0) - E.clientHeight,
      Y = B < T ? T : B,
      X = E.clientWidth < P.offsetWidth ? P.offsetLeft : 0,
      x = 0,
      y = 0;
      W.scrollTo(X + x, Y + y);
   }catch(e){}
})();
 

動作の微調整

最終行近くの
  x = 0, //横スクロール位置微調整(px)
  y = 0; //縦スクロール位置微調整(px)
の部分を書き換えることでユーザによる微妙な動作調整が可能になっています。
 
 
スポンサーサイト
2009-07-08 18:15 | user.js | Comment(12) | Trackback(0)
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。