Follow Us.RSS

2013年9月2日(月)自動スクロールするブックマークレット

  • 見ているページを自動スクロールするブックマークレットを作ってみました。iPhone などでも動きます!

  • (2013年9月3日(火) 午前0時54分14秒 更新)
  • このエントリーをはてなブックマークに追加Tweet

ながらブラウズに最適!

友人がこういうのほしいと言っていたので作ってみました。PC では画面をマウスでドラッグすると、ドラッグしたスピードで自動スクロールが始まります(ドラッグの向きはタッチと同じ「ナチュラル」です)。iPhone や Android では画面を指先でなぞります。クリックまたはタップでスクロールが止まります。

↑上リンクをブックマークバーにドラッグ&ドロップするか、右クリックからブックマークに追加してください。もしくは、下記コードをブックマークにコピーします。
コード
javascript:(function(){var%20a={pageX:function(){return%20self.pageXOffset||document.documentElement.scrollLeft},pageY:function(){return%20self.pageYOffset||document.documentElement.scrollTop},run:function(){t=this;var%20b=("createTouch"%20in%20document&&navigator.userAgent.search(/iphone|ipad|android/i)!=-1)?true:false;if(b){self.addEventListener("touchmove",function(c){c=c||event;if(b&&c.touches){c=c.touches[0]}t.ey=c.clientY},false)}else{self.addEventListener(((typeof%20document.onmousewheel=="undefined")?"DOMMouseScroll":"mousewheel"),function(){if(t.i){clearInterval(t.i)}t.i=null},false)}self.addEventListener(((b)?"touchstart":"mousedown"),function(c){c=c||event;if(b&&c.touches){c=c.touches[0]}if(t.i){clearInterval(t.i)}t.i=null;t.sy=c.clientY;t.st=(new%20Date()).getTime()},false);self.addEventListener(((b)?"touchend":"mouseup"),function(i){var%20f=(b&&i.touches)?t.ey:(i||event).clientY;var%20h=t.sy-f;var%20d=(new%20Date()).getTime()-t.st;if(d<200||(h>-20&&h<20)){t.s=null;t.w=null}else{var%20g=h/d;var%20c=parseInt(d/h);if(c<0){c=-c}t.w=(c>10)?c:10;t.t=t.pageY();t.s=parseInt(g*t.w)||((g>0)?1:-1);if(t.i){clearInterval(t.i)}t.i=setInterval(function(){t.t+=t.s;var%20l=t.t;var%20j=self.innerHeight||document.documentElement.clientHeight;var%20e=document.documentElement.scrollHeight-j;var%20k=true;if(t.s<0){if(l<0){l=0;if(t.t<-j){t.t=e;l=e}else{if(t.pageY()<=l){k=false}}}}else{if(l>e){l=e;if(t.t>e+j){t.t=0;l=0}else{if(t.pageY()>=l){k=false}}}}if(k){self.scrollTo(t.pageX(),l)}},t.w)}},false)}};a.run()})();

iPhone の Safari などでは、iCloud 経由で PC のブックマークと同期するか、次のようにします。

  1. とりあえずこのページを共有ボタンからブックマーク。
  2. 上記コードを選択してコピー。もしくはこのリンク→ iPhone コピー用 自動スクロール を長押ししてコピー。
  3. ブックマークを開いて、追加したブックマークを「編集」。
  4. 名前を「自動スクロール」などに変更し、URL 欄に上記コードをペースト。上記リンクからコピーした場合は最初の「http://」を削除。

友人がこういう需要はあるんだと力説していましたが、確かに、なにかを食べながら記事を読んだり、楽譜を演奏スピードにあわせてスクロールさせたり、いろいろ使い道はありそうです。自分でも記事を読むのにちょっと使ってみました。案外便利ですね!

iPhone で使っているところ(動画)

で、アイディアを提供してくれた友人が、ブックマークレットをたいそう気に入ってくれて、使用動画を送ってきてくれました(笑)。

ブックマークから「自動スクロール」を選択すると、スワイプの速度に合わせて自動スクロールがはじまることがわかります。上から下へも、下から上へも自動スクロールします。最後までスクロールしたら、ページトップまたはページ下端に戻ります。自動スクロールを止めたいときは軽くタップするだけです。

関連記事

コメント

ストロベリー-ニコリン

凄く求めてました!

小説を読むのに面倒で、自動スクロールが出来るものを求めていました!無料で自動スクロールすることが出来て、とても嬉しいです。
こういうものが作れるのは凄いですね!
スクロール途中でも止めることが出来て、凄く便利です。
友達にもオススメしたいと思います(^-^)

arisa (2013年9月12日(木) 午前6時33分3秒)
タンジェリン-ニコリン

Re:凄く求めてました!

感想ありがとうございます!
自動スクロールブックマークレットがお役に立てましたら光栄です☆

