今回はWebの技術でデスクトップアプリが作れると噂のElectron に関する記事です。
こんなツールないかなぁと思って、 探すしてダウンロードして使ってみたり するのですが、 「イマイチイメージと違うな」 ということが常日頃からあり、 自分で作れたらなぁと思い前々から気になっているのが、 このElectronでした。
せっかく紹介するので、少しElectronについて調べてみました。
Electronについて
開発元:ソースコード管理サービスでおなじみgitHub
Runtime:Node.js , Chronium
これが基本情報。 情報不足感は否めませんが、 Slack,AtomなどもこのElectronで作られていて、 今熱い技術のようです。
これがelectronのサイトです。

はい、英語です。
何が書かれているかというと、
思ったより簡単。 Webサイトを作るのと同じ要領で、Desktopアプリも作れます。 Electronはそのためのフレームワークで、 JavaScript, HTML, CSSなどで実装できます。 しかもElectronがhard partsをうまいことしてくれるので 開発者はアプリケーション開発に集中できます。
と書いてあります。
と、まあ調査はこれくらいにして、 題にもあるようにまずはインストール。 OSはMacです。
手順は難しくなく、 ①node.jsのインストール ②electronのインストール でインストールは完了ですが、 今回は動作確認もHello Wordlまでは行きましょうか。
インストール ( For Mac )
それでは早速、インストールから、 この手順ではあとあと、 nodeのバージョンを変更できるように、 nvmもインスートールします。
①nvmインストール
インストール
curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.1/install.sh | bash
インストールできたらバージョン確認
$nvm --version
0.33.1
①Node.jsインストール
先ほどインストールしたnvmでnodeをインストール https://nodejs.org/ja/ このサイトによると、現在の推奨バージョンが6.10.2だそうなので、 それをインストール
nvm install 6.10.2
②Electronインストール
npm -g install electron-prebuilt
npm はnode.jsパッケージ管理ツールですので、 それを使ってElelctronをインストールします。 これだけでElectronを起動できるので、
特に自分で作成したプロダクトをパッケージングする必要がないのであれば、 これだけでOK。
ですが、 このあと作ったアプリをパッケージしたいので、 そちらのツールもインストール。
npm -g install electron-packager
③HelloWorld!!
インストールも完了したので、 早速動かしてみましょう。
mkdir sample
npm init -y
これをすると下のようなpackage.jsonファイルが出来上がります。 デフォルトだと下記のようにindex.jsが起動時に 実行されるファイルになります。
{
"name": "sample",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}
まだ、index.jsがないので 作成しましょう。
index.jsはコチラを参考に作成 https://electron.atom.io/docs/tutorial/quick-start/
const {app, BrowserWindow} = require('electron')
const path = require('path')
const url = require('url')
let win
function createWindow () {
win = new BrowserWindow({width: 800, height: 600})
win.loadURL(url.format({
pathname: path.join(__dirname, 'index.html'),
protocol: 'file:',
slashes: true
}))
// とりあえずデベロッパーツールはいらない、メニューからでも起動できるので
//win.webContents.openDevTools()
win.on('closed', () => {
win = null
})
}
app.on('ready', createWindow)
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit()
}
})
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>
We are using node <script>document.write(process.versions.node)</script>,
Chrome <script>document.write(process.versions.chrome)</script>,
and Electron <script>document.write(process.versions.electron)</script>.
</body>
</html>
それでは、起動
electron .

無事起動できました!!
無事インストール&動作確認済んだので次は 実際に電卓を作ります。