どん底から這い上がるまでの記録

どん底から這い上がりたいけど這い上がれない人がいろいろ書くブログ(主にプログラミング)

Electron超入門

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

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

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

 

関連リンク

Electron | Build cross platform desktop apps with JavaScript, HTML, and CSS.

Node.js

Writing Your First Electron App | Electron

インストール

Node.js

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

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

$ node -v
v8.11.3

Electron

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

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

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

cd pug-tutorial

次に、Node.jsのパッケージマネージャのnpmpythonでいう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は1つの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の1行を付け加えます。

Electronの起動

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

npm start

f:id:pytry3g:20180727225912p:plain

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

続き

www.pytry3g.com