こちらは 8 月時点でサイトに追加された新しい Electron アプリです。

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

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

新しいアプリ​

	Code RPGify	RPG スタイルコーディングアプリケーション
	PamFax	FAX を送受信するクロスプラットフォームアプリ
	BlankUp	すっきり度 +1 の Markdown エディタ
	Rambox	一般のウェブアプリケーションを 1 つにする、無料でオープンソースのメッセージング & メールアプリ
	Gordie	カードコレクションに最適なアプリ
	Ionic Creator	綺麗なモバイルアプリを、素早く構築
	TwitchAlerts	美麗なアラートと通知で視聴者を笑顔に
	Museeks	シンプル、クリーン、クロスプラットフォームな音楽プレーヤー
	SeaPig	Markdown から HTML へのコンバータ
	GroupMe	GroupMe 非公式アプリ
	Moeditor	汎用 Markdown エディター
	Soundnode	Soundnode アプリはデスクトップ向け Soundcloud です
	QMUI Web	QMUI ウェブデスクトップは、QMUI ウェブフレームワークをベースにプロジェクト管理をするアプリケーションです
	Svgsus	SVG の整理、整頓、変換
	Ramme	非公式 Instagram デスクトップアプリ
	Insomnia	REST API クライアント
	Correo	Windows、macOS、Linux 向けメニューバー/タスクバー Gmail アプリ
	KongDash	Kong Admin API のデスクトップクライアント
	Translation Editor	INTL ICU メッセージの翻訳ファイルエディター (formatjsio を参照)
	5EClient	5EPlay CSGO クライアント
	Theme Juice	ローカルの WordPress 開発を簡単に

アクセシビリティの高いアプリケーションを作ることは重要です。開発者がすべてのユーザ向けのより良いアプリケーション開発を手助けする新機能 Devtron と Spectron を紹介します。

Electron アプリケーションのアクセシビリティに関する懸念は、どちらも最終的に HTML であるため、ウェブサイトと同様です。 しかし、Electron アプリケーションでは、アプリケーションに監査機を指す URL がないため、アクセシビリティ監査にオンラインリソースを使用することはできません。

これらの新機能は、監査ツールを Electron アプリに提供します。 Spectron でテストに監査を追加するか、開発者向けツール内で Devtron で監査を使用するかを選択できます。 詳細は、ツールの概要を読むか アクセシビリティドキュメント をご覧ください。

Spectron​

Spectron テストフレームワークで、アプリケーション内の各ウィンドウと <webview> タグを監視できます。 以下がその例です。

app.client.auditAccessibility().then(function (audit) {
  if (audit.failed) {
    console.error(audit.message);
  }
});

この機能の詳細は Spectron のドキュメント にて閲覧できます。

Devtron​

Devtronでは新機能のアクセシビリティタブが利用できます。このタブでは、アプリケーション内の監視結果をソートしたり、フィルタによって絞り込んだりできます。

いずれのツールも Google が Chrome 向けに開発した Accessibility Developer Tools ライブラリを利用しています。 このライブラリが使用しているアクセシビリティ監査のルールに関する詳細は、リポジトリの wiki に記載されています。

これ以外の Electron 向けに使用可能な素晴らしいアクセシビリティツールをご存じの方は、 ぜひアクセシビリティに関するドキュメント に追加してプルリクエストをお送りください。

Electron バージョン 1.3.1 では、 npm install electron --save-dev とすればコンパイル済みの Electron をアプリにインストールできます。

ビルド済み Electron ライブラリ​

Electron アプリの開発経験があれば、おそらく electron-prebuilt npm パッケージを触ったことがあるでしょう。 このパッケージはほぼすべての Electron プロジェクトにおいて不可欠なものです。 インストールされると、オペレーティングシステムを検出し、ビルド済みバイナリの中からそのシステムアーキテクチャに適したものをダウンロードします。

新しい名前​

Electron のインストール過程は、新規開発者にとっての壁となりがちでした。 多くの勇敢な人々が、npm install electron-prebuilt ではなく npm install electron を実行して Electron アプリの開発を始めようとしたところ、(多くの場合、混乱の末に) それが探していた electron ではないことに気づいたでしょう。

これは、 GitHub の Electron プロジェクトが作られる前から electron プロジェクトが npm に存在していたためです。 Electron での開発がより簡単で直感的になるよう、私たちは既存の electron の所有者に連絡を取り、名前を使わせてもらえないかを交渉しました。 幸い、彼は私たちのプロジェクトに賛同しており、名前の再利用に協力して下さいました。

Prebuilt との営み​

バージョン 1.3.1 では、electron と electron-prebuilt のパッケージを npm に同時公開するようになりました。 2 つのパッケージは同じです。 現在プロジェクトで electron-prebuilt を使用している数多の開発者のために、しばらくの間、両方の名前でパッケージを公開することを決めました。 新しい electron に依存するように package.json ファイルを更新することを推奨しますが、 2016 年末までは新しいバージョンの electron-prebuilt もリリースされます。

electron-userland/electron-prebuilt は electron npm パッケージに対する正規のホームリポジトリとして残ります。

謝辞​

@mafintosh には特別な感謝を捧げます。 @maxogden をはじめとする多くの 貢献者の方々 には、electron-prebuilt の作成と保守、そして JavaScript、Node.js、Electron コミュニティへのたゆまぬご協力に感謝します。

そして npm で electron パッケージを引き取らせてくれた @logicalparadox に感謝します。

プロジェクトの更新​

この変更に影響される人気のパッケージを更新するために、コミュニティと協力してきました。 electron-packager 、 electron-rebuild 、 electron-builder のようなパッケージは、古い名前をサポートしつつ、既に新しい名前で動作するように更新されています。

新しいパッケージをインストールするときに何らかの問題が発生した場合、 electron-userland/electron-prebuilt リポジトリに Issue を開いてお知らせください。

Electron に関する他の問題については、 electron/electron リポジトリを使用してください。

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 宛にツイートしましょう。