Electron のコミュニティは急速に成長しており、協力な新しいアプリやツールが驚異的速さで開発されています。 この創造的な勢いを祝い、この新しいプロジェクトらをいくつかコミュニティにお知らせするため、注目の Electron 関連プロジェクトを取り上げた週刊ブログシリーズを始めることにしました。

このシリーズの第一回目の記事では、フリーランスのデザイナーと開発者で構成される世界中に分かれたチーム Wulkano が開発したオープンソースの画面録画アプリ Kap を特集します。

Kap とは何ですか?​

Kap はオープンソースの画面録画機 です。主にデザイナーや開発者が自分の作品を簡単にキャプチャするために作りました。 プロトタイプのアニメーションを共有したり、バグを文書化したり、ネタ GIF を作成したりといったことに使われています。

老若男女の方々が、教育現場、スクリーンキャスト、チュートリアル などで使用しているようです。 製品のアセット作成にも使われています! この小さなサイドプロジェクトがこれだけ受け入れられていることに、ただただ圧倒されるばかりです。

どうしてこのアプリを構築したのですか?​

非常に良い質問ですね。画面録画機が無いからといったわけではありません! 私たちは、画面録画機の代替物が複雑すぎたり、高価すぎたり、限定的すぎたりしていると感じました。 常用としては、ちょうどいい と感じるものが何もなかったのです。 また、仕事に使うツールはオープンソースであったほうが素晴らしいとも思います。 Kap の構築は、特に何もしなかったようなものです。 自分たちが使いたいと思うツールのイメージになるように、小さな改良を積み重ねてこだわりました。

しかし、一番大切なのはきっと、私たちのように悩みを捨ててものづくりを楽しむ場所に Kap がなっていることでしょう。 ベンチャーのように、新しいことに挑戦して創作を楽しむ環境を作ることはとても重要です。 要件も、圧力も、期待もありません。 デザイナーとデベロッパはプロジェクトの味方であるべきでしょうか? もちろん、そうです。 そうあるべきでしょう。

Electron で Kap を構築することにしたのはなぜですか?​

いくつか理由がありました。

• ウェブ技術
• チームの殆どがウェブ開発者
• JavaScript に投資している
• コントリビュートの門戸を開いている
• Electron 自体がオープンソース
• node_modules のモジュール性により強力で保守が容易
• クロスプラットフォーム化可能

私たちはアプリの未来がブラウザにあると考えていますが、まだそこまでではありません。 Electron は、その未来に向けての大事な一歩です。 アプリ自体だけでなく、そのアプリを作るコードにもアクセスしやすくなります。 OS がブラウザ、タブは基本的に Electron アプリという面白そうな未来のアイデアも想像しています。

さらに、主にウェブ開発者である私たちは、クライアント、サーバー、そして今ではデスクトップで JavaSscript を実行できるという点で JS の同型性が大好きです。 ウェブ技術 (HTML、CSS、JS) を使えば、プロトタイピングの高速化、コードの削減、フレックスボックス > 自動レイアウト (macOS/iOS) といった大抵のことがネイティブよりもはるかにシンプルになります。

Kap 構築の際に直面した課題はありますか?​

Electron から利用できるリソースで画面録画することが最大の課題でした。 それは私たちの要件を満たすだけの性能がなく、プロジェクトは失敗に終わったかに見えました。 Electron 自体に非はありませんが、ネイティブ開発とウェブ技術でのデスクトップアプリ構築にはまだ隔たりがあります。

私たちは getUserMedia API のパフォーマンス低下を避けるために多くの時間を費やしました。 Kap を作ろうとしたときの主な目標の一つが、ウェブ技術でアプリ全体を構築することでした。 それを動作させる (最低でも Retina スクリーンで 30 FPS にする) ためにできる限りのことを試した後、最終的には別の解決策を見つけることになりました。

レポジトリに Swift のコードがあるようです。 いったいどういうことでしょうか?​

