Electron超入門 - どん底から這い上がるまでの記録

デスクトップアプリケーションを開発できるElectronを使ってみました。

Electronはweb系の技術である（HTML, CSS, JavaScript）を用いて、クロスプラットフォーム向けにデスクトップアプリケーションを作ることができます。すなわち、ElectronひとつでWindows, Mac, Linux向けのアプリケーションを開発することができ、Atom, SlackやVisual Studio CodeなどはElectronで実装されています。

この記事では、Windowsでの環境構築から、簡単なプログラムを書いて動作させるところまでをやってみます。

関連リンク
インストール
- Node.js
- Electron
プログラムを書いてみる
続き

インストール

Node.js

Electronを使うにはNode.jsが必要なので、こちらからインストールします。ダウンロードしたファイルからインストーラを起動して、画面の説明に従って進めていくだけです。

インストールが終了したら、コマンドプロンプトを開いてnode -vで、インストールできたか確認してみます。バージョンが表示されたら成功です。

$ node -v
v8.11.3

Electron

Electronをインストール前に、いくつかやっておくことがあります。

まず、アプリケーション用のディレクトリを作ってそこに移動します。

今回は、pug-tutorialという名前にしました。

cd pug-tutorial

次に、Node.jsのパッケージマネージャのnpm、pythonでいうpipを使ってpackage.jsonを作ります。

npm init -y

すると、以下のようなpackage.jsonが生成されます。

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

ここで、Node.jsのパッケージマネージャのnpmを使ってElectronのインストールをします。書き方は、npm パッケージ名です。

npm i -D electron@latest

上のコマンドはエイリアスを使ってインストールしています。

i -> install, -D -> --save-devを表します。

--save-devとすると、package.jsonのdevDependenciesにパッケージが追加されます。

devDependenciesは開発者のためのもので、その開発者が作ったモジュールを利用者がインストールするときはdevDependenciesにあるパッケージはインストールされない。

インストールが完了したら、試しに以下のコマンドで起動してみます。

npx electron

npxはローカルにインストールした、npmパッケージを実行するためのコマンドです。

実行すると、こんな画面が出てきます。

f:id:pytry3g:20180727221831p:plain

Electronのインストールは無事完了しました。

プログラムを書いてみる

Electronのインストールができたので、簡単なHelloWorldのプログラムを書いてみます。

まずは、index.jsにHTMLを表示するだけのプログラムを書いてから、アプリケーション起動時に読み込まれるindex.htmlを作ってみます。

ディレクトリの構成は最終的にこんな感じになります。

pug-tutorial/
    /node_modules
    package.json
    index.js
    index.html

index.js

const {app, BrowserWindow} = require('electron')
// appはアプリケーションをコントロールするために使われる
// BrowserWindowは１つのWebページを生成する

  // Keep a global reference of the window object, if you don't, the window will
  // be closed automatically when the JavaScript object is garbage collected.
  let win

  function createWindow () {
    // Create the browser window.
    win = new BrowserWindow({width: 800, height: 600})

    // and load the index.html of the app.
    win.loadFile('index.html')

    // Open the DevTools.
    //win.webContents.openDevTools()

    // Emitted when the window is closed.
    win.on('closed', () => {
      // Dereference the window object, usually you would store windows
      // in an array if your app supports multi windows, this is the time
      // when you should delete the corresponding element.
      win = null
    })
  }

  // This method will be called when Electron has finished
  // initialization and is ready to create browser windows.
  // Some APIs can only be used after this event occurs.
  // 初期化処理が終了したときにcreateWindowを呼び出してウィンドウを生成する。
  app.on('ready', createWindow)

  // Quit when all windows are closed.
  app.on('window-all-closed', () => {
    // On macOS it is common for applications and their menu bar
    // to stay active until the user quits explicitly with Cmd + Q
    if (process.platform !== 'darwin') {
      app.quit()
    }
  })

  app.on('activate', () => {
    // これはmacOS限定
    // On macOS it's common to re-create a window in the app when the
    // dock icon is clicked and there are no other windows open.
    if (win === null) {
      createWindow()
    }
  })

index.html

HelloWorldと表示するだけ。

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

package.jsonの変更

最後にpackage.jsonのscriptsのところを少し変更します。

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "electron ."
  },

startの１行を付け加えます。

Electronの起動

ここまでで、Electron起動の準備は整ったので、次のコマンドでElectronを起動します。

npm start

f:id:pytry3g:20180727225912p:plain

無事に起動できました。今回はここまで。

関連リンク