メインコンテンツへ飛ぶ

Electron FAQ

Electronがインストールできません。​

npm install electron を実行するとき、インストール時エラーが発生する場合があります。

ほとんどの場合、このエラーはネットワークによるもので、electron の npm パッケージに問題はありません。 ELIFECYCLE、EAI_AGAIN、ECONNRESET、ETIMEDOUT といったエラーは、ネットワーク上の問題を示しています。 最善の解決策は、ネットワークを切り替えるか、少し待ってからもう一度インストールしてることです。

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

カスタムミラーまたはプロキシ経由で Electron をインストールする必要がある場合は、 Advanced Installation ドキュメントを参照してください。

Electron バイナリはどのようにダウンロードされますか?​

npm install electron を実行すると、対応するバージョンの Electron バイナリが、npm の postinstall ライフサイクル スクリプトを介してプロジェクトの node_modules フォルダにダウンロードされます。

このロジックは、 @electron/get ユーティリティパッケージ によって内部で処理されます。

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

ChromiumメジャーバージョンのアップグレードでElectronの新しいメジャーバージョンがリリースされます。 8週間ごとにリリースすることで、Electronはアップストリームリリースと同じ日に、他のすべての主要なChromiumリリースをプルすることができます。 セキュリティ修正は、事前に安定したリリースチャンネルにバックポートされます。

詳細については、 Electron リリース ドキュメント、または、 releases.electronjs.org を参照してください。

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

新しいバージョンの Node.js がリリースされた後、通常であれば Electron 内の Node.js のアップグレードまで約 1 ヶ月待ちます。 これにより、新しい Node.js のリリースでよく発生するバグの影響を避けることができます。

通常、Node.js の新しい機能は V8 のアップグレードによってもたらされますが、Electron は Chrome ブラウザーに搭載されている V8 を使用しているので、新しい Node.js に入ったばかりのピカピカに新しい JavaScript 機能は Electron ではたいてい既に導入されています。

どうやってウェブページ間でデータを共有するのでしょうか?​

ウェブページ (レンダラープロセス) 間でデータを共有する最も単純な方法は、ブラウザで既に提供されている HTML5 API を使用することです。 Storage API, localStorage, sessionStorage, IndexedDB といった良い選択肢があります。

Alternatively, you can use the IPC primitives that are provided by Electron. メインプロセスとレンダラープロセス間でデータを共有するには、 ipcMain と ipcRenderer モジュールを使用します。 Web ページ間で直接通信するには、MessagePort を、おそらくメインプロセス経由で、一方から他方へ送信します。 ipcRenderer.postMessage() を使用します。 Subsequent communication over message ports is direct and does not detour through the main process.

数分経つとアプリの tray が消失します。​

これは、tray を格納している変数がガベージコレクトされると発生します。

以下のドキュメントが参考になるはずです。

もし簡単に修正したい場合は、コードを以下のように修正して変数をグローバルにすると良いでしょう。以下の部分を

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')
})

jQuery/RequireJS/Meteor/AngularJSがElectronで使えません​

Electron の Node.js 組み込みの影響で、module、exports、require のような余分なシンボルが DOM に追加されています。 このため、いくつかのライブラリでは同名のシンボルを追加しようとして問題が発生することがあります。

これを解決するために、Electron の node integration を無効にできます。

// メインプロセス
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 はレンダラープロセスのみで利用できます。

フォントがぼやけます。これはどういうものでどうすればいいのですか?​

サブピクセルアンチエイリアス が無効だと、液晶画面上のフォントはぼやけて見えます。 サンプル:

サブピクセルレンダリングの例

サブピクセルアンチエイリアスは不透明なレイヤーの背景が必要で、そのレイヤーはフォントグリフを含みます。 (詳しくは この issue を参照してください)。

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

const { BrowserWindow } = require('electron')

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

この効果は (一部の?) 液晶画面でしか見られません。 違いが見えなくても、ユーザーの中には違って見える人がいるかもしれません。 こうしてはいけない理由がなければ、背景は基本的にこのように設定するのが良いでしょう。

CSS で背景を設定するだけでは期待する効果はないことに注意してください。

Electron の組み込みモジュールではクラス継承は機能しません​

Electron クラスは extends キーワード (クラス継承とも呼ばれる) でサブクラス化できません。 この機能は、Electron 内部の C++/JavaScript 相互運用性に複雑さが加わるため、Electron には実装されませんでした。

詳細については、 electron/electron#23 を参照してください。