Help us understand the problem. What is going on with this article?

ElectronインストールからHello worldまで

Electronって何

  • GitHub社が開発
  • HTML,CSS,JavaScriptでネイティブアプリが作れるオープンソースフレームワーク
  • クロスプラットフォーム対応(Mac, Linux, Windows)
  • Node.jsとChromiumで動いている
  • AtomとかSlackとかkobitoとか

Electronの準備

ElectronはNode.jsで動いてるので、まずはPCにNode.jsの実行環境を作る必要があります。
Node環境の構築はこちらMacにNode.js環境を作る(nodebrew)

では早速アプリを作っていきます

ディレクトリ作成

$ mkdir electron-app
$ cd electron-app

package.json作成

$ npm init

色々聞かれて作られたpackage.jsonファイル

package.json
{
  "name": "electron-app",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "saekis",
  "license": "MIT"
}

実行とかアーカイプ用とかに一部を修正

package.json
"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1"
},

package.json
"scripts": {
  "start": "node_modules/.bin/electron .",
  "build": "node build.js"
},

Electron用モジュールをインストール

$ npm --save-dev install electron-prebuilt
$ npm --save-dev install electron-packager

Hello world

jsファイルとhtmlファイルを作る

index.js
'use strict';

// アプリケーションをコントロールするモジュール
var app = require('app');
// ウィンドウを作成するモジュール
var BrowserWindow = require('browser-window');
// 起動URL
var currentURL = 'file://' + __dirname + '/index.html';
// クラッジュレポーター
require('crash-reporter').start();
// メインウィンドウはGCされないようにグローバル宣言
var mainWindow = null;
// 全てのウィンドウが閉じたら終了
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(currentURL);
  mainWindow.toggleDevTools();
  // ウィンドウが閉じられたらアプリも終了
  mainWindow.on('closed', function() {
    mainWindow = null;
  });
});
index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Electron</title>
  </head>
  <body>
    <p>Hello, world!</p>
  </body>
</html>
$ npm run start

Electron_と_1__Electron_Helper.png

簡単!

saekis
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away