Electron

1 Electron
2 Electronの知識
- 2.1 プロセス
  - 2.1.1 メインプロセスとレンダラープロセス
  - 2.1.2 IPC(プロセス間通信)
3 構成
- 3.1 mainn.js
  - 3.1.1 オブジェクトの分割代入
  - 3.1.2 Node.js機能の統合
4 オブジェクト
5 appオブジェクトのイベント
6 BrowserWindowのイベント
7 BrowseWindow操作
8 WebContentsのイベント

Electron

B07QPQ24BN.09.MZZZZZZZ.jpg link

Fiddle

エレクトロンを簡単に始める

API Document

https://www.electronjs.org/docs/api

Required

Node.jsのインストール

基本的なアプリの作成

Electronアプリケーションは本質的にNode.jsアプリケーション
Electronアプリケーションは、package.json から開始される

プロジェクトの作成とElectronのインストール

mkdir my-electron-app && cd my-electron-app
npm init -y
npm i --save-dev electron

グローバルにインストール

npm

npm -g i electron

mainスクリプトファイル(main.js)の作成

mainスクリプトは、Electronアプリケーションのエントリーポイント
Mainプロセスを開始し、Mainプロセスはアプリケーションのライフサイクルをコントロールする

const { app, BrowserWindow } = require('electron')
const path = require('path')
 
function createWindow() {
    const win = new BrowserWindow({
        width:400,
        height:300,
        webPreferences:{
            preload: path.join(__dirname, 'preload.js')
        }
    })
    win.loadFile('index.html')
}
 
app.whenReady().then(() => {
    createWindow()
 
    app.on('activate', () =>{
        if (BrowserWindow.getAllWindows().length == 0) {
            createWindow()
        }
    })
})
 
app.on('window-all-closed', () => {
    if (process.platform !== 'darwin') {
        app.quit()
    }
})

Webページ(index.html)の作成

index.html
アプリケーション初期化時に一度だけ表示されるページ
このページがレンダープロセスを表現する

<!DOCTYPE html>
<html>
<head>
    <meta carhset="UTF-8">
    <title>Electron Sample</title>
    <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
</head>
<body style="background: white;">
    <h2>Version</h2>
    <div>
        We are using Node.js <span id="node-version"></span>
    </div>
    <div>
        Chromium <span id="chrome-version"></span>,
    </div>
    <div>
        Electron <span id="electron-version"></span>.
    </div>
</body>
</html>

プレロードスクリプト(preload.js)

Node.jsとWebページのブリッジ
Node.js全体を安全に公開するのではなく、特定のAPIや動作をWebページに公開することができる
以下ではprocessオブジェクトからバージョン情報を読み取りページを更新する

window.addEventListener('DOMContentLoaded', () => {
    const replaceText = (selector, text) => {
      const element = document.getElementById(selector);
      if (element) {
          element.innerText = text;
      }
    }
  
    for (const type of ['chrome', 'node', 'electron']) {
      replaceText(`${type}-version`, process.versions[type])
    }
  })

package.json

{
  "name": "electron_sample",
  "version": "1.0.0",
  "main": "main.js",
  "scripts": {
    "start": "electron .",
  },
      :
}

.gitignore

https://github.com/electron/electron/blob/main/.gitignore

起動

npm start

Visual Studio Codeでのデバッグ

https://www.electronjs.org/docs/tutorial/debugging-vscode

launch.json Node を Visual Studio Code でデバッグするときにグローバルにインストールしたモジュールが読み込まれない

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Debug Main Process",
      "type": "node",
      "request": "launch",
      "cwd": "${workspaceFolder}",
      "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron",
      "windows": {
        "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron.cmd"
      },
      "args" : ["."],
      "outputCapture": "std"
    }
  ]
}

パッケージングと配布

Electron Forge

もっともシンプルで素早く配布するには、Electron Forgeを利用する

Electron ForgeをアプリケーションフォルダにImport

$ npm install --save-dev @electron-forge/cl
$ npx electron-forge import
✔ Checking your system
✔ Initializing Git Repository
✔ Writing modified package.json file
✔ Installing dependencies
✔ Writing modified package.json file
✔ Fixing .gitignore
 
 
We have ATTEMPTED to convert your app to be in a format that electron-forge understands.
 
Thanks for using "electron-forge"!!!

Mac 配布パッケージを作成

out フォルダに出力される

$ npm run make
 
> fx_sample@1.0.0 make
> electron-forge make
 
✔ Checking your system
✔ Resolving Forge Config
We need to package your application before we can make it
✔ Preparing to Package Application for arch: x64
✔ Preparing native dependencies
✔ Packaging Application
Making for the following targets: zip
✔ Making for target: zip - On platform: darwin - For arch: x64

https://blog.ikappio.com/electron-forge-make-for-windows-from-macos/
ビルド環境と同じパッケージをデフォルトで生成するようだ。

Windows配布パッケージの作成

Mac で Windows用のパッケージ出力には、monoなどインストールが必要なようなので、Windows同様の手順でパッケージを作成。

Ubuntu配布パッケージの作成

$ sudo apt install dpkg-dev
$ sudo apt install rpm

$ npm run make

Electronの知識

プロセス

メインプロセスとレンダラープロセス

main.js がメインプロセスを担い、GUIは持たない
レンダーラープロセスは、Electronに内臓のWebブラウザを利用する
- Electronの機能を利用する場合、、electron.remote経由

