iPhoneのタッチスクリーンを再現するブックマークレット（脂）

PC

指の脂の表現に特に力入れた。
脂

javascript:(function(d,s){s=d.createElement('script');s.type='text/javascript';s.src='http://www.rr.iij4u.or.jp/~kazumix/d/javascript/dragScroller.js?'+(new Date).getTime();s.charset='UTF-8';d.body.appendChild(s);})(document)

上記のコードをアドレスバーに貼り付けて実行すると、そのページがマウスのドラッグでスクロールできるようになります。
※IEではこのはてなダイアリーを含め、一部のサイトで動作しません。とは言え今時のサイトならほとんど動きます。詳細後述。

ブラウザ対応状況（うちのPCで確認したもの）

問題無く動作するブラウザ
動作しないブラウザ
  • IE6
はてなダイアリー他、一部のサイトで動作しないことがあるブラウザ

FAQ

リンクがクリックできません
仕様です。

IEで動作しない原因（技術情報）

このスクリプトは、タッチスクリーンをシミュレートするレイヤー（div）を最前面に固定配置します。そのレイヤーの配置にはCSSのpositionプロパティにfixedを設定する必要がありますが、IE6はこのfixedに対応していません。
IE7、IE8はposition:fixed;に対応しています。ただし、表示するページが古い形式でマークアップされたHTMLの場合、後方互換モードでの動作となり、CSSの解釈がIE5.5相当になるため、この場合やはり対応できなくなります。（こいつのせいではてなダイアリー用のテーマ作りは普通より神経を使います）

ソースコードなど

Flash(AS3) + JavaScriptです。
指の脂の表現が一番大変でした。最初は公開されているkokuban.inのテクニックを参考にすれば簡単かなと思ったんですが、既にある汚れを拭いつつ汚す必要があるのと、背景が何色でも再現できるようにする必要があるため、結局まったく別物になりました。

指の脂　描画クラス
Abura.as
スクロール関連
DragScroller.as （Flash側ドキュメントクラス）
dragScroller.js （JavaScript）
ちなみに私iPhone持ってません。スクロールの動作はうろ覚え＆想像で作りました。指の脂の表現は、特にタッチスクリーンでもない自分のケータイをべたべた触ってシミュレートの参考にしました。

関連エントリー（ネタスクリプト）

関連エントリー（実用スクリプト）