getUserMedia の代替品を探すことを余儀なくされ、私たちは ffmpeg で実験を始めました。 オーディオとビデオ変換の最高のツールであることに加えて、ほぼすべての OS で画面を記録する機能があります。そして Retina スクリーン上で 30 FPS という最低要件を満たすサクサクの映像を録画できました。 問題? パフォーマンスは "😩" で、CPU の使用率はぐちゃぐちゃでした。 そこで、私たちは振り出しに戻って選択肢を話し合い、妥協しなければならないと気付きました。 その結果、Aperture という独自の macOS 用画面録画ライブラリが誕生しました。

Electron はどういった領域で改善されるべきでしょうか?​

Electron アプリが RAM を食うというのは知っていますが、これは Chromium の問題です。 これは動作の一部であり、実行対象に依存します。例えば、Kap や Hyper なら通常 100MB 以下のメモリしか使用しません。

私たちが関心のある最大の改善点の一つはペイロード、特に Electron が Chromium を頒布する手段です。 システムで共有の Electron コアがあり、それがシステム上に既に存在するかどうかをアプリのインストーラーにチェックさせるというアイデアを一つ考えています。

クロスプラットフォームの Electron アプリを作れば、より良い体験が得られるかもしれません。 現在は、不整合、プラットフォーム固有の API、プラットフォーム間の機能の欠落が多すぎて、コードベースが if-else 文だらけになってしまいます。 例えば、振動は macOS でしかサポートされておらず、自動アップデーターは macOS と Windows で動作が異なり Linux ではサポートされていません。 透過は Linux 上だとヒットするかしないかになり、通常はヒットしません。

また、ネイティブシステムの API を簡単に呼び出せるようにするべきです。 Electron には非常に優れた API が用意されていますが、時には提供されていない機能が必要になることもあります。 ネイティブ Node.js アドオンを作るのも選択肢の一つですが、この作業は苦痛です。 理想的には、例えば fastcall のような FFI API を搭載したものが Electron にはあるべきでしょう。 これにより、JavaScript で Swift の部分を代わりに書けるようになります。

Electron の好きなところは何ですか?​

私たちのお気に入りは、ウェブ制作の知識があれば誰でもマルチプラットフォームのネイティブ作品を構築して貢献できるという点です。 優れたドキュメントと活気に満ちたエコシステム。そこで開発することの容易さと喜びは言うまでもありません。

フロントエンドの観点からすると、Kap の構築はブラウザの API を使ったシンプルなウェブサイト構築と何ら変わらないように感じました。 Electron はアプリ開発をウェブ開発と似たような (基本的には同じような) ものにする、本当に素晴らしい仕事をしてくださっています。 実際には、フレームワークなどは必要なく、簡潔にモジュール化された JS と CSS だけで済むシンプルなものでしたが。

私たちは、構築、コントリビュート、サポート、メンテナンスにおいて活発でフレンドリーなチームが集まるこのコミュニティも大好きです。 みなさんにハグを!

Kap の今後の予定は何ですか?​

次のステップは、2.0.0 のマイルストーンに向けてアプリをレビューすることです。これはプラグインのサポートに加えて React の書き換えが含まれており、開発者は Kap の機能を拡張できるようになります! プロジェクトに賛同し私たちの GitHub リポジトリ に貢献するすべての人を招待します。 私たちはできる限り多くの方のお声を耳にしたいと思っています。Kap を少しでも最高のツールにするあなただけの方法を教えてください!

Wulkano とは何ですか?​

Wulkano はデザインスタジオ兼デジタル共同体です。クライアントの仕事と自分たちのプロジェクトの両方で一緒に仕事をすることが大好きなリモート技師のチームです。 私たちはバラバラの土地や経歴ですが、緊密に結びついたグループです。知識、アイデア、経験をバーチャルオフィスで共有しています。でも大事なのは、くだらない GIF やミームの共有でしょうか (これは偶然にも Electron ベースの Slack で行われています!)。

他の開発者に役立つ Electron のノウハウはありますか?​

コミュニティ に参加したり、Awesome Electron をチェックしたり、サンプル を見たり、ドキュメント を活用したりしましょう。

先日、サンフランシスコにある女性のためのプログラミングスクール Hackbright Academy の会員のために、 GitHub 本社で Electron ハッカソンを開催しました。 参加者がプロジェクトを開始しやすくするために、 Kevin Sawicki がいくつかのサンプル Electron アプリケーションを作ってくれました。

