パーポーフルート公式ブログ
【リリース】【アプリ紹介】TapiocaJK

2020/11/10
テーマ: リリース / 2020 / すべて


今日は 2020/10/02 に公開した「TapiocaJK」の紹介です。

こんなアプリ

Google 検索結果を vim っぽいキーバインドで操作できるシンプルな Chrome 拡張です。

使い方

J: 次のリンクにフォーカスを移動。フォーカスがページの最後のリンクで次のページがある場合、次のページに遷移します。
K: 前のリンクにフォーカスを移動。フォーカスがページの最初のリンクで前のページがある場合、前のページに遷移します。
/: 検索バーにフォーカスを移動します。

JK なのでタピオカという非常に安直な発想でアプリ名を決めました。

※タピオカブームはすでに終わっております。

開発の経緯と今後

JK Shortcuts Navigator という同じような機能の Chrome 拡張を使っていたんですが、ある時 Google 検索結果の html や css が更新されて使えなくなってしまいました。

いろいろカスタマイズを試みたもののどうにもうまくいかなかったので、仕様が変わるたびにこのめんどくさい調整をしてうまくいかないリスクがあるんだったら、この程度なら作ってしまえということで作りました。

無料で Chrome 拡張を公開するインセンティブは基本的に何一つないわけですが、このくらいなら別にいいし。ということで公開もしました。めっちゃ偉い。

ソースコードも公開しています。

開発期間

期間としては 2020/10/1〜10/2 の 2 日間、時間としては合計 4 時間くらいです。

アイコンや Chrome ウェブストアに公開するためのスクリーンショットを作るのが意外と面倒くさいことこの上ないですね。

技術的な解説

  • 検索結果っぽい要素を集める css セレクタを試行錯誤で見つけて jQuery で取得しておきます。
  • j, k, / が押されたらフォーカスを移動したり前後のページに移動したりします。
  • 以上を URL が https://*.google.com/search* にマッチする場合だけ動くようにします。
  • セレクタは Google の仕様次第でいつでも変わる可能性があるので、変わったら面倒ですがまたコードを更新するしかないです。

これを作った時点では検索結果のリンクは

div.g div.yuRUbf a:not([class])

で次のページへのリンクは

a#pnprev

といった具合です。

ハマりどころ

  • Chrome 拡張ってどうやって作るんだっけ
  • background とかいろいろあるけどどの実現方法がいいんだろう
  • manifest.json の書き方どうやるんだ
  • Chrome 拡張に与える権限とかどうなってるんだっけ
  • 検索ボックスで jk が入力できない不具合。→input にフォーカスがある場合は jk ショートカットを無効にした。
  • gmailでjkが無効になる不具合。→URL が google.com/search のときだけ jk ショートカットを有効にした。

まとめ

毎日何回も使うツールがうまく動かないと非常にイライラするので、自分のコントロール下に置けてめでたしめでたしです。

以上、「TapiocaJK」の紹介でした。

この程度の記事は 10 分くらいで書けるやろと思って書き始めましたが 20 分かかってしまいました。🥺


2020/11/10
テーマ: リリース / 2020 / すべて