[JavaScript] Electronとは：デスクトップソフト作成環境の基本的な使い方
概要
- ブラウザの技術をベースにした、オープンソースのGUI開発ライブラリ
- ウェブページをつくるようにデスクトップ向けソフトウェアを開発できる
- Node.jsとChromiumの技術を活用
- Node.jsのnpmをパッケージマネージャとして使う
- ECMAScript 2015に対応
環境の構築：インストール
Node.jsのインストール
何はともあれ、Node.jsベース。
Electronのインストール
npmから。
[bash]
npm install electron -g
[/bash]
package.jsonファイルの作成
ビルド用のファイル。
「main」プロパティで、エントリーポイントとなるJavaScriptファイル（最初に実行されるファイル）をかならず指定する。
バージョンとアプリ名も書いたほうがいいらしい。
[javascript]
{
“main" : “myMain.js",
“name" : “My App",
“version" : “1.0.0"
}
[/javascript]
index.htmlの作成
これに関しては、ウェブページと同じ。基本的にHTML5で、好きなように書けばいい。
基本のスクリプトを記述
package.jsonのmainで指定したファイルに、最初のコードを書く。
[javascript]
// electronモジュールの読み込み
const electron = require('electron’);
const path = require('path’);
const url = require('url’);
// Electronの初期化が完了した際のイベントハンドラ
electron.app.on('ready’, function(){
// 最初のウィンドウの作成
let mainWindow = new electron.BrowserWindow({width: 1024, height: 768});
// HTMLファイルの読み込み
mainWindow.loadURL(url.format({
protocol: 'file:’,
slashes: true
// path.join() 環境に合ったパスを作成してくれる
// __dirname 現在実行中のスクリプトファイルを格納するディレクトリのパス
pathname: path.join(__dirname, 'index.html’),
}));
// メインウィンドウを閉じたときの処理
mainWindow.on('closed’, function() {
mainWindow = null;
});
});
});
// すべてのウィンドウが閉じられたときの処理
electron.app.on('window-all-closed’, function() {
app.quit();
});
[/javascript]
あとは適宜APIを使い、HTMLやスクリプトを付け加えていけばいい。
おわりに
基本的にはこれだけ。過去にAdobe AIRやPhoneGapを使ったことがある人なら、ほぼ同じ感覚でやれる。
決定的に異なるのは、Node.jsの膨大なAPIを使えること。