とりあえず超簡単にElectronを使ってみた
Electronとは
HTML5とNode.jsでWindows、Linux、Macのデスクトップアプリを作れる クロスプラットフォーム実行環境。
もともと、テキストエディタのAtomを開発するための実行環境らしい。
↓Electron本家
electron.atom.io
↓Electronについて参考になるサイト
liginc.co.jp
環境準備
Node.jsのインストールは実行済み、「npm init」も開発用フォルダに実行済みとして 必要なパッケージをインストールする。
npm install electron-prebuilt --save-dev
また、実際に動作確認するために「package.json」の「scripts」部分に以下を追記する。
"build": "node_modules/.bin/electron ."
「package.json」の全体はこんな感じ。
{ "name": "test", "version": "1.0.0", "description": "hello world", "main": "index.js", "scripts": { "build": "node_modules/.bin/electron .", "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC", "devDependencies": { "electron-prebuilt": "^0.36.9" } }
とりあえず表示してみる
とりあえず動かして見るために、超簡単なHTMLを用意。
ファイル名:index.html
<!DOCTYPE html> <html> <body> <h1>Hello World</h1> </body> </html>
色んなサイトを見た感じでは、エントリポイントのコードはほとんど同じ。
そのため以下のコードも正直コピペで、コーディングスタイルを変えただけ。
ファイル名:index.js
var app = require('app'); var BrowserWindow = require('browser-window'); require('crash-reporter').start(); var mainWindow = null; app.on('window-all-closed', function() { if (process.platform != 'darwin') { app.quit(); } }); app.on('ready', function() { mainWindow = new BrowserWindow({ 'width' : 400, 'height' : 300 }); mainWindow.loadUrl('file://' + __dirname + '/index.html'); mainWindow.on('closed', function() { mainWindow = null; }); });
コマンドプロンプトで以下のコマンドを実行する。
npm run build
すると以下のようなウィンドウが表示される。
Electronを使って、そろそろアプリ作る作る詐欺を卒業したいところ