Macアプリを作成しようと思い立ったけれど、Xcodeは難易度が（日本語じゃない）高かったので
今流行りのelectron（VScodeとか）で作ってみることにした。
環境
・M1Mac
・nodejs 15.11.0
node.jsをインストールする
以下サイトからダウンロードしてぽちぽちするだけ。（Linuxと違って便利だな。）
https://nodejs.org/ja/download/
一応パスが通っているか確認する。
node -velectronのインストール
とりあえず作業フォルダをつくる。
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
コメント