もなかアイスの試食品

「とりあえずやってみたい」そんな気持ちが先走りすぎて挫折が多い私のメモ書きみたいなものです.

とりあえず超簡単にElectronを使ってみた

Electronとは

HTML5とNode.jsでWindowsLinuxMacのデスクトップアプリを作れる クロスプラットフォーム実行環境。

もともと、テキストエディタ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


すると以下のようなウィンドウが表示される。

f:id:monakaice88:20160227073036p:plain

Electronを使って、そろそろアプリ作る作る詐欺を卒業したいところ