Electron の舞台裏について説明するシリーズ、第二弾です。 イベントループの統合についてまだ読んでいない方は 最初の記事 をご覧ください。

ほとんどの人は Node をサーバサイドアプリケーションに使っていますが、Node の豊富な API セットと活発なコミュニティのおかげで組み込みライブラリにも最適です。 この記事では、Electron のライブラリとして Node がどのように使われているかを解説します。

ビルドシステム​

Node も Electron も GYP をビルドシステムとして使用しています。 アプリ内に Node を埋め込みたい場合は、あなたもビルドシステムとして GYP を使用する必要があります。

GYP は初めてですか? そうであれば、この記事を読み進める前に このガイド を読んでからにしてください。

Node のフラグ​

Node のソースコードディレクトリにある node.gyp ファイルには、Node をどのように構築するかが記述されており、多くの GYP 変数とともに Node のどの部分を有効にするのか、特定の設定ファイルを開くかどうかを制御しています。

ビルドフラグを変更するには、プロジェクトの .gypi ファイルに変数を設定する必要があります。 Node の configure スクリプトは、いくつかの一般的な設定ファイルを生成できます。例えば、./configure --shared を実行すると、Node を共有ライブラリとしてビルドするように指示する変数を含んだ config.gypi が生成されます。

Electron は独自のビルドスクリプトを持っているので、この configure スクリプトは使いません。 Node の設定は、Electron のルートソースコードディレクトリにある common.gypi ファイルで定義されています。

Electron と Node のリンク​

Electron では、GYP 変数 node_shared を true に設定することで Node を共有ライブラリとしてリンクしています。このため、Node のビルドタイプは executable から shared_library に変更され、Node の main エントリポイントを含むソースコードはコンパイルされません。

Electron は Chromium に同梱されている V8 ライブラリを使用しているため、Node のソースコードに含まれている V8 ライブラリは使用しません。 これは node_use_v8_platform と node_use_bundled_v8 の両方を false に設定することで実現しています。

共有ライブラリか静的ライブラリか​

Node とリンクする際には 2 つの選択肢があります。静的ライブラリとしてビルドし最終的な実行ファイルにインクルードするか、共有ライブラリとしてビルドし最終的な実行ファイルと一緒に頒布するかです。

Electron では、Node は長い間静的ライブラリとしてビルドしていました。 これはビルドがシンプルで、高水準なコンパイラの最適化が可能で、余分な node.dll ファイルいらずで Electron を頒布できました。

しかし、これは Chrome が BoringSSL を使うようになってから変わりました。 BoringSSL は OpenSSL のフォークで、いくつかの未使用の API を削除し、多くの既存のインターフェースを変更しています。 Node は依然 OpenSSL を使用しているため、コンパイラがそれらをリンクすると、矛盾するシンボルのために多数のリンクエラーを発生させてしまいます。

Electron では、Node で BoringSSL を使うことも Chromium で OpenSSL を使うこともできませんでした。そのため、Node を共有ライブラリとしてビルドするように切り替え、BoringSSL と OpenSSL のシンボルをそれぞれのコンポーネントで隠す という選択肢しかありませんでした。

この変化は、Electron にいくぶんかプラスの副作用をもたらしました。 この変更以前は、Windows 上でネイティブモジュールを使用している場合、インポートライブラリ内で実行ファイル名をハードコーディングしていたため、実行ファイル名を変更できませんでした。 Node が共有ライブラリとして構築されてからは、すべてのネイティブモジュールを node.dll にリンクしたため、この制限がなくなりました。

ネイティブモジュールのサポート​

Node のネイティブモジュール は、Node がロードするエントリ関数を定義し、Node から V8 や libuv のシンボルを検索することで動作します。 これは組み込み開発者にとっては少し面倒です。なぜなら、デフォルトではライブラリとして Node をビルドする際に V8 と libuv のシンボルが隠されており、ネイティブモジュールはシンボルを見つけられずロードに失敗するからです。