あなたが Electron での開発を始めたばかりか、まだ試したことないのであれば、これらのサンプルアプリケーションは良いスタートとなるでしょう。 小さく、読みやすく、丁寧にコメントされたコードがどのように動いているかを説明してくれます。

始めるには、このリポジトリをクローンします:

git clone https://github.com/electron/simple-samples

いずれかのアプリを起動するには、そのアプリのディレクトリに入り、依存をインストールして開始します:

cd activity-monitor
npm install
npm start

アクティビティモニター​

CPU におけるシステム、ユーザ、アイドル状態の時間をドーナツグラフで表示します。

ハッシュ​

入力されたテキストのハッシュ値をいくつかのアルゴリズムを使って表示します。

ミラー​

最大化されたサイズで、鏡を見ているかのようにコンピュータのカメラの映像を再生します。 任意で CSS アニメーションを利用した虹色フィルタ効果を含みます。

価格​

Yahoo Finance API を用いて、現在の原油、金、銀の価格を表示します。

URL​

コマンドラインで渡された URL をウィンドウに表示します。

その他の資料​

Electron の利用を開始するためにこれらのアプリが役立つことを願います。 さらに学習するための便利な資料がこちらです:

• electron-quick-start: 最小の Electron アプリケーションテンプレート。
• Electron API Demos: Electron API のコア機能を試すためのインタラクティブアプリ。
• electronjs.org/docs/all: すべての Electron ドキュメントが検索しやすい 1 ページに。
• hokein/electron-sample-apps: Electron メンテナ Haojian Wu によってコンパイルされたサンプルアプリケーションたち。
• awesome-electron - 最新で最良の Electron に関するチュートリアル、本、動画などを集めた GitHub リポジトリ。

私達は新しい userland セックションを Electron のウェブサイトに追加して、ユーザーが私達の反映するオープンソースのエコシステムを構成する人々、パッケージ、アプリを発見する手助けをしています。

ユーザーランドの起源​

Userland は、ソフトウェアコミュニティの人々が一緒にツールやアイデアを共有する場所です。 この用語は Unix のコミュニティに由来しています。カーネルの外で実行されたプログラムを Userland と呼んでいましたが、今日ではそれ以上のことを意味しています。 今日のJavaScript コミュニティの人々が Userland を参照するとき、通常は npm パッケージレジストリ について話しています。 これは実験とイノベーションが多く発生する場所です。一方 Node とJavaScript 言語は(Unixカーネルのように) 比較的小さく安定したコア機能のセット保持しています。

NodeとElectron​

Node と同様に、Electron にはコア API の小さなセットがあります。 これらは、マルチプラットフォームのデスクトップアプリケーションの開発に必要な基本的な機能を提供します。 この設計思想により、Electronは過度にルールに則りすぎたものになることなく、柔軟性を持つツールであり続けることが可能になっています。

Userland はコアの対義語であり、ユーザーはElectronの機能を拡張するツールを作成し、共有することができます。

データ収集​

私達のエコシステムのトレンドをよりよく理解するために、electron やelectron-prebuiltに依存する15,000ものパブリックなGitHubリポジトリからメタデータを分析しました。

私達はGitHub API, とlibraries.io API、それに npm レジストリを使用して、依存関係、開発の依存関係、パッケージ、作者、リポジトリの貢献者、リポジトリからのダウンロード数、リポジトリのフォーク数、夢想家の数の情報を収集しました。

次に、レポートを生成するために以下のデータを使用しました。

• アプリ開発依存関係: Electron アプリで devDependencies として最も頻繁にリストされているパッケージ。
• GitHub 貢献者: Electron に関連する GitHub リポジトリに多数貢献した GitHub のユーザー。
• パッケージ依存関係: 他のnpm パッケージによって頻繁に依存している、Electron 関連の npm パッケージ。
• お気にいり Apps: (npm パッケージではない) Electron アプリと多くの夢想家を持つ。
• 最多ダウンロードパッケージ: 多くダウンロードされている Electron 関連の npm パッケージ。
• アプリ依存関係: Electron アプリで dependencies として最も頻繁にリストされているパッケージ。
• パッケージの作者: Electron 関連の npm パッケージの最も多作の者。

