スポンサーサイト
投稿日時 : -------- --:--
上記の広告は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)
Comment
知人に教えてもらい入れてみたのですがとても便利です! ありがとうございます!
ニコニコ生放送のほうでも使いたいと思いあれこれいじってみたのですが自分の技術(プログラミング知識は皆無に等しいです、とほほ)ではうまくいかず、そこで「nicoscroll2」ではなく「nicoscroll」のほうの@includeをニコ生向けに変更したところ、うまく動いてくれました。
というわけでいまは、「nicoscroll2」と自分で一行だけ書き換えた「nicoscroll」の2つを入れて、快適に視聴できています。
- 2010/03/09(火) 19:22:53) 編集

ご利用ありがとうございます!
 
ニコニコ生放送のページ構成は通常のものとは違うということに気づいていませんでした!近々対応させます。
itmst 2010/03/10(水) 01:07:08) 編集

ちょっと遅くなりましたがニコニコ生放送に対応しました
itmst 2010/04/14(水) 12:06:10) 編集

こんにちは、nicoscroll2、ありがたく利用させてもらってます。
さて、昨日付でニコ動がまた仕様変更をしましたが、どうもnicoscroll2がうまく作動しなくなってしまったようです。
(動画再生窓が画面のずっと上までずり上がってしまう)
あるいは私の環境だけかもしれませんが、一度ご検証の程よろしくお願い申し上げます。
- 2010/06/02(水) 18:56:07) 編集

IE8で確認しましたがあからさまにおかしいですね。
Firefox3では正常に動作しているようです。
近日中に修正します。
ご報告ありがとうございます。
itmst 2010/06/03(木) 02:26:48) 編集

あれ?ネットブックではおかしかったけど
いま自宅でやってみたら全環境で正常に動作してる・・・
ちょっと様子見てみます。
itmst 2010/06/03(木) 12:20:38) 編集

firefoxでしか確認していませんがニコ生の新型プレイヤーだとスクロールされないようです。
- 2010/10/29(金) 17:36:48) 編集

> firefoxでしか確認していませんがニコ生の新型プレイヤーだとスクロールされないようです。
 
ご報告ありがとうございます。
 
遅くなりましたが新バージョン1.0.3をリリースしました。
http://itmst.blog71.fc2.com/blog-entry-195.html
 
ニコ生でも動作します。
itmst 2010/11/15(月) 11:55:39) 編集

表示領域に余裕があると判定された場合はタイトル位置にスクロールする。
この機能を停止するにはどこを削除すればいいのか教えていただけないでしょうか。
- 2011/03/19(土) 15:03:26) 編集

> 表示領域に余裕があると判定された場合はタイトル位置にスクロールする。
> この機能を停止するにはどこを削除すればいいのか教えていただけないでしょうか。
 
すいません返信遅くなりました。
Y = U < T ? T: U,

Y = U,
にすればOKです。
itmst 2011/03/27(日) 10:28:03) 編集

作者様ありがとうございました。
自分の理想の動作にすることができました。
バージョンアップ後も愛用させていただきます。
- 2011/03/31(木) 13:16:29) 編集

コンテンツツリーが登録されている動画だとスクロールがズレてしまうみたいです。
修正お願いします。

例:http://www.nicovideo.jp/watch/sm15264555
hides 2012/10/10(水) 19:13:49) 編集

コメントを書く
#

管理者にだけ表示
Trackback
Trackbak URL:http://itmst.blog71.fc2.com/tb.php/175-9549b751
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。