キーボードだけでページ遷移
概要
マウスを使わず、キーボードだけでページ遷移できるスクリプトを作成しました。
カーソルがリンク上にある状態でCtrl+Sを叩くと遷移できます。
また、Scrapboxではページ遷移時にキャレットが表示されませんが、遷移後にキャレットも表示するようにしています。これにより、キーボードだけでScrapboxを使えるようになります。
Scrapboxが更に便利になると思います！
※勢いで作ったので、バグがある可能性もあります。何かお気づきの点があれば、アドバイスいただけますとありがたいです。
ソースコード
ショートカットキーでページ遷移.jsimport 'https://scrapbox.io/api/code/cdn/キーボードだけでページ遷移/ショートカットキーでページ遷移.js'使い方
実行すると、右側に 
が表示されます。
クリックすると、Ctrl+Sで遷移できるようになります。
なんかVimっぽくて良い！！
デモ動画
※ Google・Scrapbox同時検索（Chrome拡張機能） もよければ使ってみて、ご意見いただけるとありがたいです。
このページの機能、とても使いたいのですが、Windows10 Chromeで使用しておりますがページ遷移ができません。
Scrapboxへの要望でも書いた(/forum-jp/キーボードだけでリンク遷移をしたい)のですが、どなたかどう修正したらよいかわかる方いらっしゃいますか？
スクリプトが作られたのがかなり古いのでおそらくScrapbox側の変更によって動作しなくなってるかもしれないですね
本質的な部分はカーソル座標を元に要素を探しているのですが、Scrapbox内部にある入力判定用のテキストエリアを判定してしまうことですね
jsdocument.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とかでも同じことができるかもしれません
修正しました
このコードを/customizeに載せていただいても構いません。載せてくれると手間が省ける
確認してみて下さい
しかしながら小生の知識が追いつかずうまく取り入れることができずにいます… 以下のように自分のMy pageに書きましたがそれだけでは不十分で他にもMousetrapなどに関するScriptを自分で書かないと動かないのでしょうか…
ほかの
Scriptとの干渉を避けるため、My pageにこのScriptだけを書いてリロードするとLoad New User Scriptのポップアップは正しく出てきましたが、カーソルがリンクのある単語上にあるときにCtl+Sを押してもなにも変化なく、そのときのコンソールは以下のようでした。
index.js:92 GET https://scrapbox.io/api/code/Project名/MyPageのタイトル/style.css net::ERR_ABORTED 404 (Not Found) これは関係ないです
Uncaught SyntaxError: Unexpected token '.' oldScript === undefined のときに発生するerrorです。今直しました。失礼しました。赤くなっている箇所は↑の通りです。
下にも書いたとおり、このコードは設計が良くないので、あまり参考にしないほうが無難です
/takker/Scrapboxでcursor下のリンクを取得するにリンク取得のコアがあります。これと
addEventListener('keydown', e => {...}) を使ってUserScriptを自作していただくか、キーボードだけでページ遷移#5fe405811280f00000d4e8f3を使っていただくのがおすすめです。「以下のように」が示すものが抜けています……
/takker/key boardだけでpage遷移#5fac0c0d1280f000008e4495だけで動くはずなんですけど、もしかしたら自分が忘れているだけで何か破壊的な変更を行っているかもです
ブラウザの開発ツールのコンソールに何かメッセージが表示されているはずです。それを追って見てください
また、このScriptもCtr+Sで動くように書かれているのでしょうか？それともそこは自作でなにかScriptを書かないといけないのでしょうか…
はい。
Ctrl+s で動くようになっています。/takker/key boardだけでpage遷移#5fac07861280f000008e4484を変えれば別のキーでも動作します
あまり知識のない者の質問で恐縮ですが手ほどきいただけますと幸いですm(_ _)m
自分で書いていてなんですがこれコードが雑ですね→/takker/key boardだけでpage遷移
複数の機能が一つのコードに詰め込まれているので、読みにくいし骨が折れるのも当然です。
今日もっと整理した汎用版を作ったのでそっちのほうがいいかもです。
これも/customizeに載せたいな