0.Electronとは
Electronは、GitHubが開発したオープンソースのソフトウェアフレームワークである。(Wikiより)
以下は自己解釈
Electronとは、みんな大好きGithubが作ったWeb系言語でクロスプラットフォームなデスクトップアプリケーションが作れる素敵なものです。
デメリットとしては、コアがChromiumなので動作が少し重いところです。
Electronで開発された有名なアプリケーション
( 上記のリンクにある全てのアプリケーションで使われているらしい)
1.今回の実装環境
OS:Windows 10 Home
バージョン:1909
(CPU:i7-8700H RAM:16GB システム:64bit)
2.Node.jsのインストール
Electronのインストールには、npmを使います。ですが、Windows系ではnpmコマンドは使えないため、下記のリンクからNode.jsをインストールします。
今回は64-bitをクリックしてWindows installerをダウンロードします。
ダウンロードしたファイルを実行し、手順に従って進んでいきます。
今回は使用しないのでチェックする必要はありません。
ですが、今後『Chocolatey』が必要になる場合はチェックしてください。
コマンドプロンプトで npm を実行して、下図のようになれば成功です。
2.Electronをインストール
Electronは、バージョンアップにより、不具合が出る可能性があります。そのため、プロジェクトごとにインストールします。
mkdir electron (electronというディレクトリを作成)
cd electron (electronに移動)
npm init (初期化)
package name:firstproject (名前を付ける)
(テストなのでエンター連打で詳細入力を飛ばす)
npm i --save-dev -D electron
オプションの説明
i <= install
-D <= インストール先を現在のディレクトリに指定
--save-dev <= devDependencies欄 にパッケージ名が記録
3.HelloWorldを作る
まず、package.jsonのscript部分を編集します。
{
"name": "your-app",
"version": "0.1.0",
"main": "main.js",
"scripts": {
"start": "electron ."
}
}
表示するindex.htmlと処理するmain.jsを記述します。
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</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>
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()
}
// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.whenReady().then(createWindow)
// Quit when all windows are closed.
app.on('window-all-closed', () => {
// On macOS it is common for applications and their menu bar
// to stay active until the user quits explicitly with Cmd + Q
if (process.platform !== 'darwin') {
app.quit()
}
})
app.on('activate', () => {
// On macOS it's common to re-create a window in the app when the
// dock icon is clicked and there are no other windows open.
if (BrowserWindow.getAllWindows().length === 0) {
createWindow()
}
})
// In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and require them here.
以上の2つのファイルをプロジェクトフォルダに作成してください
4.実行する
プロジェクトディレクトリの中で以下を実行する。
npm start
できましたー！！
5.まとめ
以上でElectronの開発を始めることができます。 主に、index.htmlとmain.jsを編集して自由に作成してみます、
