雑多なブログ

音楽や語学、プログラム関連の話題について書いています

electronのインストール

nodeを触るようになって、electronの事も気になってきたので少し触ってみました。
まずはインストールとhello worldするところまでをまとめてみました。
今後色々やってみようと思います。

目次

electronのインストール

nodeはnodenvを使ってインストールします。
まだインストールが住んでいない方は、下記ページを参考にしてみてください。

cufl.hateblo.jp

プロジェクトフォルダを作成します。

mkdir hello-electron
cd hello-electron 

electronをインストールします。

npm install electron

プロジェクトの初期設定を行います。

npm init -y

package.jsonの内容を一部変更します。

{
  "name": "hello-electron",
  "version": "1.0.0",
  "description": "",
  "main": "src/main.js",
  "dependencies": {
    "electron": "^9.0.0"
  },
  "devDependencies": {},
  "scripts": {
    "start": "electron ."
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

エントリーポイントをデフォルトの index.js から src/main.js に変更し、scriptsセクションについてもデフォルトの内容を消して、 "start": "electron ." に変更しました。

サンプルアプリの作成

公式のチュートリアルを参考に main.js を実装します。

src/main.js

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

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

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

app.whenReady().then(createWindow)

index.html を作成します。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello electron!</title>
    <!-- https://electronjs.org/docs/tutorial/security#csp-meta-tag -->
    <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
  </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を実行します。

npm start

f:id:uc_ebuc:20200519182517p:plain
electronテストアプリの実行(1)

参考情報

Writing Your First Electron App | Electron