結果のフィルタリング​

アプリの依存関係 やパッケージ、アプリ、リポジトリなどのリストアップしたおきにいりアプリのようなレポートは結果をフィルタするために使用するテキスト入力をもっています。

この入力に入力すると、ページの URL が動的に更新されます。 特定のスライスを表す URL をコピーして他のユーザーと共有できます。

より多くの人の参加​

今回の第一号報告は、始まりに過ぎません。 今後も、コミュニティがどのように Electron を構築しているかについてのデータを収集し、ウェブサイトに新しいレポートを追加していく予定です。

このデータを収集し表示するためのツールはすべてオープンソースです。

• electron/electronjs.org Electron のウェブサイト。
• electron/electron-userland-reports: Electron のユーザーランドにあるパッケージ、レポジトリ、ユーザーに関するデータの断片。
• electron/repos-using-electron: electron または electron-prebuilt に依存する GitHub 上のすべての公開リポジトリ
• electron/electron-npm-packages: package.json ファイルに electron を記載しているすべての npm パッケージ。

これらのレポートを改善する方法についてのアイデアをお持ちでしたら、ウェブサイトリポジトリまたは上記のリポジトリのいずれかにIssueを立ててお知らせください。

Electron コミュニティのおかげで、今日の userland を作ることができました！

Electron の基盤となる Chrome のライブラリ libchromiumcontent には、ビルド時間から 10 週間ずれた時間になることによって、一部の Symantec、GeoTrust、Thawte SSL/TLS 証明書が拒否されてしまう問題があります。Electron 1.4.12 には、この上流の Chrome の問題を修正する重要なパッチが含まれています。 影響を受けるサイトの証明書自体に問題はなく、これらの証明書を置き換えても何もありません。

Electron 1.4.0 — 1.4.11 では、これらの影響を受ける証明書のサイトへの HTTPS リクエストは、特定の日付以降、ネットワークエラーになります。 これは、window.fetch、Ajax リクエスト、Electron の net API、BrowserWindow.loadURL、webContents.loadURL、<webview> タグの src 属性など、Chrome の基盤となるネットワーク API を使用して行われた HTTPS 要求に影響します。

アプリケーションを 1.4.12 にアップグレードすると、これらのリクエストエラーが発生しなくなります。

注釈: この問題は Chrome 53 から発生したため、1.4.0 以前のバージョンの Electron は影響を受けません。

影響日​

以下は、Electron 1.4 の各バージョンと、影響を受ける証明書のサイトへのリクエストが失敗し始める日付の表です。

アプリの影響日へコンピューターの時計を進めて、https://symbeta.symantec.com/welcome/ から正常に読み込まれるかどうか確認してください。

詳細情報​

このトピック、大元の問題、修正の詳細については、以下のサイトで見ることができます。

• 証明書の透明性とは?
• Symtantec ナレッジデータベースの記事
• Chrome issue 664177
• issue 664177 の Chrome 修正
• issue 664177 の libchromiumcontent パッチ

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

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

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

新しい講演​

9 月に、GitHub は GitHub Universe カンファレンスを開催し、ソフトウェアの未来を築く人々のためのイベントだと宣言しました。 このイベントでは、面白い Electron の講演がいくつかありました。

• Slack のソフトウェアエンジニア Machisté Quintana による Electron の開発をより単純に、より快適に、より生産的に。
• GitHub の Electron 開発者 Zeke Sikelianos による Electron: ウェブ言語を使用したデスクトップアプリ。

また、12 月 5 日のパリで、Zeke は dotJS 2016 で Electron の講演を行います。