そこで、ネイティブモジュールを動作させるために Electron では V8 と libuv のシンボルを公開しました。 V8 では、Chromium の設定ファイル内の全シンボルを強制的に公開する ことで実現しています。 libuv の場合、BUILDING_UV_SHARED=1 定義を設定する ことで実現しています。

アプリで Node を起動する​

Node をビルドしてリンクする全作業の後は、最後の段階としてアプリで Node を実行します。

Node は、自分自身を他のアプリに組み込むための公開 API は多く提供していません。 通常は、node::Start と node::Init を呼び出すだけで Node の新しいインスタンスを起動できます。 しかし、Node ベースで複雑なアプリを構築する場合は、node::CreateEnvironment のような API を使用して全ステップを正確に制御する必要があります。

Electron で Node を起動する際には、公式の Node バイナリに近いメインプロセスで動作するスタンドアロンモードと、ウェブページに Node API を挿入する組み込みモードの、2 つのモードがあります。 この詳細は後々の記事で解説する予定です。

Electron コミュニティでの活動を強調するために、月刊のまとめを始めます。 各まとめには、新しいアプリ、今後の交流会、ツール、映像などが掲載されます。

このサイトはコミュニティからのプルリクエスト を通して新しい アプリ と 交流会 で更新されます。 レポジトリを Watch すれば新しい追加の通知を受け取ることができます。全て のサイトの変更に関心がない場合は、ブログ RSS フィード に登録してください。

Electron アプリを作成したり、交流会を開催したりしている場合、プルリクエスト を作成するとサイトに追加して次のまとめに載ります。

新しいアプリ​

	Demio	インバウンドセールスとマーケティング向けに制作されたオンラインセミナープラットフォーム
	Electorrent	uTorrent サーバー用リモートクライアントアプリ
	PhoneGap	ウェブ技術で綺麗なモバイルアプリを作れるオープンソースフレームワーク
	WordMark	Markdown ライター向けの軽量ブログ記事エディター
	UbAuth	OAuth 2.0 による Uber アプリケーションのアクセストークン作成をする開発者支援アプリ
	HyperTerm	HTML/JS/CSS ターミナル
	Marp	Markdown プレゼンライター
	Glyphr Studio	趣味でフォントデザインをしている人に焦点を当てた、無料でウェブベースのフォントデザイナー
	BitCrypt	Windows 向けのシンプルなファイル暗号化アプリケーション
	Trym	SVG アイコンの表示、最適化、変換に役立つ macOS 向けの綺麗で小さなアプリ
	Booker	Markdown を活かすテキストエディタ
	PhonePresenter	賢いプレゼン操作リモコン
	Yout	デスクトップで YouTube のプレイリストを見る新しい方法

新しい交流会​

Electron の舞台裏について説明するシリーズ、第一弾です。 この投稿では、 Electron が Node のイベントループをどのように Chromium と統合しているかを紹介します。

これまで、Node を GUI プログラミングに使う試みは数多くありました。GTK+ のバインディングでは node-gui が、 Qt のバインディングでは node-qt があります。 しかし、GUI ツールキットは独自のメッセージループを持っているにもかかわらず、Node は独自のイベントループに libuv を使用しています。メインスレッドは同時に 1 つのループしか実行できないため、本番環境ではどちらも動作しません。 そのために、Node で GUI のメッセージループを共通化して実行するための仕掛けとして非常に短い間隔のタイマーでメッセージループをポンピングすると、GUI のレスポンスが遅くなり、多くの CPU リソースを占有してしまいます。

Electron の開発中にも同じ問題が発生しましたが、 Node のイベントループを Chromium のメッセージループに統合するという、逆の方法を取りました。

メインプロセスとレンダラープロセス​

メッセージループの統合についての詳細の前に、 Chromium のマルチプロセスアーキテクチャについて説明します。

