デスクトップアプリケーションを作る必要があったので、そのときの開発環境構築メモです。
boilerplateをつかってみたのですが、reactを使ってexe化するまで、10分とかからず非常に便利でしたので、その内容をまとめておこうかと思います。
boilerplate とは
boiler plateは小さな変更を加えるだけで作れるものですね。
テンプレート（template）とほとんど同じですが、テンプレートは中身をいじることを想定しているけど、boilerplateは中身はいじらず外側だけをいじればいいというニュアンスがあるらしい。
設定をいじらずに使い回せるというくらいに理解しました。
electronは自力で設定すると大変
electronを使うとwebアプリのような表示UIを搭載しつつOSのコマンドを使ったスタンドアロンアプリを作成することができます。
中身としては、chromiumとNodejsの両方を組み込んでいるわけですね。
開発環境を自作しようと思うと、chromiumとNodejsの連携を上手に設定してやる必要があるのがこれが結構面倒です。
というのも、chromiumはブラウザなのでセキュリティの関係からOSの機能だったりPC上のアクセスできるフォルダ領域に制約がかけられているのですが、これをかいくぐらないといけないんですよね。
具体的には、ipc 通信を利用してブラウザから実行できるようにするのですが、webアプリエンジニアが設定するには少々骨が折れる。
今回のboilerplateを使えばほとんど気にすることなく作れるのが個人的に好きなところです。
早速使ってみる
使い方は簡単で、githubをクローンするだけです。
今回は、windows10 のNode.jsはv20で作っていきます。
git clone --depth 1 --branch main https://github.com/electron-react-boilerplate/electron-react-boilerplate.git your-project-name cd your-project-name npm install
実行完了したら次のコマンドを実行したら開発環境が立ち上がります。
npm start
これだけで終わるとあまりにも寂しいので最低限の設定を書いていきたいと思います。
github情報を書き換える
デフォルトだとリモートブランチ情報がboilerplateになっています。
git remote -v
自分の新しいリモートブランチを登録するか、削除しましょう。
自分の場合は、家でお遊びで使うので削除します。
git remote remove origin
package.json周りも調整
ついでにpackage.json周りも変更しましょう。
OSSが由来なので、デフォルトはopenな記述になっています。
下図はとりあえず削除でよいでしょう
こちらも削除でしょうか。
資金集めもしているようですが、推奨の環境構築を行うとこちらの資金ファンドがデフォルトに入るのはOSSコミュニティ的に良くないのでは...
最後にexe化
exe化するのもワンコマンドです。
npm run package
初回のexe化は、必要なライブラリをダウンロードするので少々時間がかかります。
releaseフォルダ下に、インストーラー型とスタンドアロン型の2つが出来上がってます。
スタンドアロン型はこんな感じ。
このとき、webアプリ側も作成されるので、ipc通信に依存していなければそのまま流用可能です。
