「Showcase」タグの付いた投稿 11 件

2023年のElectronの開発者エコシステムの改善と変更を振り返る。

過去数ヶ月間、私たちはElectronアプリの開発者エクスペリエンスを向上させるために、Electronエコシステム全体にわたっていくつかの変更を準備してきました！Electron HQからの最新の追加情報を簡単に紹介します。

Electron Forge 7 以降​

Electronアプリケーションのパッケージングと配布のためのオールインワンツールである最新のメジャーバージョンであるElectron Forge 7が利用可能になりました。

Forge 6はv5からの完全な書き換えでしたが、v7は範囲が小さいですが、それでもいくつかの破壊的な変更が含まれています。今後、破壊的な変更が必要になった場合は、Forgeのメジャーバージョンを引き続き公開します。

詳細については、GitHubの完全なForge v7.0.0の変更ログを参照してください。

破壊的な変更​

• macOSの署名にnotarytoolに切り替えました: 2023-11-01現在、AppleはmacOSの署名に使用されていたレガシーのaltoolを廃止し、このリリースではElectron Forgeから完全に削除されました。
• Node.jsの最小バージョンをv16.4.0に引き上げました: このリリースでは、必要なNode.jsの最小バージョンを16.4.0に設定しました。
• electron-prebuiltとelectron-prebuilt-compileのサポートを廃止しました: electron-prebuiltはElectronのnpmモジュールの元の名前でしたが、v1.3.1でelectronに置き換えられました。electron-prebuilt-compileは、DX機能を強化したバイナリの代替手段でしたが、最終的にプロジェクトとして放棄されました。

ハイライト​

• Google Cloud Storageパブリッシャー: 静的な自動更新をより適切にサポートするための取り組みの一環として、Electron ForgeがGoogle Cloud Storageへの直接発行をサポートするようになりました！
• ESM forge.config.js のサポート: Electron ForgeがESM forge.config.jsファイルをサポートするようになりました。(追伸: Electron 28でのESMエントリポイントのサポートを楽しみにしてください。)
• メーカーが並行して実行されるようになりました: Electron Forge 6では、メーカーは✨レガシー✨の理由で順番に実行されていました。それ以来、Makeステップの並列化を副作用なしでテストしたので、同じプラットフォームで複数のターゲットをビルドするときにスピードアップが見られるはずです！

静的ストレージによる自動更新の改善​

Squirrel.WindowsとSquirrel.Macは、Electronの組み込みautoUpdaterモジュールをサポートするプラットフォーム固有のアップデーターテクノロジーです。どちらのプロジェクトも、2つの方法による自動更新をサポートしています。

• Squirrel互換の更新サーバー
• 静的ストレージプロバイダー (例: AWS、Google Cloud Platform、Microsoft Azureなど) でホストされるマニフェストURL

更新サーバーの方法は、従来、Electronアプリに推奨されるアプローチでしたが (更新ロジックの追加のカスタマイズを提供します)、大きな欠点があります。それは、クローズドソースの場合、アプリが独自のサーバーインスタンスを維持する必要があることです。

一方、静的ストレージの方法は常に可能でしたが、Electron内では文書化されておらず、Electronツールパッケージ全体で十分にサポートされていませんでした。

@MarshallOfSoundによる素晴らしい作業により、サーバーレス自動アプリ更新のアップデートストーリーが大幅に合理化されました。

• Electron ForgeのZipおよびSquirrel.Windowsメーカーは、autoUpdater互換の更新マニフェストを出力するように構成できるようになりました。
• 新しいメジャーバージョンのupdate-electron-app (v2.0.0)は、update.electronjs.orgサーバーの代替として、これらの生成されたマニフェストを読み取れるようになりました。

メーカーとパブリッシャーがクラウドファイルストレージに更新マニフェストをアップロードするように構成されたら、数行の設定だけで自動更新を有効にできます。

const { updateElectronApp, UpdateSourceType } = require('update-electron-app');

updateElectronApp({
  updateSource: {
    type: UpdateSourceType.StaticStorage,
    baseUrl: `https://my-manifest.url/${process.platform}/${process.arch}`,
  },
});

@electron/拡張ユニバース​

Electronが最初に開始されたとき、コミュニティはElectronアプリの開発、パッケージング、および配布のエクスペリエンスを向上させるために多くのパッケージを公開しました。時間が経つにつれて、これらのパッケージの多くがElectronのGitHub組織に組み込まれ、コアチームがメンテナンスの負担を引き受けました。

2022年には、npmの@electron/名前空間の下で、これらのすべてのファーストパーティツールを統合し始めました。この変更により、以前はelectron-fooだったパッケージがnpmで@electron/fooになり、以前はelectron/electron-fooという名前だったリポジトリがGitHubでelectron/fooになりました。これらの変更は、ファーストパーティプロジェクトをユーザーランドプロジェクトと明確に区別するのに役立ちます。これには、次のような一般的に使用される多くのパッケージが含まれます。

• @electron/asar
• @electron/fuses
• @electron/get
• @electron/notarize
• @electron/osx-sign
• @electron/packager
• @electron/rebuild
• @electron/remote
• @electron/symbolicate-mac
• @electron/universal

今後、リリースするすべてのファーストパーティパッケージも@electron/名前空間になります。このルールには2つの例外があります。

• Electronコアは、electronパッケージで引き続き公開されます。
• Electron Forgeは、すべてのモノレポパッケージを@electron-forge/名前空間で引き続き公開します。

@electron/windows-sign のご紹介​

2023年6月1日より、業界標準により、Windows コード署名証明書のキーを FIPS 準拠のハードウェアに保管することが義務付けられました。

実際には、これは CI 環境でビルドと署名を行うアプリにとってコード署名が非常に困難になったことを意味します。多くの Electron ツールが、設定パラメータとして証明書ファイルとパスワードを受け取り、そこからハードコードされたロジックを使用して署名しようとするためです。

この状況は Electron 開発者にとって共通の悩みの種でした。そのため、macOS で @electron/osx-sign が行っているように、Windows コード署名を独自のスタンドアロンステップに分離するより良いソリューションに取り組んできました。

将来的には、このパッケージを Electron Forge ツールチェーンに完全に統合する予定ですが、現状では単独で存在しています。パッケージは現在 npm install --save-dev @electron/windows-sign でインストールでき、プログラムまたは CLI を介して使用できます。

ぜひお試しいただき、リポジトリの issue トラッカーでフィードバックをお寄せください！

今後の予定は？​

来月には、毎年恒例の12月の静寂期間に入ります。その間、2024年に Electron の開発体験をさらに向上させる方法について検討します。

次に私たちが取り組むことを希望するものはありますか？ぜひ教えてください！

今週は、GitHub の通知を管理するための Electron ベースのツールである Jasper の作成者にインタビューしました。

こんにちは！あなたは誰ですか？​

私は、日本のソフトウェア開発者である 丸山 亮 です。Jasper と ESDoc を開発しています。

Jasperとは何ですか？​

Jasper は、GitHub 用の柔軟で強力な issue リーダーです。github.com および GitHub Enterprise の issue と pull request をサポートしています。

