Electron のブログ

今週のプロジェクト: Ghost

2017年2月14日 · 読むのにかかる時間 1 分

felixrieseberg

zeke

今週、Slack のデスクトップエンジニアであり、Ghost 出版プラットフォームの Electron クライアントである Ghost Desktop のメンテナー Felix Rieseberg と談話しました。

Ghost とは何ですか?

Ghost は、モダンなオンライン出版物を作成し稼働するための、完全にオープンソースの改造可能なプラットフォームです。 Zappos から Sky News まで、ブログ、雑誌、ジャーナリストを支えています。

他の出版プラットフォームとの違いは何ですか?

Ghost は、プロ向け出版物作成だけに特化した新しいプラットフォームを作成する Kickstarter キャンペーンが非常に成功した後の、2013 年 4 月に設立されました。私たちの使命は、世界中の独立したジャーナリストや作家のために最高のオープンソースツールを作成し、オンラインメディアの未来に真の衝撃を与えることです。シンプルで、より焦点を絞ったエクスペリエンスを提供します。このエディタは、可能な限り最高の執筆体験を提供することだけを目的に設計しました。

従来の WordPress と比較すると、シンプルで合理化されたエクスペリエンスを提供しています。セットアップとメンテナンスが簡単で、すべての大事な機能が付属しており、劇的に高速です。他のオンラインプラットフォームと比べても、Ghost はライターがコンテンツの完全な所有権と制御を得ることで完全なカスタマイズができ、執筆者は出版物を中心としたビジネス構築ができます。

Ghost は営利団体ですか?

これは私たちにおいて大事なところです。Ghost は独立した非営利組織です。言論の自由は重要であるという信念の下、モダンなジャーナリズムとブログのための出版ツールを構築します。当ソフトウェアは自由なオープンソースライセンスでリリースされており、当社のビジネスモデルは完全に透明です。当社の法的構造では、収益の 100% が Ghost の改善に再投資されます。

Ghost デスクトップとは何ですか?

Ghost デスクトップなら、ライターは複数のブログを一度に管理でき、執筆に集中できます。一般的な執筆ショートカットのような単純なものでも、ブラウザでは実現できませんがデスクトップアプリならできます。他のアプリケーションがディープリンク経由のブログと直接通信できるようにします。

Ghost ジャーナリズム版とは何ですか?

今年、10 人のフルタイムのゴーストチーム全体が 3 つまでの独立した出版物の成長を支援し、その活動に 45,000 ドルのリソースを費やすという心躍る計画をしています。これを Ghost ジャーナリズム版と呼びます。

約 3 年半にわたって、独立系出版社向けにウェブの次世代優良プラットフォームとして Ghost を構築してきましたが、今になって非常に興味深い変曲点に到達しました。この旅は、誰でも使えるようなシンプルで上手く設計されたブログプラットフォームを作成するところから始まりました。旅はいつも一歩ずつ進みました。

長期的には、Ghost を世界最高のジャーナリズム向けのとてつもないプラットフォームにしたいと考えています。人々を引き付ける機能を構築する必要があるのです。今年はそれだけに集中する、と非常に意識的に決定しています。

Electron で Ghost デスクトップを構築することにしたのはなぜですか?

Ghost はバックエンドとフロントエンドの両方で JavaScript とNode.js を使用するため、同じ技術と経験が利用できます。これにより、チームはより迅速な行動とより多くの構築ができ、やがてより良いエクスペリエンスを提供できます。さらに、macOS、Windows、Linux バージョン間でアプリのコードの 95% 以上を共有できるため、プラットフォームごとに 1 つずつコードベースを維持する必要がなく、優れたコアユーザーエクスペリエンスの構築に集中できます。

Ghost デスクトップ構築の際に直面した課題はありますか?

最も難しいサービスを一つ挙げるとすれば、スペルチェックです。数あるオンラインサービスは簡単に利用できますが、ユーザーのプライバシーと自主性を守りながら複数言語のテキストを正しくスペルチェックするのは、簡単な課題ではありません。

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

