今週の Automattic では WordPress デスクトップ について話をしました。これは、WordPress コンテンツを管理するためのオープンソースのデスクトップクライアントです。

WordPress は誰でも知っているけれど、WordPress デスクトップって何?​

WordPress.com デスクトップアプリ は、コンテンツとデザインに集中できる、シームレスなクロスプラットフォーム体験を提供します。ブラウザタブが無いので、あなたの集中を削いだり、サイト作りを放って違うサイトを見てしまったりすることはありません。 ブラウザーサポートとモバイルアプリを組み合わせることで、どこでもサイトを作れます。

なぜ WordPress サイトを管理するデスクトップアプリを作るのですか? ウェブベースで十分じゃないですか?​

実際、ブラウザで WordPress.com にアクセスしたときと全く同じ技術を使用しています。 しかし、これはすべてローカルでホストされるため、読み込み時間が最小限になります。 Dock や通知などのネイティブ機能の恩恵を活用し、WordPress のサイトとブログにより集中できます。

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

2015 年末に、WordPress.com の多くを Calypso 形式で再構築しました。これは、React を使用したオープンソースのモダン JavaScript アプリです。 私たちは Electron の検討を開始し、Calypso にいくつかの変更を加えて、ローカルで実行できるようにしました。 これは魅力的な体験で、さらに発展させれば大きな価値があると考えたのです。

我々には Calypso に取り組むチームがいくつかありました。 従来のデスクトップ技術を使用して、これに一致する完全なマルチプラットフォーム GUI クライアントを作成するには、さらに多くの作業が必要でした。 Electron を使用することで、2 ~ 4 人の小さなチームが他のチームの成果を活用する形で数ヶ月でデスクトップアプリを構築できました。

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

アプリの初期バージョンは非常に速く動作しましたが、デスクトップアプリとして最適な動作をするよう調整するには、より多くの時間がかかりました。 このアプリの大きな課題の 1 つは、実際に自身のマシン上で Calypso のコピーを実行していることです。これは純粋に API が駆動する UI です。 ブリッジ作業が多く、変更は Calypso 自体にフィードバックされました。

さらに、Windows、macOS、Linux バージョンを提供するために、各プラットフォーム向けにアプリをパッケージ化する多大な労力が費やされました。

当時、Electron は比較的新しいものであり、すぐに (時には同日中に!) 修正される問題に直面し続けました。

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

Electron はすでにデスクトップアプリに必要なもののほとんどを提供しており、私たちが使い始めてから急速に進歩しています。 とはいえ Electron は、スペルチェックや検索/置換など、デスクトップアプリではそのまま複製するのが難しい領域が改善されるべきだと考えます。

また、新しい Chrome 技術の一部を Electron でも使いたいです。 私たちは特に WebVR の実験に熱心です。

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

Electron を選んだ主な理由は、非常に活発でオープンなコミュニティだからです。それが何よりの強みです。 Automattic は常にオープンソースを信奉しています。 それは私たちの中核理念の一つで、Electron プロジェクトとコミュニティは、非常にオープンかつ前向きであるという中核理念の多くに沿っています。

WordPress デスクトップの今後の予定は何ですか?​

私たちのモデルの素晴らしいところは、デスクトップアプリが新しい Calypso 機能の恩恵を受けていることです。この機能は絶えず改善されています。 オフラインサポートなどの追加機能をアプリに追加できるようにしたいと思います。オフラインサポートは、アプリを実際にネイティブの領域に持ち込み、システム通知を改善します。

Automattic で他に Electron アプリの作業をしているチームはありますか?​

はい、このデスクトップアプリに取り組んだ後、Simplenote チームは Electron を使用して Windows と Linux 向け (ネイティブ Mac クライアントは既存) のデスクトップアプリを構築することにしました。 Simplenote Electron アプリ もオープンソースとなっており、Github で入手できます。

また、Electron を使用する Raspberry Pi との統合も予定しています。

面白そうだと思ったものがあれば、ご連絡お待ちしてます!

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