なぜそれを作ったのですか？​

人々が仕事や OSS 活動で GitHub を使用していると、毎日多くの通知を受け取る傾向があります。通知を購読する方法として、GitHub はメールとウェブ通知を提供しています。私はこれらを数年間使用していましたが、次の問題に直面しました。

• 自分が言及された、コメントした、または監視している issue を見落としやすい。
• 後で確認するためにいくつかの issue を頭の片隅に置いておきますが、それらを忘れてしまうことがあります。
• issue を忘れないように、ブラウザで多くのタブを開いたままにしています。
• 自分に関連するすべての issue を確認するのが難しい。
• チームの活動全体を把握するのが難しい。

これらの問題を回避しようとするのに多くの時間とエネルギーを費やしていたため、これらの問題を効率的に解決するために GitHub 用の issue リーダーを作成することを決意し、Jasper の開発を開始しました。

Jasperは誰が使用していますか？​

Jasperは、GitHubを使用しているいくつかの企業の開発者、デザイナー、およびマネージャーによって使用されています。もちろん、一部のOSS開発者も使用しています。そして、GitHub の一部の人々も使用しています！

Jasperはどのように機能しますか？​

Jasperを設定すると、次の画面が表示されます。左から順に、「ストリームリスト」、「issueリスト」、「issue本文」が表示されます。

この「ストリーム」が Jasper の中心的な機能です。たとえば、「electron/electron リポジトリで @zeke に割り当てられた issue」を表示したい場合は、次のストリームを作成します。

repo:electron/electron assignee:zeke is:issue

ストリームを作成して数秒待つと、条件を満たす issue を確認できます。

ストリームで何ができますか？​

ストリームに使用できる条件の種類を紹介します。

ユーザーとチーム​

involves は mention、author、assignee または commenter を意味します。

リポジトリと組織​

org は user と同じです。

属性​

レビュー状況​

これらを見て気づいたかもしれませんが、ストリームは GitHub の検索クエリを使用できます。ストリームと検索クエリの使用方法の詳細については、次の URL を参照してください。

• jasperapp.io/doc.html#stream
• help.github.com/articles/searching-issues
• help.github.com/articles/search-syntax

Jasperには、未読のissue管理、未読のコメント管理、スターのマーク付け、通知の更新、issueのフィルタリング、キーボードショートカットなどの機能もあります。

Jasper は有料製品ですか？費用はいくらですか？​

Jasper は 12 ドルです。ただし、無料試用版を 30 日間使用できます。

なぜ Jasper を Electron で構築することを選んだのですか？​

私は Electron の次の側面が好きです。

• アプリは JavaScript/CSS/HTML で開発できます。
• アプリは Windows、Mac、および Linux プラットフォーム用にビルドできます。
• Electron は活発に開発されており、大規模なコミュニティがあります。

これらの機能により、迅速かつシンプルなデスクトップアプリケーション開発が可能になります。素晴らしいです！何か製品のアイデアがあれば、ぜひ Electron の使用を検討してください。

Jasper の開発中に直面した課題は何ですか？​

「ストリーム」の概念を理解するのに苦労しました。最初は GitHub の Notifications API の使用を検討しました。ただし、特定のユースケースをサポートしていないことに気づきました。その後、Notification API に加えて、Issues API および Pull Requests API の使用を検討しました。しかし、それは私が望んでいたものにはなりませんでした。次に、さまざまな方法を検討しているうちに、GitHub の Search API をポーリングすることが最も柔軟性があることに気づきました。この時点に到達するまでに約 1 か月の実験が必要でしたが、その後、2 日でストリームの概念を使用した Jasper のプロトタイプを実装しました。

注: ポーリングは最大でも 10 秒に 1 回に制限されています。これは GitHub API の制限としては許容範囲です。

次は？​

次の機能を開発する予定です。

• フィルタリングされたストリーム: ストリームには、ストリーム内の issue をフィルタリングするいくつかのフィルタリングされたストリームがあります。これは SQL のビューのようなものです。
• 複数アカウント: github.com と GHE の両方を使用できるようになります。
• パフォーマンスの向上: 現在、WebView での issue の読み込み速度は通常のブラウザよりも遅いです。

更新については、Twitter で @jasperappio をフォローしてください。

今週は@ferossと@dcposchにインタビューし、ユーザー同士が接続して分散型のブラウザ間ネットワークを形成する、ウェブ対応のトレントクライアントであるWebTorrentについて話を聞きました。

WebTorrentとは？​

WebTorrentは、ブラウザで動作する初のトレントクライアントです。完全にJavaScriptで記述されており、ピアツーピア転送にWebRTCを使用できます。ブラウザプラグイン、拡張機能、インストールは不要です。

WebTorrentは、オープンウェブ標準を使用して、ウェブサイトのユーザー同士を接続し、効率的なファイル転送のための分散型ブラウザ間ネットワークを形成します。

WebTorrentのデモはこちらでご覧いただけます: webtorrent.io。

なぜこれがクールなのか？​

YouTubeのような動画サイトを想像してみてください。訪問者がサイトのコンテンツをホストするのを手伝うようなサイトです。WebTorrentを利用したウェブサイトを使用する人が増えるほど、サイトはより速く、より回復力が高くなります。

ブラウザ間の通信は仲介者を排除し、人々が自分たちの条件で通信できるようにします。クライアント/サーバーはもう必要ありません。すべてのピアが平等なネットワークです。WebTorrentは、ウェブを再分散化する旅の第一歩です。

Electronはどのように関わっているのか？​

約1年前、私たちはデスクトップアプリとして実行されるWebTorrentのバージョンであるWebTorrent Desktopを構築することにしました。

WebTorrent Desktopを作成した理由は3つあります。

1. クリーンで軽量、広告なし、オープンソースのトレントアプリが欲しかった
2. 優れたストリーミングサポートを備えたトレントアプリが欲しかった
3. BitTorrentおよびWebTorrentネットワークに接続する「ハイブリッドクライアント」が必要だった

ウェブブラウザで既にトレントをダウンロードできるのに、なぜデスクトップアプリが必要なのか？​

まず、WebTorrentの設計に関する少し背景を説明します。

初期の頃、BitTorrentはトランスポートプロトコルとしてTCPを使用していました。その後、uTPが登場し、TCPよりも優れたパフォーマンスと追加の利点が約束されました。すべての主流トレントクライアントが最終的にuTPを採用し、今日ではどちらのプロトコルでもBitTorrentを使用できます。WebRTCプロトコルは次の論理的なステップです。これは、すべてのデスクトップBitTorrentクライアントと何百万ものWebブラウザで構成される1つの巨大なP2Pネットワークである、Webブラウザとの相互運用性の約束をもたらします。

「ウェブピア」（ウェブブラウザで実行されるトレントピア）は、何百万もの新しいピアを追加し、BitTorrentを数十の新しいユースケースに広げることで、BitTorrentネットワークを強化します。WebTorrentは、既存のBitTorrentクライアントがWebTorrentのサポートを簡単に追加できるように、可能な限りBitTorrent仕様に準拠しています。

