Electron 36.0.0 がリリースされました! これには Chromium 136、V8 13.6、Node 22.14.0 へのアップグレードが含まれています。

Electron チームは、Electron 36.0.0 のリリース発表にワクワクしています! npm install electron@latest から npm でインストールするか、リリースウェブサイト からダウンロードできます。 このリリースの詳細は続きをご覧ください。

何かフィードバックがあれば、Bluesky や Mastodon で共有したり、コミュニティの Discord に参加してみましょう! バグや機能の要望は Electron の Issue トラッカー で報告できます。

注目すべき変更​

作文ツールサポート​

Electron 36 では、コンテキストメニューでの作文ツール (スペルと文法)、自動入力、サービスメニュー項目など macOS システムレベルの機能を有効化できます。 これを行うには、WebFrameMain のインスタンスを menu.popup() の frame 引数に渡します。

import { BrowserWindow, Menu, WebFrameMain } from 'electron';

const currentWindow = BrowserWindow.getFocusedWindow();
const focusedFrame = currentWindow.webContents.focusedFrame;
const menu = Menu.buildFromTemplate([{ label: 'Copy', role: 'copy' }]);

menu.popup({
  window: currentWindow,
  frame: focusedFrame,
});

Electron 35.0.0 がリリースされました! これには Chromium 134.0.6998.44、V8 13.5、Node 22.14.0 へのアップグレードが含まれています。

Electron チームは、Electron 35.0.0 のリリース発表にワクワクしています! npm install electron@latest から npm でインストールするか、リリースウェブサイト からダウンロードできます。 このリリースの詳細は続きをご覧ください。

何かフィードバックがあれば、Bluesky や Mastodon で共有したり、コミュニティの Discord に参加してみましょう! バグや機能の要望は Electron の Issue トラッカー で報告できます。

注目すべき変更​

拡張機能サポートの改善のためのサービスワーカーのプリロードスクリプト​

もともと RFC #8 で @samuelmaddock によって提案されていたもので、Electron 35 にて サービスワーカー にプリロードスクリプトをアタッチする機能を追加します。 Chrome の Manifest V3 拡張機能では多くの機能が 拡張機能のサービスワーカー を通じて提供されるため、この機能は Electron と最新の Chrome 拡張機能との間のサポートに関するギャップを埋めます。

Session のレベルでプログラムでプリロードスクリプトを登録する場合、ses.registerPreloadScript(script) API でそれをサービスワーカーのコンテキストへ指定し適用できるようになりました。

// セッションにプリロードレルムスクリプトを追加します。
session.defaultSession.registerPreloadScript({
  // スクリプトはサービスワーカーのプリロードレルムでのみ実行されるべきです。
  type: 'service-worker',
  // スクリプトへの絶対パス。
  script: path.join(__dirname, 'extension-sw-preload.js'),
});

さらに、ServiceWorkerMain.ipc のインスタンスを介して、サービスワーカーとそれにアタッチされたプリロードスクリプトの間で IPC が利用できるようになりました。 プリロードスクリプトは引き続き ipcRenderer モジュールでもサービスワーカーと通信できます。 詳細は元の RFC をご参照ください。

この機能の実装前に、以下の前提となる他多くの変更が行われました。

• #45329 で Session モジュールのプリロード API を再設計し、個々のプリロードスクリプトの登録と解除をサポートするようになりました。
• #45229 でコンテキストブリッジを介してメイン ワールドで JavaScript を評価するための実験的なスクリプト contextBridge.executeInMainWorld(executionScript) が追加されました。
• #45341 でメインプロセスでサービスワーカーとやり取りするための ServiceWorkerMain クラスが追加されました。

Electron は Google Summer of Code (GSoC) 2025 のメンター組織として再び採用されました！ Google Summer of Code は、オープンソースソフトウェア開発に新たな貢献者を呼び込むことに重点を置いた国際プログラムです。

詳細については、Google の Summer of Code のホームページ をご覧ください。

私たちについて​

Electron は、ウェブ技術を用いたクロスプラットフォームのデスクトップアプリケーションを構築する JavaScript フレームワークです。 Electron フレームワークのコアは Chromium と Node.js で構築されたコンパイル済みバイナリ実行形式であり、主に C++ で書かれています。

Electron のコア リポジトリ以外では、Electron エコシステムをサポートするいくつかのプロジェクトを管理しています：

