1. saekis

    Posted

    saekis
Changes in title
+ElectronインストールからHello worldまで
Changes in tags
Changes in body
Source | HTML | Preview
@@ -0,0 +1,120 @@
+
+## 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
+'user 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
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="UTF-8">
+ <title>Electron</title>
+ </head>
+ <body>
+ <p>Hello, world!</p>
+ </body>
+</html>
+```
+
+```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")
+
+簡単!