Vuzeのような一部のトレントアプリはすでにウェブピアをサポートしていますが、残りがサポートを追加するのを待つ必要はありませんでした。つまり、WebTorrent Desktopは、WebTorrentプロトコルの採用を加速するための手段でした。人々が本当に使いたいと思う素晴らしいトレントアプリを作成することで、Webピア（つまり、ウェブサイトのユーザー）とトレントを共有できるネットワーク内のピアの数を増やします。

人々が既に知っていること以外に、トレントの興味深いユースケースは何ですか？​

WebTorrentの最もエキサイティングな用途の1つは、ピアアシスト配信です。WikipediaやInternet Archiveのような非営利プロジェクトは、訪問者に協力してもらうことで、帯域幅とホスティングコストを削減できます。人気のあるコンテンツは、ブラウザ間で迅速かつ安価に提供できます。アクセス頻度の低いコンテンツは、オリジンサーバーからHTTP経由で確実に提供できます。

Internet Archiveは実際にトレントファイルを更新し、WebTorrentでうまく機能するようにしました。したがって、サイトにInternet Archiveのコンテンツを埋め込みたい場合は、アーカイブのホスティングコストを削減する方法でそれを行うことができ、アーカイブはより多くの資金をウェブのアーカイブに実際に費やすことができます。

CDNからP2P経由のアプリ配信まで、エキサイティングなビジネスユースケースもあります。

WebTorrentを使用するお気に入りのプロジェクトは何ですか？​

WebTorrentで構築された最もクールなものは、おそらくGaia 3D Star Mapでしょう。これは、天の川の洗練された3Dインタラクティブシミュレーションです。データは、ブラウザ内でトレントからロードされます。私たちの星系を飛び回り、私たち人間が宇宙の広大さに比べていかに小さいかを実感するのは畏敬の念を起こさせます。

これがどのように作成されたかについては、Torrenting The Galaxyというブログ記事で、作者のチャーリー・ホエイが、WebGLとWebTorrentを使用して星図を構築した方法について説明しています。

また、私たちはBraveの大ファンです。Braveは、ウェブをより高速かつ安全にするために、広告とトラッカーを自動的にブロックするブラウザです。Braveは最近、トレントのサポートを追加したため、別のアプリを使用せずに従来のトレントを表示できます。その機能はWebTorrentによって強化されています。

したがって、ほとんどのブラウザがPDFファイルをレンダリングできるのと同じように、Braveはマグネットリンクとトレントファイルをレンダリングできます。それらは、ブラウザがネイティブにサポートする別のタイプのコンテンツにすぎません。

Braveの共同創設者の1人は、実際にJavaScriptの作成者であるブレンダン・アイクです。私たちはWebTorrentをJavaScriptで記述しました。したがって、BraveがWebTorrentを統合することを選択したことは非常にクールだと思います。

なぜWebTorrent DesktopをElectronで構築することにしたのですか？​

Electronアプリは、すべてのアプリにChromeコンテンツモジュール全体が含まれているため、「肥大化している」というミームがあります。場合によっては、これは部分的に当てはまります（Electronアプリのインストーラーは通常約40MBですが、OS固有のアプリのインストーラーは通常約20MBです）。

ただし、WebTorrent Desktopの場合、通常の操作でほぼすべてのElectron機能と、数十のChrome機能を使用します。これらの機能を各プラットフォーム向けにゼロから実装したとすると、アプリの構築に数か月または数年長くかかったでしょうし、単一のプラットフォームのみをリリースできたでしょう。

参考までに、ダウンロードの進行状況を表示するためのElectronのドック統合、バックグラウンドで実行するためのメニューバー統合、マグネットリンクを開くためのプロトコルハンドラー登録、ビデオ再生中のスリープを防ぐための省電力ブロッカー、および自動更新を使用しています。Chromeの機能については、多くのものを使用しています。<video>タグ（さまざまなビデオ形式を再生するため）、<track>タグ（クローズドキャプションのサポート）、ドラッグアンドドロップのサポート、およびWebRTC（ネイティブアプリで使用するのは簡単ではありません）。

言うまでもなく、私たちのトレントエンジンはJavaScriptで記述されており、多くのNode API、特にTCPおよびUDPソケットサポート用のrequire('net')とrequire('dgram')の存在を前提としています。

基本的に、Electronはまさに私たちが必要としていたものであり、短期間で堅牢で洗練されたアプリをリリースするために必要な機能が正確に揃っていました。

Electronについてお気に入りの点は何ですか？​

WebTorrentライブラリは、2年間オープンソースのサイドプロジェクトとして開発されてきました。WebTorrent Desktopは4週間で作成しました。Electronは、アプリを非常に迅速に構築およびリリースできた主な理由です。

Node.jsがサーバープログラミングをjQueryを使用するフロントエンドプログラマーの世代にとってアクセス可能にしたように、ElectronはWebまたはNode.js開発に精通している人なら誰でもネイティブアプリ開発にアクセスできるようにします。Electronは非常に強力です。

ウェブサイトとデスクトップクライアントはコードを共有していますか？​

はい、webtorrent npmパッケージは、Node.js、ブラウザ、およびElectronで動作します。まったく同じコードをすべての環境で実行できます。これがJavaScriptの美しさです。今日は普遍的なランタイムです。Javaアプレットは「Write Once, Run Anywhere」アプリを約束しましたが、いくつかの理由からそのビジョンは実際には実現しませんでした。Electronは、他のどのプラットフォームよりも、その理想に非常に近いと言えます。

WebTorrentを構築中に直面した課題は何ですか？​

アプリの初期バージョンでは、UIをパフォーマンス高くすることが困難でした。メインアプリウィンドウを描画するのと同じレンダラープロセスにトレントエンジンを配置しました。これは予想通り、トレントエンジンからの激しいCPUアクティビティ（ピアから受信したトレントピースの検証など）があるたびに、動作が遅くなりました。

この問題を解決するために、Torrentエンジンを2番目の、目に見えないレンダラープロセスに移動し、IPC を介して通信するようにしました。こうすることで、そのプロセスが一時的に多くのCPUを使用しても、UIスレッドは影響を受けません。滑らかで快適なスクロールとアニメーションは非常に満足感があります。

注: Torrentエンジンを「メイン」プロセスではなく、レンダラープロセスに配置する必要があったのは、WebRTC（レンダラーでのみ利用可能）へのアクセスが必要なためです。

Electronはどのような点で改善されるべきですか？​

特に、コード署名や自動更新のような扱いの難しいテーマに関する、本番環境対応のアプリを構築および出荷する方法に関するドキュメントが充実することを望んでいます。ベストプラクティスについて学ぶために、ソースコードを調べたり、Twitterで尋ねたりする必要がありました！

WebTorrent Desktopは完成しましたか？もしそうでない場合、次はどのような機能が追加されますか？​

現在のバージョンのWebTorrent Desktopは優れていると考えていますが、改善の余地は常にあります。現在、完成度、パフォーマンス、字幕サポート、ビデオコーデックサポートの向上に取り組んでいます。

プロジェクトへの参加に興味がある場合は、GitHubページ をご覧ください！

