GitHub Prevent Thumbs Down Click
上のリンク先の「GitHub Prevent Thumbs Down Click」という拡張機能をリリースしました！🥳
この拡張機能をリリースした経緯について今回の記事では書いていきます。📝
使い方
使い方は簡単です。まずリンク先に進みます。
右上の「Chromeに追加」をクリックします。そして、「拡張機能を追加」すると……
無事利用可能になりました！
あとは使うだけです。
GitHubのページを開いてみましょう。
このようにリアクションボタンを押す場所があります。
Before
拡張機能を追加する前は、バッドボタンが表示されているはずです。
After
拡張機能を追加した後は、バッドボタンが非表示になります。
ちなみに、この拡張機能を追加した状態でも既にクリック済みのバッドボタンを解除することができます。
つまり、誤クリックを防ぎつつ、過去の誤クリックに気づくことができます。既にクリック済みのバッドボタンについては表示されるということです。
バッドボタンを非表示にするのではなく、誤クリックを防ぐこと機能にフォーカスしているので、使いやすいと思います。
文章だと分かりづらいかもしれないので、動画にしました！
自分の中の小さな困りごと
GitHubはもう何年も使っていますが、ちょっと困っていることがありました。
それは、グッドボタンの隣にバッドボタンがあることです。
この何が怖いのかというと、クリック時に気をつけないと、グッドボタンを押したつもりがバッドボタンを押してしまうことです。意図せず誤クリックしていて、間違ったリアクションを送ってしまう可能性があります。
せめてバッドボタンの代わりにクエスチョンマークになったら良いのに……と思っていましたが、仕様が変わる気配はなさそうでした。
じゃあどうするか……無ければ自分で作ればいい！ そんなわけでこの拡張機能を作りました。
拡張機能の製作過程
https://lef237.hatenablog.com/entry/2024/04/17/224946
最近この記事を書いたように、元々はJavaScriptでこの拡張機能を製作していました。
しかし、その過程で「これってもしかしてCSSだけで実現できるのでは？」と気づきました。
該当のDiffがこちらになります。
この変更によって、36行あったJavaScriptのコードを全消ししています。
そして最後に残ったのは、この3行のCSSだけでした。
はじめのコードでは挙動が安定しなかったのですが、CSSに切り替えてから挙動が安定するようになりました。
JavaScriptだとDOM操作をおこなうため、描画タイミングが遅れてしまう場合がありました。また、何度もクリックしたとき、稀にバッドボタンが表示されてしまう謎の現象も発生していました。細かくデバッグして改善することもできたのですが、どんどんコードが複雑になっていく予感がありました。
シンプルであればあるほど――コード量が少なければ少ないほど――バグは発生しにくくなります。この有名な格言を思い出すことができた開発でした。
Chromeウェブストアでの公開について
拡張機能をChromeウェブストアで公開するには登録料が必要です。これは、5ドルを最初に1回だけ支払うだけで大丈夫です。年会費を取られないので嬉しいです。
（円安で774円だったのでそれはちょっと苦しかったです……為替……）
おわりに
この拡張機能はGitHubで公開しています。またMITライセンスとなります。
https://github.com/lef237/github-prevent-thumbs-down-click
コードが単純すぎてちょっと恥ずかしいかも
もしバグなどありましたらお気軽にIssueやPull Requestを立てて頂けると嬉しいです！
