はじめに

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

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

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

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

Electronとは

Electron（エレクトロン）は、GitHubが開発したオープンソースのソフトウェアフレームワークである。
ChromiumとNode.jsを使っており、HTML、CSS、JavaScriptのようなWeb技術で、macOS、Windows、Linuxに対応したデスクトップアプリケーションをつくることができる。
Atom、Slack、Visual Studio Codeなどで使用されている。公式サイト
wikipediaより

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

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をインストールする手順。
for windows: Node.js の Windows へのインストールと npm の使い方

$ 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の公式ドキュメントはコチラ

すると、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を起動してみます。

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

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より

最後に、起動時に読み込む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 .

表示されましたね！

おまけ（Developer Toolsの起動）

上記main.jsのfunction createWindow()内に、

win.webContents.openDevTools();

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

今日はここまで〜。

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