Electron の勉強がてら電卓を作ってみた~その① - インストール編 -~

今回はWebの技術でデスクトップアプリが作れると噂のElectron に関する記事です。

こんなツールないかなぁと思って、探すしてダウンロードして使ってみたりするのですが、「イマイチイメージと違うな」ということが常日頃からあり、自分で作れたらなぁと思い前々から気になっているのが、このElectronでした。

せっかく紹介するので、少しElectronについて調べてみました。

Electronについて

開発元:ソースコード管理サービスでおなじみgitHub

Runtime:Node.js , Chronium

これが基本情報。情報不足感は否めませんが、 Slack,AtomなどもこのElectronで作られていて、今熱い技術のようです。

https://electron.atom.io/

これがelectronのサイトです。

引用元: https://electron.atom.io/

はい、英語です。

何が書かれているかというと、

思ったより簡単。 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>