11 月
25
2008
「Loopy for YouTube」というGreaseMonkeyスクリプトを使うと、YouTubeにループ再生ボタンを追加することができます。
ここで紹介されていて知りました。
» Youtubeのビデオを簡単にループ再生するためのGreasemonkeyスクリプト-Loopy for YouTube - 適宜覚書はてな異本
インストールするとYouTubeにアクセスしたとき、こんな感じのループ再生／解除ボタンが表示されるようになります。
Loopy for YouTubeのインストール
動作させるには、あらかじめFirefoxアドオン Greasemonkey が必要です。
» Mozilla Firefox のアドオンサイト
» 開発・配布元サイト : Greasespot
Loopy for YouTube は以下から入手できます。
インストールするには右上の [Install] ボタンを押すだけ！
» Loopy for YouTube for Greasemonkey - userscripts.org
技術ネタ |
firefox, greasemonkey, youtube |
7 月
04
2008
ピンポイントネタ。
Firefoxの、Greasemonkeyというアドオンの、AutoPagerizeというスクリプトが、実はスクロールにかなりの負荷をかける仕様になってる、ということへの対処法（代替スクリプト）が公開されていました。
AutoPagerize を少し高速化 (update 0.0.31) - GANAwareはてな版
何それ？という人のために簡単に説明します。
まず、Greasemonkeyとは、ユーザがウェブを閲覧するとき任意にスクリプトを実行させることができるようになる拡張。つまり、ユーザスタイルシートじゃできないような挙動や表示に関する細かいページのカスタマイズが可能になるわけです。
＊可能になるだけで、別個スクリプトをインストールする必要があります。
＊Greasemonkeyは多少、セキュリティ上に問題があるそうです。自己責任でお願いします。
AutoPagerizeはその代表的なスクリプトで、たとえばGoogle検索とかITmediaの記事みたいな何ページにもわたる内容を、下方にスクロールするだけで（ページを切り替えずに）次々と表示してくれるというシロモノです。
Live Search 画像検索みたいな状態、と言えば分かりやすいでしょうか。
で。非常に便利なのはいいんですが、CPU使用率を見てみると、AutoPagerizeがオンの時は通常より、スクロールに３倍くらいの負荷がかかっているようでした。
原因は「FirefoxのレンダリングはCSSの position: fixed; 系に弱いため」みたいです。
紹介したganawareさんの修正版では、position:fixed を position:absolute に変更し、スクロール後１秒たったらバーの位置に合わせて top: を修正する、…という方法で対処されているとのことです。なるほど！
ついでにスクロールが重くなる状況について少し調べてみました。
position: fixed; だけでなく、背景画像を固定するための background-attachment: fixed; とも相性が悪いようです。たとえば、以下のようなページをFirefoxで閲覧すると、スクロールが激重になるはずです。C2Dでも楽々CPU使用率50％突破しました。
特にFirefox 2.0の方が顕著で、overflow: auto; とかと組み合わさると描画が乱れたりします。Firefox 3.0では解決されてると思いきや、…どうやら負荷がかかりやすいのは相変わらずのようですね。
＊スクロールが重くなるサンプルページ
（スムーズスクロール有効だとより重くなります）
サンプルHTML
<body>
<div>
<pre>スクロールが重くなる</pre>
<pre>スクロールが重くなる</pre>
......
<pre>スクロールが重くなる</pre>
</div>
</body>
サンプルCSS
body {
/* fixed: スクロールが重くなる scroll: 通常 */
background: #eee url(./bodybg.gif) fixed;
}
pre {
/* auto または scroll: 描画が乱れやすい hidden: 通常 */
overflow: auto;
}
ウェブを作るときは注意しないと、ですね。
技術ネタ |
css, firefox, greasemonkey |