Webの知識は少しあるので，ElectronでWebのコードからMac用のアプリを作成します．
手始めにこんな感じのものを作ります．
環境構築
Node.js
Electronのバックエンド処理にはNode.jsが使われています．
この辺りを参考にしてください．
Windows: Node.js / npmをインストールする(for Windows)
Mac: Macにnode.jsをインストールする手順
Ubuntu: Ubuntuに最新のNode.jsを難なくインストールする
アプリ作成
プロジェクト作成
Electronのアプリプロジェクトを作成します．
最初のディレクトリ構成は以下のように
PythonApp
┠- src/ (ソースコードを置くディレクトリ)
プロジェクトの初期化
npmによってプロジェクトの初期化を行います．
package.jsonが生成されます
$ cd PythonApp
$ npm init
$ npm i -D electron
PythonApp
┠- src/ (ソースコードを置くディレクトリ)
| ┠- package.json (プロジェクト情報)
┠- package.json (プロジェクト情報)
┠- package-lock.json (プロジェクトのLockファイル)
┠- node_modules/ (npmでインストールしたライブラリ群)
アプリケーションの実装
src/内にアプリケーションのソースを置きます．
必要なのは，以下の3つ
- package.json
- index.js
- index.html
package.json
必要なファイルです．mainのファイルはエントリーポイントになるファイル名を指定しています．
{
"name": "src",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}
index.js
エントリーポイントとなるJSファイル．
アプリの処理はここから，実行される．
// Electronの読み込み
var electron = require('electron');
var app = electron.app;
var BrowserWindow = electron.BrowserWindow;
// mainWindow変数の初期化
var mainWindow = null;
// MacOS(darwin)でない場合にはアプリを終了する
app.on('window-all-closed', function() {
if(process.platform != 'darwin')
app.quit();
});
// 画面を表示．index.htmlを読み込む
// Close処理を行う
app.on('ready', function() {
// 画面表示
mainWindow = new BrowserWindow({width: 800, height: 600});
mainWindow.loadURL('file://' + __dirname + '/index.html');
mainWindow.on('closed', function() {
mainWindow = null;
});
});
index.html
メインウィンドウとして動くHTMLファイル
<!DOCTYPE html>
<html lang="ja" dir="ltr">
<head>
<meta charset="utf-8">
<title>Electron Read us</title>
</head>
<body>
<h1>Hello, electron!</h1>
</body>
</html>
アプリケーションは以上です．
ディレクトリ構成の確認です．
PythonApp
┠- src/ (ソースコードを置くディレクトリ)
| ┠- package.json (プロジェクト情報)
| ┠- index.html (メインウィンドウ)
| ┠- index.js (エントリーポイント)
|
┠- package.json (プロジェクト情報)
┠- package-lock.json (プロジェクトのLockファイル)
┠- node_modules/ (npmでインストールしたライブラリ群)
アプリケーションの実行
プロジェクトディレクトリ(PythonApp)で以下のコマンドを実行すると，アプリが実行できる
$ npx electron src
アプリケーションのパッケージ化
今はソースコードなので，アプリケーションとしてパッケージ化します
Mac
npx electron-packager src PythonApp --platform=darwin --arch=x64 --overwrite
Windows
npx electron-packager src PythonApp --platform=win32 --arch=x64 --overwrite
Source Code