2015.03.23
ショートカットキー、jとkの活用法
目次
覚えると便利なショートカットキー。今回はjとkの便利な活用法を紹介していきます。
Facebook:jは古い投稿へ、kは新しい投稿
jは古い投稿へ、kは新しい投稿へ移動します。
Gmail:jは古いメールへ、kは新しいメールへ
Gmailの設定で「キーボード ショートカット ON」にしてください。jは古いメールへ、kは新しいメールへ移動します。
Twitter:jは古いツイートへ、kは新しいツイートへ
jは古いのツイートへ、kは新しいのツイートへ移動します。
スクリプトを使用してみる
ショートカットキーを使用する目的はUIの向上です。ここではjとkをショートカットキーにするスクリプト:「elements scroll by jk shortcut」をご紹介いたします。興味のある方はお試し下さい。
大事なのは慣習に合わせること
UI向上において大切な点は慣習に従う事です。今回紹介したサービスはいずれもjとkの機能が同じである事がわかります。皆さんもぜひjとkを活用して、利用しやすいサービスを作りましょう!
おまけ・スクリプトを自作してみる
試しにスクリプトを試作しました。うーん、まだいまいちですが、時間があれば作り直します!
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js" type="text/javascript"></script> <script src="jquery.inview.js" type="text/javascript"></script> <script type="text/javascript">// <![CDATA[ var str_dammy = 'Groval Scope'; var int_dammy = 'Groval Scope'; var str_test1 = 'Groval Scope'; var int_test1 = 'Groval Scope'; var str_page_number = 'Groval Scope'; var int_page_number = 'Groval Scope'; $('li').on('inview', function(event, isInView, visiblePartX, visiblePartY) { str_dammy = $(this).attr('id'); int_dammy = Number(str_dammy); if (visiblePartX == 'both' && visiblePartY == 'top') { //要素が見えたときに実行する処理 int_page_number = int_dammy; str_page_number = str_dammy; int_page_number_k = int_dammy; $('#message').html("現在のページ:"+str_page_number); } else { //要素が見えなくなったときに実行する処理 int_page_number = int_dammy; str_page_number = str_dammy; }}); document.onkeydown = function(){ var KEYCODE_J = 74; var KEYCODE_K = 75; if (event.keyCode == KEYCODE_J){ var int_dammy_down = int_page_number+1; str_dammy_down = String(int_dammy_down); var el = document.getElementById(str_dammy_down); el.scrollIntoView(true); } else if(event.keyCode == KEYCODE_K){ var int_dammy_up = int_page_number_k - 1; str_dammy_up = String(int_dammy_up); var el = document.getElementById(str_dammy_up); el.scrollIntoView(false); int_page_number_k = int_page_number_k - 1; str_page_number = String(int_page_number-2); } else {return; }; }; // ]]></script> |
作成にあたり、参考にしたサイトはこちらです。