Electron がオペレーティングシステムのネイティブのスペルチェック機能をアプリから使えるようにすることを望みます。 <input> フィールドが NSTextView と同じサービスを受けられる世界を夢見ていますが、それがいかに難しいかはよく知っています。

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

JavaScript は、数え切れないほどのツールとフレームワークを含む広大なエコシステムだと有名で、その利便性は誇張しかねます。 Electron でのアプリ構築は、ウェブアプリ構築より ほんの少し 難しいだけです。これは驚くべき偉業でしょう。

Ghost はこれで終わりですか? それとも、今後何かありますか?

Ghost デスクトップも進行中のプロジェクトであり、まだまだ完成には程遠い状態です。ここのところ、完全なオフラインモードをユーザーに提供することについて議論しており、かなり実現に近づいています。他に手を加える注目すべき箇所は、他のテキスト編集アプリ (Word や Atom など) 向けの拡張と統合です。最終的には、ユーザーが好みのツールで記事を書けるようにします。一般に、オフラインモード機能を搭載するにあたって、オペレーティングシステムとのより密接な統合方法を探します。面白そうだと思っていただけたのであれば、ぜひご参加ください!

お気に入りの Electron アプリはありますか?

私は Kap、Felony、Visual Studio Code の大ファンです。

👻

今週のプロジェクト: Beaker ブラウザ

2017年2月7日 · 読むのにかかる時間 1 分

pfrazee

zeke

今週は、Beaker ブラウザの作者 Paul Frazee に突撃しました。 Beaker は実験的な P2P ウェブブラウザで、Dat プロトコルでユーザーのデバイスからサイトをホストします。

Beaker とは何ですか? なぜ作ったのですか?

Beaker は参加型ブラウザです。個人ハッカー向けのブラウザなのです。

ウェブはオープンソースではありません。ソーシャルメディアの機能に影響を与えたい場合、Facebook や Twitter に働きかける必要があります。検索なら、Google です。この制御は、ユーザー自身ではなく企業が握ってます。

Beaker には、新しいウェブプロトコル Decentralized Archive Transport があります。 "Dat"。それはオンデマンドかつ無料でサイトを作成し、デバイスから共有します。サーバーは要りません。これは革命です。

Beaker のプロトコル

Beaker で Dat サイトを訪れると、そのファイルをダウンロードします。これで、このサイトは永遠にあなたのものです。保存したり、フォークしたり、変更したり、新しいバージョンを無料で共有したりできます。全てがオープンソースです。

これこそが、私たちがオープンソースウェブサイト向けブラウザを作っているということです。これをソーシャルハッキングのツールキットにしたいのです。

どんな人が Beaker を使うべきですか?

ハッカー。モッダー。創り手。弄り回すのが好きな人。

Dat を使った新規プロジェクトの作り方は?

git + npm のような bkr というコマンドラインツールがあります。これで以下のようにしてサイトを作ります。

$ cd ~/my-site
$ bkr init
$ echo "Hello, world!" > index.html
$ bkr publish

そして、サイトのフォークはこのようにします。

$ bkr fork dat://0ff7d4c7644d0aa19914247dc5dbf502d6a02ea89a5145e7b178d57db00504cd/ ~/my-fork
$ cd ~/my-fork
$ echo "My fork has no regard for the previous index.html!" > index.html
$ bkr publish

これらのサイトは、ブラウザからホストされます。 BitTorrent に少し似た、P2P メッシュでのサイト共有です。

GUI が必要な場合でも、ブラウザにはユーザーランドに押し込んでいる基本的なツールがいくつか組み込まれています。これによって全て変更可能なユーザーアプリになります。

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

このプロジェクトにとっては言うまでもありませんでした。もし私自身の手で Chrome をフォークしていれば、今頃 C++ を書いていたことでしょう! 誰しもそうはしたくありません。私はウェブで積み重ねた経験があるので、Electron なら手早く作業できます。悩むことはありません。

