Webの知識は少しあるので,ElectronでWebのコードからMac用のアプリを作成します.

手始めにこんな感じのものを作ります.

electron.png

環境構築

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

https://github.com/sasayabaku/electron_training/tree/master/PythonApp

参考文献

最新版で学ぶElectron入門 - HTML5でPCアプリを開発する利点と手順 - ICS MEDIA

Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account log in.