[Electron]爆速でデスクトップアプリ作る

ukah(夢見猫うかあ)

2022年7月11日 22:26

環境・前提

システム

Windows 10 Pro
バージョン 10.0.19044 ビルド 19044
node.js
v16.16.0
electron
v19.0.8
開発環境
Visual Studio Code v1.69.2

必要なプログラムのインストール

Node.js

推奨をダウンロードしてインストールで良いです
ElectronはNode.jsのパッケージでインストールできるので
必要なプログラムはNode.jsだけです。

PS > npm init

Enter連打でいける

PS > npm install -D electron

PS > npx electron -v
v19.0.8

最低限必要なファイル

両方package.jsonと同じところでいい

: index.js

// index.js
 
const {app, BrowserWindow} = require('electron');
let win;
 
function createWindow () {
  // BrowserWindowを作成
  win = new BrowserWindow({
    webPreferences: {
      nodeIntegration: true,
    },
    width: 800, height: 600,
  });
 
  // index.htmlをロード
  win.loadFile('index.html');
 
  // ウィンドウが閉じられた場合
  win.on('closed', () => {
    win = null
  });
 
}
 
// 初期化が完了した場合
app.on('ready', createWindow);
 
// ウィンドウが閉じられた場合
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});
 
// アプリケーションがアクティブになった場合
app.on('activate', () => {
  if (win === null) {
    createWindow();
  }
});

: index.html

<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Hello World!</title>
</head>
 
<body>
  <h1>Hello World!</h1>
</body>
</html>

※Editor上でlangとviewport設定しろって言われるので一応修正。
もしかしたら必要ないかも。

起動テスト

PS > npx electron .

無事にHello worldが表示されれば成功です。
あとはごちゃごちゃやって好きなアプリを作るといいと思います。
実行ファイルを作るためのコンパイル作業は前述のリンクから紹介されているのでやってみてください。

その他

github使うならgitignore導入推奨

最後までお読みいただき、ありがとうございます。今後もたくさんの方に読んでいただけるよう精進します。活動継続にあたりサポートをいただけると、私のモチベーション維持やクオリティ向上に繋がります。頂いたサポートはクリエイターとしての活動費にさせて頂きます。ぜひお願い致します。