Electronに入門しました
C#しかまともに扱えませんが、SlackForWindowsのようなきれいなアプリケーションを作れるようになりたいということでElectronの開発環境を自分のPCに作成しました。
ここではHello Worldを表示するまでを説明しています。
環境
- Windows10(1803)
手順
Node.jsインストール
ElectronはNode.jsで動いている(？)ようなので、Node.jsをインストールします。
僕はクソザコプログラマなのでRecommendされている左のバージョンをインストールしました。
インストーラは全部[Next]で[Install]して[Finish]しました。
Electronのインストール
ソースファイルなどを配置するフォルダを任意に作成します。
僕はE:\Electron\FirstAppを作成しました。
以下、FirstAppフォルダというときはこのフォルダ直下を指しています。
コマンドプロンプトを立ち上げます。(PowerShell使ったことない)
作業フォルダをFirstAppフォルダに指定して下記のコマンドを叩きます。
npm i -D electron
FirstAppフォルダに"node_modules"と"package-lock.json"ができると思います。(参考にしたWebサイトでは"package.json"もできていますが僕は作成されませんでした。原因不明。でもこの後ちゃんとアプリ作成できた。)
参考サイトでは引数として-gオプションを渡してグローバルインストールするのはオススメしないと説明されていますが、どうなんでしょうか？
誰か双方のメリットデメリットを教えてください(他力本願)
コーディング
上記の作業フォルダに"src"というフォルダを作成し、下記の3つのファイルを作成します。
/src/package.json
{
"main": "main.js"
}
/src/main.js
// アプリケーション作成用のモジュールの読み込み
const electron = require('electron');
const app = electron.app;
const BrowserWindow = electron.BrowserWindow;
// メインウィンドウ
let mainWindow;
function createWindow(){
// メインウィンドウを作成します
mainWindow = new BrowserWindow({width: 800, height: 600});
// メインウィンドウに表示するURLを指定します
// (今回はmain.jsと同じディレクトリのindex.html)
mainWindow.loadFile('index.html');
// メインウィンドウが閉じられたときの処理
mainWindow.on("closed", () => {
mainWindow = null;
});
}
// 初期化が完了したときの処理
app.on("ready", createWindow);
// すべてのウィンドウが閉じたときの処理
app.on("window-all-closed", () =>{
// macOSのとき以外はアプリケーションを終了させます
if(process.platform !== "darwin"){
app.quit();
}
});
// アプリケーションがアクティブになったときの処理(Macだと、Dockがクリックされたとき)
app.on("activate", () => {
// メインウィンドウが消えている場合は再度メインウィンドウを作成する
if(mainWindow === null){
createWindow();
}
});
/src/index.html
<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>
アプリケーション実行
コマンドプロンプトにて、FirstAppフォルダで下記のコマンドを実行します。
npx electron ./src
アプリケーションが立ち上がって「初めてのElectron」表示されれば成功です。
exeファイル作成
アプリケーションを配布するためにexeにしたいことがあると思います。その際の手順を説明します。
FirstAppフォルダにて、下記のコマンドを実行します。
npm i -D electron-packager
パッケージングの準備ができたので、FirstAppフォルダでさらに次のコマンドを実行します。するとFirstAppフォルダ内にexeと付随するdll等がパッケージされたFirstApp-win32-x64フォルダが作成されます。
npx electron-packager src FirstApp --platform=win32 --arch=x64 --electron-version=3.0.10
Electronのバージョンを指定するオプションは都度変更してください。
この参考サイトではelectron-versionを指定していなかったのですが、
Unable to determine Electron version. Please specify an Electron version
For more information, please see
https://github.com/electron-userland/electron-packager/blob/master/docs/api.md#electronversion
というエラーが出たので、バージョンを指定したらできるようになりました。(他にも2つほどエラーが出ましたがバージョン指定により一緒に消滅しました。原因不明...)
まとめ
参考サイトをなぞっただけですが、デスクトップアプリの作成までできるようになりました。
さあ、JavaScriptやHTMLの勉強をしなきゃな...(順番が逆)
参考にしたWebサイト
https://ics.media/entry/7298
https://qiita.com/takahiro_itazuri/items/048242d1d5be6b4a70c7