CMONOS.JP 開発者 ちーhttps://cmonos.jp/blog/ (2013年9月12日(木) 午前6時35分13秒)
ボンダイ-エヘッ

最高です

最高です!開発頑張って行きましょう!

notbusy (2013年9月27日(金) 午後2時2分57秒)
タンジェリン-ニコリン

Re:最高です

ありがとうございます!
開発がんばってますので、弊社プロダクトについてもチェックしていただけましたら幸いです!(-ε´・๑)✧
お互いがんばりましょう〜。

CMONOS.JP 開発者 ちーhttps://cmonos.jp/blog/ (2013年9月27日(金) 午後2時56分58秒)

どうしたら。。。?

はじめまして北海道函館でアマチュアのシンガーソングライターをしています
昨年末近くに初めiPhoneとiPadを手にしました
で、主にiPadで歌詞とギターコードが見れて、自動スクロール出来るのは無いか探していました
あなた様のが良いように思い、入力し試してみましたが、スクロール出来ません。
見たいページを開き、そこから更にブックマークへ行き、スクロールの項目をクリックしても画面が白くなるだけです
どのようにしたらいいのですか?
また、例えばアプリなどで、好きな言葉や文字、文字の大きさなどを入力し、それが好みの早さでスクロール出来アプリはないでしょうか?
それがあればオリジナル曲にも重宝します
よろしく哀愁お願いします
m(_ _)m
なお、わたくし、PCなどのことは初心者同様で猿にも判るよう説明頂ければ幸いです

北都の平八メールソフトを開きます。 (2014年1月21日(火) 午後3時33分39秒)

失礼しました!

ごめんなさい!失礼しました!
出来ました!
ありがとうございます
しかし、さっきのメッセージの後半の部分考えてもらえませんか?
お願いいたします
m(_ _)m

北都の平八メールソフトを開きます。 (2014年1月21日(火) 午後3時51分48秒)
タンジェリン-ニコリン

コメントありがとうございます。僕は iPhone のヘビーユーザーというわけでもないので、ご希望に沿う回答を持ち合わせておりませんが、下記URLが参考になるかもしれません。

iPadのスクロールを自動で行わせるにはジェスチャー機能で設定しよう|iPad知育アプリで遊ぶ親子のネタ帳

登録したジェスチャーでどんなアプリでも自動スクロールできるそうです。

(僕もよく知りませんし、これ以上の回答は無理ですので追加の質問はご遠慮ください。)

CMONOS.JP 開発者 ちーhttps://cmonos.jp/blog/ (2014年1月21日(火) 午後4時7分16秒)

できません

すみません。どうやってもスクロールしません。何が間違ってるんでしょうか。?

トマト (2014年2月16日(日) 午後8時48分52秒)
タンジェリン-ショボン

Re:できません

見当もつきません。。。

CMONOS.JP 開発者 ちーhttps://cmonos.jp/blog/ (2014年2月16日(日) 午後9時32分4秒)

すごいです……!こんな便利な機能がブックマークレットでできるとは思いませんでした。
よく使わせてもらってます。
感謝です

わぃう (2014年8月18日(月) 午前0時35分30秒)
タンジェリン-ニコリン

コメントありがとうございます!
短いスクリプトではありますが、せっかく作ったので、たくさんの人に使ってもらえると、僕もうれしいです☆

CMONOS.JP 開発者 ちーhttps://cmonos.jp/blog/ (2014年8月18日(月) 午前1時33分35秒)
ストロベリー-エヘッ

閲覧が楽♪

縦長のWebサイト見るときには、マウス使わなくていいので楽ですね。使わせていただきます!ありがとうございます!

popo (2014年9月13日(土) 午前11時17分13秒)
タンジェリン-ニコリン

Re:閲覧が楽♪

感想ありがとうございます。ページの下まで行くと自動的に次のページが読み込まれるサイトでは特に便利ですね。自分でもよく使います(^^)。

CMONOS.JP 開発者 ちーhttps://cmonos.jp/blog/ (2014年9月14日(日) 午後4時2分21秒)
ボンダイ-ニコリン

望んでいました

iPhoneの画面上で自動スクロールができるのを探し求めていました。他にも方法があるらしいのですが、この方法が一番だと思いました。
設定させるのに多少戸惑いましたが、

鉛直投上 (2014年11月3日(月) 午後4時4分12秒)
タンジェリン-ニコリン

Re:望んでいました