IPC(プロセス間通信)

メインプロセスとレンダラープロセスで情報を授受する場合、IPCを利用する
ページAからページBを操作したい場合など、メッセージをページA->メインプロセス->ページBと連携させる必要がある

構成

mainn.js

const { app, BrowserWindow} = require('electron');

function createWindow() {
    let win = new BrowserWindow({
        width: 400,
        height: 200,
        webPreference: {
            nodeIntegration: true
        }
    });
    win.loadFile('index.html');
}

app.whenReady().then(createWindow);

オブジェクトの分割代入

const { app, BrowserWindow} = require('electron');

Node.js機能の統合

trueでNode.jsの機能を利用できるようになる

nodeIntegration: true

オブジェクト

app

アプリケーション本体
起動/終了、Windowオープン/クローズなどの管理

BrowserWindow

Electronアプリで表示されるウィンドウオブジェクト
HTMLファイルを読み込むことでウィンドウを表示する

WebContents

BrowserWindowに含まれ、Webコンテンツの状態管理
Webコンテンツに関するイベント

Webページをロード

loadURLとすることで、外部ページをロードできる

   // win.loadFile('index.html');
   win.loadURL('https://service.typea.info/blogwiki');

WebページをElectronアプリ化

モーダルダイアログ

function createWindow() {
    let win = new BrowserWindow({
        width: 600,
        height: 400,
        webPreference: {
            nodeIntegration: true
        }
    });
    // win.loadURL('https://service.typea.info/blogwiki');
    win.loadFile('index.html');

    let child = new BrowserWindow({
        width: 400,
        height: 200,
        parent: win,
        frame: false,
        modal: true,
        transparent: true,
        opacity: 0.5
    });
    child.loadFile('dialog.html');
}

デベロッパーツールを開く

win.webContents.openDevTools();

appオブジェクトのイベント

起動処理の完了

will-finish-launching

初期化処理完了

ready

BrowserWindowの生成

browser-window-created

Webコンテンツの生成

web-contents-created

全てのWindowが閉じられた

window-all-closed

全てのWindowを閉じる前

before-quit

終了する前

will-quit

終了時

quit

BrowserWindowのイベント

Windowの表示

show

Windowの非表示

hide

Window表示準備完了

ready-to-show

Windowを閉じる

close

Windowが閉じられた

closed

その他

focus
blur
maximize
unmaximize
minimize
restore
will-resize
resize
will-move
move
enter-full-screen
leave-full-screen
enter-html-full-screen
leave-html-full-screen
always-on-top-changed

BrowseWindow操作

destory
close()
focus()
blur()
isFocuced()
isDestoryed()
show()
showInactive()
hide()
isVisible()
isModal()
maximize()
unmaximize()
isMaximized()
minimize()
restore
isMinimized()
setFullScreen()
isFullScreen()
isNormal()
SetBounds()
GetBounds()
SetContentBounds()
GetContentsBound()
SetSize()
GetSize()
SetContaentSize()
GetContentSize()
SetMinimumSize()
GetMinimumSize
SetMaximumSize()
GetMaximumSize()
SetPosition()
GetPosition()
moveTop()
center()
settitle()
getTitle()

WebContentsのイベント

コンテンツロード完了

did-finish-load

フレームのコンテンツロード

did-frame-finish-load

コンテンツ読み込み開始

did-start-loading

コンテンツ読み込み中止

did-stop-loading

DOM生成完了

dom-ready

新しいWindow作成

new-window

URLアクセス時

will-navigate

URLアクセス開始

did-start-navigation

その他

will-redirect
did-redirect-navigation
did-navigate
will-prevent-unload
destroyed
enter-html-full-screen
leave-html-full-screen
zoom-changed
devtools-opend
devtools-closed
devtools-focused
console-message

MyMemoWiki

Electron

目次

Electron

Fiddle

API Document

Required

基本的なアプリの作成

プロジェクトの作成とElectronのインストール

mainスクリプトファイル(main.js)の作成

Webページ(index.html)の作成

プレロードスクリプト(preload.js)

package.json

.gitignore

起動

Visual Studio Codeでのデバッグ

パッケージングと配布

Electron Forge

Electron ForgeをアプリケーションフォルダにImport

Mac 配布パッケージを作成

Windows配布パッケージの作成

Ubuntu配布パッケージの作成

Electronの知識

プロセス

メインプロセスとレンダラープロセス

IPC(プロセス間通信)

構成

mainn.js

オブジェクトの分割代入

Node.js機能の統合

オブジェクト

app

BrowserWindow

WebContents

Webページをロード

モーダルダイアログ

デベロッパーツールを開く

appオブジェクトのイベント

起動処理の完了

初期化処理完了

BrowserWindowの生成

Webコンテンツの生成

全てのWindowが閉じられた

全てのWindowを閉じる前

終了する前

終了時

BrowserWindowのイベント

Windowの表示

Windowの非表示

Window表示準備完了

Windowを閉じる

Windowが閉じられた

その他

BrowseWindow操作

WebContentsのイベント

コンテンツロード完了

フレームのコンテンツロード

コンテンツ読み込み開始

コンテンツ読み込み中止

DOM生成完了

新しいWindow作成

URLアクセス時

URLアクセス開始

その他

案内メニュー

検索