他の開発者にとって役立つ可能性のあるElectronの開発のヒントはありますか？​

WebTorrent Desktopの貢献者の一人であるFeross は、最近NodeConf Argentinaで「現実世界のElectron：JavaScriptでクロスプラットフォームデスクトップアプリを構築する」という講演を行い、洗練されたElectronアプリをリリースするための役立つヒントを共有しました。この講演は、基本的な動作するアプリがあり、それを次のレベルの洗練度とプロフェッショナリズムに引き上げようとしている段階の人にとって特に役立ちます。

こちらをご覧ください:

スライドはこちら:

もう一人のWebTorrentの貢献者であるDCは、アプリを洗練されたネイティブなものにするためのチェックリストを作成しました。これにはコード例が含まれており、macOSのドック統合、ドラッグアンドドロップ、デスクトップ通知、アプリの高速ロードなどについて説明しています。

今週、私たちはAprile ElcichとPaolo Fragomeniに会い、Electronを搭載した音楽プレーヤーであるVoltraについて話しました。

Voltraとは何ですか？​

Voltraは、自分の音楽を所有したい人のための音楽プレーヤーです。また、すでに所有している音楽に基づいて新しい音楽を発見して購入できるストアでもあります。広告は表示されず、デスクトップとモバイルの両方でクロスプラットフォームに対応しています。また、ユーザーをスパイすることもありません。

Voltraは誰のためのものですか？​

音楽を聴くすべての人。

Voltraを作成する動機は何でしたか？​

ラジオは常に多くのリスナーを獲得してきました。それは電波からインターネットに移行しています。今ではオンデマンドで音楽をレンタルできます。これはラジオの復活です！このため、多くの新製品やサービスが登場しましたが、ストリーミングラジオでは、依然として音楽とその体験方法を誰かがコントロールしています。

私たちは、所有している音楽に完全に焦点を当てた製品を求めていました。アーティストやレーベルから直接新しい音楽を簡単に発見して購入できるものです。

無料版はありますか？​

デスクトッププレーヤーは完全に無料です。音楽の販売も無料です！広告は表示されません。

アプリは無料なので、後でオープンソース化するかもしれません。今のところ、それを管理するだけの余裕がありません。また、機能と進むべき方向性について非常に具体的なアイデアがあります。アクティブなベータコミュニティがあり、フィードバックを真摯に受け止めています。

どのように収益を上げていますか？​

プレミアム機能があります！

当社のVoltraオーディオアーカイブは、音楽専用に設計されたクラウドバックアップサービスです。データの圧縮や共有は行いません。あなたの音楽コレクションは物理的にバックアップされます。

アーティストやレーベル向けには、プロメンバーシップで、分析やプロフェッショナルなアーティストウェブページなど、より関連性の高いオーディエンスにリーチするためのツールを提供しています。

Voltraの独自性は何ですか？​

デザインと使いやすさは、私たちにとって非常に重要です。リスナーに気が散らないリスニング体験を提供したいと考えています！いくつかの興味深い音楽プレーヤーやストアがありますが、それらの多くは作成者が認識しているよりも高度で使いにくいものです。できるだけ多くの人がVoltraにアクセスできるようにしたいと考えています。

また、アーティストやレーベルから手数料を取っていません。これは私たちにとって重要な差別化要因です。アーティストが音楽を市場に投入する際の障壁を低くするため、これは非常に重要です。

デザインと技術的な意思決定について教えてください。​

Voltraを設計する際、ネイティブアプリとWebのUIの慣習を検討し、削除できるものについても考えました。過去数か月間、重要なフィードバックを提供してくれたアクティブなプライベートベータグループがあります。

アルバムアートや写真は人々にとって非常に重要であることがわかりました。多くのプレーヤーは単なるファイルのリストです。物理的なアルバムを所有することのクールな点の1つはアルバムアートであり、Voltraデスクトップアプリではこれに重点を置きたいと考えました。

また、ユーザーのファイルに干渉しないようにしました。ファイル監視を使用しているので、どこにでもファイルを配置でき、ファイルの名前を変更したり、移動したりすることはありません。プロセスが実行されていない場合でも、新しいものを追跡できるように、監視対象のディレクトリの状態を追跡するための組み込みデータベースがあります。

Voltraの構築中に直面した課題は何ですか？​

パフォーマンスに多くの時間を費やしています。フレームワークから始めましたが、バニラJavascriptに移行しました。私たちの経験では、それらが提供する一般的な抽象化は、導入されるパフォーマンスの低下と形式化を上回ります。

現時点では、非常に大規模なコレクションもうまく処理できます。大規模なコレクションは、場合によっては数万枚もの画像があることを意味します！Node.jsのファイルシステムモジュールをレンダラープロセスから直接利用できることで、DOMイベントに基づいて大量の画像を非常に迅速に遅延ロードおよびアンロードすることが非常に簡単になりました。

一般的に、setImmediateとrequestIdleCallbackは、UIの応答性を維持しながら多くの処理を実行するための非常に重要なツールです。より具体的には、CPU負荷の高いタスクを別のプロセスに分散すると、ユーザーインターフェイスの応答性を維持するのに非常に役立ちます。たとえば、ビジーなUIからの潜在的な中断を避けるために、実際のオーディオコンテキストを別のプロセスに移動し、IPCを介して通信するようにしました。

VoltraをElectronで構築することを選んだ理由は何ですか？​

ブラウザのサンドボックスは、私たちのアプリには制限が厳しすぎます。しかし、Webプレーヤーも開発しています。そのため、2つの実装間でほぼ100％のコードを共有できるのは大きなメリットです。

実際には、Swiftでネイティブアプリを構築することから始めました。私たちの最大の課題は、多くのことを再発明していたことでした。Webには、世界最大のオープンソースエコシステムがあります。そのため、すぐにElectronに切り替えました。

また、最も重要なことは、Electronを使用すると、1回開発すれば、すべての主要なプラットフォームでJust Work™できるはずです。保証されているわけではありませんが、プラットフォームごとにネイティブにコーディングするコストは、Electronが導入する他のコストを間違いなく上回ります。

Electronについてお気に入りの点は何ですか？​

GTD！：Node.jsのネットワーキングスタックとChromiumのプレゼンテーションレイヤーがパッケージ化されていることは、物事を成し遂げるためのレシピです。

コンピテンシー：単なるWebスタックなので、文字通りチーム全体が製品の構築に携わっています。

コミュニティ：非常に組織化されたコミュニティがあり、非常にうまくコミュニケーションする方法を知っています！このようなサポートを受けて開発できることを非常に嬉しく思います。

Electronはどのような点で改善されるべきですか？​

Electronが単一のパッカーを推奨することを望んでいます。パッカーは、パッケージマネージャーがNodeにとって重要なのと同じように、Electronにとって重要です。ユーザーランドには複数のパッカーがあり、それぞれに興味深い機能がありますが、それぞれにバグがあります。コミュニティによる合意は、貢献者によって費やされるエネルギーを向けるのに役立ちます。

次は？​

