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
Writing Your First Electron App | Electron [Official]
入門
参考：
概要
参考：
ソニーで Electron アプリをリリースしてみた | SlideShare
ドキュメント
参考：
Electron Docs GitBook (imfly.gitbooks.io)
仕組み
参考：
Electron の BrowserProcess と RendererProcess にハマったのでモジュールとの関係を図にした – Qiita
アプリケーションを実行する
開発中にアプリケーションを実行するにはカレントディレクトリ指定して electron コマンドを使用する。
$ electron .
package.json の scripts に start サブコマンドを追加する。
"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
shell
参考：
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
Electron’s IPC Communication between Renderer and Main Processes | BrainBell
Inter Process Communication | Tutorialspoint
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
preload
レンダープロセスでページを読み込む前に Node.js が有効な環境で実行されるスクリプトを指定する。
参考：
Electron の基本構成とプロセス間通信 | Narumium Blog
How to use preload.js properly in Electron – Stack Overflow
contextIsolation
true に設定すると preload スクリプトと Electron API を実行する JavaScript コンテキストが隔離される。
参考：
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 が利用できる。
- Ember Inspector
- React Developer Tools
- Backbone Debugger
- jQuery Debugger
- AngularJS Batarang
- Vue.js devtools
- Cerebral Debugger
- Redux DevTools Extension
- MobX Developer Tools
参考：
electron/electron/devtools-extension.md – DevTools Extension – 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
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.exenode_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
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-vue
参考：
How can I open chrome dev tool after build? · Issue #214 · SimulatedGREG/electron-vue – GitHub
electron-builder
参考：
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