最近記事が全然書けていませんでしたが、時間に余裕が出てきたのでようやく書けました。 個人的に作りたいものがあり、それをElectronで作成しようと思ってます。 その第一弾として、Electonのインストール方法からHello Worldまでの手順をまとめてみました。

Electronとは

デスクトップアプリケーションを作成するためのフレームワークです。 デスクトップアプリケーションを作成する方法はC言語やJavaなどでも元々できましたが、 ElectronはWeb技術(HTML + JavaScript + css)で作れるというのが特徴です。 しかも、Windows, MacOS, Linuxのプラットフォームでも動作させることができます！

これにより、学習コストや開発コストを削減できるというわけです。 素晴らしい。。。

Electronは元々、GitHub社のAtomというアプリケーション(当時はatom-shellという名前)のために作られたフレームワークでした。 今ではSlackやVisual Studio Code, Kobitoなど色々なアプリケーションでElectronが採用されています。

インストール

node.jsのインストール

windowsの場合

まずは以下のプログラムをダウンロードし、node.jsのインストールを行います。 node.js

macの場合

macの場合はターミナルから以下のコマンドでnode.jsをインストールできます。

$ brew install node

node.jsの動作確認

$ node -v

上記のコマンドを打って「v6.10.0」などのバージョンが表示されたら成功です。 windowsだとコマンドプロンプトから、 macだとターミナルから打つことで確認ができます。

プロジェクトの作成。

では早速、electronのインストールを行います・・・とその前に、 package.jsonという設定ファイルを使ってプロジェクトの設定を行います。

node.jsではnpmというパッケージマネージャーが付属しており、 package.jsonという設定ファイルを使ってプロジェクトの設定を行うようになっています。

プロジェクトの作成

$ mkdir electron_sample
$ cd electron_sample
$ npm init -y

package.jsonが作成されます。 私の場合だと中身はこのようになっておりました。

{
  "name": "electron_sample",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

index.jsが最初に呼び出されるようになってます。

electronのインストール

プロジェクトの作成・初期化をした上で、electronのインストールを行います。

$ npm install electron@1.6.1 --save-dev --save-exact

コマンドの解説としては、

  • electron@【イントールするバージョン】
  • --save-dev →開発時にしか使わない場合に指定。利用者にとっては不要なパッケージ。package.jsonのdevDependenciesに記載される。
  • --save-exact →パッケージインストール時にバージョンを固定。

インストールが完了したら、electronの動作確認を行います。

$ ./node_modules/.bin/electron

このような画面が立ち上がれば成功です！ electron

package.jsonにも、

  "devDependencies": {
    "electron": "1.6.1"
  }

が追記されています。

ちなみにelectronはgithubで公開されており、 2017/10/08時点だと、v1.8.1がbeta, 1.7.8が最新みたいです。 github - electron

Hello World作成。

では、Hello Worldをやって見ましょう。 まずは以下のようにファイルを設置してください。

electron_sample/
├── package.json
├── index.js
└── index.html

それぞれのファイルの中身は以下のようになります。

index.js

// electronのモジュールをロードする
var electron = require('electron');
var app = electron.app;
var BrowserWindow = electron.BrowserWindow;

let win;

/**
 * windowを表示する
 */
function createWindow() {
  win = new BrowserWindow({
    width: 800,
    height: 600
  });
  win.loadURL('file://' + __dirname + '/index.html');
  win.on("closed", () => { win = null; });
}

/*
以下に、アプリケーション全体のライフサイクルを記述する。
*/
// 全てのウィンドウが閉じられた時に呼び出される。
app.on('window-all-closed', function() {
  if (process.platform != 'darwin') {
    app.quit();
  }
});

// Electronが起動し、初期化が完了した時に呼び出される。
app.on('ready', createWindow);

// アプリケーションが非活性化状態から活性化した時に呼び出される。
// macOS限定のライフサイクルで、Dockからアイコンをクリックした時に発生する。
// 詳しくはこちらを参照。 https://electron.atom.io/docs/api/app/
app.on("activate", () => {
  if (win === null) {
    createWindow();
  }
});

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>hello, world</title>
  </head>
  <body>
    <h1>Hello World!</h1>
  </body>
</html>

コードは違いますが、チュートリアル quick-startは公式でも公開されております。

Hello Worldを実行

以下のコマンドで実行します。

$ node_modules/.bin/electron .

Webの技術でデスクトップアプリケーションを作れるのはいいですね。 筆者は学生のころC言語の<windows.h>などでWindowsのアプリケーションを作ってましたが、 その頃と比べて格段に組みやすいです。 クロスプラットフォームの技術もどんどん進化していきますね。

余談

node.jsのバージョンマネージャーにnodebrewというものがあり、

$ nodebrew install-binary v6.10.0
$ nodebrew use v6.10.0
$ node -v

などと打つことによりnode.jsのバージョンを切り替えることができます。

node.jsは６ヶ月ごとにメジャーバージョンをリリースすることをポリシーにしているということみたいです。 2017/10/08時点での最新が8.6.0なので、v6を使っているこの記事はあっという間に古くなってしまいそうですね。。。

なお、node.jsの各バージョンは時期に応じてCURRENT, ACTIVE LTS, MAINTENANCEで分かれ、 CURRENT → 新機能の開発を積極的に行う。安定性が低い。 ACTIVE LTS → 安定性が高い。 MAINTENANCE → 重大なセキュリティやばぐの修正のみをサポート。

サポート状況を表しているようです。

参考

以下のサイト様の情報を参考にさせていただきました、ありがとうございます。