現在、モバイルアプリを開発しており、アーティストやレーベルと協力してVoltraショップに音楽を追加しています。もしあなたがアーティストやレーベルなら、今すぐサインアップしてください！1000万曲を達成したらショップをオープンする予定です。

今週、私たちはAutomatticの人々と会い、WordPressコンテンツを管理するためのオープンソースデスクトップクライアントであるWordPress Desktopについて話しました。

誰もがWordPressについて知っていますが、WordPress Desktopとは何ですか？​

WordPress.comデスクトップアプリは、ブラウザのタブに気を散らすことなく、コンテンツとデザインに集中できるシームレスなクロスプラットフォームエクスペリエンスを提供します。または、サイトを脇に置いてアクセス可能に保つことができます。ブラウザのサポートとモバイルアプリと組み合わせることで、作業を完了するのに役立つ方法で、どこでもサイトを構築できます。

WordPressサイトを管理するためのデスクトップアプリを構築する理由は？すべてをウェブベースにできないのか？​

これは実際には、ブラウザでWordPress.comにアクセスしたときとまったく同じテクノロジーを使用しています。ただし、すべてがローカルでホストされているため、ロード時間が最小限に抑えられます。ドックに表示される、通知などネイティブ機能のメリットにより、WordPressサイトとブログに集中できるようになります。

なぜElectronでWordPress Desktopを構築することを選んだのですか？​

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

Calypsoに取り組んでいるチームがいくつかありました。従来のデスクトップテクノロジーを使用してこれに一致する完全なマルチプラットフォームGUIクライアントを作成するには、より多くの作業が必要でした。Electronを使用することで、2〜4人の小さなチームが他のチームの努力を活用し、数か月でデスクトップアプリを構築できました。

WordPress Desktopの構築中に直面した課題は？​

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

さらに、さまざまなプラットフォーム向けにアプリをパッケージ化するのに多くの労力が費やされました。Windows、macOS、Linuxバージョンを提供していますが、これを複雑にするのに十分な違いがあります。

当時、Electronは比較的新しく、すぐに修正される（時には同じ日に！）問題に遭遇し続けました。

Electronはどのような点で改善されるべきですか？​

Electronはデスクトップアプリに必要なもののほとんどをすでに提供しており、使用を開始してから急速に進歩しています。そうは言っても、スペルチェックや検索/置換など、デスクトップアプリでは当然のこととされているものの、Electronをそのまま使用して複製するのが難しい領域がいくつかあります。

また、新しいChromeテクノロジーの一部がElectronにも浸透するのを期待しています。特にWebVRを試してみたいと思っています。

Electronについてお気に入りの点は何ですか？​

Electronを選択した主な理由であり、最大の強みは、非常に活発でオープンなコミュニティです。Automatticは常にオープンソースを信じてきました。それは私たちの中心的な信条の1つであり、Electronプロジェクトとコミュニティは非常にオープンで前向きであるという中心的な信念の多くに従っています。

WordPress Desktopの次の予定は？​

私たちのモデルの素晴らしい点は、デスクトップアプリが新しいCalypso機能の恩恵を受けるということです。常に改善が行われています。オフラインサポートなどの追加機能をアプリに追加したいと考えています。これにより、アプリはネイティブ領域に入り、システムの通知も改善されます。

Automatticには他のElectronアプリに取り組んでいるチームはありますか？​

はい。デスクトップアプリでの取り組みの後、Simplenoteチームは、WindowsおよびLinux用のデスクトップアプリを構築するためにElectronを使用することに決定しました（ネイティブのMacクライアントはすでに存在します）。Simplenote Electronアプリもオープンソースであり、Githubで入手できます。

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

これらのいずれかに興味がある場合は、ぜひご連絡ください！

他の開発者にとって役立つ可能性のあるElectronのヒントはありますか？​

署名付きデスクトップソフトウェアの出荷プロセスは、特にWindowsでは、私たちにとって比較的新しいものです。私たちはWindowsアプリのコード署名という記事を作成しました。これには、プロセスと、正しく行うために経験したいくつかのハードルが含まれています。

今週の注目プロジェクトは、Datです。これは、助成金を受けた、オープンソースの、データセットを配布するための分散型ツールです。Datは、地理的に分散したチームによって構築および保守されており、その多くがこの記事の作成に協力しました。

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

私たちは、ピアツーピアと分散システムの最高の部分をデータ共有にもたらしたいと考えていました。科学的なデータ共有から始め、その後、研究機関、政府、公共サービス、オープンソースチームにも広がり始めました。

別の考え方としては、DropboxやBitTorrent Syncのような同期およびアップロードアプリですが、Datはオープンソースです。私たちの目標は、大規模、小規模、中規模、小ロット、大ロットのデータ向けの強力で、オープンソースの、非営利のデータ共有ソフトウェアになることです。

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

dat share path/to/my/folder

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

Datとは何かを理解できました。Dat Desktopはどのように適合しますか？​

Dat Desktopは、コマンドラインを使用できない、または使用したくない人がDatにアクセスできるようにする方法です。マシン上で複数のdatをホストし、ネットワーク経由でデータを提供できます。

いくつかのクールなユースケースを共有できますか？​

DataRefuge + Project Svalbard​

私たちは、Project Svalbardというコードネームのプロジェクトに取り組んでいます。これは、消滅する危険性のある政府の気候データをバックアップするために取り組んでいるグループであるDataRefugeに関連しています。スヴァールバル諸島は、北極にあるスヴァールバル世界種子貯蔵庫にちなんで名付けられました。スヴァールバル世界種子貯蔵庫には、植物DNAの大規模な地下バックアップライブラリがあります。私たちのバージョンは、公開されている科学データセットの大規模なバージョン管理されたコレクションです。メタデータを把握し、信頼できるようになったら、分散型ボランティアデータストレージネットワークのような他のクールなプロジェクトを構築できます。

カリフォルニア市民データ連合​

CACivicDataは、政治資金を追跡するカリフォルニアのデータベースであるCAL-ACCESSから毎日ダウンロードを提供するオープンソースアーカイブです。彼らは毎日リリースしています。これは、zipファイル全体で多くの重複データをホストしていることを意味します。私たちは彼らのデータをDatリポジトリとしてホストすることに取り組んでいます。これにより、特定のバージョンを参照したり、新しいバージョンに更新するために必要な手間と帯域幅が削減されます。

Electronの更新​

これはまだ具体的ではありませんが、楽しいユースケースは、コンパイルされたElectronアプリをDatリポジトリに入れ、次にElectronのDatクライアントを使用して、構築されたアプリバイナリの最新のデルタをプルして、ダウンロード時間を節約し、サーバーの帯域幅コストを削減することだと思います。

誰がDat Desktopを使用すべきですか？​

p2pネットワーク経由でデータを共有および更新したい人。データサイエンティスト、オープンデータハッカー、研究者、開発者。他に思いつかないクールなユースケースがあれば、フィードバックをいただければ幸いです。Gitter Chatに参加して、ご質問ください！

DatとDat Desktopの次の予定は？​

