キーボードショートカットをカスタマイズするブラウザ拡張

この文章は https://github.com/r7kamura/keyworks/ の製作記である。Keyworksはキーボードショートカットをカスタマイズするための凡庸なブラウザ拡張であり、つい先日、思いつきによりつくられた。

いま見ているページをTwitterで共有するとき、あるいはMarkdownで書いた文書にページのリンクを載せるとき、皆どのようなツールを利用しているのだろう。この話題を出すと、それ専用のChrome拡張や、秘蔵のブックマークレット、VimやEmacs風のキーバインドを実現するツールのプラグインなど、みな懐から様々なツールを取り出して楽しませてくれる。自分はというと、これまで Keyconfig というChrome拡張を使っていた。

Keyconfigの思い出

Keyconfigはos0xさん達が開発されたChrome拡張で、そうとは知らずに利用していたのだが、ある日何の気無しに開発者を調べてみたところ、意外と同僚が開発していることに気が付いた。その事実がこれまで4年間このツールを何となく使い続けてきた理由になっている。

ツールの選定理由を考えるとき、開発者が声の届く範囲にいるということはかなり大きな理由になり得る。これはRubyコミッタでありRailsコミッタでもあるa_matsudaさんの最近のプレゼンテーションでも言及されていた話だ。なんだか村社会みたいだし、手法としてスケールしないのではないかと思われるかもしれないが、実際やってみるとしっくりくる話なのだ。

残念ながら、Chrome 54からKeyconfigは動かなくなってしまった。理由は単純なもので、event.keyIdentifier というプロパティが利用できなくなってしまったから。原因はこれだけなので event.key に修正すれば済む話であり、Pull Requestも出されている。

しかしながら、何となくこういうものを自分で簡単につくれるようになっておきたいという気持ちが湧き、今回は改めて自作してみることにした。自分が何かをつくるとき、こういうものがつくりたいという気持ちよりも、こういうものがつくれる自分になっておきたいという気持ちが先行することがままある。それに、日常でふと湧く創作意欲は決して見逃すべきではないという思いも、やっていくに至った理由の1つだ。

JSONでわかるKeyworksの仕組み

かくして https://github.com/r7kamura/keyworks/ というものが出来た。こんなものは重い腰さえ上がればすぐ出来上がる。設定画面で設定することで、ブラウザ内に以下のようなデータが保存される。

{ "Backspace": { "type": "GoBack" }, "Ctrl+L": { "type": "CopyToClipboard", "value": "${title} ${url}" }}

content.js というJavaScriptが全てのページで実行されるようになり、キーの押下が監視され、押されたキーに対応する操作が定義されていれば、それが実行される。現在 v0.1.0 では、以下の操作が用意されている。

  • 指定した形式でタイトルとURLをコピー
  • 戻る
  • 進む
  • URLを開く
  • URLを新しいタブで開く
  • 下にスクロール
  • 上にスクロール

とりあえず自分が使うものしか用意しなかったが、汎用的に使える操作があれば追加したいと考えている。

あれがECMA、Webpack、Yarn...

以前 id:moznion と会ったとき、「JavaScript全然書いてないので原始時代のスタイルから脱出したい、助けてくれ」と言われたのを思い出した。

確かに、我々は未来の時代を生きている。

  • 依存ライブラリはYarnで管理し、
  • スクリプトの定義にはnpm-scriptsを使い、
  • JavaScriptはBabelで変換し、
  • スタイルはScssで記述し、
  • PostCSSで加工し、
  • DOMの管理にはReactを使い、
  • ReactのコードはJSXで記述し、
  • 精製と監視にはWebpackを使い、
  • ESLintでJavaScriptを検閲し、
  • StylelintでScssを検閲し、
  • CircleCIでテストを実行し...

こんなことをやっていると、たまに懐かしくなる。index.html に好き勝手書いてFFFTPでサーバに置けばなんでも動いてみんなが喜んでくれた、あの牧歌的な日々が……

id:moznion へ、寒い日が続きますがお元気ですか。ともあれChrome拡張を1つこさえれば、大の大人が寄ってたかってモダンと言い合う類のものが一通り学べるだろうと思います。

この文章で紹介したChrome拡張は Keyworks - Chromeウェブストア からインストールできる。

image