新しいアプリ​

	Pexels	完全無料の写真を検索、クリップボードにコピーします
	Timestamp	カスタマイズ可能な日付/時刻表示とカレンダーを備える、優れた macOS メニューバー時計
	Harmony	Spotify、Soundcloud、Play Music、ローカルファイル互換の音楽プレーヤー
	uPhone	WebRTC デスクトップ通話
	SealTalk	RongCloud IM Cloud Service と IM SDK による簡易メッセージングアプリ
	Infinity	簡単なプレゼン制作
	Cycligent Git Tool	Git プロジェクト用のわかりやすい視覚的 GUI
	Foco	Foco なら集中できて生産性向上
	Strawberry	一期一会のお客様によりよいサービスを提供するためのレストランソフトウェア一式
	Mixmax	あなたのメールに、どんなアクションでも、どこでも、リアルタイムで。
	Firebase Admin	Firebase データ管理ツール
	ANote	簡単親切な Markdown ノート
	Temps	シンプルで賢い天気アプリ
	Amium	ファイル対話型作業統合プロダクト
	Soube	シンプルなミュージックプレイヤー
	(Un)colored	HTML & Markdown 互換テーマでドキュメントを保存する次世代のデスクトップリッチコンテンツエディタ。 Windows、OS X、Linux 対応。
	quickcalc	メニューバー電卓
	Forestpin Analytics	企業向け財務データ分析ツール
	Ling	REST クライアント
	Shortexts	頻繁にコピーするフォルダと絵文字のテキストショートカット
	Front-End Box	フロントエンドコード生成機のセット

本日、Electron のドキュメントに対していくつか改善する点を発表します。 新しいリリースごとに、Electron のすべての公開 API を詳細に説明する JSON ファイル を同梱します。 このファイルを作成したことで、開発者は Electron の API ドキュメントの面白くて新しい使用方法ができるようになりました。

スキーマの概要​

各 API は、名前、説明、型などの特性を持つオブジェクトです。 BrowserWindow や Menu のようなクラスには、インスタンスメソッド、インスタンスプロパティ、インスタンスイベントなどもあります。

以下は BrowserWindow クラスを説明しているスキーマからの抜粋です。

{
  name: 'BrowserWindow',
  description: 'Create and control browser windows.',
  process: {
    main: true,
    renderer: false
  },
  type: 'Class',
  instanceName: 'win',
  slug: 'browser-window',
  websiteUrl: 'https://electronjs.org/docs/api/browser-window',
  repoUrl: 'https://github.com/electron/electron/blob/v1.4.0/docs/api/browser-window.md',
  staticMethods: [...],
  instanceMethods: [...],
  instanceProperties: [...],
  instanceEvents: [...]
}

次に、メソッドの説明の例を示します。以下は apis.BrowserWindow.instanceMethods.setMaximumSize インスタンスメソッドです。

{
  name: 'setMaximumSize',
  signature: '(width, height)',
  description: 'Sets the maximum size of window to width and height.',
  parameters: [{
    name: 'width',
    type: 'Integer'
  }, {
    name: 'height',
    type: 'Integer'
  }]
}

新しいデータを使う​

開発者がプロジェクトでこの構造化データを簡単に使用できるように、新しい Electron リリースごとに自動公開される小さな npm パッケージ electron-docs-api を作成しました。

npm install electron-api-docs --save

すぐに試したいなら、Node.js REPL 内でこのモジュールを試してみてください。

npm i -g trymodule && trymodule electron-api-docs=apis

データの収集方法​

Electron の API ドキュメントは Electron Coding Style と Electron Styleguide に準拠しているため、内容はプログラムで解析できます。

electron-docs-linter は electron/electron レポジトリの新しい開発用依存関係となります。 これは、すべての Markdown ファイルを lint し、スタイルガイドのルールを適用するコマンドラインツールです。 エラーが見つかった場合、それらが列挙され、リリースプロセスが停止します。 API ドキュメントが有効な場合、electron-json.api ファイルが作成され、Electron リリースの一部として GitHub にアップロード されます。

Standard Javascript と Standard Markdown​

今年の始め頃に Electron のコードベースが更新され、全 JavaScript で standard リンターが使用されました。 Standard の README は、この決定の後ろ盾である理由の要約です。

Standard スタイルを採用するということは、個人のスタイルよりもコードの明快さとコミュニティの慣習の重要性を高く位置付けるということです。 これはプロジェクトと開発の文化にとって 100% の意義を持たないかもしれませんが、オープンソースは初心者が嫌う場所になることがあるものです。 コントリビューターにしてほしいことを自動化して明確にすれば、プロジェクトがより健全になります。

また、ドキュメント内のすべての JavaScript コードスニペットが有効であり、コードベース自体のスタイルと一貫性があることを確認するために、少し前に standard-markdown を作成しました。

