Electronの入門３：Electron開発のために最初のアプリ
ElectronアプリケーションはMain Processと Renderer Processから構成されます
- 【Main Process】Electronのプロジェクトのフォルダにあるpackage.jsonの中身でmainで定義されているファイルを実行するプロセスがメインプロセスで、このメインプロセスが起動＝アプリケーションの起動。このメインプロセスが終了＝アプリケーションの終了ということです。
- 【Renderer Process】いわゆる、画面ごとに作成されるプロセスの事です。メインプロセスからxxxx.htmlを読み込んで画面を表示したら、その画面自体が一つのプロセスで動作していることです。複数のレンダラープロセスを起動することが出来ます。
- ブラウザでたとえば、ブラウザの枠、メニューなどがメインプロセス、描画された各タブがレンダラープロセスのことです。メインプロセスが一つだけ、レンダラープロセスが最低一つ以上が存在します。
Electronのプロジェクトがpackage.jsonで定義されています
- 新しいプロジェクトを作成するときに、まず新規フォルダを作成します
- 例：c:\sample
- プロジェクトの最低限の構成は以下のようなファイル
sample ├── index.html ├── main.js └── package.json
- この新規フォルダにpackage.jsonファイルを作成します
- package.jsonファイルの作成方法がいろいろあります。メモ帳で必要な要素を定義したりすることも出来ます
- 最初のステップで、どんな要素が必要かは分からないので、Node.jsのコマンドで生成したほうが簡単です
npm init
いろいろな質問に答えればよいです。ポイントはいかのようです
-
package name : 任意の名前でよいです。プロジェクトのフォルダ名と違ってもかまわない
-
entry point : メインプロセスのファイル名（例：main.js）です。何も入力しなければ、index.jsと自動に定義されます。
-
ほかの項目に何も入力しなくて良いです
-
- プロジェクトフォルダ内のpackage.jsonファイルを開いて、適切に編集すればよいです（例：エントリポイント：main.js に変更します）。
{ "name": "op_test", "version": "1.0.0", "description": "", "main": "main.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC", }
- パッケージが作成したら、メインプロセスとレンダラープロセスの作成となります
メインプロセス、レンダラープロセスの作成
- パッケージ定義ファイル（package.json）に定義されたエントリポイントファイル（main.js）を作成します
var electron = require('electron'); var app = electron.app; var BrowserWindow = electron.BrowserWindow; // メインウィンドウはGCされないようにグローバル宣言 let mainWindow; // 全てのウィンドウが閉じたら終了 app.on('window-all-closed', function() { if (process.platform != 'darwin') { app.quit(); } }); // Electronの初期化完了後に実行 app.on('ready', function() { // メイン画面の表示（レンダラプロセスの開始） mainWindow = new BrowserWindow({ width: 800, height: 600 }); mainWindow.loadURL('file://' + __dirname + '/index.html'); //ローカルのhtmlを表示 //ウィンドウが閉じられたらアプリも終了 mainWindow.on('closed', function() { mainWindow = null; }); });ここで、メインプロセスの記述が大半です。レンダラープロセスが一行だけ： mainWindow.loadURL('file://' + __dirname + '/index.html');
- 非常に簡単例で、単純的にローカルにあるhtmlファイルを表示させるとなります
- ローカルにあるindex.htmlを定義します（どんなページでもかまわない）
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ElectronApp</title> </head> <body> <p>Hello World</p> </body> </html>単純的に「Hello World」を画面に表示させるだけです
- Windowsコマンドプロンプトでこのフォルダで以下のコマンドでアプリを実行します
electron .
Electronについて
- オーペンソースフレームワーク（Open Source Platform）、GitHubで管理されています
- Node.jpをベースにして、クローズプラットフォーム（Windows,MacOS、Linunxなど）上のネーティブApp構築ができます
- バックエンドはJavascript＋html＋CSSで記述（フロントエンドのエンジニアに習得するコストは高くないはず）
- Chromiumでコンテンツを表示します
Windows上でのインストール
- 最新バージョンのNode.jsをWindowsにインストールします
- Node.jsの管理ツール：npm(Node Package Manager)でElectronを以下のコマンドでインストール
npm install electron -g
- Electronのインストール状況、バージョンを以下のコマンドでチェックします
electron -v
Electronの基本情報を表示
- Windowsのコマンドプロンプト（cmd）を起動して、以下の実行コマンドで
npx electron
GitHub上のElectron公式アカウントで公開されているElectron API Demosというデモアプリは、基本的なElectron APIのを具体的にどんなことができるのかを知るのに便利だ。よく使うクラスと使い方が、デモの中で解説されているため、これを見ていけばElectronのAPIで何ができるのかが効率的に理解できる。
Electron API Demoのインストール
- Electron API Demos：https://github.com/electron/electron-api-demos
- そのパッケージをダウンロードして、Electron開発ソースディレクトリに置けばよいです
- Windowsのコマンドプロンプトでデモアプリを起動します
//デモアプリのディレクトリ内で、以下のコマンドでアプリを起動 electron .
-
起動途中で以下のエラーが発生するかもしれないです
-
Error:Cannot find module 'glob'
-
globモジュールが足りないエラー
- Electron API Demoアプリがglobモジュールを要求します
- globモジュールはファイルをパタン（例：＊、？、＋ など）でマッチング機能であります
- Windowsのコマンドプロンプトでglobモジュールをインストールします
//任意のディレクトリで以下のコマンドでglobをインストール npm install glob --save
Electronデモアプリの起動
- 再度Windowsのコマンドプロンプトを起動して、Electronのデモアプリを起動
//デモアプリのディレクトリ内で、以下のコマンドでアプリを起動 electron .
Electronについて
- オーペンソースフレームワーク（Open Source Platform）、GitHubで管理されています
- Node.jpをベースにして、クローズプラットフォーム（Windows,MacOS、Linunxなど）上のネーティブApp構築ができます
- バックエンドはJavascript＋html＋CSSで記述（フロントエンドのエンジニアに習得するコストは高くないはず）
- Chromiumでコンテンツを表示します
Windows上でのインストール
- 最新バージョンのNode.jsをWindowsにインストールします
- Node.jsの管理ツール：npm(Node Package Manager)でElectronを以下のコマンドでインストール
npm install electron -g
- Electronのインストール状況、バージョンを以下のコマンドでチェックします
electron -v
Electronの基本情報を表示
- Windowsのコマンドプロンプト（cmd）を起動して、以下の実行コマンドで
npx electron