Electron には、メインプロセスとレンダラープロセス、2 種類のプロセスがあります (これはとても単純化してあります。詳細は マルチプロセスアーキテクチャ を参照してください)。 メインプロセスはウインドウの作成など GUI が動作するための責務を担い、レンダラープロセスはウェブページの実行とレンダリングだけを行います。

Electron では JavaScript を使ってメインプロセスとレンダラープロセスの両方を制御できるように、両方のプロセスに Node を統合する必要があるのです。

Chromium のメッセージループを libuv に置換​

最初の試みは、 Chromium のメッセージループを libuv で再実装することでした。

レンダラープロセスは、メッセージループはファイル記述子とタイマーだけをリッスンしていたので簡単でした。

しかし、メインプロセスではとても困難でした。 各プラットフォームは独自の GUI メッセージループを持ちます。 macOS の Chromium は NSRunLoop を使う一方、 Linux では glib を使います。 ネイティブ GUI のメッセージループからファイル記述子を抽出して libuv の繰り返しに与えるために多くのハックを試みましたが、それでもうまくいかないエッジケースに遭遇しました。

最終的に、短い間隔で GUI メッセージループをポーリングするタイマーを追加しました。 この結果、プロセスは一定の CPU 使用率を消費し、操作によっては長い遅延が発生してしまいました。

別のスレッドで Node のイベントループをポーリング​

libuv が成熟するにつれて、別のアプローチができるようになりました。

libuv にバックエンドファイル記述子の概念が導入されました。これは libuv がイベントループのためにポーリングするファイル記述子 (またはハンドル) です。 バックエンドファイル記述子をポーリングすることで、 libuv で新しいイベントが発生したときに通知を受けられるようになりました。

そこで Electron では、バックエンドファイル記述子をポーリングするために別のスレッドを作成しました。これは libuv API の代わりにシステムコールでポーリングしていたのでスレッドセーフでした。 そして、 libuv のイベントループで新しいイベントがあるとき、メッセージが Chromium のメッセージループに送信され、 libuv のイベントはメインスレッドで処理されるようになりました。

このようにして、 Chromium や Node にパッチを当てることを避けつつ、メインプロセスとレンダラープロセスで同じコードを使用できました。

コード​

メッセージループの統合の実装は electron/atom/common/ 下の node_bindings ファイルで見ることができます。 これは Node を統合したいプロジェクトでも簡単に再利用できます。

更新: 実装を electron/shell/common/node_bindings.cc に移動しました。

Electron のはじめかたをお探しですか? リリースされたばかりの 2 つの新しい Podcast を、どういうもので、なぜ作られたか、どうやって使うのかについて、その概要をお教えします。

現在、こういったものがあります。

Hanselminutes: クロスプラットフォームの Electron アプリを作る​

Electron は "ただのフレーム内のChrome" なのか、それともそれ以上のものなのか? Jessica が Scott を導く形で、Electron プラットフォームが開発業界のどこに適合するのかを的確に説明します。

JavaScript Air: Electron アプリ​

Electron は、ウェブ技術を使用してマルチプラットフォームのデスクトップアプリを作成する、妥当で人気な方法の一つになりつつあります。 このすばらしい技術に参加して、Electron を使ってデスクトップでの開発者のエクスペリエンスとユーザのエクスペリエンスを強化する流れを見てみましょう。

Electron のはじめかたをお探しの方は、最初のものを試してみてください。 2 つ目は、Nylas の Evan Morikawa による素晴らしい助言と共にアプリ構築について詳しく説明しています。

現在、来月公開予定の 2 つのポッドキャストに取り組んでいます。最新情報は Twitter アカウント @ElectronJS でお知らせします。

過去2年間、Electron は HTML、CSS、JavaScript を使用したクロスプラットフォームのデスクトップアプリケーション開発を支援してきました。 私たちのフレームワークと、それを作成したコミュニティで大きな節目を共にできるということで興奮しています。 Electron 1.0 のリリースは electronjs.org からご覧いただけます。

