ぼーっと眺める自動スクロール用Bookmarkletを作った

０．初めに

私は、非エンジニアなのでこの記事は初心者向けです。

Qiitaや掲示板を閲覧するときに、自動スクロールして、ぼーっと眺めたかったのでそういうブックマークレットを探してみました。

１．見つけたもの

以下のページにひな形になる情報がありました。

速度調整できる自動スクロールのブックマークレット | MIII.me
https://miii.me/4326.html

個人的には、以下の点が、不便だったので変更してみました。

• ブックマークバーから起動/停止はちょっと使いづらい
• スクロール速度が変更できない

２．作った物

以下の画像の通りです。

処理の流れは以下。

1. ブックマークバーで「スクロ」クリック
2. スクロールボタンが常に画面左上部に表示される
3. スクロールボタンを押すとスクロール速度を入力するプロンプトが表示
4. プロンプトでOKを押すとスクロール開始
5. もう1回スクロールボタンを押すと停止

３．ソース

ソース

var newBtn = document.createElement("button");
var m;
newBtn.innerHTML = "スクロール";
newBtn.onclick = () => {
  console.log(`ボタン${newBtn.innerHTML}が押されました！`);
  if(!m){var n=prompt("スピード（数値が大きいと遅い）",60);m=setInterval(function(s){scrollBy(0,s||2)},n)}else{clearInterval(m);m=0}
};
document.body.parentNode.insertBefore(newBtn,document.body.parentNode.firstElementChild);
newBtn.style.position = "fixed";
newBtn.style.top = "2px";
newBtn.style.left = "2px";
newBtn.style.padding = "8px";
newBtn.style.zIndex = "9999";

ボタンを生成して、onclickでスクロール/スクロール停止する関数付けて、bodyの先頭ノードにボタンを追加、styleで表示位置を指定しています。

ボタンの生成は以下のサイトを参考にしました。

JavaScriptでcreateElementメソッドを使いHTMLを動的生成する方法を現役エンジニアが解説【初心者向け】 | TechAcademyマガジン
https://techacademy.jp/magazine/36505

ボタンのノード追加は以下のサイトを参考にしました。

脱jQuery .after() .before() .insertAfter() .appendTo() .prepend() .prependTo() | q-Az
https://q-az.net/none-jquery-after-before-appendto-prepend/

bookmarkletへの変換は、以下のサイトを利用しています。

Bookmarklet スクリプト変換
https://ytyng.github.io/bookmarklet-script-compress/

生成したBookmarkletは以下です。

Bookmarklet

javascript:var%20newBtn%3Ddocument.createElement(%22button%22)%3Bvar%20m%3BnewBtn.innerHTML%3D%22%E3%82%B9%E3%82%AF%E3%83%AD%E3%83%BC%E3%83%AB%22%3BnewBtn.onclick%3D()%3D%3E%7Bconsole.log(%60%E3%83%9C%E3%82%BF%E3%83%B3%24%7BnewBtn.innerHTML%7D%E3%81%8C%E6%8A%BC%E3%81%95%E3%82%8C%E3%81%BE%E3%81%97%E3%81%9F%EF%BC%81%60)%3Bif(!m)%7Bvar%20n%3Dprompt(%22%E3%82%B9%E3%83%94%E3%83%BC%E3%83%89%EF%BC%88%E6%95%B0%E5%80%A4%E3%81%8C%E5%A4%A7%E3%81%8D%E3%81%84%E3%81%A8%E9%81%85%E3%81%84%EF%BC%89%22%2C60)%3Bm%3DsetInterval(function(s)%7BscrollBy(0%2Cs%7C%7C2)%7D%2Cn)%7Delse%7BclearInterval(m)%3Bm%3D0%7D%7D%3Bdocument.body.parentNode.insertBefore(newBtn%2Cdocument.body.parentNode.firstElementChild)%3BnewBtn.style.position%3D%22fixed%22%3BnewBtn.style.top%3D%222px%22%3BnewBtn.style.left%3D%222px%22%3BnewBtn.style.padding%3D%228px%22%3BnewBtn.style.zIndex%3D%229999%22%3Bvoid(0);

４．終わりに

ブックマークレットは、とても便利だし、ブラウザさえあれば試せるので、初心者向けだと思います。

Braveみたいな広告抑止機能があるブラウザーで使うと某巨大掲示板閲覧がはかどると思います。

以　上