windowsとmacのデスクトップアプリが、HTMLとCSSとJavaScript（Node.js）で
まとめて作成できるElectronというフレームワークについて、
導入方法からアプリのパッケージングまでの手順を解説します。
この記事の目次
Electronをインストールする方法
Node.jsをインストールする
Electronのインストールにはnpm（Node Package Manager）というコマンドが必要になります。
そのためにまずは、nodeをインストールする必要があります。
Node.jsの公式サイトから、最新版のNode.jsをダウンロードしましょう。
インストールが完了したら、Windowsの場合はコマンドプロンプト、Macの場合はターミナルを開き、
node -vと入力してみましょう。
「v◯.◯.◯」というバージョンが表示されればインストールが完了しています。
これで、npmコマンドが使用できるようになりました。
プロジェクト用の実行ファイルを作成する
Electronアプリを作成するディレクトリ（フォルダ）を決めたら、
Windowsの場合はコマンドプロンプト、Macの場合はターミナルを開き、
そのディレクトリに移動して以下のコマンドを入力します。
npm init -yこれで、作業ディレクトリに package.json ファイルが生成されます。
package.jsonの中身は以下のようになっています。最初は特に変更する必要はありません。
{
"name": "ディレクトリ名",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}
Electronをインストールする
作業ディレクトリ（先ほどと同じ場所）で、以下のコマンドを入力します。
npm i -D electronこれでElectronが作業ディレクトリにインストールされました。
（作業ディレクトリにnode_modulesというフォルダが作成され、
その中にElectronのためのファイル群が生成されています。）
electron -vと入力してみましょう。
「v◯.◯.◯」というバージョンが表示されればインストールが完了しています。
Electronをインストールするコマンドを、
npm i electron -gにすると、Electronをグローバルインストールすることが出来ます。
しかし、この方法ではElectronのバージョンを上げた場合に、
今まで作成したプロジェクトで不具合が発生する可能性があるため、
npm i -D electronで作業ディレクトリごとにElectronを入れることをおすすめします。
Electronの設定方法
index.jsの作成
（package.json の “main” で指定したファイル）
Electronアプリを起動したときに最初に実行されるファイルです。
以下のコードをコピペして保存してください。
// Electron のモジュールを取得
const { app, BrowserWindow } = require("electron");
// メインウィンドウをグローバルで保持
let mainWindow;
//ウィンドウ生成関数
function createWindow() {
// ウィンドウ生成
mainWindow = new BrowserWindow({
width: 600,
height: 400,
useContentSize: true,
});
// 最初に表示する HTMLファイルを読み込む
mainWindow.loadFile("index.html");
// ウィンドウを閉じた時
mainWindow.on("closed", () => {
// ガベージコレクタに開放させる
mainWindow = null;
});
}
// Electronの初期化完了後に実行
app.on("ready", createWindow);
// 全てのウィンドウが閉じたときに実行
app.on("window-all-closed", () => {
// macOS の場合、アプリを完全に終了させず、
// メニューバーに残す（macOSではこれが一般的）
if (process.platform !== "darwin") {
app.quit();
}
});
// アプリが実行された時に発生
app.on("activate", function () {
// macOS の場合、アプリ起動時に
// ウィンドウが空なら再作成する（macOSではこれが一般的）
if (mainWindow === null) {
createWindow();
}
});
index.htmlの作成
（index.js の mainWindow.loadFile で指定したファイル）
Electronアプリを起動したときに最初に表示される画面になります。
好きなように画面を作成しましょう。
今回は確認用に以下のコードをコピペして保存してください。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
Hello World!
</body>
</html>
Electronの実行
Windowsの場合はコマンドプロンプト、Macの場合はターミナルを開き、
作業ディレクトリ上で以下のコマンドを実行します。
.\node_modules\.bin\electron .これで、以下のように作成したElectronアプリが開きます。
制作したアプリをデスクトップで使えるパッケージにする
ここまでの内容では、作成したElectornアプリを実行できるのは自分だけです。
作業ディレクトリをまとめて渡して、
ターミナル（コマンドプロンプト）でコードを実行してもらえば、
他の人にも実行してもらうことは出来ますが不便ですよね。
そこで、作成したElectronアプリを、通常のアプリのように起動できるようにする方法をご紹介します。
以下のコマンドを作業ディレクトリで実行します。
npm i -D electron-packager次に以下のコマンドを実行して、パッケージングを行います。
electron-packager <sourcedir> <appname> --platform=<platform> --arch=<arch> [optional flags...]appname ・・・ アプリの名前
platform ・・・ all, darwin, linux, mas, win32 のいずれかを入力
arch ・・・ all, ia32, x64, armv7l, arm64, mips64el のいずれかを入力
これで生成されたフォルダの中にある、
appファイル（macOSの場合）や、exeファイル（windwowsの場合）を実行すると
作成したElectronアプリが起動します。
別の人に使ってもらいたい場合は、フォルダごと渡しましょう。