これらのツールを組み合わせて、継続的インテグレーション (CI) がプルリクエストのエラーを自動的に見つけることができます。 これにより、コードをレビューする人間の負担が軽減され、ドキュメントの正確性に関する信頼性が高まります。

コミュニティ活動​

Electron のドキュメントは絶えず改善されており、素晴らしいオープンソースコミュニティがあることに感謝します。 このドキュメントの執筆時点で、約 300 人がドキュメントに貢献しています。

この新しい構造化データで皆さんが何をするのか楽しみです。 考えられる用途は以下の通りです。

• https://electronjs.org/docs/ の改善
• TypeScript を使用したプロジェクトで Electron の開発を効率的にする TypeScript 定義ファイル。
• Dash.app や devdocs.io などの検索可能オフラインドキュメントツール用

ガベージコレクションがある言語 JavaScript は、ユーザーがリソースを手動で管理しなくてよくなります。 しかし、Electron はこの環境をホストしているため、メモリリークとリソースリークの両方を避けようと非常に慎重にならざるをえません。

この記事では、弱参照の概念と、それが Electron のリソース管理でどのように使われているかを紹介します。

弱参照​

JavaScript でオブジェクトを変数に代入するというのは、必ずオブジェクトへの参照を追加していることになります。 オブジェクトへの参照がある限り、そのオブジェクトはずっとメモリに保持されます。 オブジェクトへのすべての参照がなくなる、例えばオブジェクトを格納する変数がなくなると、JavaScript エンジンは次のガベージコレクションでそのメモリを回収します。

弱参照とは、ガベージコレクションされるかどうかに影響せずオブジェクトを取得できるようにする参照です。 オブジェクトがガベージコレクションされたときにその通知もされます。 これにより、JavaScript でリソース管理を可能にします。

Electron の NativeImage クラスを例に挙げると、nativeImage.create() APIを呼び出すたびに NativeImage インスタンスが返され、これに画像データが C++ 側で格納されます。 インスタンスの処理が終わり JavaScript エンジン (V8) がオブジェクトをガベージコレクトしたら、C++ のコードが呼び出されてメモリ内の画像データが解放されるので、ユーザが手動で管理する必要はありません。

別の例としては、ウインドウ消失問題 があります。これはウインドウへの参照がすべてなくなったときにガベージコレクトされる様子を、視覚的に観察できます。

Electron での弱参照のテスト​

生の JavaScript には弱参照を代入する方法がないので、弱参照を直接テストする方法はありません。 弱参照に関連する JavaScript の API だと WeakMap がありますが、これは弱参照のキーを作成するだけなので、オブジェクトがガベージコレクトされたかどうかは知ることができません。

v0.37.8 以前のバージョンの Electron では、内部の v8Util.setDestructor API を使用して弱参照をテストできました。以下のように、渡されたオブジェクトに弱参照を追加し、オブジェクトがガベージコレクションされたときにコールバックを呼び出すものです。

// 以下のコードは Electron < v0.37.8 でのみ実行できます。
var v8Util = process.atomBinding('v8_util');

var object = {};
v8Util.setDestructor(object, function () {
  console.log('The object is garbage collected');
});

// オブジェクトへの参照を全て削除します。
object = undefined;
// GC を手動で起動します。
gc();
// コンソールに "The object is garbage collected" と出力されます。

注意としては、内部の gc 関数を公開させるために、--js-flags="--expose_gc" コマンドスイッチで Electron を起動する必要があります。

この API は後のバージョンで削除されました。このため V8 では実際にはデストラクタで JavaScript コードを実行できず、これをしようとしても確率でクラッシュします。

remote モジュールでの弱参照​

C++ でネイティブリソースを管理する以外にも、Electron は JavaScript のリソースを管理するために弱参照が必要です。 例えば、Electron の remote モジュールはいわゆる Remote Procedure Call (RPC) モジュールで、レンダラープロセスからメインプロセス内のオブジェクトを使用できるようにます。