• エンドユーザの頒布ツール (例えば Electron Forge や update.electronjs.org)。
• Electron 開発者向けの学習教材 (例えば electronjs.org や Electron Fiddle)。
• 開発者の生産性を効率化する内部ツール (例えば Electron Build Tools や Sheriff)。

GSoC 貢献者となって、github.com/electron 傘下の多くのプロジェクトのうちの 1 つで Electron のコア貢献者と共同作業する機会が得られます。

応募する前に​

Electron にあまり詳しくない方は、ドキュメント を読んだり、Electron Fiddle のサンプルを試してみることをお勧めします。

Electron アプリの頒布について学びたい方は、以下のようにして Electron Forge 付きのサンプルアプリケーションを作成してみてください。

npm init electron-app@latest my-app

コードに少し慣れたら、Electron の Discord サーバー での会話にご参加ください。

プロジェクトの貢献者​

あなたが興味のあるプロジェクトのアイデアに関連するリポジトリを見てみることをお勧めします。 あなたの研究を行う一つの方法は、バグを報告したり、 既存の問題をトリアージしたり、プルリクエストを送信したりすることです。 そうすることはコードベースで実践的な練習をする効果的な方法ですが、提案の提出には必須ではありません。 よく検討された提案は、過去のコントリビューションを参照することなくコードへの理解度を実証できるものである必要があります。

Electronへの貢献を検討されている場合は、提案を提出する前に以下のヒントを参考にしてください。

1. コントリビューションを送信する際は、わかりやすいイシューやプルリクエストの説明を記入してください。 コードの中身に関わらず、貢献の執筆に力を入れると共同作業の環境で効果的なコミュニケーションを発揮できるでしょう。
2. 開かれている Issue に対する PR はいつでも歓迎します。 メンテナへその Issue にアサインしてもらうよう求めるコメントは不要です。 解決策のアイデアを洗練させる必要がある場合は、問題に対する潜在的な解決策について話し合うことを引き続き推奨します。しかし注意として、何かに取り組めるかどうかをつぶさに尋ねるコメントは冗長で、Issue トラッカーにノイズを加えることになります。
3. あまり労力されていないプロジェクト貢献 (無効な Issue 報告、リポジトリの README への些細な文言の変更、フロントエンドコードのスタイル上の小さな変更など) はあなたの最終的な提案に悪影響を及ぼします。メンテナの限られた時間を奪い、Electron プロジェクトに純粋な利益をもたらさないためです。
4. AI コーディングアシスタントはデバッグや新しい概念の理解に効果的なツールですが、AI 生成の出力を直接コピー/ペーストした貢献は強く推奨されません。 これらはしばしば品質が低く、メンテナが LLM 生成コードをきれいにする方が PR をまとめて拒否するよりも手間なことがよくあります。

提案の作成​

Electron との共同開発に興味を持てましたか? 最初に、準備されている7つのプロジェクトアイデア案をご覧ください。 リストにあるすべてのアイデアは、提案可能です。

リストにないユニークなアイデアをお持ちの場合には検討いたしましが、提案内容が詳細かつ十分に整理されていることを確認してください。 あまり自信がないのであれば、リストのアイデアに従うことをお勧めします。

応募には以下のものがあるとよいでしょう。

• 夏に達成する予定の内容をまとめた詳細な提案書。
• 開発者としての経歴。 履歴書がある場合は、コピーを添付してください。 それ以外の場合は、過去の技術経験についてお教えください。
  • 特定の分野での経験不足で不合格になることはありませんが、これはメンターがあなたを最も効果的にサポートし、サマープロジェクトが成功するよう計画を立てるのに役立ちます。

Electronアプリケーションの一部として提出する必要のある項目の詳細なガイドはこちらをご確認ください。 Google Summer of Codeポータルに直接提案を送信する。 Electron チームへ電子メールで送信された提案は、最終提出物とみなされません。

提案に関する詳細なガイダンスについては、こちらの Google Summer of Code 公式の提案作成アドバイス に従うことをお勧めします。

応募開始は 2025 年 3 月 24 日、締め切りは 2025 年 4 月 8 日 です。

質問?​

ブログ記事で取り上げられていない質問や提案の執筆に関するお問い合わせは、summer-of-code@electronjs.org までメールしていただくか、GSoC FAQ をご確認ください。 メールを送る前に、 コントリビューターガイダンスをお読みください。

