本文へスキップ

Electron FAQ

Electronのインストールで問題が発生するのはなぜですか？​

npm install electronを実行すると、一部のユーザーはインストールエラーが発生することがあります。

ほとんどの場合、これらのエラーはネットワークの問題が原因であり、electron npmパッケージ自体の問題ではありません。ELIFECYCLE、EAI_AGAIN、ECONNRESET、ETIMEDOUTなどのエラーは、すべてそのようなネットワーク問題を示しています。最善の解決策は、ネットワークを切り替えたり、少し待ってから再度インストールを試みることです。

npmによるインストールに失敗する場合は、electron/electron/releasesからElectronを直接ダウンロードすることもできます。

Electronはいつ最新のChromeにアップグレードされますか？​

ElectronのChromeバージョンは、通常、新しい安定版Chromeバージョンがリリースされてから1〜2週間以内に更新されます。この見積もりは保証されたものではなく、アップグレードに必要な作業量によって異なります。

安定版チャンネルのChromeのみが使用されます。重要な修正がベータ版または開発版チャンネルにある場合、バックポートします。

詳細については、セキュリティの概要を参照してください。

Electronはいつ最新のNode.jsにアップグレードされますか？​

新しいバージョンのNode.jsがリリースされると、通常は約1か月待ってからElectron内のNode.jsをアップグレードします。これにより、新しいNode.jsバージョンで導入されたバグの影響を受けるのを回避できます（これは非常に頻繁に発生します）。

Node.jsの新しい機能は通常、V8のアップグレードによって導入されます。ElectronはChromeブラウザによって提供されるV8を使用しているため、新しいNode.jsバージョンの新しいJavaScript機能は通常、既にElectronに含まれています。

ウェブページ間でデータを共有するにはどうすればよいですか？​

ウェブページ（レンダラープロセス）間でデータを共有する最も簡単な方法は、ブラウザですでに利用可能なHTML5 APIを使用することです。Storage API、localStorage、sessionStorage、およびIndexedDBが適しています。

あるいは、Electronによって提供されるIPCプリミティブを使用することもできます。メインプロセスとレンダラープロセス間でデータを共有するには、ipcMainおよびipcRendererモジュールを使用できます。ウェブページ間で直接通信するには、MessagePortを一方から他方に送信できます。これは、ipcRenderer.postMessage()を使用してメインプロセス経由で行うことができます。メッセージポートを経由したその後の通信は直接行われ、メインプロセスを経由することはありません。

数分後にアプリのトレイが消えました。​

これは、トレイを格納するために使用される変数がガベージコレクションされる場合に発生します。

この問題が発生した場合は、次の記事が役立つ可能性があります。

迅速な修正が必要な場合は、コードを次のように変更して変数をグローバルにすることができます。

const { app, Tray } = require('electron')
app.whenReady().then(() => {
  const tray = new Tray('/path/to/icon.png')
  tray.setTitle('hello world')
})

から

const { app, Tray } = require('electron')
let tray = null
app.whenReady().then(() => {
  tray = new Tray('/path/to/icon.png')
  tray.setTitle('hello world')
})

ElectronでjQuery/RequireJS/Meteor/AngularJSを使用できません。​

ElectronのNode.js統合により、module、exports、requireなどの追加のシンボルがDOMに挿入されます。これは、同じ名前のシンボルを挿入しようとする一部のライブラリで問題を引き起こします。

これを解決するには、Electronでノード統合をオフにすることができます。

// In the main process.
const { BrowserWindow } = require('electron')
const win = new BrowserWindow({
  webPreferences: {
    nodeIntegration: false
  }
})
win.show()

しかし、Node.jsとElectron APIを使用する機能を維持したい場合は、他のライブラリを含める前にページ内のシンボルの名前を変更する必要があります。

<head>
<script>
window.nodeRequire = require;
delete window.require;
delete window.exports;
delete window.module;
</script>
<script type="text/javascript" src="jquery.js"></script>
</head>

require('electron').xxxが未定義です。​

Electronの組み込みモジュールを使用すると、このようなエラーが発生することがあります。

> require('electron').webFrame.setZoomFactor(1.0)
Uncaught TypeError: Cannot read property 'setZoomLevel' of undefined

間違ったプロセスでモジュールを使用している可能性が非常に高いです。たとえば、electron.appはメインプロセスでのみ使用でき、electron.webFrameはレンダラープロセスでのみ使用できます。

フォントがぼやけて見えますが、これは何ですか？どうすればよいですか？​

サブピクセルアンチエイリアシングが無効になっている場合、LCDスクリーン上のフォントはぼやけて見えることがあります。例：

Subpixel rendering example

サブピクセルアンチエイリアシングには、フォントグリフを含むレイヤーの不透明な背景が必要です。（詳細については、このissueを参照してください）。

この目標を達成するには、BrowserWindowのコンストラクタで背景を設定します。

const { BrowserWindow } = require('electron')
const win = new BrowserWindow({
  backgroundColor: '#fff'
})

この効果は、（一部の？）LCDスクリーンでのみ表示されます。違いが見えなくても、一部のユーザーには見える可能性があります。理由がない限り、常にこのように背景を設定するのが最善です。

CSSで背景を設定するだけでは、目的の効果が得られないことに注意してください。