コメントありがとうございます。iPhone の Safari はいろいろ制約があるので、ブックマークに登録する手順がちょっとややこしいですね(^^;。お役に立てましたら光栄です☆

CMONOS.JP 開発者 ちーhttps://cmonos.jp/blog/ (2014年11月3日(月) 午後4時11分25秒)
ボンダイ-ニコリン

望んでいました

コメントの続きです。
書いてる途中誤って投稿ボタンを押してしまい文の途中になってしまいました。すみません。

動画をヒントに設定できました。設定の仕方の動画があるともっと良いと思いました。これから使わさせて頂きます。本当にありがとうございました。

鉛直投上 (2014年11月3日(月) 午後4時14分6秒)
ボンダイ-ショボン

画像が大量にあるサイト

画像が大量にあるサイトでは全く言うことを聞いてくれません…
スクロールは出来るけどそこから何にも出来ないです。
クリックしても止まらないし…
ずっとスクロールしっぱなしで、Safariを終了すると直ります。

Qoo10っていうサイトのURL貼っておきます!iPhone6です。
http://www.qoo10.jp/gmkt.inc/Mobile/Goods/Goods.aspx?goodscode=419225175&stcode=411

yuyu (2017年1月17日(火) 午後4時30分20秒)
タンジェリン-ニコリン

Re:画像が大量にあるサイト

画像が多いサイトでは画像が読み込まれるたびにスクロール量が増えるなどして処理がおかしくなるのかもしれません。そういうサイトでは使用をお控えいただけましたらと思います。。。

CMONOS.JP 開発者 ちーhttps://cmonos.jp/blog/ (2017年1月17日(火) 午後8時40分43秒)
ボンダイ-ショボン

androidで使えますか?

お世話になります
こちらのエントリ冒頭に「iPhone や Android では画面を指先でなぞります」とあるのでandroidでも使えるのかと思い、設定してみました。
しかし動く気配がありません。
safari限定という訳ではない…のですよね?
ちなみに使っているブラウザはfree adblocker browserです。
もしこちらの勘違い等ありましたらご指摘いただけると幸いです。
どうぞ宜しくお願い致します。

うろ (2017年4月2日(日) 午前2時40分6秒)
タンジェリン-ニコリン

Re:androidで使えますか?

こんにちは。Android でも使えますが、URL欄やブックマークから JavaScript を動作させることができるブラウザに限られます。もしかするとお使いのブラウザでは、広告をブロックするために、JavaScript の動作に制限が加えられているのかもしれません。Chromeなどでは動くと思います。以上参考になりましたら幸いです。

CMONOS.JP 開発者 ちーhttps://cmonos.jp/blog/ (2017年4月2日(日) 午後1時5分20秒)
ボンダイ-ニコリン

ありがとうございます!

なるほど。ブラウザの仕様を見てみます。ダメそうなら別のブラウザを使おうと思います。お忙しい中、ご返答いただきありがとうございました!

うろ (2017年4月3日(月) 午後2時4分32秒)

教えてください!

速さは一律ですか?

Chihiro (2018年12月1日(土) 午前1時54分36秒)
タンジェリン-ニコリン

Re:教えてください!

スワイプした速度で一律です。途中で変化はしないです。

CMONOS.JP 開発者 ちーhttp://cmonos.jp/blog/ (2018年12月1日(土) 午前11時13分54秒)

トラックバック

関連記事

[画像]

CMONOS.JP | 開発者ブログ | 自動スクロール Safari 機能拡張「手ぶら ...

2013年9月4日 ... 自動スクロール、いいですね! 作ってみるまでこんなに重宝するものだとは思いませ んでした。もはやブックマークレットを選択するのすらめんどくさい。もっと簡単に呼び出し たい。というわけで、Safari 機能拡張を作ってみました。
https://cmonos.jp/blog/2013090400/1.shtml
[画像]

CMONOS.JP | 開発者ブログ | RSS や関連リンクを表示する Safari 機能 ...

2012年7月27日 ... RSS のほか、 タグでページに埋め込まれた関連リンクを表示する、ツールバー機能拡張 を作ってみました。リンク先の RSS を表示することもできます。
https://cmonos.jp/blog/2012072700/1.shtml
[画像]

簡単に編集画面を開けるブックマークレット

2015年1月13日 ... 下記ブックマークレットをブラウザのお気に入りに登録しておくと、ブックマークレットを 選択するだけで、表示中のページを修正する編集画面を呼び出せます。 この記事を修正 する: ↑上リンクをブックマークバーにドラッグ&ドロップするか、右 ...
https://cmonos.jp/blog/2015011300/1.shtml
[画像]

CMONOS.JP | 開発者ブログ | Safari と Mail から RSS を簡単に ...

2012年8月3日 ... Mountain Lion から RSS 機能が削除されてしまいました。そこで、Safari と Mail から 簡単に RSS を取り出すツールを作りましたので、どうぞご利用ください。
https://cmonos.jp/blog/2012080300/1.shtml
[画像]

CMONOS.JP | 開発者ブログ | リンクタグを表示する Safari 機能拡張

2012年7月28日 ... 表示ページのほかリンクや画像のリンクタグを表示する、Safari 機能拡張を作ってみまし た。コンテキストメニューからさまざまな検索サイトで選択テキストを検索する機能も あります。
https://cmonos.jp/blog/2012072800/1.shtml
NEXT>>

PC 向けページに移動する