Electronアプリ入門 – 最初のシンプルなアプリを動かしてみる
副業でネットビジネスに取り組んでいるぱーくんと申します。
激務でも増えない給料に失望し、将来のために別の収入源が欲しい！の一心でネットビジネスをはじめ、2018年4月に20万円達成。
ひと月36万アクセスあるサイトを作ったノウハウは無料で公開中。 ⇒⇒コチラ
ネットビジネスで未来を夢見れる方を一人でも増やしたいと思っています。
誰でも最初は初心者。
【やってみたいけど、初心者だから不安】
という方は、ぜひお気軽にお問合せください♪
Electronでアプリを開発しようと思ったときに、最初にやるのは、シンプルな構成でまず動かしてみることですよね。
今回は、そのやり方を解説します。
以前の記事では、electron公式のサイトのアナウンスされている、サンプルアプリの動かし方と、デバッグ環境の用意の仕方を解説したので、参考にしてください。
Node.jsの用意
最初にnode.jsをインストールします。
electronはnode.jsで動くからです。
nodeのインストール方法はここを参照してください。
electronのインストール
node.jsをインストールしたら、Node.jsのコマンドプロンプトを立ち上げます(windowsの場合)。
その後、アプリを開発したいディレクトリを作成し、移動します。electron01というディレクトリ配下で開発していくとしたら以下のコマンドを打ちます。
1 2 3 | mkdir electron01 cd electron01 |
で、次のコマンドで、空の新しいnodeプロジェクトを作成・初期化します。
すると、プロジェクトフォルダの直下に「package.json」が出来上がります。
1 | npm init |
さて、空のnodeプロジェクトができたので、electronのライブラリを使えるようにしましょう。
npm install electron -gと打つと、node環境全体としてelectronのライブラリがインストールされます。
全体で使える反面、プロジェクトごとにバージョンの異なるelectronで開発できません。
新しいelectronのバージョンで開発したい場合もありえますので、プロジェクトのローカルにelectronをインストールしましょう。
ローカルにインストールするには、以下のコマンドを使います。
1 | npm install --save-dev electron |
シンプルなアプリの作成
最小構成は以下のような感じなので、main.jsとindex.htmlを作ってみよう。
1 2 3 4 | your-app/ ├── package.json ├── main.js └── index.html |
main.jsを作成する
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | const { app, BrowserWindow } = require('electron') function createWindow () { // Create the browser window. const win = new BrowserWindow({ width: 800, height: 600, webPreferences: { nodeIntegration: true } }) // and load the index.html of the app. win.loadFile('index.html') // Open the DevTools. win.webContents.openDevTools() } app.whenReady().then(createWindow) app.on('window-all-closed', () => { if (process.platform !== 'darwin') { app.quit() } }) app.on('activate', () => { if (BrowserWindow.getAllWindows().length === 0) { createWindow() } }) |
index.htmlを作成する
1 2 3 4 5 6 7 8 9 | <title>Hello World!</title> <!-- https://electronjs.org/docs/tutorial/security#csp-meta-tag --> <h1>Hello World!</h1> We are using node document.write(process.versions.node), Chrome document.write(process.versions.chrome), and Electron document.write(process.versions.electron). |
package.jsonを変更
最初にデフォルトで出来たpackage.jsonを変更します。
変更箇所は、
“main”: “main.js”,
の部分と、
“start”: “electron .”
の部分を追加することです。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | { "name": "electron01", "version": "1.0.0", "description": "", "main": "main.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "start": "electron ." }, "author": "", "license": "ISC", "devDependencies": { "electron": "^9.1.0" } } |
で、
1 | npm start |
をコマンドプロンプトで打つと、アプリが起動します。
副業でネットビジネスに取り組んでいるぱーくんと申します。
激務でも増えない給料に失望し、将来のために別の収入源が欲しい！の一心でネットビジネスをはじめ、2018年4月に20万円達成。
ひと月36万アクセスあるサイトを作ったノウハウは無料で公開中。 ⇒⇒コチラ
ネットビジネスで未来を夢見れる方を一人でも増やしたいと思っています。
誰でも最初は初心者。
【やってみたいけど、初心者だから不安】
という方は、ぜひお気軽にお問合せください♪