Electron 1.0 は、API の安定性と成熟度における大きな節目です。 このリリースでは Windows、Mac、Linux 上で真にネイティブに近い動作のアプリを構築できます。 新しいドキュメント、新しいツール、新しい Electron API 概略アプリにより、Electron アプリの構築がこれまで以上に簡単になりました。

初めての Electron アプリを素早く構築するには クイックスタートガイド を参照してください。

Electron で次に何を作るのか、楽しみにしています。

Electron の道のり​

私たちは 2 年と少し前に Atom を立ち上げた時に Electron をリリースしました。 当初 Atom Shell という名前だった Electron は、Atom のために構築したフレームワークでした。 当時の Atom は Electron が提供する特色と機能性のきっかけを生み、Atom の初期リリースを後押ししていました。

いま Electron を突き動かしているのは、メール、チャット、Git アプリ から、SQL 分析ツール、torrent クライアント、ロボット まで、あらゆる開発者や企業のコミュニティの成長です。

この 2 年間、企業とオープンソースプロジェクトの両方で、アプリケーション基盤として Electron が採用されています。 この 1 年間で、Electron は 120 万回以上ダウンロードされています。 素晴らしい Electron アプリを こちらでご紹介 します。 あなたのアプリがまだない場合は追加しましょう。

Electron API デモ​

1.0 のリリースに合わせて、Electron API を調べたり、Electron アプリをネイティブ風にする方法の詳細を学べる新アプリをリリースします。 1.0 のリリースに合わせて、Electron API を調べたり、Electron アプリをネイティブ風にする方法の詳細を学べる新アプリをリリースします。

Devtron​

Electron アプリのデバッグに役立つ新しい拡張機能も追加しました。 Devtron はオープンソース拡張機能です。 Chrome デベロッパー ツール の拡張で、Electron アプリのインスペクト、デバッグ、トラブルシューティングを支援する設計です。

機能​

• Require グラフ は、メインプロセスとレンダラープロセス両方の、アプリの内部と外部ライブラリとの依存関係の視覚化に役立ちます。
• IPC モニタ は、アプリ内のプロセス間で送受信されたメッセージを追跡して表示します。
• イベントインスペクタ は window、app、process などのコア Electron API にアプリが登録しているイベントやリスナーを表示します。
• アプリリンター はあなたのアプリのよくある間違いや機能の欠損をチェックします。

Spectron​

最後に、Electron アプリの統合テストフレームワーク Spectron の新バージョンをリリースします。

Spectron 3.0 は Electron API 全体を包括的にサポートするため、さまざまなシナリオや環境でアプリケーションを動作検証するテストを、より迅速に記述できます。 Spectron は ChromeDriverとWebDriverIO をベースにしているため、ページナビゲーション、ユーザー入力、JavaScript 実行といった API も備えています。

コミュニティ​

Electron 1.0 は、何百人もの開発者によるコミュニティの努力の成果です。 コアフレームワーク以外では、Electron アプリの構築、パッケージ、デプロイを容易にするライブラリやツールが何百とリリースされています。

新しい コミュニティ ページでは、開発中の素晴らしい Electron のツール、アプリ、ライブラリ、フレームワークを多数掲載しています。 Electron や Electron Userland といった Organization を覗けば、こういった素晴らしいプロジェクトをいくつか見られます。

Electron は初めてですか? Electron 1.0 の紹介ビデオはこちらです。

Electron 0.37 が先日 リリースされました。Chrome 47 から Chrome 49 へのメジャーアップグレードと、いくつかの新しいコア API が入っています。 この最新リリースでは、Chrome 48 と Chrome 49 に搭載されているすべての新機能が搭載されています。 これにより、CSS カスタムプロパティ、ES6 サポートの強化、KeyboardEvent の改善、Promise の改善、その他多くの新機能が Electron アプリで利用可能になります。

新機能​

CSS カスタムプロパティ​

