アプリを開発する方法 [Electron]

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

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]

All the Electron Docs! | Electron [Official]

Electron Docs GitBook (imfly.gitbooks.io)

仕組み

参考：

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

メイン／レンダラープロセスの話 – 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

shell

参考：

shell | Electron [Official]

open file/directory in specific application – Stack Overflow

イベントの発生順序

参考：

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

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

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

参考：

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

ウィンドウを透明化する／ウィンドウ枠を表示しない

参考：

Transparent Window | Electron [Official]

Frameless Window | Electron [Official]

自動アップデート

参考：

autoUpdater でアプリを自動アップデートさせる方法 (Mac/Windows) – Qiita

autoUpdater | Electron [Official]

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

原因：

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 アプリをつくる時に便利なパッケージ | はやくプログラムになりたい

FAQ

参考：

FAQ | Electron [Official]

Tips

参考：

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

リンク

参考：

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