ユーザーアカウントとメタデータ公開。私たちはdatproject.orgに展開されるDatレジストリWebアプリに取り組んでいます。これは基本的に「データセット用のNPM」になります。ただし、データはオンラインのどこにでも存在できるメタデータディレクトリになる予定です（ソースコードは小さいため、すべてを1つのシステムに収めることができるNPMやGitHubとは対照的です）。多くのデータセットは巨大であるため、フェデレーションレジストリが必要です（BitTorrentトラッカーの仕組みと同様）。Dat Desktopからレジストリを使用してデータセットを簡単に見つけたり公開したりして、データ共有プロセスをスムーズにしたいと考えています。

もう1つの機能は、マルチライター/コラボレーションフォルダーです。私たちは、データセットのコラボレーションを中心に設計されたGitのような、ブランチを使用した共同ワークフローを実行する大きな計画を持っています。しかし、私たちは現在、全体の安定性とプロトコルの標準化に取り組んでいます！

なぜElectronでDat Desktopを構築することを選んだのですか？​

DatはNode.jsを使用して構築されているため、私たちの統合には自然な選択でした。さらに、科学者、研究者、政府関係者は所属機関の都合で特定のセットアップを使用せざるを得ない場合があるため、ユーザーはさまざまなマシンを使用しています。つまり、Windows、Linux、Macに対応できる必要があります。Dat Desktopはそれを非常に簡単に実現してくれます。

DatとDat Desktopの構築中に直面した課題は何ですか？​

人々が何を求めているかを理解することです。最初は表形式のデータセットから始めましたが、これは解決が少し複雑な問題であり、ほとんどの人がデータベースを使用していないことに気づきました。そのため、プロジェクトの途中で、すべてをゼロから再設計してファイルシステムを使用するようにし、それ以来振り返っていません。

また、次のような一般的なElectronインフラストラクチャの問題にも遭遇しました。

• テレメトリ - 匿名での使用統計を収集する方法
• アップデート - 自動アップデートの設定は、ある種の手作業と魔法のようです。
• リリース - XCode署名、Travisでのリリースのビルド、ベータ版のビルドなど、すべてが課題でした。

また、Dat Desktopの「フロントエンド」コードでは、BrowserifyといくつかのクールなBrowserify Transformsを使用しています（ネイティブのrequireがあるにもかかわらずバンドルしているのは少し奇妙ですが、Transformsが必要だからです）。CSSをより適切に管理するために、Sassからsheetifyに切り替えました。これにより、CSSをモジュール化し、共有依存関係を持つコンポーネント指向アーキテクチャにUIを移行するのが容易になりました。たとえば、dat-colorsにはすべての色が格納されており、すべてのプロジェクトで共有されています。

私たちは常に標準と最小限の抽象化を重視してきました。私たちのインターフェース全体は、少数のヘルパーライブラリのみを使用した通常のDOMノードを使用して構築されています。これらのコンポーネントの一部を、低レベルの再利用可能なコンポーネントのライブラリであるbase-elementsに移行し始めました。ほとんどのテクノロジーと同様に、私たちは正しいものが得られるまで反復を続けますが、チームとしては、ここで正しい方向に進んでいると感じています。

Electronはどのような点で改善されるべきですか？​

最大の痛点はネイティブモジュールだと思います。npmを使用してElectron用にモジュールをリビルドする必要があるため、ワークフローが複雑になります。私たちのチームは、プリビルドされたバイナリを処理するprebuildというモジュールを開発しました。これはNodeではうまく機能しましたが、Electronのワークフローではインストール後にカスタムステップ（通常はnpm run rebuild）が必要でした。これは面倒でした。この問題を解決するために、最近、npm tarballの中にすべてのプラットフォームのコンパイル済みバイナリバージョンをバンドルするという戦略に切り替えました。これにより、tarballは大きくなりますが（.soファイル - 共有ライブラリで最適化できます）、このアプローチではインストール後のスクリプトを実行する必要がなくなり、npm run rebuildパターンも完全に回避できます。つまり、npm installはElectronで最初に正しい処理を行います。

Electronについてお気に入りの点は何ですか？​

APIはかなりよく考えられており、比較的安定しており、アップストリームのNodeリリースに最新の状態を維持するためにかなりうまく機能しています。他に要求することはあまりありません！

他の開発者にとって役立つ可能性のあるElectronのヒントはありますか？​

ネイティブモジュールを使用する場合は、prebuildを試してみてください！

Datの開発をフォローする最適な方法は何ですか？​

Twitterで@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 Desktopとは何ですか？​

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

ジャーナリズムのためのGhostとは何ですか？​

今年は、10人のフルタイムのGhostチーム全体を、3つの独立した出版物の成長を支援することに専念し、その取り組みに45,000ドルのリソースを投入できることを非常に嬉しく思っています。私たちはそれをジャーナリズムのためのGhostと呼んでいます。

私たちは約3年半にわたって、独立したパブリッシャー向けのWebで次に素晴らしいプラットフォームとしてGhostを構築しており、現在、本当に興味深い変曲点に達しています。私たちは、誰でも使用できるシンプルでうまく設計されたブログプラットフォームを作成するために、この旅を始めました。それは常に最初のステップでした。

長期的には、Ghostを世界最高のジャーナリズムのための素晴らしいプラットフォームにしたいと考えており、そのためには、まさにそれらの人々を引き付けるための機能を構築する必要があります。今年は、まさにそれに焦点を当てるという非常に意識的な決定を下しています。

ElectronでGhost Desktopを構築することを選択した理由は何ですか？​

Ghostはバックエンドとフロントエンドの両方でJavaScriptとNode.jsを使用しているため、同じテクノロジーとスキルセットを活用できることで、チームはより迅速に移動し、より多くのものを構築し、最終的に優れたエクスペリエンスを提供できます。さらに、アプリのmacOS、Windows、Linuxバージョン間で95％以上のコードを共有できることで、プラットフォームごとに1つのコードベースを維持することなく、優れたコアユーザーエクスペリエンスの構築に集中できます。

Ghost Desktopの構築中に直面した課題は何ですか？​

スペルチェックは、おそらく依然として最も難しいサービスの1つです。多くのオンラインサービスの1つを簡単に利用できますが、ユーザーのプライバシーと自律性を保護しながら、複数の言語でテキストを正しくスペルチェックすることは簡単な作業ではありません。

Electronはどのような点で改善されるべきですか？​

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

Electronについてお気に入りの点は何ですか？​

JavaScriptは、無数のツールやフレームワークを含む巨大なエコシステムとして有名ですが、それが私たちに提供する利便性は過小評価できません。Electronでアプリを構築することは、Webアプリを構築するよりもわずかに難しいだけであり、これは驚くべき偉業です。

Ghostは完成しましたか？もしそうでない場合、次はどうなりますか？​

Ghost Desktopも進行中のプロジェクトです。完了にはまだ程遠いです。私たちはしばらくの間、ユーザーに完全なオフラインモードを提供することについて話し合っており、かなり近づいています。その他の注目すべき作業分野は、他のテキスト編集アプリ（WordやAtomなど）との拡張と統合であり、最終的には人々が自分の好きなツールを使用して投稿を作成できるようにすることです。一般的に、オフラインモードの機能をリリースしたら、オペレーティングシステムとのより深い統合を目指しています。それが興味深い場合は、参加してください！

