💭

下手なアプリよりもツルハシのほうがよく売れたという話。

4 min read

免責事項

よく売れた(たくさん売れたとは言ってない)。

はじめに

私は、 Electron アプリという当世流行らないものをポチポチと作っています。それらのアプリは、自分でも驚くほどの GitHub スターや言語ロケールファイルを頂戴しましたが、肝心のダウンロード数はどれも残当な結果となっております。

2021-07-07 15.59.23.png

が、 後述の成り行きで小さな NPM パッケージを公開しましたところ、

2021-07-07 15.58.40.png

姉さん、2k ですってよ。まだ2週間しか経ってないのに憧れの k ですって。
苦しんで苦しんで作ったアプリよりも出来心で作ったペライチのスクリプトのほうが需要があるんですって。

そりゃもう shields.io さんもバッヂの background-color を明るくしてくれますよ。

https://www.npmjs.com/package/electron-search-devtools

ツルハシ(実際は爪楊枝の模様)を作るに至った経緯

electron@9 がリリースされた時からと記憶していますが、私の環境では突如として React Developer Tools を Electron からロードすることが出来なくなりました。

issues を見た限りでは、 webpack-dev-server などでサーブしたレンダラープロセスを読み込む loadURL() では問題は起きておらず、ローカルファイルをloadFile() で読み込む場合にトラブルが多く起きているようでした。

これに関する ISSUE もいくつか起こされ、多くの方がワークアラウンドを提案していましたが、環境に依存する部分が大きいのか何度も Re-Open されていました。

私もサムズアップを多く獲得しているソリューションをいくつも試してみましたが、どれも私の環境では機能しませんでした。

これは、Electron DevTools Installer のような公式サイトで推奨されているツールを利用しても同じでした(現在でも一部は解決されていない模様)。

devtools なしではお話にならないので、スタンドアローン版の react-devtools を別途立ち上げるなどして何とかやり過ごしていましたが、ついに electron@11.3 から(正確には electron@12 のリリースに合わせて) session.loadExtension() APIallowFileAccess オプションが実装され、ローカルの index.html からでも devtools がロードできるようになりました。

さてめでたし、ということで公式ドキュメントに記述されている方法でデベロッパーツールをロードすることになったのですが、デベロッパーツールの置き場所は公式曰く:

README.md
1. Find out the filesystem location used by Chrome for storing extensions:
   * on Windows it is `%LOCALAPPDATA%\Google\Chrome\User Data\Default\Extensions`;
   * on Linux it could be:
     * `~/.config/google-chrome/Default/Extensions/`
     * `~/.config/google-chrome-beta/Default/Extensions/`
     * `~/.config/google-chrome-canary/Default/Extensions/`
     * `~/.config/chromium/Default/Extensions/`
   * on macOS it is `~/Library/Application Support/Google/Chrome/Default/Extensions`.

で、私の場合は React Developer Tools ですので:

macOS
~/Library/Application Support/Google/Chrome/Default/Extensions/fmkadmapgofadopljbjfkapdkoienihi/4.13.5_0

となります。

これが覚えられないのです。上記のパスをメインプロセスへハードコードしていたのですが、macOS <--> Windows10 <--> Ubuntu を行ったり来たりしているうちに「あれ?拡張のパスはどこだったっけ?」となります。

それにパス末尾のバージョン番号は、当たり前ですが、しょっちゅう変わってしまうのでハードコーディングでは対応しきれなくなります。

そこで Node.jsfs を利用し、どの環境でも拡張機能のパスを探し出す(はずの)スクリプトとして外部へ書き出しました。

となると、「あれ、これって他の Devtools (REDUX, VUE, ANGULAR) でも利用できるのでは?」となります。

思い立ったが吉日で、下記の記事を参考に(感謝) NPM パッケージとして「えいやっ」と npm publish してしまった結果が冒頭の戯れ文となったわけです。

https://qiita.com/matzkoh/items/90baab22ad489b78384b

こちらもどうぞ

https://zenn.dev/sprout2000/books/6f6a0bf2fd301c

https://zenn.dev/sprout2000/books/3691a679478de2

さいごに

ダウンロード数が増えていくさまって、GitHub スターをもらうのと同じくらい見てて嬉しいものですね。

Discussion

ログインするとコメントできます