Sass や Less のようなプリプロセス言語を使用したことがある方は 変数 に慣れていると思いますが、これを用いてカラースキームやレイアウトなどの再利用可能な値を定義できます。 変数は、スタイルシートを DRY に保ちメンテナンス性を高めるのに役立ちます。

CSS カスタムプロパティは、再利用可能という点ではプリプロセスでの変数に似ていますが、JavaScript で操作できる という更に強力で柔軟性の高い独自性があります。 この小さいながらも強力な機能により、 CSS ハードウェアアクセラレーション の恩恵を受けながら、ビジュアルインターフェイスに動的な変更を加えられ、フロントエンドコードとスタイルシートとの間でコードの重複を減らせます。

CSS カスタムプロパティの詳細は、MDN の記事 や Google Chrome のデモ を参照してください。

CSS 変数の動作​

シンプルな変数の例として、アプリ内での実行時の変更を見ていきましょう。

:root {
  --awesome-color: #a5ecfa;
}

body {
  background-color: var(--awesome-color);
}

変数の値は直接 JavaScript で取得や変更ができます。

// 変数の値 '#A5ECFA' を取得
let color = window
  .getComputedStyle(document.body)
  .getPropertyValue('--awesome-color');

// 変数の値を 'orange' に設定
document.body.style.setProperty('--awesome-color', 'orange');

変数の値は、デベロッパー ツールの Styles セクションからも編集でき、素早いフィードバックと微調整ができます。

KeyboardEvent.code プロパティ​

Chrome 48 では、新しい code プロパティが KeyboardEvent イベントで利用できるようになりました。これは、オペレーティングシステムのキーボードレイアウトとは独立した、押された物理キーです。

これにより、Electron アプリにカスタムキーボードショートカットを実装する際に、マシンや構成の違いに影響されずに正確で一貫性のあるキーボードショートカットを実装できるようになります。

window.addEventListener('keydown', function (event) {
  console.log(`${event.code} was pressed.`);
});

こちらのサンプル で実際にどうなるのか確認できます。

Promise 拒否イベント​

Chrome 49 では、拒否された Promise が処理されなかった場合に通知される window のイベントを 2 つ追加しました。

window.addEventListener('unhandledrejection', function (event) {
  console.log('A rejected promise was unhandled', event.promise, event.reason);
});

window.addEventListener('rejectionhandled', function (event) {
  console.log('A rejected promise was handled', event.promise, event.reason);
});

こちらのサンプル で実際にどうなるのか確認できます。

V8 での ES2015 アップデート​

現在、Electron に入っている V8 のバージョンでは、ES2015 の 91% を取り入れています。 ここでは、フラグやプリコンパイラ要らずですぐに使える面白い追加機能をいくつか紹介します。

デフォルト引数​

function multiply(x, y = 1) {
  return x * y;
}

multiply(5); // 5

分割代入​

Chrome 49 で 分割代入 が追加され、変数や関数パラメータの代入が非常に簡単になりました。

これにより、Electron の require はより簡潔でコンパクトな代入になりました。

ブラウザプロセスの Require​

const { app, BrowserWindow, Menu } = require('electron');

レンダラープロセスの Require​

const { dialog, Tray } = require('electron').remote;

その他の例​

// 配列を分割して 2 つ目の要素を飛ばす
const [first, , last] = findAll();

// 関数の仮引数の分割
function whois({ displayName: displayName, fullName: { firstName: name } }) {
  console.log(`${displayName} is ${name}`);
}

let user = {
  displayName: 'jdoe',
  fullName: {
    firstName: 'John',
    lastName: 'Doe',
  },
};
whois(user); // "jdoe is John"

// オブジェクトの分割代入
let { name, avatar } = getUser();

新しい Electron API​

以下にいくつかの新しい Electron API を示します。それぞれの新しい API は、Electron リリース のリリースノートで確認できます。

BrowserWindow の show イベントと hide イベント​

