Electron入門（インストールからHello Worldまで）

# Electronとは？
[Electon](http://electron.atom.io/) は [Github](https://github.com/about)社がテキストエディタの [Atom] (https://atom.io/) を作成するために作ったオープンソースのソフトウェアフレームワークです。
特徴として
・Windows, Mac OS, Linux のクロスプラットフォーム対応のデスクトップアプリを作成可能 
・HTML, CSS, JavaScript といったWebアプリケーションの技術で動く
でしょうか。
非常に簡単に書けて、かつ色々な場所で柔軟に動くアプリケーションを作ることができるということで、やらない手はない！といったところです。

# Electronのインストール
Electronのインストールや、Qiitaの記事を参考にコードを書いても動かないといったバージョン変更で結構ハマったので、ここに手順を書いておきます

## 開発環境
・OS: Mac OS X EI Capitan (10.11.5)
・パッケージマネージャー：[Homebrew](http://brew.sh/index_ja.html)

## node.jsの最新版をインストール
既存のバージョンのnode.jsでElectronを動かそうと四苦八苦していましたが、結局これが一番重要

```bash:node.jsの最新版インストール
$ brew uninstall node
$ brew install node
$ brew link --overwrite --dry-run node # brew link node で指示されたコマンド
```
これで最新版のnode.jsがインストールできます。

```bash:node.jsのインストール確認
$ which node
$ which npm
```
でコマンドのパスが返ってこればOKです。

## Electronのインストール

```bash:Electronのインストール
npm install -g electron-prebuilt
```

これが完了すると、

```bash:Electronのインストール確認
$ which electron
```

のコマンドのパスが返ってきます。

## ※ 失敗例（node.js最新版インストール前）
最新版でないnode.jsを使用してElectronのインストールを行っていました。

```bash
$ npm install -g electron-prebuilt
```
とすると、

```bash
npm ERR! 404  'electron-prebuild' is not in the npm registry.
```
と出て、インストールできませんでした。


# ElectronでHello World

## 新規プロジェクトの作成

```bash:ディレクトリ構成
ElectronApp
├── index.html
├── main.js
└── package.json
```


Electronでは、Railsのようにnewコマンドでプロジェクトが一式作成されるわけではなさそうです。
素直に作業ディレクトリを作成して、そこに書いていきます。

```bash:新規プロジェクトの作成
$ mkdir ElectronApp
$ cd ElectronApp
$ npm init -y
```

最後の ```$ npm init -y``` をすることで、ディレクトリ内に ```package.json``` が作成されますので、こちらをちょこっと編集します。

```json:package.json
{
  "name": "ElectronApp",
  "version": "0.0.0",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "description": ""
}
```

## アプリ制御部分のmain.jsを作成

ディレクトリ内にElectronを制御する ```main.js``` を作成

```js:main.js
'use strict';

// アプリケーションをコントロールするモジュール
var electron = require('electron');
var app = electron.app;
var BrowserWindow = electron.BrowserWindow;

// メインウィンドウはGCされないようにグローバル宣言
let mainWindow;

// 全てのウィンドウが閉じたら終了
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('file://' + __dirname + '/index.html');

  //ウィンドウが閉じられたらアプリも終了
  mainWindow.on('closed', function() {
    mainWindow = null;
  });
});
```

ここで、注意しないといけない点として、参考にさせていただいた記事の「[30分で出来る、JavaScript (Electron) でデスクトップアプリを作って配布するまで](http://qiita.com/nyanchu/items/15d514d9b9f87e5c0a29)」では、最初のアプリケーションをコントロールするモジュールの部分が、

```js:失敗例（古い仕様）
// アプリケーションをコントロールするモジュール
var app = require('app');
var BrowserWindow = require('browser-window');
```
となっているのですが、仕様変更により、

```js:正しい例（main.jsの一部）
// アプリケーションをコントロールするモジュール
var electron = require('electron');
var app = electron.app;
var BrowserWindow = electron.BrowserWindow;
```
と記載しないと正しく動きませんでしたので、注意してください。


## アプリ表示部分のindex.htmlを作成

表示部分は、Webアプリケーションでよく使用するHTMLの雛形と全く同じです。

```html:index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>ElectronApp</title>
  </head>
  <body>
    <p>Hello World</p>
  </body>
</html>
```

## アプリ起動
アプリの起動は、以下のコマンドで実行します。

```bash:Electronアプリの実行
$ cd ..
$ electron ElectronApp/
```

以下のように、デスクトップアプリケーションが表示されれば成功です。

<img width="822" alt="スクリーンショット 2016-08-06 22.54.37.png" src="https://qiita-image-store.s3.amazonaws.com/0/130181/dad79d7f-5230-e5cf-1661-fd40f1f60f60.png">

# Electronを触ってみた感想

Webアプリケーションと使う技術や書き方がほとんど同じなので、RailsなどでWebアプリケーションを作り、そのデスクトップ版をElectronで作るといったことが非常にスムーズにできそうです。
Webアプリケーションでは、その特性上、どうしてもローカルファイルとの連携が難しい部分があったのですが、これであれば、Webの技術もそのまま流用出来て良さそうです。
スマートフォン用のアプリケーションもElectronで作れるようになると理想的ですね。


# おまけ
フォローお待ちしています！
Qiita: [Carat 吉崎](http://qiita.com/carat_yoshizaki)
twitter：[@carat_yoshizaki](https://twitter.com/carat_yoshizaki)
はてなブログ：[Carat COOのブログ](http://carat-tech.hatenablog.com/)

機械学習をマンツーマンで学べる家庭教師サービス「[キカガク](https://kikagaku.net)」
「数学→プログラミング→Webアプリケーション」まで一気に学べる「[キカガク](https://kikagaku.net)」に興味のある方はお気軽にご連絡ください。