remote モジュールの重要な課題の 1 つに、メモリリークを避けるというものがあります。 ユーザがレンダラープロセス内のリモートオブジェクトを取得する場合、remote モジュールは、レンダラープロセス内の参照がなくなるまでオブジェクトがメインプロセスに存在し続けるよう保証しなければなりません。 さらに、レンダラープロセスでリモートオブジェクトへの参照がなくなったときに、そのオブジェクトがガベージコレクションされるようにする必要があります。

例えば、適切な実装を行わないと、以下のコードはすぐにメモリリークを起こしてしまいます。

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

for (let i = 0; i < 10000; ++i) {
  remote.nativeImage.createEmpty();
}

remote モジュールのリソース管理は単純です。 オブジェクトの要求ごとにメインプロセスへメッセージが送信されます。それに対して Electron はオブジェクトをマップに保存して ID を割り当て、レンダラープロセスにその ID を送り返します。 レンダラープロセスでは、remote モジュールが ID を受け取ってプロキシオブジェクトでラップし、プロキシオブジェクトがガベージコレクションされると、オブジェクト解放のメッセージをメインプロセスに送信します。

remote.require API を例にすると、簡略化した実装は以下のようになります。

remote.require = function (name) {
  // モジュールのメタデータを返すようにメインプロセスに伝えます。
  const meta = ipcRenderer.sendSync('REQUIRE', name);
  // プロキシオブジェクトを作成します。
  const object = metaToValue(meta);
  // プロキシオブジェクトがガベージコレクションされたときに
  // オブジェクトの解放をメインプロセスに指示します。
  v8Util.setDestructor(object, function () {
    ipcRenderer.send('FREE', meta.id);
  });
  return object;
};

メインプロセスでは以下のようにします。

const map = {};
const id = 0;

ipcMain.on('REQUIRE', function (event, name) {
  const object = require(name);
  // オブジェクトへの参照を追加します。
  map[++id] = object;
  // オブジェクトをメタデータに変換します。
  event.returnValue = valueToMeta(id, object);
});

ipcMain.on('FREE', function (event, id) {
  delete map[id];
});

弱参照の辞書配列​

先述の単純な実装では、remote モジュールを呼び出すたびにメインプロセスが新しいリモートオブジェクトを返し、各リモートオブジェクトがメインプロセスのオブジェクトへの参照を表します。

デザイン自体は問題ないのですが、同じオブジェクトを受信するために複数回呼び出すと、複数のプロキシオブジェクトが作成され、複雑なオブジェクトの場合にメモリ使用量とガベージコレクションを圧迫するという問題があります。

以下のようなコードがあったとします。

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

for (let i = 0; i < 10000; ++i) {
  remote.getCurrentWindow();
}

まずプロキシオブジェクトを作成するためにメモリを多く使用し、そのガベージコレクションと IPC メッセージの送信に CPU(Central Processing Unit) を占有します。

明白な最適化としては、リモートオブジェクトのキャッシュがあります。すなわち、すでに同じ ID のリモートオブジェクトが存在する場合、新しいオブジェクトを作成するのではなく以前のリモートオブジェクトを返すようにします。

これは JavaScript コアの API ではできません。 通常の辞書配列を使ってオブジェクトをキャッシュすれば V8 によるオブジェクトのガベージコレクションを防げますが、WeakMap クラスではオブジェクトのみが弱参照のキーに使えます。

これを解決するために、値を弱参照として持つマップ型を追加しました。ID を持つオブジェクトのキャッシュに最適です。 これで、remote.require は以下のようになります。

const remoteObjectCache = v8Util.createIDWeakMap()

remote.require = function (name) {
  // モジュールのメタデータを返すようにメインプロセスに伝えます。
  ...
  if (remoteObjectCache.has(meta.id))
    return remoteObjectCache.get(meta.id)
  // プロキシオブジェクトを作成します。
  ...
  remoteObjectCache.set(meta.id, object)
  return object
}

注意として、remoteObjectCache はオブジェクトを弱参照として保管するので、オブジェクトがガベージコレクトされたときでもキーの削除は不要です。

ネイティブコード​

Electron の弱参照の C++ コードに興味がある方は、以下のファイルを参照してください。

setDestructor API:

• object_life_monitor.cc
• object_life_monitor.h

createIDWeakMap API:

• key_weak_map.h
• atom_api_key_weak_map.h

こちらは 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 リポジトリを使用してください。