これらのイベントは、ウインドウが表示や非表示になったときにそれぞれ発生します。

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

let window = new BrowserWindow({ width: 500, height: 500 });
window.on('show', function () {
  console.log('Window was shown');
});
window.on('hide', function () {
  console.log('Window was hidden');
});

OS X 向けに app の platform-theme-changed​

このイベントは、システムの ダークモード テーマが切り替えられたときに発生します。

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

app.on('platform-theme-changed', function () {
  console.log(`Platform theme changed. In dark mode? ${app.isDarkMode()}`);
});

OS X 向けに app.isDarkMode()​

このメソッドは、システムがダークモードの場合は true を返し、それ以外では false を返します。

OS X 向けに BrowserWindow の scroll-touch-begin イベントと scroll-touch-end イベント​

これらのイベントは、スクロールホイールイベントフェイズの開始や終了でそれぞれ発生します。

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

let window = new BrowserWindow({ width: 500, height: 500 });
window.on('scroll-touch-begin', function () {
  console.log('Scroll touch started');
});
window.on('scroll-touch-end', function () {
  console.log('Scroll touch ended');
});

Electron アプリケーションの構築は、1 つのブラウザ向けに 1 つのコードベースとデザインを作成するだけでいいので、非常に手軽です。 しかも Electron は最新リリースの Node.js と Chromium を保持しており、同梱の優れた機能を利用できます。 これにより以前はウェブアプリに含める必要があった依存関係が解消される場合があります。

多くの機能があるため、ここでは例をいくつか取り上げます。すべての機能について知りたい場合は、Google Chromium ブログ 及び Node.js 変更ログ に目を通してください。 Node.js、Chromium、V8 の Electron での使用バージョンは electronjs.org/#electron-versions で確認できます。

V8 による ES6 サポート​

Electron は Chromium のレンダリングライブラリに Node.js を組み合わせています。 二者は同じ JavaScript エンジン V8 を共有します。 多くの ECMAScript 2015 (ES6) の機能はすでに V8 に組み込まれており、コンパイラーがなくても Electron アプリケーションで使用できます。

以下にいくつかの例を示しますが、class (strict モード)、ブロックスコープ、Promise、TypedArray などを書くこともできます。 V8 の ES6 機能の詳細については このリスト を参照してください。

アロー関数

const findTime = () => {
  console.log(new Date())
}

文字列内挿

var octocat = 'Mona Lisa';
console.log(`The octocat's name is ${octocat}`);

new.target

function Octocat() {
  if (!new.target) throw "Not new";
  console.log("New Octocat");
}

// 例外が投げられる
Octocat();
// ログが出る
new Octocat();

Array.includes

// true を返します
[1, 2].includes(2);

残余引数

// R可変長引数を配列として表現します
(o, c, ...args) => {
  console.log(args.length);
};

Chromium の機能​

Google と Chromium に貢献してくれた皆の協力のおかげで、Electron アプリを構築するときに、以下のすごいものも使用できます (これだけではありません)。

• MouseEvent.getModifierState()
• CSS.escape()
• Fetch API ストリーム

Google Chromium ブログ をフォローすれば、新しいバージョンが出るたびにその機能について知ることができます。また、Electronが使用する Chromium のバージョンは こちら で確認できます。

何か好きなものはありましたか?​

V8 や Chromium のお気に入りの組み込み機能を @ElectronJS 宛にツイートしましょう。

Electron が始まって以来、以前の Atom-Shell と呼ばれていた頃から、Chromium のコンテンツモジュールとネイティブ GUI コンポーネント向けに、クロスプラットフォームの JavaScript API を提供する実験を行ってきました。 この API の始まりは非常に原始的で、時間をかけて初期設計を改善するためにいくつかの変更を加えてきました。

