Electronでデスクトップアプリケーションを開発してみる：チュートリアル編

2023年12月22日 2023年12月22日

管理人

はじめに

　今回はElectronを使ってみました。デスクトップアプリケーションを開発してみたいなと思っています。他のソフトウェアのほうが良いかもしれませんが、とりあえずお試しです。

　JavaScriptやNode.jsの知識が必要になります。Node-REDのノードを作成するのに勉強中なので、ちょうどいいタイミングです。

　環境構築については頻繁にエラーが起きるので、いつもログをホームページに残しています。今回も実行できないことがありました。バージョンアップデートなどの影響ですかね...

▼環境設定についてはこちら。私はWindows環境で実行しています。

https://www.electronjs.org/ja/docs/latest/tutorial/tutorial-prerequisites

　Electronをとりあえず試したい方には、後述するfiddleで実行するのが簡単でお勧めです。

Electronのセットアップ

▼ここではこちらのページに沿って進めます。

https://www.electronjs.org/ja/docs/latest/tutorial/tutorial-first-app

　まずはnpmの初期化と、Electronのインストールを行います。

▼コマンドはこちら。npm initを実行すると設定について聞かれますが、設定せずに進めます。


 mkdir Electron && cd Electron
 npm init
 npm install electron --save-dev

▼VSCodeでフォルダを開きました。

　main.jsファイルを作成して、プログラムを追加します。

console.log('Hello from Electron 👋')

　package.jsonのscriptsに、以下の1行を追加します。

▼package.jsonのscriptsについては、こちらが参考になります。

https://qiita.com/righteous/items/e5448cb2e7e11ab7d477#scripts

　さて、このままチュートリアルに沿って以下のコマンドを入力するとエラーが出ます。


 npm run start

▼index.jsが見つからないというエラーですね。

　先程のコマンドでは、package.jsonの"main"に指定されているプログラムが実行されます。しかし、package.jsonの”main”はindex.jsになっています。チュートリアルではmain.jsになっていますね。

　ファイル名をindex.jsに変更すれば解決します。

▼VSCodeのターミナルで実行してみました。文字化けしていますが、ちゃんと表示されています。

アプリケーションを実行する

　先ほどはターミナルに文字を表示させましたが、次はアプリケーションとして実行させます。

▼以下のファイルをindex.htmlとして保存します。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
    <meta
      http-equiv="Content-Security-Policy"
      content="default-src 'self'; script-src 'self'"
    />
    <meta
      http-equiv="X-Content-Security-Policy"
      content="default-src 'self'; script-src 'self'"
    />
    <title>Hello from Electron renderer!</title>
  </head>
  <body>
    <h1>Hello from Electron renderer!</h1>
    <p>👋</p>
  </body>
</html>

▼以下のプログラムをindex.jsとして保存します。チュートリアルとはファイル名が異なるのでご注意ください。

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

const createWindow = () => {
  const win = new BrowserWindow({
    width: 800,
    height: 600
  })

  win.loadFile('index.html')
}

app.whenReady().then(() => {
  createWindow()
})

　先ほどのコマンドを再度実行してみましょう。