1. harry_duck
Changes in body
Source | HTML | Preview
@@ -1,120 +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';
+'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
<!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")
簡単!