Electronアプリ入門 – 最初のシンプルなアプリを動かしてみる

2020年7月14日

2020年8月31日

WRITER

ぱーくん

この記事を書いている人 - WRITER -

ぱーくん

ご訪問ありがとうございます(^^)
副業でネットビジネスに取り組んでいるぱーくんと申します。

激務でも増えない給料に失望し、将来のために別の収入源が欲しい！の一心でネットビジネスをはじめ、2018年4月に20万円達成。

ひと月36万アクセスあるサイトを作ったノウハウは無料で公開中。　⇒⇒コチラ
ネットビジネスで未来を夢見れる方を一人でも増やしたいと思っています。

誰でも最初は初心者。
【やってみたいけど、初心者だから不安】
という方は、ぜひお気軽にお問合せください♪

詳しいプロフィールはこちら

Electronでアプリを開発しようと思ったときに、最初にやるのは、シンプルな構成でまず動かしてみることですよね。

今回は、そのやり方を解説します。

以前の記事では、electron公式のサイトのアナウンスされている、サンプルアプリの動かし方と、デバッグ環境の用意の仕方を解説したので、参考にしてください。

1 Node.jsの用意
2 electronのインストール
3 シンプルなアプリの作成

Node.jsの用意

最初にnode.jsをインストールします。

electronはnode.jsで動くからです。

nodeのインストール方法はここを参照してください。

Windowsでのnode.jsとnpmのインストールと基本的なセットアップ

electronのインストール

node.jsをインストールしたら、Node.jsのコマンドプロンプトを立ち上げます(windowsの場合)。

その後、アプリを開発したいディレクトリを作成し、移動します。electron01というディレクトリ配下で開発していくとしたら以下のコマンドを打ちます。

mkdir electron01

cd electron01

mkdir electron01

cd electron01

で、次のコマンドで、空の新しいnodeプロジェクトを作成・初期化します。

すると、プロジェクトフォルダの直下に「package.json」が出来上がります。

npm init

npm init

さて、空のnodeプロジェクトができたので、electronのライブラリを使えるようにしましょう。

npm install electron -gと打つと、node環境全体としてelectronのライブラリがインストールされます。

全体で使える反面、プロジェクトごとにバージョンの異なるelectronで開発できません。

新しいelectronのバージョンで開発したい場合もありえますので、プロジェクトのローカルにelectronをインストールしましょう。

ローカルにインストールするには、以下のコマンドを使います。

npm install --save-dev electron

1	npm install --save-dev electron

シンプルなアプリの作成

最小構成は以下のような感じなので、main.jsとindex.htmlを作ってみよう。

your-app/
├── package.json
├── main.js
└── index.html

your-app/

├── package.json

├── main.js

└── index.html

main.jsを作成する

main.js

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()
  }
})

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を作成する

index.html

    <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).

<title>Hello World!</title>

<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 .”
の部分を追加することです。

package.json

{
"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"
}
}