お気に入りのElectronアプリは何ですか？​

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

👻

今週は、Paul Frazee氏にお話を伺いました。彼はBeaker Browserの作者です。Beakerは、ユーザーのデバイスからサイトをホストするためにDatプロトコルを使用する実験的なピアツーピアウェブブラウザです。

Beakerとは何ですか？また、なぜ作成したのですか？​

Beakerは参加型のブラウザです。インディーハッカー向けのブラウザです。

ウェブはクローズドソースです。ソーシャルメディアの仕組みに影響を与えたいなら、FacebookやTwitterで働く必要があります。検索ならGoogleです。コントロールは、ユーザー自身ではなく、企業の手中にあります。

Beakerでは、新しいウェブプロトコル、Decentralized Archive Transport（「Dat」）を導入しました。これは、オンデマンドで無料のサイトを作成し、デバイスから共有します。サーバーは必要ありません。これが私たちのイノベーションです。

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

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

誰がBeakerを使うべきですか？​

ハッカー。モッダー。クリエイティブなタイプ。いじくり回すのが好きな人。

Datを使用する新しいプロジェクトを作成するにはどうすればよいですか？​

私たちは、bkrと呼ばれるコマンドラインツールを持っています。これはgit + npmのようなものです。以下は、サイトを作成する例です。

$ 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が必要な場合は、ブラウザに組み込まれた基本的なツールがありますが、これらのツールをユーザーランドに移行しています。すべてが改造可能なユーザーアプリになります。

なぜBeakerをElectronで構築することを選んだのですか？​

このプロジェクトでは明らかでした。もし私が自分でChromeをフォークしたら、今頃C++を書いているでしょう！誰もそんなことはしたくありません。私はウェブスタックを知っており、それで素早く作業できます。言うまでもないことです。

実のところ、Electronがなければ、これらのどれもできなかったかもしれません。素晴らしいソフトウェアです。

Beakerの構築中に直面した課題は何ですか？​

半分はツールを突っつき、どこまで許容できるかを見極めることでした。

ブラウザ自体を作るのはかなり簡単でした。Electronは実質的にブラウザを作るためのツールキットです。...ブラウザタブを除いて。あれを正しく作るのに永遠にかかりました。最終的に私は降参し、SVGのやり方を学びました。見た目ははるかに良くなりましたが、正しくできるまで3、4回やり直しました。

Electronはどのような点で改善されるべきですか？​

もし開発者ツールをウェブビューの中にドッキングできたら、本当に素晴らしいでしょう。

Beakerの次の予定は何ですか？​

Datサイトの安全なDNS名。ソーシャルに設定可能なURLスキームで、「アプリスキーム」と呼ばれます。より多くのDat API。

プロジェクトへの貢献に興味がある人に向けて、Beakerはどのような分野で助けを必要としていますか？​

オープンなissueがたくさんあります。遠慮なく私に連絡してください。freenodeの#beakerbrowserで。私たちは貢献者向けのページを用意しており、あなたを追加します。そして、オースティンに来たらビールをおごります。

他の開発者にとって役立つ可能性のあるElectronのヒントはありますか？​

1. そこにあるビルドツールを使ってください。独自のソリューションと格闘したくないはずです。私を信じてください。electron-builderを使ってください。ボイラープレートのリポジトリを使ってください。
2. Electronのリポジトリでissueをオープンする必要がある場合は、再現しやすくするために、もう少しだけ頑張ってください。より迅速な対応が得られ、チームも感謝するでしょう。さらに良いことに、自分で修正してみてください。内部を見るのは実際にはかなり面白いです。
3. ガイドと高度なドキュメントをすべて最低1回は読んでください。
4. ブラウザを作らないでください。飽和市場です。

Electronコミュニティは急速に成長しており、人々は驚くべき速度で強力な新しいアプリやツールを作成しています。この創造的な勢いを祝い、コミュニティにこれらの新しいプロジェクトを知らせるために、私たちは毎週、注目すべきElectron関連プロジェクトを紹介するブログシリーズを開始することにしました。

この投稿はシリーズの最初であり、フリーランスのデザイナーと開発者の地理的に分散したチームであるWulkanoによって構築されたオープンソースの画面録画アプリであるKapを紹介します。

Kapとは何ですか？​

Kapは、主にデザイナーや開発者が自分の仕事を簡単にキャプチャできるようにするために構築されたオープンソースの画面録画ツールです。人々は、アニメーションプロトタイプを共有したり、バグを文書化したり、おかしなGIFを作成したり、その他あらゆることに使用しています。

教育現場、スクリーンキャスト、チュートリアルなど、あらゆる年齢層やバックグラウンドを持つ人々が使用しているのを見てきました。制作アセットを作成するためにも！私たちの小さなサイドプロジェクトがこれほどまでに好評なのは、本当に驚きです。

なぜ作成したのですか？​

それは非常に良い質問です。画面録画ツールが不足しているわけではありません！私たちは、代替案が複雑すぎたり、高価すぎたり、制限されすぎたりすると感じていました。私たちの日常のニーズに「ちょうど良い」と感じるものがありませんでした。また、私たちが仕事で使用するツールがオープンソースであると、誰もがそれらを形作るのを助けることができるので素晴らしいと考えています。Kapの構築は、私たちがやらなかったことについても同じくらい重要でした。すべては細部にあり、私たちが使用したいツールの概要となった小さな改善の積み重ねです。

しかし、おそらく最も重要なこととして、Kapは、私たちが心配事を忘れて、自分自身や私たちのような人々のために何かを作って楽しむことができる場所になっています。自分の不満を吐き出し、新しいことに挑戦し、自分の技術を楽しむことができる環境を作ることが非常に重要です。要求もプレッシャーも期待もありません。デザイナーや開発者はサイドプロジェクトをやるべきでしょうか？はい、やるべきです。

なぜKapをElectronで構築することを選んだのですか？​

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

• ウェブ技術
• チームのほとんどがウェブ開発者です
• 私たちはJavaScriptに投資しています
• より多くの人々が貢献するための扉を開きます
• Electron自体がオープンソースです
• node_modulesのパワーと保守しやすいモジュール性
• クロスプラットフォームの可能性

私たちは、アプリの未来はブラウザにあると考えていますが、まだそこには到達していません。Electronは、その未来への旅における重要なステップです。アプリ自体をよりアクセスしやすくするだけでなく、アプリが構築されているコードもアクセスしやすくします。興味深い考え方は、OSがブラウザになり、タブが本質的にElectronアプリになる未来を想像することです。

さらに、主にウェブ開発者である私たちは、クライアント、サーバー、そしてデスクトップでJSを実行できるという、JavaScriptの同型的な性質の大ファンです。ウェブ技術（HTML、CSS、JS）を使用すると、ネイティブよりも多くのことがはるかに簡単になります。プロトタイプの作成が高速化され、コードが少なくなり、flexbox > auto-layout（macOS/iOS）となります。

