Electronとは？
Electon は Github社がテキストエディタの [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
node.jsの最新版をインストール
既存のバージョンのnode.jsでElectronを動かそうと四苦八苦していましたが、結局これが一番重要
$ brew uninstall node
$ brew install node
$ brew link --overwrite --dry-run node # brew link node で指示されたコマンド
これで最新版のnode.jsがインストールできます。
$ which node
$ which npm
でコマンドのパスが返ってこればOKです。
Electronのインストール
npm install -g electron-prebuilt
これが完了すると、
$ which electron
のコマンドのパスが返ってきます。
※ 失敗例（node.js最新版インストール前）
最新版でないnode.jsを使用してElectronのインストールを行っていました。
$ npm install -g electron-prebuilt
とすると、
npm ERR! 404 'electron-prebuild' is not in the npm registry.
と出て、インストールできませんでした。
ElectronでHello World
新規プロジェクトの作成
ElectronApp
├── index.html
├── main.js
└── package.json
Electronでは、Railsのようにnewコマンドでプロジェクトが一式作成されるわけではなさそうです。
素直に作業ディレクトリを作成して、そこに書いていきます。
$ mkdir ElectronApp
$ cd ElectronApp
$ npm init -y
最後の $ npm init -y をすることで、ディレクトリ内に 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 を作成
'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) でデスクトップアプリを作って配布するまで」では、最初のアプリケーションをコントロールするモジュールの部分が、
// アプリケーションをコントロールするモジュール
var app = require('app');
var BrowserWindow = require('browser-window');
となっているのですが、仕様変更により、
// アプリケーションをコントロールするモジュール
var electron = require('electron');
var app = electron.app;
var BrowserWindow = electron.BrowserWindow;
と記載しないと正しく動きませんでしたので、注意してください。
アプリ表示部分のindex.htmlを作成
表示部分は、Webアプリケーションでよく使用するHTMLの雛形と全く同じです。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ElectronApp</title>
</head>
<body>
<p>Hello World</p>
</body>
</html>
アプリ起動
アプリの起動は、以下のコマンドで実行します。
$ cd ..
$ electron ElectronApp/
以下のように、デスクトップアプリケーションが表示されれば成功です。
Electronを触ってみた感想
Webアプリケーションと使う技術や書き方がほとんど同じなので、RailsなどでWebアプリケーションを作り、そのデスクトップ版をElectronで作るといったことが非常にスムーズにできそうです。
Webアプリケーションでは、その特性上、どうしてもローカルファイルとの連携が難しい部分があったのですが、これであれば、Webの技術もそのまま流用出来て良さそうです。
スマートフォン用のアプリケーションもElectronで作れるようになると理想的ですね。
おまけ
フォローお待ちしています！
Qiita: Carat 吉崎
twitter：@carat_yoshizaki
はてなブログ：Carat COOのブログ
機械学習をマンツーマンで学べる家庭教師サービス「キカガク」
「数学→プログラミング→Webアプリケーション」まで一気に学べる「キカガク」に興味のある方はお気軽にご連絡ください。