リソース​

• Electron の Google Summer of Code 2025 アイデアリスト
• Electron Google Summer of Code 2025 貢献者ガイダンス
• Google Summer of Code 学生/貢献者ガイド

Electron 34.0.0 がリリースされました! これには Chromium 132.0.6834.83、V8 13.2、Node 20.18.1 へのアップグレードが含まれています。

Electron チームは、Electron 34.0.0 のリリース発表にワクワクしています! npm install electron@latest から npm でインストールするか、リリースウェブサイト からダウンロードできます。 このリリースの詳細は続きをご覧ください。

何かフィードバックがあれば、Bluesky や Mastodon で共有したり、コミュニティの Discord に参加してみましょう! バグや機能の要望は Electron の Issue トラッカー で報告できます。

注目すべき変更​

HTTP 圧縮における共有辞書管理 API​

HTTP 圧縮は、ブラウザがデータを受信する前に、Web サーバーによってデータを圧縮することを可能にします。 最新バージョンの Chromium は Brotli や Zstandard などの新しい圧縮アルゴリウムをサポートしており、テキストファイルに対して gzip などの従来方式よりも優れた性能を発揮します。

カスタム圧縮辞書は Brotli や Zstandard の圧縮効率をさらに向上させます。 詳細は共有辞書についてのChrome for Developers ブログをご覧ください。

@felixrieseberg は #44950 に以下の API を追加し、セッションレベルで共有辞書を管理できるようになりました。

• session.getSharedDictionaryUsageInfo()
• session.getSharedDictionaryInfo(options)
• session.clearSharedDictionaryCache()
• session.clearSharedDictionaryCacheForIsolationKey(options)

応答しないレンダラーのJavaScriptコールスタック​

レンダラープロセスが規定の時間以上ハングした場合、Electron の unresponsive イベントが発生します。 @samuelmaddock が #44204 で追加した新しい webFrameMain.collectJavaScriptCallStack() API は、関連する WebFrameMain オブジェクト（webContnets.mainFrame）から JavaScript のコールスタックを収集できるようにします。

この API は、JavaScript イベントが長時間実行され、プロセスがハングした場合にフレームが応答しなくなる原因を特定するのに役立ちます。 詳細はクラッシュレポート API の Web 標準への提唱をご覧ください。

const { app } = require('electron');

app.commandLine.appendSwitch(
  'enable-features',
  'DocumentPolicyIncludeJSCallStacksInCrashReports',
);

app.on('web-contents-created', (_, webContents) => {
  webContents.on('unresponsive', async () => {
    // 応答しないレンダラーの実行を中断し、コールスタックを収集する
    const callStack = await webContents.mainFrame.collectJavaScriptCallStack();
    console.log('Renderer unresponsive\n', callStack);
  });
});

2025 年初頭に、Electron の npm エコシステムリポジトリ (@electron/ および @electron-forge/ 名前空間の下) は、最小サポートバージョンを Node.js 22 へ移行します。

どういう意味ですか？​

これまで、Electron の npm エコシステム (Forge、Packager など) のパッケージは、その Node バージョンのサポート終了 (EOL) 日が過ぎた後でも、可能な限りそのバージョンをサポートしてきました。 これは、エコシステムが断片化されないようにするためです。多くのプロジェクトが古いバージョンの Node に依存していることを理解していますが、アップグレードする緊急の理由がなかっただけでそれらのプロジェクトが取り残されるリスクを冒したくありません。

時間の経過とともに、Node.js 14 を最小バージョンとして使用することが、以下の理由によりますます困難になってきました。

• 公式の Node.js 14 は macOS ARM64 ビルドがないため、完全なテストカバレッジを提供するために CI インフラストラクチャでの回避策をメンテンナンスする必要があります。
• 上流パッケージの依存関係に対する engines の要件が進み、依存関係の増加によるサプライ チェーンのセキュリティ問題を解決することがますます困難になっています。

さらに、Node.js の新しいバージョンには、ランタイムネイティブの共通ユーティリティ (例: fs.glob や util.parseArgs) や、付属の新規モジュール (例: node:test、node:sqlite) など、活用したい多くの改善点が含まれています。

なぜ今アップグレードするのですか？​

