Help us understand the problem. What is going on with this article?

Electronを使ってjavascriptでデスクトップアプリを作成。

More than 1 year has passed since last update.

はじめに

Javascriptでデスクトップアップアプリを開発できるElectronに触れてみた。

今回はチュートリアルを進めつつ、コードを読み解いていく

開発環境の立ち上げ

まずはプロジェクトのディレクトリを作成。package.jsonの作成をする

package.json
{
  "name": "test-electron",
  "version": "1.0.0",
  "main": "main.js",
  "author": "mikinovation",
  "license": "MIT",
  "scripts": {
    "start": "electron ."
  }
}

続いてelectronのインストール

yarn add --dev electron 

ルートディレクトリにmain.jsを作成し、サーバーサイドのコードを書いていく。

main.js
const { app, BrowserWindow } = require('electron')

//まずはアプリケーションを操作するのに必要なwindowオブジェクトを入れる変数winを宣言

let win

function createWindow () {
  // BrowserWindowのインスタンスを作成し、デスクトップアプリを立ち上げる。widthとheightで画面の大きさを定義。
  // nodeIntegrationがfalseになっているとクライアント側とprocessやrequireといった低レイヤーへのアクセスが
  // できないので気をつける。使わないのであればセキュリティー的によくないのでfalseにしておくように。
  // デフォルトもfalseになっているようである。
  win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  })

  // index.htmlファイルを読み込む。
  win.loadFile('index.html')

  // windowを開いた際にデベロッパーツールを開く。chromeのデベロッパーツールぽい。
  win.webContents.openDevTools()

  // 画面が閉じられたときの処理。winに入っているオブジェクトを空にすることで画面を閉じることができる。
  win.on('closed', () => {
    win = null
  })
}

// 先程定義したcreateWindowを実行。アプリを起動したときに呼び出される処理。
app.on('ready', createWindow)

// アプリケーションを閉じたときの処理。
app.on('window-all-closed', () => {
  // macOSであるかどうかの判別。macでない場合はアプリを閉じる。
 // maxの場合はcmd+qが押されるまで起動され続ける仕様。
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', () => {
  // macOSではdock iconがクリックされて、他のwindowがない際には再度windownを開くような仕様。
  if (win === null) {
    createWindow()
  }
})

ひとまずサーバー側のメインのprocessのある処理が分かった。他にもデスクトップからのアクションによって処理を定義したい場合にはこのファイルに追記していく。

最後に下記の読み込むhtmlを定義してyarn startでアプリを起動できる。

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サーバー側の処理が分かった。これができるのであればReactやVueを使ってWebアプリケーションと全く同様にアプリ開発ができるようになりそう。

次回はそれも試してみようと思う。探してみるとボイラーテンプレートもあったのでそれを利用しての開発もしてみよう

MikihiroSaito
Javascript好きな人。将来ボホール在住エンジニア。 技術関連の記事をメインに情報を発信します。 Tyepscript、React、Vue(Nuxt)、Git、Docker等
https://blog.boholabo.com
yyphp
PHPerが毎週集まり、ざっくばらんに情報交換する雑談コミュニティ
https://yyphp.connpass.com/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away