キーボードだけでページ遷移

概要

マウスを使わず、キーボードだけでページ遷移できるスクリプトを作成しました。

カーソルがリンク上にある状態でCtrl+Sを叩くと遷移できます。

また、Scrapboxではページ遷移時にキャレットが表示されませんが、遷移後にキャレットも表示するようにしています。これにより、キーボードだけでScrapboxを使えるようになります。

Scrapboxが更に便利になると思います！

※勢いで作ったので、バグがある可能性もあります。何かお気づきの点があれば、アドバイスいただけますとありがたいです。

ソースコード

code:ショートカットキーでページ遷移.js

使い方

クリックすると、Ctrl+Sで遷移できるようになります。

なんかVimっぽくて良い！！

デモ動画

https://gyazo.com/cd24a15e394a7288acd275c77a25620c

このページの機能、とても使いたいのですが、Windows10 Chromeで使用しておりますがページ遷移ができません。

スクリプトが作られたのがかなり古いのでおそらくScrapbox側の変更によって動作しなくなってるかもしれないですね

本質的な部分はカーソル座標を元に要素を探しているのですが、Scrapbox内部にある入力判定用のテキストエリアを判定してしまうことですね

code:js

document.onkeydown = function (e) {

if (!e.ctrlKey) return;

switch (e.which || e.keyCode) {

case 83:

e.preventDefault();

e.stopPropagation();

var { left: x, top: y } = $('.cursor').offset();

var elm = document.elementFromPoint(x, y);

console.log({ x, y }, elm.tagName);

}

};

それから関連する問題として、スクロールせずに見える領域内でしか正しく動作しなさそうです

elementFromPointの問題っぽい？

elementFromPointだとスクロールの問題の他に、上に要素が被ると動作しなくなるという問題もあります。

なので自前で座標計算するのが確実です

基本的にはgetBoundingClientRectを使いましたが、clientTopとかでも同じことができるかもしれません

確認してみて下さい

しかしながら小生の知識が追いつかずうまく取り入れることができずにいます…　以下のように自分のMy pageに書きましたがそれだけでは不十分で他にもMousetrapなどに関するScriptを自分で書かないと動かないのでしょうか…　

https://gyazo.com/e053993c34a71b2041bff67a9aa5088e

ほかの

Scriptとの干渉を避けるため、My pageにこのScriptだけを書いてリロードするとLoad New User Scriptのポップアップは正しく出てきましたが、カーソルがリンクのある単語上にあるときにCtl+Sを押してもなにも変化なく、そのときのコンソールは以下のようでした。

https://gyazo.com/fda373b2f093ed65d1e52e50b6d56622

index.js:92 GET https://scrapbox.io/api/code/Project名/MyPageのタイトル/style.css net::ERR_ABORTED 404 (Not Found)

Uncaught SyntaxError: Unexpected token '.'

赤くなっている箇所は↑の通りです。

ブラウザの開発ツールのコンソールに何かメッセージが表示されているはずです。それを追って見てください

また、このScriptもCtr+Sで動くように書かれているのでしょうか？それともそこは自作でなにかScriptを書かないといけないのでしょうか…

あまり知識のない者の質問で恐縮ですが手ほどきいただけますと幸いですm(_ _)m

複数の機能が一つのコードに詰め込まれているので、読みにくいし骨が折れるのも当然です。

今日もっと整理した汎用版を作ったのでそっちのほうがいいかもです。

UserScript.icon

UserCSS.icon