electronというフレームワークを知る機会があったので、触ってみたいと思い少しだけ触れてみました。

electronとは

Electron は、JavaScript、HTML、CSS によるデスクトップアプリケーションを構築するフレームワークです。
参照：electronとは

簡単に言えば、webの技術でデスクトップアプリが作れるよーというものです。便利です。
今回はelectron-react-boilerplateを基盤にアプリを作ってみます。

github

公式doc

初期アプリのパッケージ・起動

※ nodeやnpmの設定は今回は省きます。

ReactボイラープレートをDLかgit cloneを行い、必要なライブラリをインストールします。

npm  install

あとは、パッケージ化のコマンドを実行するだけです。

npm run package

パッケージ化に成功すると、release/build/内に実行ファイル(.exeや.AppImage)が作成されます。
ファイルを実行し、以下のような画面が出れば成功です。

※パッケージ化の際に以下のようなエラーが出た場合は少し修正を行ってください。
エラー

require() of ES Module

.erb/scripys/notarize.js

const { notarize } = require('@electron/notarize'); ※修正
↓
const { notarize } = await import('@electron/notarize');

ElectronでのESModule

アプリのカスタム

src/下にファイルが入っているため、これを編集することで自分なりにアプリをカスタマイズすることができます。
src/renderer/App.tsxのh1タグなどの文字をいじってみると変化が分かりやすいと思います。

編集中はnpm startで開発画面を開きながら行えば、ホットリロードで変化が分かりやすいのでおすすめです。

まとめ

導入自体はものすごく簡単なので、web開発をやったことがあり、デスクトップアプリを作ってみたいという人にはとてもおすすめです。また、公式でドキュメントが整っているので、かなり触りやすいです。

Electron × PythonでToDoアプリを作ってみた

余談です。
フロントエンドはReact.tsでバックエンドにpythonを追加して予定の追加や確認ができるアプリを作成しました。
ToDoの内容はjsonで保存するように設定、チャットはgpt-3.5-turboをapiで呼び出して実行というふうにしています。

pythonでバックエンド実装

基本的な実装は、web開発のようにAPIなどを作成していきます。

if __name__ == "__main__":
    uvicorn.run(app, host="127.0.0.1", port=8000)

@app.post("/chat")
async def api(arg):

    # 処理
    
    return {"response": res}

    const res = await fetch('http://localhost:8000/chat', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        message: input,
        tasks,
        events,
      }),
    });

なので今回はデスクトップアプリだからやったことを説明します。

pythonのexe化

pyinstallerをインストールし、pythonをパッケージにしていきます。

pip install pyinstaller
pyinstaller app.py --onedir

上記コマンドを実行するとdistディレクトリが作成され実行ファイルが書き出されます。
正しく書き出されているか確認したい場合は、

app.exe

で実行し確認が可能です。

extraResourcesの追加

package.jsonのextraresourcesに以下を追加します

    "extraResources": [
      "./assets/**",
      {
        "from": "backend/dist/app.exe",
        "to": "python/app.exe"
      }
    ],

main.tsの編集

バックエンドファイルの場所を記載します。

const isProd = app.isPackaged;

const exePath = isProd
  ? path.join(process.resourcesPath, 'python', 'app.exe')
  : path.join(__dirname, '..', '..', 'backend', 'dist', 'app.exe');

const pythonProcess = spawn(exePath);

pythonProcess.stdout.on('data', (data) => {
  console.log(`Python: ${data}`);
});

pythonProcess.stderr.on('data', (data) => {
  console.error(`Python stderr: ${data}`);
});

// 終了後pythonプロセスが切れているかは確認を推奨
app.on('quit', () => {
  if (pythonProcess) {
    pythonProcess.kill();
  }
});

以上で追加で必要なバックエンド側の作業は完了です。
あとは、npm run packageでパッケージ化を行えばデスクトップでもapiでpythonスクリプトが動きます。

余談のまとめ

ひとまず、バックエンドの実装もできて良かったです。