署名されたデスクトップソフトウェアを公開するプロセスは、特に Windows において比較的新しいものです。 Windows アプリのコード署名 の記事を作成しました。この記事には、そのプロセスとそれを正しく行うために経験したいくつかの壁について書いています。

今週の特集プロジェクトは、助成金、オープンソース、データセットを配布するための分散ツール Dat です。 Dat は 地理分散されたチーム によって構築と保守がされており、その多くがこの記事の執筆を支援しました。

まず、Dat とは何ですか?​

私たちは P2P と分散システムの良い部分をデータ共有に昇華したいと考えました。 科学データの共有から始め、研究機関、政府、公共サービス、オープンソースチームにも分かれ始めました。

別の見方で考えると、Dat が オープンソース であることを除けば、これは Dropbox や BitTorrent Sync などのような同期アップロードアプリです。 大規模、小規模、中規模、小規模バッチ、大規模バッチデータ向けの強力でオープンソースな非営利データ共有ソフトウェアになることが目標です。

dat CLI ツールを使用方法は、以下のように入力するだけです。

dat share フォルダ/へ/の/パス

すると、dat はそのフォルダのリンクを作成します。これはそのフォルダを他人へ送信する際に使用できますが、中央サーバーやサードパーティがあなたのデータにアクセスすることはありません。 BitTorrent と異なり、誰が何を共有しているかを盗聴することも不可能です (詳細は Dat Paper のドラフトを参照してください)。

Dat についてはわかりました。 Dat デスクトップは便利なのですか?​

Dat デスクトップ は、コマンドラインを使用できない、または使用したくない人が Dat に触れられる手段です。 マシン上で複数の Dat をホストし、ネットワーク経由でデータを提供できます。

成熟したユースケースをいくつか教えて頂けますか?​

DataRefuge + Project Svalbard​

私たちは Project Svalbard というコードネームの物に取り組んでおり、これは紛失のリスクに晒される政府の気候データをバックアップするために活動している DataRefuge というグループに関連しています。 Svalbard は、植物 DNA の巨大な地下バックアップ保管庫を持つ北極圏のスヴァールバル世界種子貯蔵庫にちなんで名付けられました。 私たちの場合は、公開科学データセットの巨大なバージョン管理コレクションといったところです。 メタデータを熟知して信頼できれば、分散ボランティアデータストレージネットワーク のような素晴らしいプロジェクトをも構築できます。

California Civic Data Coalition​

CACivicData は、政治資金を追跡するカリフォルニア州のデータベース CAL-ACCESS からのダウンロードを毎日提供するオープンソースアーカイブです。 毎日リリース していますが、これは各 zip ファイルのいたる所で大量の重複データをホストしているということです。 Dat リポジトリが、特定のバージョンを参照したり新しいバージョンへ更新したりするときに必要な手間と帯域幅の量を減らした形でデータホストできるように取り組んでいます。

Electron の更新​

これはまだ具体案ではありませんが、コンパイル済み Electron アプリを Dat リポジトリに配置し、Electron の Dat クライアントを使用してビルドされたアプリバイナリの最新の差分を落としすことでダウンロード時間を節約するという面白そうなユースケースがあります。これにより、サーバーの帯域幅コストも削減できます。

どんな人が Dat デスクトップを使うべきですか?​

P2P ネットワークを介してデータを共有、更新したい人。 データサイエンティスト、オープンデータのハッカー、研究者、開発者。 私たちの思いも寄らない素晴らしいユースケースをお持ちであれば、私たちはそのフィードバックを真摯に受け入れます。 Gitter Chat まで、何でもお問い合わせください!

Dat と Dat デスクトップの今後の予定は何ですか?​

