Electron入門-Electronとは？特徴は？環境構築は？-2017年9月版

# はじめに

今年のシルバーウィーク*（と言っても9/16-18の3連休ですが。。）*は、もろ台風直撃ですね。

<img width="830" alt="スクリーンショット 2017-09-17 21.09.19.png" src="https://qiita-image-store.s3.amazonaws.com/0/151106/a877d14b-b994-d313-e645-5bd871547b64.png">
[引用元：気象庁(台風第18号_平成29年09月16日06時45分 発表)](http://www.jma.go.jp/jp/typh/17185.html)

外出は控えた方が良さそう。ということで、

*（台風の直撃関係なく、特に予定はないのですが。。。）*

以前から気になっていた**Electron**を触ってみることにしました。

# Electronとは
***Electron（エレクトロン）***は、*GitHubが開発したオープンソースのソフトウェアフレームワークである。
ChromiumとNode.jsを使っており、HTML、CSS、JavaScriptのようなWeb技術で、macOS、Windows、Linuxに対応したデスクトップアプリケーションをつくることができる。
Atom、Slack、Visual Studio Codeなどで使用されている。[公式サイト](https://electron.atom.io/)*
[wikipediaより](https://ja.wikipedia.org/wiki/Electron_(%E3%82%BD%E3%83%95%E3%83%88%E3%82%A6%E3%82%A7%E3%82%A2))

元々は、テキストエディタの*Atom*を構築するためのフレームワークとして2013年に始まり、両者は2014年の春にオープンソース化されたとのことです。
[コチラのページ](https://electron.atom.io/apps/)に**Electron**で開発されたアプリ一覧がありました。Atom・Slack以外だと、国内では、[Postman](https://www.getpostman.com/)・[Nylas](https://www.nylas.com/)辺りは有名でしょうか。


# Electronの特徴
- **HTML/CSS/JavaScript**を使用してクロスプラットフォームのデスクトップアプリケーションを開発できる
- アプリケーションは**Mac（10.9以降）、Windows（Windows7以降）、Linux（Ubuntu12.04以降・Fedora21
・Debian8）**用にパッケージ化することができる
- 画面のレンダリングには、**Chromium（ブラウザ）を使用**している
- ファイル操作などPCのリソースへのアクセスには**Node.jsを使用**している
- 同じくWeb技術で、モバイルアプリを制作するためのフレームワークである、CordovaはOS提供のブラウザを使用するのに対し、**ElectronのChromiumは内蔵**される形である
- GitHubによって開発された**オープンソースライブラリ（MITライセンス）**

# 環境構築
*私の環境：*
　*MacOS: Sierra 10.12.6*
　*Node.js: v6.11.3*
　*Electron: 1.7.6*

## Node.jsをインストール
まずは**Node.js**のインストールが必要です。

先人の記事をご参考に。
for mac: [Macにnode.jsをインストールする手順。](http://qiita.com/akakuro43/items/600e7e4695588ab2958d)
for windows: [Node.js の Windows へのインストールと npm の使い方](http://yohshiy.blog.fc2.com/blog-entry-307.html)



```
$ node -v
v6.11.3
```
と

```
$ npm -v 
3.10.10
```
を実行してバージョン番号が表示されることが確認できればOKです。

## Electronインストールの前準備
アプリケーション作成のために、ディレクトリを作成します。

```
$ mkdir [アプリケーション名]
```

**npm**を用いて**Electron**のインストールを行いますので、
まずは、先ほど作成したディレクトリに移動し、
以下のコマンドで、**package.json**を作成します。

```
$ cd [アプリケーション名]
$ npm init
```

いくつか質問が出て来ますので、いい感じに回答orエンターを押し、
**entry point**の質問のところだけ、**main.js**と回答します。

[npmの公式ドキュメントはコチラ](https://docs.npmjs.com/)

すると、**package.json**が出来上がり、以下のような内容になるかと思います。

```package.json
{
  "name": "electron_hello_typhoon",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "torisan_kanasan",
  "license": "MIT"
}
```

## Electronのインストール
次に、**Electron**を以下のコマンドでインストールします。

```
$ npm install electron --save-dev
```

そして、

```
$ ./node_modules/.bin/electron
```
で、**Electron**を起動してみます。

<img width="800" alt="スクリーンショット 2017-09-17 20.56.56.png" src="https://qiita-image-store.s3.amazonaws.com/0/151106/b66f06e8-e5cc-3d68-5749-6ee2a88d2138.png">

このような画面が表示されれば、環境構築完了です！


# Hello ~~World!~~ Typhoon!してみる
先ほど、**npm init**した際に、**entry point**として入力したファイル（main.js）が、
**Electron**起動時のエントリポイントとなるので、**main.js**を作成します。

```main.js
const {app, BrowserWindow} = require('electron');
const path = require('path');
const url = require('url');
let win;

function createWindow () {
  // ブラウザウィンドウを作成します。
  win = new BrowserWindow({width: 800, height: 600});

  //アプリケーションのindex.htmlをロードします。
  win.loadURL(url.format({
    pathname: path.join(__dirname, 'index.html'),
    protocol: 'file:',
    slashes: true
  }));

  //ウィンドウが閉じられると発生します。
  win.on('closed', () => {
    win = null
  });

}
//このメソッドは、Electronが初期化を終了し、ブラウザウィンドウを作成する準備ができたときに呼び出されます。
app.on('ready', createWindow);

//すべてのウィンドウが閉じられると終了します。
app.on('window-all-closed', () => {
  // MacOSでは、ユーザーがCmd + Qで明示的に終了するまでプロセスは生き続ける
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

app.on('activate', () => {
  // MacOSでは、ウィンドウを全て閉じても、プロセスは生き続け、
  // ドックアイコンをクリックすると、再表示される。
  if (win === null) {
    createWindow();
  }
});
```
[Electron公式のQuick Startより](https://github.com/electron/electron/blob/v1.7.6/docs/tutorial/quick-start.md)

最後に、起動時に読み込むHTMLファイルとして、**index.html**を作成します。

```index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello Typhoon!</title>
  </head>
  <body>
    <h1>Hello Typhoon!</h1>
  </body>
</html>
```

以下のコマンドで、アプリケーションを起動してみます。

```
$ ./node_modules/.bin/electron .
```

<img width="798" alt="スクリーンショット 2017-09-17 20.39.12.png" src="https://qiita-image-store.s3.amazonaws.com/0/151106/6df4c19c-e08b-a59b-17db-2198197220c2.png">

表示されましたね！

# おまけ（Developer Toolsの起動）
上記**main.js**の**function createWindow()**内に、

```js
win.webContents.openDevTools();
```

を追記することで、起動時に**Developer Tools**を表示することもできます！

<img width="797" alt="スクリーンショット 2017-09-17 20.40.09.png" src="https://qiita-image-store.s3.amazonaws.com/0/151106/ddb4ac80-24aa-f8b4-aa74-2f1df01f5726.png">

今日はここまで〜。