header image
header image

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

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

 

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

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

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

 

 

Electronについて

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

Runtime:Node.js , Chronium

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

 

https://electron.atom.io/

これがelectronのサイトです。

electron-site.png 引用元: 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>

それでは、起動

electron .

 

electron hello world

無事起動できました!!

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