JavascriptでVIMライクなページのスクロール
Javascriptで、VIMライクなページのスクロールを実装するには、まずキーイベントで関数を呼ぶところから始めなければいけない。
Javascriptで、キーイベントを確認するタイミング
Javascriptの場合、非常に簡単にキーイベントを確認することができる。
いくつか方法があり、それぞれタイミングが違う。
| Code | タイミング |
|---|---|
onkeydown | キーボードのいずれかのキーが押された時 |
onkeyup | キーボードのいずれかのキーが離された時 |
onkeypress | キーボードのいずれかのキーが押して、離された時 |
ここ(外部サイト)の情報によると、ブラウザによって挙動が違うらしい。
少し見た限りでは、onkeydownが、一番正確に動きそうなので今回はそれを使うことにする。
Javascriptで、キーイベント発生時に呼び出される関数
このコードもいたって簡単である。
document.onkeydown=function(event){}このように書けば、ページ内全体のonkeydownを監視して、イベント発生時にeventに様々な情報が入り、中のプログラムが実行されるといった具合だ。
例えば、
document.onkeydown=function(event){console.log(event.keyCode);}と書けばキーコードをコンソールログに書き出すことができる。
Javascriptでのページのスクロール
Javascriptでページのスクロールする方法も案外簡単である。
window.scrollBy();この関数に2つの引数を渡して、スクロールさせることができる。
1つめの引数では、「ページ左上を基点に左右にどれだけ動かすか」2つめの引数では「ページ左上を基点に上下にどれだけ動かすか」を指定できる。
| Code | 動く方向 |
|---|---|
window.scrollBy(0,10); | 下に少しスクロール |
window.scrollBy(0,-10); | 上に少しスクロール |
window.scrollBy(10,0); | 右に少しスクロール |
window.scrollBy(-10,0); | 左に少しスクロール |
window.scrollBy(10,10); | 恐らく右下に移動(未検証) |
window.scrollBy(-10,-10); | 恐らく左上に移動(未検証) |
一定のキーコードを取得した時に一定量移動させる
今回の場合VIMライクなページスクロールを行う。
そのために必要となる情報をまとめてみた。
| Key | KeyCode | 動く方向 | 第一引数 | 第二引数 |
|---|---|---|---|---|
| H | 72 | ← | -10 | 0 |
| K | 75 | ↑ | 0 | 10 |
| J | 74 | ↓ | 0 | 10 |
| L | 76 | → | 10 | 0 |
これをさっきのものと組み合わせると、
document.onkeydown=function(event){if(event.keyCode==72)window.scrollBy(-20,0);if(event.keyCode==74)window.scrollBy(0,20);if(event.keyCode==75)window.scrollBy(0,-20);if(event.keyCode==76)window.scrollBy(20,0);}となる。
HTMLに組み込むのなら
<script>document.onkeydown=function(event){if(event.keyCode==72)window.scrollBy(-20,0);if(event.keyCode==74)window.scrollBy(0,20);if(event.keyCode==75)window.scrollBy(0,-20);if(event.keyCode==76)window.scrollBy(20,0);}</script>というものを<head>...</head>内に書くなどで実装できるだろう。
これを知人に紹介したところ、「jsにして公開してくれるなら実装を考える」と言っていただけたので、公開した。
https://copy.com/WZVZCUlsrXPOtjDA
ここからDLして、
<script src="vim_scroll.js"></script>のように、組み込んでほしい。
理論上下記のコードでも組み込める。
<script src="http://copy.com/WZVZCUlsrXPOtjDA/vim_scroll.js"></script>ただ、Copyというサービスがこういうことを想定していないせいか、レスポンスが非常に悪い。
ぜひ上の例を参考にしてほしい。