--- title: ElectronインストールからHello worldまで tags: Electron Node.js author: saekis slide: false --- ## 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)](http://qiita.com/saekis/items/d580d1c2ae4f32a6ae99) では早速アプリを作っていきます ### ディレクトリ作成 ```sh $ mkdir electron-app $ cd electron-app ``` ### package.json作成 ```sh $ npm init ``` 色々聞かれて作られた`package.json`ファイル ```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" } ``` 実行とかアーカイプ用とかに一部を修正 ```json:package.json "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, ``` ↓ ```json:package.json "scripts": { "start": "node_modules/.bin/electron .", "build": "node build.js" }, ``` ### Electron用モジュールをインストール ```sh $ npm --save-dev install electron-prebuilt $ npm --save-dev install electron-packager ``` ## Hello world jsファイルとhtmlファイルを作る ```javascript: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; }); }); ``` ```html:index.html Electron

Hello, world!

``` ```sh $ npm run start ``` ![Electron_と_1__Electron_Helper.png](https://qiita-image-store.s3.amazonaws.com/0/57806/4c863e46-75ea-335d-507a-448551c0f781.png "Electron_と_1__Electron_Helper.png") 簡単!