Electronを使ってjavascriptでデスクトップアプリを作成。
8814 ワード
はじめに
Javascriptでデスクトップアップアプリを開発できるElectronに触れてみた。
今回はチュートリアルを進めつつ、コードを読み解いていく
開発環境の立ち上げ
まずはプロジェクトのディレクトリを作成。package.jsonの作成をする
package.json
{
"name": "test-electron",
"version": "1.0.0",
"main": "main.js",
"author": "mikinovation",
"license": "MIT",
"scripts": {
"start": "electron ."
}
}
続いてelectronのインストール
yarn add --dev electron
ルートディレクトリにmain.jsを作成し、サーバーサイドのコードを書いていく。
main.js
const { app, BrowserWindow } = require('electron')
//まずはアプリケーションを操作するのに必要なwindowオブジェクトを入れる変数winを宣言
let win
function createWindow () {
// BrowserWindowのインスタンスを作成し、デスクトップアプリを立ち上げる。widthとheightで画面の大きさを定義。
// nodeIntegrationがfalseになっているとクライアント側とprocessやrequireといった低レイヤーへのアクセスが
// できないので気をつける。使わないのであればセキュリティー的によくないのでfalseにしておくように。
// デフォルトもfalseになっているようである。
win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true
}
})
// index.htmlファイルを読み込む。
win.loadFile('index.html')
// windowを開いた際にデベロッパーツールを開く。chromeのデベロッパーツールぽい。
win.webContents.openDevTools()
// 画面が閉じられたときの処理。winに入っているオブジェクトを空にすることで画面を閉じることができる。
win.on('closed', () => {
win = null
})
}
// 先程定義したcreateWindowを実行。アプリを起動したときに呼び出される処理。
app.on('ready', createWindow)
// アプリケーションを閉じたときの処理。
app.on('window-all-closed', () => {
// macOSであるかどうかの判別。macでない場合はアプリを閉じる。
// maxの場合はcmd+qが押されるまで起動され続ける仕様。
if (process.platform !== 'darwin') {
app.quit()
}
})
app.on('activate', () => {
// macOSではdock iconがクリックされて、他のwindowがない際には再度windownを開くような仕様。
if (win === null) {
createWindow()
}
})
ひとまずサーバー側のメインのprocessのある処理が分かった。他にもデスクトップからのアクションによって処理を定義したい場合にはこのファイルに追記していく。
最後に下記の読み込むhtmlを定義してyarn startでアプリを起動できる。
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
</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>
まとめ
ひとまずメインの処理となるElectronサーバー側の処理が分かった。これができるのであればReactやVueを使ってWebアプリケーションと全く同様にアプリ開発ができるようになりそう。
次回はそれも試してみようと思う。探してみるとボイラーテンプレートもあったのでそれを利用しての開発もしてみよう
Author And Source
この問題について(Electronを使ってjavascriptでデスクトップアプリを作成。), 我々は、より多くの情報をここで見つけました https://qiita.com/MikihiroSaito/items/709b68085b9a0c565bfd著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .