Electron

Node.js を使用して Web アプリをローカルで実行するようなクロスプラットフォームアプリケーションを開発できる。

参考:

electron/electron: Build cross-platform desktop apps with JavaScript, HTML, and CSS – GitHub

導入

参考:

Electron でデスクトップウィジェットを作るまで – Qiita

Electron インストールから Hello world まで – Qiita

Electron でアプリビルドまでのフロー – Qiita

Production ready Electron app using React and Parcel web bundler | Yogesh Kumar

Quick Guide | Tutorialspoint

Writing Your First Electron App | Electron [Official]

入門

参考:

ようこそ!Electron 入門 – Qiita

Electron でアプリ完成までのメモ – Qiita

Electron 開発のために最初のアプリ | 古松

概要

参考:

Electron アプリの基本的な作り方 | NER

ソニーで Electron アプリをリリースしてみた | SlideShare

ドキュメント

参考:

API | Electron [Official]

Electron Docs GitBook (imfly.gitbooks.io)

仕組み

参考:

Electron の BrowserProcess と RendererProcess にハマったのでモジュールとの関係を図にした – Qiita

メイン/レンダラープロセスの話 – Qiita

アプリケーションを実行する

開発中にアプリケーションを実行するにはカレントディレクトリ指定して electron コマンドを使用する。

$ electron .

package.jsonscriptsstart サブコマンドを追加する。

"scripts": {
  "start": "electron ."
}

npm コマンドで start を実行する。

$ npm start

参考:

Electron のアプリケーションが npm start できない – スタック・オーバーフロー

Why doesn’t npm start run electron app? – Stack Overflow

パッケージ化する

参考:

electron/i18n/application-packaging.md – アプリケーションのパッケージ化 – GitHub

ファイルを開く

参考:

Electron で File の Open と Save – Qiita

Electron で任意のファイルを開く機能を実装する – Qiita

Electron “Open With” for Mac OSX | Roy Segall

How to choose , read, save, delete or create a file with Electron Framework | Our Code World

Electron open-file – GitHub Gist

Open a file with electron app – Atom Discussion

Open external file with Electron – Stack Overflow

How to get the arguments for opening file with electron app – Stack Overflow

コマンドライン引数を取得する

参考:

electron アプリ node cli アプリでのコマンドライン実行の種類と parse の共用について | Ubuntu 忘備録 (blog.michinari-nukazawa.com)

How to get the arguments for opening file with electron app – Stack Overflow

BrowserWindow

Web ビューを提供するウィンドウのクラス。

参考:

Electron で Webview の簡易ブラウザをつくってみたメモ – Qiita

Electron の Window をコンテンツの準備が出来てから表示する – Qiita

Electron アプリで起動時に真っ白なウィンドウが一瞬出てしまうのを避ける – Qiita

BrowserWindow | Electron [Official]

webContents

BrowserWindow のコンテンツであるウェブページの描画及びイベントの配信を行うプロパティー。

参考:

webContents | Electron [Official]

dialog

各 OS 環境でネイティブのダイアログを開く。

参考:

Electron で各種ダイアログ表示 | SourceChord

メインプロセスでファイル選択やメッセージボックスの表示 | OAR STYLE

当然だけど dialog 要素が使えた。Modal や Style のカスタマイズも簡単!- Qiita

dialog | Electron [Official]

shell

参考:

shell | Electron [Official]

open file/directory in specific application – Stack Overflow

プロセス間通信 (IPC)

参考:

Electron でデスクトップアプリを作りたい (メインプロセスとレンダラープロセス) | 白猫のメモ帳 (shironeko.hateblo.jp)

Electron の Renderer process 同士で直接通信する | miyamo

Electron でレンダラプロセス同士の IPC – Qiita

React と Electron 間のデータの送受信の手法と一例 | Origami

Electron で BrowserWindow と通信する ipc 編 | techium

ipcMain | Ebookchain

Electron’s IPC Communication between Renderer and Main Processes | BrainBell

Inter Process Communication | Tutorialspoint

ipcMain | Electron [Official]

ipcRenderer | Electron [Official]

IPC send from main process to renderer – electron – Atom Discussion

How can we send messages main process to renderer process in Electron – Stack Overflow

nodeIntegration

レンダープロセスで Node.js の各種機能を使用可能にする。(セキュリティの観点から非推奨)

参考:

Electron で nodeIntegration: false にする方法 – Qiita

Electron の nodeIntegration を false としたときのプロセス間通信について | teratail

require is not available in “Electron Isolated Context” in devtools when {contextIsolation: true, nodeIntegration: false} · Issue #11608 · electron/electron – GitHub

preload

レンダープロセスでページを読み込む前に Node.js が有効な環境で実行されるスクリプトを指定する。

参考:

Electron の基本構成とプロセス間通信 | Narumium Blog

How to use preload.js properly in Electron – Stack Overflow

contextIsolation

true に設定すると preload スクリプトと Electron API を実行する JavaScript コンテキストが隔離される。

参考:

require is not available in “Electron Isolated Context” in devtools when {contextIsolation: true, nodeIntegration: false} · Issue #11608 · electron/electron – GitHub

Communication between preload and client given context isolation in electron – Stack Overflow

contextBridge

contextIsolation が有効な場合に、コンテキストを跨いで API を公開するためのプロパティー。API は window オブジェクト下 apiKey の名前で配置される。

参考:

Electron で contextBridge による安全な IPC 通信 – Qiita

Electron で contextBridge による安全な IPC 通信 受信編 – Qiita

contextBridge | Electron [Official]

How to use preload.js properly in Electron – Stack Overflow

Electron ‘contextBridge’ – Stack Overflow

イベントの発生順序

参考:

Electron の preload、executeJavaScript や、各種イベントの発生順序を調べてみた – Qiita

カスタムスキーマを登録する (protocol)

参考:

Electron を Custom URL Scheme で起動する – Qiita

Electron アプリをカスタム URI で起動する | リズムのじかん

protocol | Electron [Official]

Double-click to open files into Electron app – Atom Discussion

jQuery を使う

参考:

Electron の Renderer Process (index.html) で require(‘electron’) が undefined になる | カバの樹

I can not use jQuery/RequireJS/Meteor/AngularJS in Electron – Electron FAQ | Electron [Official]

Parcel を使う

参考:

parcel で electron 向けビルド | os_jupiter の日記

Parcel + Electron では JS から CSS モジュールを import / require 出来ない – Qiita

Production ready Electron app using React and Parcel web bundler | Yogesh Kumar

[RFC] Parcel 2: Better Electron support · Issue #2492 · parcel-bundler/parcel – GitHub

Is it possible to target electron-renderer? · Issue #1738 · parcel-bundler/parcel – GitHub

How to bundle javascript using Parcel in Electron? – Stack Overflow

Vue を使う

参考:

Vue + Electron なアプリを簡単に作る – Qiita

vue + electron で windows デスクトップアプリを作成する – Qiita

Electron + Vue.js を使ったデスクトップアプリ開発を始める手順 | virtualiment

Vue.js + electron + その他もろもろの環境の構築 | エンターテイメント!!(suzaku-tec.hatenadiary.jp)

はじめて Vue.js + Electron でアプリをつくった時にはまったこと | スワブロ

console.log の出力先

メインプロセスとレンダープロセスで console.log の出力先が異なる。

  • メインプロセス:electron . を実行したターミナルに出力
  • レンダープロセス:DevTools のコンソールに出力

参考:

Electron の console.log でハマる | いつブロ

Electron の renderer process で、console のログ出力をターミナルに吐かせる | サイト更新停滞ちうっ

Using console.log() in Electron app – Stack Overflow

ネイティブ UI

参考:

Electron API デモから学ぶ実装テクニック ネイティブ UI と通信 | Build Insider

Web ビューをサンドボックス化する

参考:

セキュリティ項目の実装 | 悠雀堂ブログ

アプリ専用の設定ファイルを作成する

参考:

Electron で外部設定用に ini ファイルを作りたい | teratail

DevTools

レンダープロセスから DevTools を起動する。

const { BrowserWindow } = require('electron')

let win = new BrowserWindow()
win.webContents.openDevTools()

参考:

Electron WebView のデバッグで DevTools を使う | kondoumh のブログ

Electron で devtools の表示をやらせない!という勘違いのお話 – Qiita

Tips and Tricks for Debugging Electron Applications | SitePoint

Application Debugging | Electron [Official]

Debugging the Main Process | Electron [Official]

How to make Developer Tools appear? – Atom Discussion

A way to prevent developer tools – Atom Discussion

How to include Chrome DevTools in Electron? – Stack Overflow

DevTools Extension

各種 JavaScript ライブラリを使用した開発をサポートする Chrome Extension が利用できる。

参考:

electron/electron/devtools-extension.md – DevTools Extension – GitHub

セキュリティ

参考:

electron/electron/security.md – Security, Native Capabilities, and Your Responsibility · electron/electron – GitHub

アプリケーションを起動すると画面が真っ白で何も表示されない

原因:

Web ビューがページの読み込みに失敗している。

対処法:

Ctrl + Shift + I を押して DevTools を開き、コンソールを確認してエラーを解消する。

参考:

Electron のアプリが落ちたり、画面がまっしろになっってしまった時の、問題の追い方 | サイト更新停滞ちうっ

Electron shows white screen when built – Stack Overflow

ipcRenderer をインポートするとエラーが発生する

electron/preload.js を作成し、BrowserWindow のインスタンス生成時に webPreferences オプションの preload に指定する。

function createWindow () {
  win = new BrowserWindow({
    webPreferences: {
      preload: path.join(__dirname, '/preload.js')
    }
  });
  // ...
}

参考:

Electron で contextBridge による安全な IPC 通信 – Qiita

Electron で contextBridge による安全な IPC 通信 受信編 – Qiita

ipcRenderer in CRA managed app | Dennis Tretyakov

In order to import electron, please try the following | Christian Sepulveda

Error while importing electron in react | import { ipcRenderer } from ‘electron’ · Issue #9920 · electron/electron – GitHub

Requiring electron outside of main.js causes a TypeError · Issue #7300 · electron/electron – GitHub

Error: Process is not defined (in web worker) · Issue #1722 · parcel-bundler/parcel – GitHub

How to import ipcRenderer in react? – Stack Overflow

rcedit.exe がエラーを起こす

現象:

Windows 上でパッケージを作成する時に rcedit.exe がエラーを起こして失敗する。

rcedit.exe failed with exit code 1. Fatal error: Unable to commit changes

原因:

McAfee リアルタイムスキャンによって変更が保護される。

対処法:

McAfee リアルタイムスキャンの除外するファイルに rcedit.exe (64bit 環境の場合は rcedit-x64.exe) を追加する。

  • node_modules/rcedit/bin/rcedit.exe
  • node_modules/rcedit/bin/rcedit-x64.exe

参考:

rcedit.exe failed – unable to commit changes · Issue #590 · electron/electron-packager – GitHub

rcedit failed – unable to commit changes · Issue #25 · electron/node-rcedit – GitHub

rcedit.exe failed with exit code 1. Fatal error: Unable to set icon · Issue #621 · electron/electron-packager – GitHub

Electron-builder error – Fatal error: Unable to commit changes – Stack Overflow

パッケージ

  • electron-about-window
  • electron-dl
  • electron-in-page-search
  • electron-window-state
  • menubar
  • node-auto-launch
  • electron-mocha

参考:

Electron アプリをつくる時に便利なパッケージ | はやくプログラムになりたい

Tips

参考:

Electron でよく使いそうなネタの覚え書き – Qiita

リンク

参考:

sindresorhus/awesome-electron: Useful resources for creating apps with Electron – GitHub

electron-serve

Electron の実装がシングルページアプリケーションの場合に静的コンテンツをサーブするモジュール。URL が示すファイルがディスク上に存在した場合はファイルをサーブし、それ以外の URL は index.html にフォールバックする。

参考:

sindresorhus/electron-serve: Static file serving for Electron apps – GitHub

electron-serve – npm

electron-vue

参考:

SimulatedGREG/electron-vue: An Electron & Vue.js quick start boilerplate with vue-cli scaffolding, common Vue plugins, electron-packager/electron-builder, unit/e2e testing, vue-devtools, and webpack – GitHub

How can I open chrome dev tool after build? · Issue #214 · SimulatedGREG/electron-vue – GitHub

electron-builder

参考:

electron-builder [Official]

electron-userland/electron-builder: A complete solution to package and build a ready for distribution Electron app with “auto update” support out of the box – GitHub

Debugtron

パッケージ化された Electron アプリをデバッグする。

参考:

bytedance/debugtron: Debug in-production Electron based app – GitHub

electron-terminal-open

参考:

akameco/electron-terminal-open: Open App from Command Line Interface for Electron – GitHub

electron-better-ipc

参考:

sindresorhus/electron-better-ipc: Simplified IPC communication for Electron apps – GitHub

タグ:

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です