2024 年 7 月、Electron のエコシステムワーキンググループは、そのバージョンが LTS の日付に達した後の将来、同期的な ESM グラフの require() がサポートされる最初の Node バージョンで全パッケージをアップグレードすることを決定しました (nodejs/node#51977 および nodejs/node#53500 を参照)。

このアップデート時期は 2025 年 1 月 / 2 月に設定しました。 このアップグレードが行われると、Node 22 が既存のエコシステムパッケージでサポートされる最小バージョンになります。

自分に必要なアクションは何ですか？​

私たちは可能な限り互換性を維持するよう努めています。 しかし、最適なサポートを確実に受けるためにアプリを Node 22 以降へアップグレードすることを推奨します。

注意として、プロジェクトを実行している Node のバージョンは現在の Electron バージョンに組み込まれている Node のバージョンと無関係です。

今後の予定​

ご質問やご不明な点がありましたら、info@electronjs.org まで気軽にお問い合わせください。 公式の Electron の Discord でコミュニティのサポートも得られるでしょう。

Electron プロジェクトは 2024 年 12 月の 1 ヶ月間休止し、2025 年 1 月から全力に戻ります。

GIPHY より

12 月でも変わらないこと​

1. ゼロデイやその他の主要なセキュリティ関連のリリースは必要に応じて公開されます。 セキュリティインシデントは、SECURITY.md に則って報告してください。
2. 行動規範 における通報とモデレーションは継続されます。

12 月で変わること​

1. Electron 31、32、33 を含む、2024 年の最後の安定ブランチのリリースは、12 月 1 日の週に行われます。 12 月中にこれ以上のリリース予定はありません。
2. 12 月の最後の 2 週間は、ナイトリーやアルファのリリースはありません。
3. いくつかの例外を除いて、プルリクエストのレビューやマージはしません。
4. どのリポジトリでも Issue トラッカーは更新されません。
5. メンテナからの Discord デバッグのヘルプはありません。
6. ソーシャルメディアコンテンツの更新はありません。

皆さん、2025 年にまたお会いしましょう!

BrowserView は Electron 30 から非推奨となり、WebContentView に置き換えられます。 ありがたいことに、移行は比較的簡単です。

Electron は、Chromium の UI フレームワークである Views API に合わせて、BrowserView から WebContentsView へ移行しています。 WebContentsView は、Chromium のレンダリングパイプラインに直接結び付けられた再利用可能なビューを提供し、将来のアップグレードを簡素化し、開発者が Electron アプリに非ウェブ UI 要素を統合する可能性を広げます。 WebContentsView を採用することで、アプリケーションは今後のアップデートに備えることができるだけでなく、長期的にはコードの複雑さが軽減され、潜在的なバグも減少するというメリットも得られます。

BrowserWindow と BrowserView に精通している開発者は、BrowserWindow と WebContentsView がそれぞれ BaseWindow と View の基底クラスから派生したサブクラスであることに注意するとよいでしょう。 利用可能なインスタンス変数とメソッドを完全に理解するには、これら基底クラスのドキュメントを参照するようにしてください。

移行ステップ​

1. Electron 30.0.0 以降へアップグレード​

2. あなたのアプリケーションが BrowserView を使う場所を把握する​

1 つ方法は、あなたのコードベースで new BrowserView( を検索することです。 これにより、アプリケーションが BrowserView をどのように使用しているか、および移行する必要がある呼び出し箇所の数がわかります。

3. BrowserView の使用それぞれを移行する​

1. それぞれのインスタンス化を移行します。 WebContentsView と BrowserView のコンストラクターは本質的に同じ形状なので、これはかなり簡単なはずです。 どちらも webPreferences 引数を介して WebPreferences を受け入れます。

   - this.tabBar = new BrowserView({
   + this.tabBar = new WebContentsView({
   

   info

   デフォルトでは、WebContentsView は白い背景でインスタンス化され、BrowserView は透明な背景でインスタンス化されます。 WebContentsView で透明な背景にするには、以下のように背景色をアルファ (不透明度) チャンネルが 00 の RGBA 16 進値に設定します。

   + this.webContentsView.setBackgroundColor("#00000000");
   

2. BrowserView を親ウインドウへ追加する場所を移行します。

   - this.browserWindow.addBrowserView(this.tabBar)
   + this.browserWindow.contentView.addChildView(this.tabBar);
   

3. 親ウインドウの BrowserView インスタンスメソッドの呼び出しを移行します。

   旧メソッド	新メソッド	注釈
   win.setBrowserView	win.contentView.removeChildView + win.contentView.addChildView
   win.getBrowserView	win.contentView.children
   win.removeBrowserView	win.contentView.removeChildView
   win.setTopBrowserView	win.contentView.addChildView	既存のビューで addChildView を呼び出すと、そのビューが最上位に並べ替えられます。
   win.getBrowserViews	win.contentView.children

4. setAutoResize インスタンスメソッドをサイズ変更のリスナーへ移行します。

   - this.browserView.setAutoResize({
   -   vertical: true,
   - })
   
   + this.browserWindow.on('resize', () => {
   +   if (!this.browserWindow || !this.webContentsView) {
   +     return;
   +   }
   +   const bounds = this.browserWindow.getBounds();
   +   this.webContentsView.setBounds({
   +     x: 0,
   +     y: 0,
   +     width: bounds.width,
   +     height: bounds.height,
   +    });
   +  });
   

   ヒント

   browserView.webContents とインスタンスメソッド browserView.setBounds、browserView.getBounds、browserView.setBackgroundColor の既存の使用法はすべて移行不要で、そのままの WebContentsView インスタンスで動作するはずです！

4) テストして変更をコミットする​

問題が発生しましたか？ Electron の Issue トラッカーの WebContentsView タグを確認して、発生している問題が報告済かどうかご確認ください。 ここで Issue が見つからない場合は、お気軽に新しいバグレポートを追加してください。 テストケースの要点を含めてもらえると、Issue のより適切なトリアージに役立ちます！

おめでとうございます。WebContentsView への移行が完了しました！ 🎉

Electron 33.0.0 がリリースされました! これには Chromium 130.0.6723.44、V8 13.0、Node 20.18.0 へのアップグレードが含まれています。

Electron チームは、Electron 33.0.0 のリリース発表にワクワクしています! npm install electron@latest から npm でインストールするか、リリースウェブサイト からダウンロードできます。 このリリースの詳細は続きをご覧ください。

何かフィードバックがあれば、Twitter や Mastodon で共有したり、コミュニティの Discord に参加してみましょう! バグや機能の要望は Electron の Issue トラッカー で報告できます。

注目すべき変更​

• PIN が必要な暗号化デバイスのロック解除に役立つハンドラ app.setClientCertRequestPasswordHandler(handler) を追加しました。 #41205
• 履歴管理を改善するために、2 つの新しい関数を追加して navigationHistory API を拡張しました。 #42014
• ネイティブのテーマの透明度チェックを改善しました。 #42862

Electron API の履歴がドキュメント内で詳解されるようになります。

こんにちは 👋、2024 年 Google Summer of Code (GSoC) の Electron のコントリビューターの、Peter です。

GSoC プログラムの過程で、Electron ドキュメントとその関数、クラスなどに API の履歴の機能を実装しました。これは、Node.js ドキュメント と同様の方法で、API ドキュメントの Markdown ファイルにシンプルかつ強力な YAML スキーマを使用できるようにし、Electron ドキュメントのウェブサイトでわかりやすく表示することで実現しました。

Electron 32.0.0 がリリースされました! これには Chromium 128.0.6613.36、V8 12.8、Node 20.16.0 へのアップグレードが含まれています。

Electron チームは、Electron 32.0.0 のリリース発表にワクワクしています! npm install electron@latest から npm でインストールするか、リリースウェブサイト からダウンロードできます。 このリリースの詳細は続きをご覧ください。

何かフィードバックがあれば、Twitter や Mastodon で共有したり、コミュニティの Discord に参加してみましょう! バグや機能の要望は Electron の Issue トラッカー で報告できます。

注目すべき変更​

• ドキュメントに新しく API バージョン履歴を追加しました。これは、Google Summer of Code の一環として @piotrpdev によって作成された機能です。 詳細については、こちらのブログ記事 をご覧ください。 #42982
• ウェブの File API から非標準の File.path 拡張を削除しました。 #42053
• ブロックされたパス内のファイルまたはディレクトリを開こうとしたときに、ウェブの ファイル システム API が失敗する流れを上流と整合させました。 #42993
• webcontents.navigationHistory に、次の既存のナビゲーション関連 API を追加しました: canGoBack, goBack, canGoForward, goForward, canGoToOffset, goToOffset, clear。 以前のナビゲーション API は非推奨になりました。 #41752