Electron

この記事を作った動機 最近以下の組み合わせでフロントエンドを簡易的に書くということをしていた。 Vite React TypeScript Tailwind CSS zustand それでとりあえず機能的な意味では最低限適当にとりあえず動くという意味ではできたので、気軽に使えるようにしたいと思い、HTTPサーバとか一時的に立てずに、すぐに使えるようにしたかったので、一つのバイナリとしてまとまっていると良いと思った。 そこで色々試したところ、プロジェクト内にElectornプロジェクトを新規作成して、作ったコードをその中のRenderというフォルダ内にそのままコピーし、それをelectron-builderを使って各プラットフォーム向けに一つのバイナリとして作れそうだと調べてみて思った。それでいつものようにそれを実際にやって動くまでがめんどくさかったのでその記録を取る。 バイナリ完成までの試した手順 ※ コマンド実行における作業ディレクトリはViteプロジェクトのルートとする。 Vite プロジェクトを用意する プロジェクトの新規作成 npm create vite # Need to install the following packages: # create-vite@8.2.0 # Ok to proceed? (y) y # # # > npx # > "create-vite" # # │ # ◇ Project name: # │ createElectornAppTest # │ # ◇ Package name: # │ createelectornapptest # │ # ◇ Select a framework: # │ React # │ # ◇ Select a variant: # │ TypeScript # │ # ◇ Use rolldown-vite (Experimental)?: # │ No # │ # ◇ Install with npm and start now? # │ No # │ # ◇ Scaffolding project in /home/username/work/createElectornAppTest... # │ # └ Done. Now run: # # cd createElectornAppTest # npm install # npm run dev ライブラリのインストール npm install zustand npm install tailwindcss @tailwindcss/vite npm install # Command not found が出てきたとき Tailwind CSS の設定 以下を参考にして Tailwind CSS を機能するように設定する。 ...

このページは、まだ未完成です。。。 nicotalk＆キャラ素材配布所 http://www.nicotalk.com/charasozai_kt.html （2024年5月16日） この記事を作った動機 electron で何かアプリを作ろうかなと思ったとき、心理的障壁として、IPC によるやり取りがあったので、それについて、間違ってもいいのでとにかく自分なりにノートを作ろうと思っただけ。 IPC なにそれおいしいの？ IPC(Inter Process Communication) とは、複数のプログラム間で、データをやり取りしたりするための仕組みの一つ。いろんな仕組みがある。ネットワークを使うとか特定のメモリ領域を共有するとか。。。 electron と何が関係あるの？ 今の私の理解だと、electron は複数のプロセスからなっていて、単に一つのプログラムに対して、一つのプロセスが起動しているという感じではない。少なくとも、OS側の処理を担う、main と呼ばれているプロセスと、chromiumベースの描画用のプロセス(renderer.jsもここ)が存在している。 セキュリティの関係上、一つのプロセスとして全てが処理されておらず、分離されている。そのため、例えばファイル操作を実装したいとなったときなどには、main プロセスと、renderer.js などが動いている描画用プロセス間でデータをやり取りする必要がある。 そこで、データをやり取りする手段として、IPCがある。 やり方 以下は適当に、Using Preload Scripts | Electronあたりから、IPCを使って main プロセスと描画プロセスがやり取りするために必要であると思われる部分を、部分的に引っ張っていじくりまわして試したコードである。 main.js preload.js を指定 ipcMain.handle const { app, BrowserWindow, ipcMain } = require('electron/main') const path = require("node:path") const createWindow = () => { const win = new BrowserWindow({ width: 800, height: 600, webPreferences: { preload: path.join(__dirname, 'preload.js') } }) win.loadFile('src/index.html') } function scandir(){ return ["aaa.txt","bbb.txt"] } app.whenReady().then(() => { createWindow() ipcMain.handle("ping",() => "pong") ipcMain.handle("scandir",scandir) app.on('activate', () => { if (BrowserWindow.getAllWindows().length === 0) { createWindow() } }) }) app.on('window-all-closed', () => { if (process.platform !== 'darwin') { app.quit() } }) preload.js renderer.js内での呼び出し方の決定 const { contextBridge, ipcRenderer } = require('electron') contextBridge.exposeInMainWorld("callme",{ ping: () => ipcRenderer.invoke("ping"), scandir: () => ipcRenderer.invoke("scandir") }) // renderer.js // let response = await window.callme.ping() 以下は、Using Preload Scripts | Electronの引用 ...