ユーザーアカウントとメタデータの公開です。 私たちは datproject.org にデプロイする Dat レジストリのウェブアプリ開発に取り組んでいます。これはメタデータディレクトリになり、データをオンライン上のどこにでも置くことができます (全データが集中ホストされる NPM や GitHubとは対照的に、ソースコードが十分小さいため 1 つのシステムにすべてを収めることができます)。 多くのデータセットは巨大なので、(BitTorrent トラッカーの仕組みと同様に) フェデレーションレジストリが必要です 。 データ共有プロセスを円滑にするため、Dat デスクトップのレジストリを使用してデータセットを簡単に検索または公開できるようにしたいと考えています。

もう 1 つの機能はマルチライター/共同フォルダーです。 ブランチを用いて共同作業を行うという大きな計画があります。これは、データセットの共用を中心に設計されている場合を除けば git と同じです。 しかし、現在の私たちは全体的な安定性とプロトコルの標準化に取り組んでいます!

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

Dat は Node.js を使用して構築されているため、自然な統合に適していました。 これ以外にも、科学者、研究者、政府関係者は施設特有の構成を使用することを余儀なくされ、ユーザーはさまざまなマシンを使用する可能性があります。 つまり、Mac と同様に Windows と Linux をターゲットにできる必要があります。 Dat デスクトップは、それを簡単に実現してくれます。

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

人々が何を求めているのかを把握することです。 最初は表形式のデータセットから始めたのですが、解決するには少し複雑な問題だったため、ほとんどの人がデータベースを使っていないことに気づきました。 プロジェクトの途中で、ファイルシステムを使用するためにすべてスクラッチから設計し直して以来、後退していません。

以下のような一般的な Electron のインフラ問題にも遭遇しました。

• テレメトリ - 匿名利用統計の収集方法
• 更新 - 自動更新の設定は、断片的で魔法のような類のものです。
• リリース - Xcode 署名、Travis 上でのリリースビルド、ベータビルド、すべてが問題でした。

Dat デスクトップの 'フロントエンド' コードでは Browserify と素晴らしい Browserify Transform をいくつか使用しています (ネイティブの require があるのにバンドルしているので、ちょっと変な感じですが、Transform が欲しいのです)。 CSS をより管理しやすくするために、Sass から sheetify へ切り替えました。 このおかげで、CSS をモジュール化でき、依存関係を共有したコンポーネント指向アーキテクチャの UI に移行するのが容易になりました。 例えば、dat-colors にはすべての色が収まっており、すべてのプロジェクトで共有されています。

私たちはいつも標準と最小限の抽象化の大ファンです。 インターフェイス全体は、いくつかのヘルパーライブラリを使用した上で、通常の DOM ノードで構築されています。 これらのコンポーネントの一部を、ローレベルで再利用可能なコンポーネントのライブラリ base-elements に移行し始めました。 私たちの技術のほとんどもそうなのですが、正常になるまで移行を反復し続けています。チームとしては正しい方向に向かっていると思います。

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

最大の痛手はネイティブモジュールだと考えています。 Electron 向けにモジュールを npm でリビルドする必要があるため、ワークフローが複雑になります。 私たちのチームは prebuild というモジュールを開発しました。これはビルド済みのバイナリを扱うもので、Node ではうまく機能していましたが、Electron のワークフローではインストール後にカスタムステップとして大抵 npm run rebuild が必要でした。 これは煩わしかったです。 これに対処するため、すべてのプラットフォームのコンパイル済みバイナリ版を npm tarball の中にバンドルするという戦略に最近切り替えました。 これは tarball が大きくなるということです (ただこれは .so ファイル - 共有ライブラリで最適化できます)。このアプローチなら install の後にスクリプトを実行する必要がなくなり、npm run rebuild のパターンを完全に回避できます。 npm install だけで Electron 向けに正しく動作するということです。

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

API はかなりよく考えられていて、比較的安定しているようです。上流の Node リリースの最新状態の維持にこれ以上ない良い仕事をしてくれています!

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

ネイティブモジュールを使うなら、prebuild を試してみてくれ!

Dat の開発をフォローするにはどうすればよいですか?​

ツイッターで @dat_project をフォローするか、メールマガジン に登録してください。

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

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

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

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

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

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 のノウハウはありますか?​

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

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