Electron は 1.0 リリースに向けて準備を進めていますが、この機会を利用して、最後の問題となっていた API の詳細を記述したいと考えています。 以下で述べる変更点は 0.35.x のものです。古い API の利用に対する非推奨の警告を発するので、将来の 1.0 リリースに備えてアップデートしてもよいでしょう。 Electron 1.0 は数ヶ月先になりますので、これらの変更が破壊的になるまでの猶予があります。

非推奨の警告​

デフォルトでは、非推奨 API を使用している場合に警告が表示されます。 これを無効にするには、process.noDeprecation を true にします。 非推奨の API 利用のソースをトラッキングするには、警告を表示する代わりに例外を投げるように process.throwDeprecation を true に設定したり、非推奨のトレースを表示するように process.traceDeprecation を true に設定したりすることができます。

組み込みモジュールの新しい利用方法​

組み込みモジュールは、独立したモジュールに分離されるのではなく 1 つのモジュールにまとめられるようになったので、他のモジュールと競合することなく 使用できます。

var app = require('electron').app;
var BrowserWindow = require('electron').BrowserWindow;

従来の require('app') の方法は後方互換性のためにまだサポートされますが、以下のようにして無効化もできます。

require('electron').hideInternalModules();
require('app'); // エラーを送出します。

remote モジュールの利用がより簡単に​

組み込みモジュールの使い方が変わったので、レンダラープロセスでメインプロセス側のモジュールを使いやすくしました。 以下のように、remote の属性にアクセスするだけで利用できるようになります。

// 新しい方法です。
var app = require('electron').remote.app;
var BrowserWindow = require('electron').remote.BrowserWindow;

以下のような長い require チェーンはもう不要です。

// 古い方法です。
var app = require('electron').remote.require('app');
var BrowserWindow = require('electron').remote.require('BrowserWindow');

ipc モジュールの分割​

ipc モジュールはメインプロセスとレンダラープロセスの両方に存在し、それぞれの側での API が異なっていたため、新規ユーザーは非常に混乱していました。 混乱を避けるため、メインプロセスの ipcMain とレンダラープロセスの ipcRenderer にモジュール名を変更しました。

// メインプロセス
var ipcMain = require('electron').ipcMain;

// レンダラープロセス
var ipcRenderer = require('electron').ipcRenderer;

また、ipcRenderer モジュールでメッセージを受け取る際に event オブジェクトが追加されました。これは ipcMain モジュールでメッセージがどのように処理されるかを併せています。

ipcRenderer.on('message', function (event) {
  console.log(event);
});

BrowserWindow オプションの標準化​

BrowserWindow のオプションは、他 API のオプションとスタイルが異なっていたり、名前に - が入っていたりしていたため、JavaScript では少し扱いづらかったようです。 これらは、従来の JavaScript の名前に標準化されました。

new BrowserWindow({ minWidth: 800, minHeight: 600 });

DOM の API 名の規約に準拠​

Electron の API 名は、以前は URLではなく Url のように、すべての API 名で camelCase を使用していましたが、DOM には独自の規約があり、ID ではなく Id を使いつつも、Url ではなく URL を使用しています。 DOM のスタイルに合わせて、以下の API の名称変更を行いました。

• Url を URL に名称変更しました。
• Csp を CSP に名称変更しました。

これらの変更によって、アプリで Electron v0.35.0 を使用していると非推奨の通知が多く出てくると思われます。 これは簡単な方法で修正できます。すべての Url の記述を URL に置換するだけです。

Tray のイベント名の変更​

Tray のイベント名のスタイルが他のモジュールと少し異なっていたため、他のモジュールと一致するように名前を変更しました。

• clicked を click に名称変更しました。
• double-clicked を double-click に名称変更しました。
• right-clicked を right-click に名称変更しました。

最近、Electron は 2 つの面白い機能を追加しました。Mac App Store 互換ビルドと組み込み Windows 自動更新です。

Mac App Store サポート​

