最近はG Suiteだけでなく、ConfluenceやJIRAなど、ブラウザでドキュメントを編集する事が多い。その際に何気なく便利に使ってしまうのが、キーボードショートカット。中でも『E』を押して編集モードに入るのが癖になってしまっている。自分のwordpressの記事ページを見ていても、ついついEボタンを押してしまう始末。それで編集画面にいけないことが、逆にストレスになるほど。こういう状況がしばしばあったので、今までも何度かキーボードショートカットへの対応を検討したことがあった。
まずはプラグインでの対応を試みる。wordpressには山のようなプラグインがあり、大抵は希望に適った機能を見つけることができる。しかし、ぐぐってみてもキーワードがよくないのか、思うようなプラグインを見つけることが出来ない。やむなく、それっぽいプラグインを適当に入れてみるが期待通りに動くものがない。そもそも編集画面に対してキーボードショートカットを追加するものが殆どで、通常の参照画面にキーボードショートカットを入れたいというニーズがないのかもしれない。
次に自力での対応を検討してみる。そういえばガラケー時代にナンバーキーを押すとリンクに飛ぶような動きがあったことを思い出す。調べてみるとアンカータグにaccesskeyという属性があった。そうそうこんなやつ。Confluenceのソースを見てみても確かにこの属性を持っていた。早速簡単なHTMLを作成して試してみるが動作しない。どうやらPCではCtrl+Alt+Keyという押し方をしなければいけないらしい。ConfluenceやJIRAだと単一のキーだけで動くんだけどな。調べてみてもキーだけで動作させる方法は見つからない。
最後の手段ということで、もうJavaScriptで組み上げてしまうことにした。いまどきだとJQueryという手もあるけど、どんな環境でも動いて欲しいので、とりあえずJavaScriptで。基本的にはonKeyDown()でイベントを拾って、KeyCodeに合わせたリンクを踏めばよい。Chromeだとヘッダ部分でもイベントを拾えるんだけど、Firefoxがbodyタグでないと拾えないのでFirefoxに合わせる。また、私さえショートカットが使えればよいので、ログインユーザーだけにonKeyDown()を追加するようにthemeを修正した。
<body <?php if(is_user_logged_in()){echo "onKeydown=shortcut(event) ";} ?><?php body_class(); ?>>続いて、JavaScriptのshortcut()関数側を用意する。検索ボックスやコメントボックスを選択している状態ではショートカットを発動させたくないので、何も選択していないことを条件としたい。これはdocument.activeElement.idが空であることで判定できた。keyCodeについてもChromeとFirefoxで取得方法が異なるので、どちらにも対応できるように書いておく。JavaScriptなんて殆ど触ったことないんだけど、未だにブラウザ依存を気にした書き方しないといけないんだねえ。JQueryの方がよかったかな。実際のコードは以下。
<?php if(is_user_logged_in()) : ?>
<script type="text/javascript">
function shortcut(event) {
if(document.activeElement.id==''){
key=event.keyCode===undefined ? event.which : event.keyCode;
switch(key){
case 69:
document.getElementById('wp-admin-bar-edit').children[0].click();
break;
case 72:
location.href='/';
break;
}
}
}
</script>
<?php endif; ?>これをhead内に入れておけばよい。keyCodeはaが65なので、目的のキーになるまで加算していく。編集画面へはadmin-barのリンクをクリックする形を取っている。編集画面に行きたいときはおそらくログインしているから問題ないはず。逆に言えばログインしていないと発動しないんだけどね。各記事の編集リンクにidを付けて、そちらをクリックさせることももちろん可能。edit_post_linkをadd_filter()してあげればよい。参考までにトップへのリンクも加えておいたが、同様にしてよく使うリンクをいずれかのキーにアサインしておくと非常に便利。皆さんもぜひ使ってみて下さい。あー、快適ｗ