Electronって何かおもしろそう

最近巷で流行っているElectronを触ってみました。

ElectronとはクロスプラットフォームのデスクトップアプリをJavaScriptやHTML、CSSで構築することができるフレームワークです。SlackデスクトップアプリやVisual Studio Codeなど開発者にはお馴染みのアプリもElectronで作られています。

最近とあるWebアプリをReactで開発し、アプリの性質上ブラウザをずっと閉じないで使ってもらいたかったのですが、ブラウザを立ち上げっぱなしにする習慣のないユーザのみなさまはどうしても用事が済むと閉じてしまい、アプリの便利さを享受してもらうことができませんでした。
そこで今回作ったWebアプリの資産を活かしつつ、PCに常駐するデスクトップアプリ(ブラウザアプリ)を作りたかったためElectronを試してみることにしました。といっても単純に前述のユーザのみなさまのために「ウィンドウの×ボタンを押しても閉じない」って仕組みを作りたかっただけなのですが(笑)

最近はどのフレームワークやツールを勉強するにしても初心者向けのサンプルアプリが充実しているのでとてもありがたいです。Electronも多分に漏れず「Electron Quick Start」というアプリが用意されていますのでそれを利用させてもらうことにしました。GitHubで公開されているのでcloneして実行してみます。

Electronアプリを動かすまでたった５分！

といってもNode.jsとgitがインストールされていることが前提です(・ω・)ノ
さあ四の五の言わずやってみます。手順はたったこれだけ↓

# GitHubからelectron-quick-startを取得 
$ git clone https://github.com/electron/electron-quick-start
# リポジトリのディレクトリに移動
$ cd electron-quick-start
# 依存ライブラリをインストール
$ npm install
# Electronアプリを起動
$ npm start

おおぉぉ、でた！

めちゃくちゃ簡単ですよね！？

さてこれだけだと芸が無いので少しソースを手直ししてみます。いまは単純にローカルファイルを表示しているので、ブラウザっぽく外部のWebサイトを表示するように変更します。

cloneしたソースを見ていただければわかりますが、まともにコードが記述されているのはelectron-quick-start/main.jsだけです。これもまた初心者にはありがたい。これだけシンプルだとどこで何をよろしくやってくれているのかがとても気になりますが、この段階ではとりあえず気にしないことにします。

electron-quick-start/main.js

// Modules to control application life and create native browser window
const {app, BrowserWindow} = require('electron')

// 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 mainWindow

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

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

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

  // Emitted when the window is closed.
  mainWindow.on('closed', function () {
    // 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.
    mainWindow = 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.
app.on('ready', createWindow)

// Quit when all windows are closed.
app.on('window-all-closed', function () {
  // On OS X 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', function () {
  // On OS X 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 (mainWindow === null) {
    createWindow()
  }
})

// In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and require them here.

コード量も少ないので何をしているのか何となく雰囲気はわかりますね。
createWindow内にあるmainWindow.loadFile('index.html')でウィンドウ内に表示するHTMLファイルを指定しています。これを外部のWebページを表示するように変更するには以下のように書き換えます。

mainWindow.loadURL('https://www.visionarts.co.jp/')

https://electronjs.org/docs/tutorial/security では、単純に↑のようにloadURLすると場合によってはXSSの危険があるので注意せよと書かれていますが、今回はお試しなのでそんなことは知らなかったことにします。

そして再起動

デフォルトウィンドウサイズだと弊社のウェブサイトは収まりませんでした(;^ω^)
サイズを変えたければBrowserWindow生成時に渡すオブジェクトのwidthプロパティとheightプロパティにpixel値で指定します。

// デフォルトサイズは 800x600
mainWindow = new BrowserWindow({width: 800, height: 600})

BrowserWindowにはその他にも数多くのプロパティがあります。詳細は以下を参照してください。
https://github.com/electron/electron/blob/master/docs/api/browser-window.md

ということで、今回はとりあえずElectronアプリを動かすことにフォーカスしてみました。
次回はもう少しいじっていきたいと思います。

ではまた。

[Electron] Electronアプリを5分で動かしてみる

Electronって何かおもしろそう

Electronアプリを動かすまでたった５分！