v0.34.0 現在、Electron の各リリースは Mac App Store 互換のビルドとなっています。 以前は、Electronで構築されたアプリケーションは、Mac App Store に提出する際の Apple の要件を満たしていませんでした。 これら要件のほとんどは、非公開 API の使用に関するものです。 Electron をサンドボックス化して要件を満たすようにするには、2 つのモジュールを削除する必要があります。

• crash-reporter
• auto-updater

加えて、DNS の変更、ビデオキャプチャ、アクセシビリティ機能の検出に関して、いくつかの動作が変更されました。 変更の詳細についてはドキュメント内の Mac App Store へのアプリ提出 を参照してください。 このディストリビューションは Electron リリースページ にあり、頭に mas- が付いています。

関連するプルリクエストは以下の通りです。electron/electron#3108、electron/electron#2920

Windows 自動更新​

Electron v0.34.1 では、auto-updater モジュールが Squirrel.Windows で動作するように改善されました。 つまり、Electron なら OS X と Windows の両方で簡単に自動更新できるアプリを公開できます。 ドキュメントに Windows での自動更新のアプリ設定 に関する読み物があります。

関連するプルリクエストは electron/electron#1984 です。

近日中、Electron に面白いアップデートと講演がいくつかあります。ここではそのまとめを紹介します。

資料​

Electron は v0.32.0 で Chrome 45 に更新します。 その他アップデートもあります...

ドキュメントの改善​

見た目と読みやすさを向上するために、ドキュメントを再構成し標準化しました。 日本語や韓国語など、コミュニティが寄稿したドキュメントの翻訳もあります。

関連するプルリクエストは次の通りです。 electron/electron#2028、 electron/electron#2533、 electron/electron#2557、 electron/electron#2709、 electron/electron#2725、 electron/electron#2698、 electron/electron#2649。

Node.js 4.1.0​

v0.33.0 から Electron は Node.js 4.1.0 を同梱します。

関連するプルリクエストは electron/electron#2817 です。

node-pre-gyp​

node-pre-gyp 依存のモジュールは、ソースからビルドするときに Electron に対してコンパイルできるようになりました。

関連するプルリクエストは mapbox/node-pre-gyp#175 です。

ARM サポート​

Electron は ARMv7 の Linux 向けビルドを提供するようになります。 Chromebook や Raspberry Pi 2 といった人気プラットフォームで動きます。

関連する Issue は次の通りです。 atom/libchromiumcontent#138、 electron/electron#2094、 electron/electron#366。

Yosemite 式フレームレスウインドウ​

@jaanus によるパッチがマージされました。OS X Yosemite 以降は、他の組み込み OS X アプリと同様に、システム信号機ボタンが統合されたフレームレスウィンドウを作成できます。

関連するプルリクエストは electron/electron#2776 です。

Google Summer of Code 印刷サポート​

Google Summer of Code 開催後、@hokein によるパッチをマージして、印刷サポートを改善し、ページを PDF ファイルに印刷する機能を追加しました。

関連する Issue は次の通りです。 electron/electron#2677、 electron/electron#1935、 electron/electron#1532、 electron/electron#805、 electron/electron#1669、 electron/electron#1835。

Atom​

Atom は Chrome 44 を動かしている Electron v0.30.6 にアップグレードされました。 v0.33.0 へのアップグレードは atom/atom#8779 で進行中です。

講演​

GitHubber の Amy Palamountain は、Nordic.js の講演で Electron について素晴らしい紹介をしました。 彼女は electron-accelerator ライブラリも作成しています。

Amy Palomountain による Electron でのネイティブアプリケーション構築​

同じく Atom チームの Ben Ogle は、YAPC Asia で Electron の講演を行いました。

Ben Ogle によるウェブ技術を使用したデスクトップアプリ構築​

Atom チームのメンバー Kevin Sawicki などが最近 Bay Are Electron User Group 交流会で Electron について講演しました。 こちらに 映像 が二つ投稿されています。

Kevin Sawicki による Electron 史​

Ben Gotow によるネイティブ風ウェブアプリ制作​