事実、Electron なくして成し遂げられるかどうか分かりませんでした。これは素晴らしいソフトウェアです。

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

半分は、ツールを試してどのくらいまでで打ち切るかを予測しました。

ブラウザ自体の作成は非常に簡単でした。 Electron はブラウザを作るツールキットとも言えます。 ...ブラウザタブを除けば。これが正常に動くまで、かつてないほど時間がかかりました。ついには挫折して、SVG の動かし方を学びました。見た目は格段に良くなりましたが、正常になるまで 3、4 回やり直しました。

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

WebView 内にデベロッパーツールをドッキングできたら、どんなに素晴らしいでしょうか。

Beaker の今後の予定は何ですか?

Dat サイトの DNS 名保護。 "アプリスキーム" というソーシャルで構成可能な URL スキーム。その他 Dat API。

プロジェクトへの貢献に興味がありそうな人向けに、Beaker はどの領域で助けが必要なのか教えて頂けますか?

未解決の Issue がたくさんあります。私への連絡を恐れることはありません。フリーノード上に #beakerbrowser があります。コントリビューター向けのページを管理しており、そこに加えます。オースティンを訪れてくれたら、私がビールを奢りましょう。

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

既製のビルドツールを使用しましょう。独自の解決方法のせいで苦戦してほしくありません。私を信じてください。 electron-builder を使いましょう。雛型レポジトリを使いましょう。
Electron リポジトリで Issue を開く必要がある場合は、より簡単に再現できるように努めましょう。より迅速に回答が得られ、そのチームも高く評価します。さらに言えば、自分で修正してみましょう。中身を覗くのは本当にとっても面白いです。
すべてのガイドと上級者向けドキュメントを 1 回は読みましょう。
ただのブラウザを構築しないようにしましょう。それは飽和した市場です。

今週のプロジェクト: Kap

2017年1月31日 · 読むのにかかる時間 1 分

skllcrn

sindresorhus

zeke

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 をチェックしたり、サンプルを見たり、ドキュメントを活用したりしましょう。

Electron のシンプルなサンプル

2017年1月19日 · 読むのにかかる時間 1 分

zeke

先日、サンフランシスコにある女性のためのプログラミングスクール 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 リポジトリ。

Electron Userland

2016年12月20日 · 読むのにかかる時間 1 分

zeke

私達は新しい 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 を作ることができました！

証明書の透明性の修正

2016年12月9日 · 読むのにかかる時間 1 分

kevinsawicki

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 の各バージョンと、影響を受ける証明書のサイトへのリクエストが失敗し始める日付の表です。

Electron のバージョン	影響日
1.3.x	影響なし
1.4.0	既に失敗します
1.4.1	既に失敗します
1.4.2	既に失敗します
1.4.3	2016 年 12 月 10 日午後 9:00 PST
1.4.4	2016 年 12 月 10 日午後 9:00 PST
1.4.5	2016 年 12 月 10 日午後 9:00 PST
1.4.6	2017 年 1 月 14 日午後 9:00 PST
1.4.7	2017 年 1 月 14 日午後 9:00 PST
1.4.8	2017 年 1 月 14 日午後 9:00 PST
1.4.9	2017 年 1 月 14 日午後 9:00 PST
1.4.10	2017 年 1 月 14 日午後 9:00 PST
1.4.11	2017 年 2 月 11 日午後 9:00 PST
1.4.12	影響なし

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

詳細情報

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

2016 年 9 月号: 新しいアプリ

2016年10月6日 · 読むのにかかる時間 1 分

haacked

こちらは 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 の API ドキュメントを構造化データに

2016年9月27日 · 読むのにかかる時間 1 分

zeke

本日、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 などの検索可能オフラインドキュメントツール用

Electron の舞台裏: 弱参照

2016年9月20日 · 読むのにかかる時間 1 分

zcbenz

ガベージコレクションがある言語 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:

createIDWeakMap API:

2016 年 8 月号: 新しいアプリ

2016年9月6日 · 読むのにかかる時間 1 分

jlord

こちらは 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 開発を簡単に