electron
ビーストウォーズに出てきそうな名前と思った奴は、思考が俺と一緒!
electronとは?
GitHubが提供するクロスプラットフォームのデスクトップアプリ作成エンジン。
Node.js + Chromiun(chromeのOSS版)をベースに作られている。
electronのすごいところ
webの技術だけでデスクトップアプリが作れる。
意外とweb系のエンジニアは、デスクトップアプリを作りたがる傾向にある。
かく言う私も、デスクトップアプリを作りたかった!
主戦場は.NETに取られ、JavaエンジニアだとSwing使うか、JavaFXで作るしかない。
しかし、Javaでデスクトップアプリは非常に作りづらいのが現状。
web系の技術で作れれば、手っ取り早いのにと思っていた頃に見つけた。
JavaFXは、今は残念な状態なので、コレでウサを晴らす!
動作確認環境
OS
Mac OSX EL Caption 10.11.2(15C50)
インストール
前提条件
- Node.js
前述したように、Node.jsを使っているので、インストールする。
インストール済みの人は次のelectronインストールへ
brew install node
コマンドが嫌いな人は(いないと思うけど)、下記からダウンロードしてインストール
https://nodejs.org/
electronインストール
下記コマンドでelectronをインストールする。
npm -g install electron-prebuilt
electronサンプル作成!
任意の場所にフォルダを作成する。
ここでは例としてelectron-sampleを作成する。
mkdir electron-sampel
作成したディレクトリに移動して、Nodeプロジェクトの初期化を行う。
cd electron-sample
npm init -y
そうすると、package.jsonというファイルが作成される。
このpackage.jsonファイルには、作成されるアプリの情報が記載されている。package.jsonの呼び出しJavaScriptファイル設定 デフォルト値でも問題ないですが、やや意図する名前と違うので変える。
package.json
{ ... "main": "main.js", ... }
main.jsの作成 package.jsonファイルがあるフォルダと同じフォルダに、main.jsを作成し、下記の内容を記載する。
main.js 2017/09/29 最新の呼び出し方法が変わってたので修正
"use strict";
const electron = require("electron"); const app = electron.app; const BrowserWindow = electron.BrowserWindow; 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');
// ウィンドウが閉じられたらアプリも終了 mainWindow.on('closed', function() { mainWindow = null; }); });
index.htmlの作成 前述した通り、初期表示で表示される画面。
ここはベタにHello Worldで!<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Electron Read Us</title></head><body><h1>Hello, World!</h1></body></html>
実行 electron-sampleフォルダ内で、
electron .
を実行
すると画面が立ち上がるハズ。
終わりたいときは画面を閉じて、以下のCtrl + C でコマンド実行を止める。
Webの技術だけでやれることに感動!
Web技術ですべてが完結する。これほどWebエンジニアにとって嬉しいことはない!
本当はビルドまで調査したかったけど、一旦ここまで。
ビルドするとWindows環境でも動くデスクトップアプリが作れる。
Web系の知識でできるので、追加の学習が不要!
たぶん、いじりだしたら止まらないだろうな、コレ。
目下の目標は、electron + AngularJSで簡易ゲームを作りたい。
遊戯王系のアプリができればよいのだが。。。
そういえば、ADS*1はMac版あったけ?
electron移植もありかな?と思えてきた。
課題として取り組めたらと思う。