Electronの環境構築

技術

Macアプリを作成しようと思い立ったけれど、Xcodeは難易度が(日本語じゃない)高かったので
今流行りのelectron(VScodeとか)で作ってみることにした。

環境

・M1Mac
・nodejs  15.11.0

node.jsをインストールする

 以下サイトからダウンロードしてぽちぽちするだけ。(Linuxと違って便利だな。)
  https://nodejs.org/ja/download/
 一応パスが通っているか確認する。

node -v

electronのインストール

 とりあえず作業フォルダをつくる。

mkdir work

あとは作業フォルダで以下のコマンドを実行するだけ。

npm init -y
npm i --save-dev electron

セットアップが終わったらサンプルコードを動かしてみる。
できたらworkフォルダ内にsrcフォルダを作ってサンプルコードを動かしてみる。
サンプルコードはelectron公式にある(https://electronjs.org/docs/tutorial/quick-start)

以下の内容でindex.htmlを作成。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
    <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
</head>
<body style="background: white;">
    <h1>Hello World!</h1>
    <p>
        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>.
    </p>
</body>
</html>

以下の内容でindex.jsを作成。

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

function createWindow () {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  })

  win.loadFile('index.html')
}

app.whenReady().then(createWindow)

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', () => {
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow()
  }
})


完成したらworkフォルダで実行コマンドを叩く。

npx electron src

Hello worldが表示されればOK

技術
スポンサーリンク
Probiees

コメント

タイトルとURLをコピーしました