Kapの構築中に直面した課題は何ですか？​

画面を記録するためにElectronが利用できるリソースを使用することが最大の課題でした。それらは私たちの要件を満たすのに十分なパフォーマンスを発揮できず、私たちの目にはプロジェクトを失敗させるだろうと考えました。ただし、Electron自体のせいではありませんが、ネイティブ開発とウェブ技術を使用したデスクトップアプリの構築の間にはまだギャップがあります。

Chromiumに起因する問題であるgetUserMedia APIのパフォーマンスの低さを回避しようと多くの時間を費やしました。Kapの作成に着手したときの私たちの主な目標の1つは、アプリ全体をウェブ技術で構築することでした。それを機能させるためにできることはすべて試しましたが（Retina画面で30 FPSが最低要件）、最終的には別の解決策を見つける必要がありました。

リポジトリにSwiftコードが見えます。それは何ですか？​

getUserMediaの代替を探すことを余儀なくされた私たちは、ffmpegを試してみることにしました。オーディオおよびビデオ変換に最適なツールの1つであることに加えて、ほぼすべてのOSで画面を記録する機能があり、Retina画面で30 FPSの最低要件を満たす鮮明なビデオを記録することができました。問題？パフォーマンスは「😩CPU使用率が異常に高騰しました。そのため、私たちは根本に立ち返り、選択肢を議論し、妥協が必要であることに気づきました。その結果が、Swiftで記述されたmacOS用の独自の画面録画ライブラリであるApertureです。

Electronはどのような点で改善されるべきですか？​

ElectronアプリがRAMを大量に消費することは周知の事実ですが、これもまたChromiumの性質によるものです。これはChromiumの動作の一部であり、実際に何を実行しているかに大きく左右されます。たとえば、KapやHyperは通常100MB未満のメモリしか使用しません。

私たちが改善の余地が大きいと考える領域の一つはペイロード、特にElectronがChromiumをどのように配布するかです。一つのアイデアとして、共有のElectronコアを用意し、アプリのインストーラーがシステムに既に存在するかどうかを確認するという方法が考えられます。

クロスプラットフォームなElectronアプリの作成は、より良い体験になる可能性があります。現状では、プラットフォーム間の不整合、プラットフォーム固有のAPI、機能の欠落が多すぎ、コードベースがif-else文で散らかってしまっています。例えば、vibrancyはmacOSでのみサポートされており、自動更新機能はmacOSとWindowsで動作が異なり、Linuxではサポートすらされていません。透過性はLinuxではうまくいかないことが多く、大抵の場合失敗します。

ネイティブシステムAPIの呼び出しもより簡単であるべきです。Electronには非常に優れたAPIセットが付属していますが、場合によっては提供されていない機能が必要になります。ネイティブNode.jsアドオンを作成することも選択肢の一つですが、開発が面倒です。理想的には、ElectronにはFFI APIが付属しており、fastcallのようなものが望ましいです。これにより、Swiftの部分を代わりにJavaScriptで記述できたでしょう。

Electronについてお気に入りの点は何ですか？​

私たちが最も気に入っているのは、Web開発の知識があれば誰でも、マルチプラットフォームのネイティブな体験を構築し、貢献できるという点です。言うまでもなく、開発の容易さと楽しさ、優れたドキュメント、そして活気のあるエコシステムも魅力です。

フロントエンドの観点からすると、Kapの構築は、ブラウザAPIを使用した単純なWebサイトの構築と変わりありませんでした。Electronは、アプリ開発をWeb開発とほぼ同じ（基本的に同一）にするという点で本当に素晴らしい仕事をしています。非常にシンプルなので、フレームワークなどの助けを借りる必要がなく、クリーンでモジュール化されたJSとCSSだけで十分でした。

私たちは、Electronを開発しているチーム、彼らの献身的な姿勢とサポート、そして彼らが維持している活発で友好的なコミュニティも非常に気に入っています。皆さん、抱擁を！

Kapの次の展開は？​

私たちの次のステップは、2.0.0のマイルストーンに向けてアプリを見直すことです。これには、Reactでのリライトに加えて、開発者がKapの機能を拡張できるプラグインのサポートが含まれます！皆さん、プロジェクトをフォローし、私たちのGitHubリポジトリに貢献してください。私たちは皆さんからの意見を聞きたいと思っており、できるだけ多くの意見を聞きたいと思っています。Kapを可能な限り最高のツールにするために、どのように改善できるかを教えてください！

Wulkanoとは？​

Wulkanoはデザインスタジオであり、デジタルコレクティブです。クライアント案件と自社プロジェクトの両方で共に働くことを愛する、リモートワーカーの技術者チームです。私たちは、異なる場所やバックグラウンドを持つ人々の分散型でありながら緊密なグループであり、知識、アイデア、経験を共有していますが、最も重要なのは、仮想オフィス（ElectronベースのSlack！）で、くだらないGIFやミームを共有することです。

他の開発者にとって役立つ可能性のあるElectronのヒントはありますか？​

素晴らしいコミュニティに参加し、Awesome Electronをチェックし、例を見て、優れたドキュメントを活用してください！

8月に追加された新しいElectronアプリを紹介します。

このサイトは、コミュニティからのプルリクエストを通じて、新しいアプリとミートアップで更新されています。新しい追加の通知を受け取るためにリポジトリをウォッチすることができます。または、サイトの変更すべてに興味がない場合は、ブログRSSフィードを購読してください。

Electronアプリを作成した場合、またはミートアップを主催している場合は、プルリクエストを作成してサイトに追加してください。そうすれば次のまとめに掲載されます。

新しいアプリ​

	Code RPGify	RPGスタイルのコーディングアプリケーション
	PamFax	ファックスを送受信するためのクロスプラットフォームアプリ
	BlankUp	明瞭さ+1のマークダウンエディター
	Rambox	一般的なWebアプリケーションを一つにまとめた、無料のオープンソースメッセージングおよびメールアプリ
	Gordie	カードコレクションに最適なアプリ
	Ionic Creator	素晴らしいモバイルアプリをより速く構築
	TwitchAlerts	美しいアラートと通知で視聴者を幸せに
	Museeks	シンプルでクリーンなクロスプラットフォーム音楽プレーヤー
	SeaPig	マークダウンからHTMLへのコンバーター
	GroupMe	非公式のGroupMeアプリ
	Moeditor	汎用マークダウンエディター
	Soundnode	Soundnodeアプリはデスクトップ版のSoundcloud
	QMUI Web	QMUI Web Desktopは、QMUI Web Frameworkに基づいたプロジェクトを管理するためのアプリケーション
	Svgsus	SVGの整理、クリーンアップ、変換
	Ramme	非公式のInstagramデスクトップアプリ
	Insomnia	REST APIクライアント
	Correo	Windows、macOS、Linux用のメニューバー/タスクバーGmailアプリ
	KongDash	Kong Admin API用のデスクトップクライアント
	翻訳エディター	INTL ICUメッセージ用の翻訳ファイルエディター（formatjsioを参照）
	5EClient	5EPlay CSGOクライアント
	Theme Juice	ローカルWordPress開発を簡単に