Electronでデスクトップアプリを配布できるようにするパッケージングまでmacでやっていきたいと思います。
Node.jsはインストールしている状態で始めるので、あらかじめインストールしておいてください。
必要なファイル、ディレクトリの作成
まずアプリを作成するために必要なファイル、ディレクトリを準備します。
アプリを作成したいディレクトリに移動したのち、以下のコマンドを実行します。
$ mkdir hoge
$ cd hoge
これでhogeのディレクトリ内に入りました。
次に以下のコマンドを実行します。
$ npm install -D electron
実行するとnode_nodules、package-lock.jsonが作成されました。
次に以下のコマンドを実行します。
$ npm init
このコマンドを実行するとpackage name: (hoge)のように表示されると思います。
ここで設定を決めることができますが、後でも変更することができるので、いまはEnterを押して進めてください。
進めるとpackage.jsonというファイルが作成されたと思います。
次にsrcというディレクトリとその中身を作成していきます。
まずディレクトリを作成して移動します。
$ mkdir src
$ cd src
srcの中にmain.js、index.html、package.jsonを作成します。
$ touch main.js index.html
$ npm init
これでアプリを実行するためのファイルが用意できました。
以下のようなファイルがあればOKです。
アプリケーションを起動する
アプリを起動できるように設定します。
まずはsrcディレクトリ内にあるpackage.jsonを編集します。
"main":を以下のように編集してください。
{
"main": "main.js"
}
次にmain.js、index.htmlに以下を追加してください。
const {app, BrowserWindow} = require('electron');
let mainWindow;
function createWindow() {
mainWindow = new BrowserWindow({
webPreferences: {
nodeIntegration: true,
},
width: 800, height: 600,
});
mainWindow.loadFile('index.html');
mainWindow.webContents.openDevTools();
mainWindow.on('closed', () => {
mainWindow = null;
});
}
app.on('ready', createWindow);
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit();
}
});
app.on('activate', () => {
if (mainWindow === null) {
createWindow();
}
});
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
</head>
<body>
<h1>初めてのElectron</h1>
We are using node <script>document.write(process.versions.node)</script>,
Chrome <script>document.write(process.versions.chrome)</script>,
and Electron <script>document.write(process.versions.electron)</script>.
</body>
</html>
これで表示するためのコードを書き終えたので、アプリを実行してみます。
hogeのディレクトリに移動して以下のコマンドを実行してください
$ npx electron src
このように表示されたら成功です。
終了するためにはcontrol + cを押してください。
パッケージングする
アプリの起動を確認できたら次にパッケージングをします。
パッケージングをするためにelectron-packagerをインストールします。
インストールする場合はhogeディレクトリで実行してください。
srcディレクトリで実行しないようにしてください。
$ npm i -D electron-packager
インストールが終了したら以下のコマンドを実行します。
$ npx electron-packager src hoge --platform=darwin --arch=x64 --overwrite
パッケージングに成功すると、以下のようにファイルが作成されます。
hogeと書いてあるアプリをクリックして、先ほど表示した画面と同じ画面が表示されたら成功です。
開発用にコマンドを簡略化する
ターミナルでアプリを起動する際にnpx electron srcというコマンドを実行しましたが、hogeディレクトリのpackage.jsonファイルのscriptsの項目を編集するとnpm startで起動できるようになります。
"scripts": {}の中に記載されているコードを以下のように書き換えてください。
"scripts": {
"start": "electron ./src"
}
ターミナルで以下のコードを実行してアプリが起動できたら成功です。
$ npm start