"事例紹介" タグの記事が 1 件の投稿 件あります

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

過去数ヶ月で、Electron アプリの開発者体験を強化するために、Electron エコシステム全体でいくつかの変更を醸成してきました。 Electron HQ からの最新の追加の速報はこちらです。

Electron Forge 7 とその先​

Electron Forge 7、Electron アプリケーションのパッケージ化と頒布のためのオールインワンツールの最新メジャーバージョンが利用できるようになりました。

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 ファイルをサポートするようになりました。 (P.S. Electron 28 での ESM エントリポイントのサポートをご期待ください。)
• Maker を並列実行するようになりました: Electron Forge 6 では、Maker は ✨ レガシー✨ な理由で直列実行していました。 それ以来、副作用のない 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 Organization に組み込まれ、コアチームがそのメンテナンスを負担していました。

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/ 名前空間の下にその monorepo パッケージ全てを公開し続けます。

@electron/windows-sign の紹介​

2023-06-01 以降、業界標準は FIPS 準拠のハードウェアに格納される Windows のコード署名証明書の鍵を要求するようになりました。

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

この状況は Electron 開発者にとって共通の苦痛となっています。だからこそ、Windows のコード署名をスタンドアローンな手順へと分離する改善策に取り組んでいるのです。この手順は macOS で @electron/osx-sign が行うことに似ています。

将来的には、このパッケージを Electron Forge のツールチェーンに完全に統合する予定ですが、現在は独自のものになっています。 そのパッケージは現在 npm install --save-dev @electron/windows-sign でインストールでき、プログラムからまたは CLI 経由で利用できます。

レポジトリの Issue トラッカー にてぜひご意見をお寄せください！

次は何をするのでしょうか？​

私たちは来月から、毎年 12 月の安息期に入る予定です。 私たちはその間、2024 年に Electron の開発体験をさらに向上させる方法について考えていることでしょう。

次に取り組んでほしいことがおありですか？ ぜひお聞かせください！

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

こんにちは! あなたは誰ですか?​

私は Ryo Maruyama で日本のソフトウェア開発者です。 Jasper と ESDoc を開発しています。

Jasper とは何ですか?​

Jasper は GitHub 向けの柔軟で強力な Issue リーダーです。 github.com や GitHub Enterprise での Issue やプルリクエストに対応しています。

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

仕事や OSS の活動で GitHub を使っている人は、毎日のように大量の通知が届く傾向にあります。 通知を受け取る方法として、GitHub ではメールと ウェブ通知 を提供しています。 これらは数年前から使用していましたが、以下のような問題に直面しました。

• メンションされた、コメントした、監視している Issue を見落としがちである。
• 後で確認しようと Issue を頭の片隅に置いても、たまに忘れてしまうことがある。
• Issue を忘れないために、ブラウザでタブがたくさん開いたままになる。
• 自分に関係する Issue なのかどうかを全て確認するのは難しい。
• 自分のチームの活動を全て把握しづらい。

こういった問題の対処に時間と労力を費やしていました。そこで効率的に解決するために GitHub 用の Issue リーダーを作ってみようと思い、Jasper の開発を始めました。

どういった人が Jasper を使用していますか？​

Jasper は、GitHub を利用する企業の開発者、デザイナー、マネージャーに利用されています。 もちろん、OSS 開発者の中にも使っている人がいます。 さらに GitHub の人も使っています!

Jasper はどのような仕組みですか?​

Jasper の設定を終えると、以下の画面が表示されます。 左から順に、"ストリームリスト"、"Issue リスト"、"Issue 本文" が表示されます。

この "ストリーム" は、Jasper の核となる機能です。 例えば、"eceltron/electron リポジトリの @zeke にアサインされた Issue" を見たい場合は、以下のようなストリームを作成します。

repo:electron/electron assignee:zeke is:issue

ストリームを作成して数秒待てば、条件を満たす Issue が表示されます。

ストリームではなにができますか?​

ストリームにはどのような条件が使えるのかご紹介します。

ユーザとチーム​

involves というのは mention、author、assignee、commenter のいずれかであるということです。

レポジトリと Organization​

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 日間の 無料体験版 もあります。

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

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 読み込みは通常のブラウザよりも遅くなっています。

更新情報は @jasperappio の Twitter を確認してください。

今週は @feross と @dcposch が WebTorrent についてお話しします。WebTorrent は、ユーザーをつなぎ合わせて分配された分散型ブラウザ間ネットワークを形成する、ウェブベースのトレントクライアントです。

WebTorrent とは?​

WebTorrent は、ブラウザーで動く初のトレントクライアントです。 全て JavaScript で書かれており、P2P 転送に WebRTC を使用できます。 ブラウザのプラグイン、拡張機能、インストールは不要です。

公開のウェブ標準を使用して、WebTorrent はウェブサイトのユーザーを結び付け、効率的なファイル転送のために分配された分散型ブラウザ間ネットワークを形成します。

WebTorrent の実際のデモは webtorrent.io で見ることができます。

これが凄いと言われるのはなぜですか?​

YouTube のようだけれども、訪問者がサイトコンテンツのホストを助けるビデオサイトを想像してください。 WebTorrent で強化されたウェブサイトは、利用者が多いほどより高速で強靭になります。

ブラウザ間通信は仲介者を排除し、人々が各々の条件で通信できます。 クライアント/サーバーは不要です。ピアのネットワークがあれば、みな平等です。 WebTorrent は、ウェブを再分散化する道程の初めの一歩です。

Electron はどこに登場するのですか?​

約 1 年前、デスクトップアプリ版 WebTorrent である WebTorrent デスクトップ を作成することにしました。

私たちは、以下の 3 つの理由の下に WebTorrent デスクトップを作りました。

1. 簡潔、軽量、広告なしのオープンソーストレントアプリが欲しい
2. 優良なストリーミングサポート付きトレントアプリが欲しい
3. BitTorrent と WebTorrent ネットワークを繋ぐ "ハイブリッドクライアント" が欲しい

トレントは既にウェブブラウザでダウンロードできるのに、なぜデスクトップアプリなのですか?​

初めに、WebTorrent 設計の背景を少しだけお話しましょう。

黎明期の頃、BitTorrent は TCP を転送プロトコルとして使用していました。 その後、TCP よりも優れた性能と更なるメリットを持った uTP が登場しました。 すべての上流トレントクライアントは最終的に uTP を採用し、現在はどちらのプロトコルでも BitTorrent を使用できます。 WebRTC プロトコルは次の必然的な段階です。 すべてのデスクトップ BitTorrent クライアントと数百万のウェブブラウザで構成される 1 つの巨大な P2P ネットワーク — これはウェブブラウザとの相互運用性を保証します。

"ウェブピア" (ウェブブラウザで実行されるトレントピア) は、数百万の新しいピアを追加し、BitTorrent を多数の新しいユースケースに広めることで、BitTorrent ネットワークを強化します。 WebTorrent は、既存の BitTorrent クライアントが WebTorrent サポートを簡単に追加できるように、できるだけ BitTorrent 仕様に準拠しています。

Vuze のような一部のトレントアプリはウェブピアを既にサポートしていますが、他のアプリのサポート追加を待ちたくはありませんでした。 **元来、WebTorrent デスクトップは WebTorrent プロトコルの採用を促進する手段でした。**誰もが使いたくなるような素晴らしいトレントアプリを作成することで、ウェブピア (ウェブサイト上のユーザなど) とトレントを共有できるネットワーク内のピア数を増やすのです。

あまり知られていないような、興味深いトレントの用法はありますか?​

WebTorrent の一番すごい用法というと、ピアアシスト配信でしょう。 Wikipedia や インターネットアーカイブ などの非営利プロジェクトは、訪問者にリソースを提供してもらうことで帯域幅とホスティングコストを削減できます。 人気コンテンツは、ブラウザ間で迅速かつ安価に提供できます。 たまにしかアクセスされないコンテンツは、オリジンサーバーから HTTP 経由で確実に提供できます。

インターネットアーカイブはトレントファイルを実際に既に更新しているため、WebTorrent でうまく動作します。 なので、サイトにインターネットアーカイブのコンテンツを埋め込みたい場合でも、トレントでアーカイブのホスティングコストを削減し、アーカイブ側は実際にウェブをアーカイブすることに資金を注げます。

CDN から P2P を介したアプリ配信といった、面白いビジネスユースケースもあります。

WebTorrent を使うお気に入りのプロジェクトはありますか?​

WebTorrent で作られた一番すごいものといえば、間違いなく、Gaia 3D Star Map でしょう。 これは、ぬるぬる動く天の川の 3D インタラクティブシミュレーションです。 データはトレントから直接ブラウザに読み込まれます。 銀河系を飛び回り、私たち人間が宇宙の広大さに比べてどれだけ小さいかを実感すると同時に畏敬の念を抱きます。

この作成方法は、著者の Charlie Hoey が WebGL と WebTorrent で天体図を作成した方法を説明しているブログ記事 Torrenting The Galaxy で読むことができます。

また、私たちは Brave の大ファンです。 Brave は、広告とトラッカーを自動的にブロックして、ウェブをより高速で安全にするブラウザです。 最近、Brave はトレントサポートを追加しました。そのため、従来のトレントを外部アプリなしで閲覧 できます。 この機能は WebTorrent で動作しています。

そのため、ほとんどのブラウザーが PDF ファイルを描画できるように、Brave はマグネットリンクとトレントファイルを描画できます。 これらは、ブラウザがネイティブでサポートするただの別種のコンテンツです。

なんと、Brave の共同創設者の 1 人は、WebTorrent の作成に使われた言語 JavaScript の作成者 Brendan Eich です。その Brave が WebTorrent 統合を選んだなんてとてもカッコよくないですか?

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

Electron アプリはすべてのアプリに Chrome コンテンツモジュール全体を含むため、"肥大化" していると言われています。 これは、場合によっては部分的に当てはまります (Electron アプリインストーラーは通常 ~40MB ですが、OS 固有のアプリインストーラーでは通常 ~20MB)。

しかし、WebTorrent デスクトップの場合、Electron のほぼすべての機能を使用しますし、通常の操作では何十もの Chrome 機能を使用します。 プラットフォームごとにこれらの機能をゼロから実装していれば、アプリを構築するのに数ヶ月から数年かかるか、単一のプラットフォームでしかリリースできなかったでしょう。

アイデアを実現するため、Electron の Dock 統合 (ダウンロード進捗を表示)、メニューバー統合 (バックグラウンド実行)、プロトコルハンドラーの登録 (マグネットリンクを開く)、powerSaveBlocker (映像再生中のスリープ防止)、自動更新 といった機能を使用しました。 Chrome の機能については、<video> タグ (多種に渡る動画形式の再生)、<track> (字幕対応用)、ドラッグアンドドロップ対応、WebRTC (ネイティブアプリでの使用は難しい) など、色々と使用しています。

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

まとめると、Electron は私たちが必要としていたもので、堅牢で洗練されたアプリを記録的な速さで配信するために必要で正確な機能群を備えていました。

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

WebTorrent ライブラリは、オープンソースサイドプロジェクトとして 2 年間開発中です。 **WebTorrent デスクトップは 4 週間で作成しました。**アプリを非常に迅速に構築して配信できたのは Electron であることが主な理由です。

jQuery を使用する世代のフロントエンドプログラマーを Node.js がサーバープログラミングに導いたのと同じで、Electron はウェブや Node.js の開発に精通している人なら誰でもネイティブアプリ開発に手を出せるようにします。 Electron は非常に強力です。

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

はい、webtorrent npm パッケージ は、Node.js、ブラウザ、Electron で動作します。 全く同じコードがすべての環境で実行できる — これが JavaScript の美です。 これが今日の万国共通の実行環境です。 Java Applets は "一度書けば、どこでも動く" アプリを約束しましたが、その理想は多くの理由で実際には実現しませんでした。 Electron は、他のどのプラットフォームよりも、本当にその理想に接近しています。

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

アプリの初期版では、UI パフォーマンスの向上に苦労しました。 メインアプリウィンドウを描画するレンダラープロセスと同じ所にトレントエンジンを配置していました。このため、予想どおり、トレントエンジンからの激しい CPU 演算 (ピアから受信したトレントピースの検証など) が発生した場合は常に低速になっていました。

これを修正するため、トレントエンジンを IPC を介して通信する 2 つ目の非表示のレンダラープロセスに移動しました。 こうすれば、そのプロセスが短時間に多くの CPU を使用する場合でも、UI スレッドは影響を受けません。 滑らかなスクロールとアニメーションには非常に満足です。

注釈: WebRTC (レンダラーでのみ使用可能) にアクセスする必要があるため、"メイン" プロセスではなく、レンダラープロセスにトレントエンジンを配置する必要がありました。

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

本番用のアプリを構築して配信する方法や、特にコード署名や自動更新などのトリッキーなテーマについて、より良いドキュメントを望んでいます。 私たちは、ソースコードを研究して Twitter で尋ねてベストプラクティスについて学ぶ必要がありました!

WebTorrent デスクトップは開発終了ですか? それとも、今後何かありますか?​

現行の WebTorrent デスクトップは素晴らしいと思いますが、改善の余地は常にあります。 現在、細かい点の修正、パフォーマンス、字幕サポート、映像コーデックサポートの改善に取り組んでいます。

プロジェクトの参加に興味がある場合は、私たちの GitHub ページ を見てください!

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

WebTorrent デスクトップのコントリビューターの 1 人である Feross は、最近 NodeConf Argentina で "Electron の世界: JavaScript でクロスプラットフォームアプリを構築" という講演を行い、洗練された Electron アプリをリリースするための便利なヒントを紹介しました。 この講演は、あなたが基本的な実用アプリを持っている段階にいて、それを次のレベルの洗練と専門的な領域に昇華させようとしているのであれば非常に役立ちます。

動画はこちら:

スライドはこちら:

もう一人の WebTorrent のコントリビューターである DC は、アプリを洗練されたネイティブにするための できることのチェックリスト を書きました。 コード例が付いており、macOS Dock 統合、ドラッグアンドドロップ、デスクトップ通知、アプリの読み込みを速くするなどをカバーしています。

今週は、Aprile Elcich さんと Paolo Fragomeni さんにお会いして、Electron を搭載した音楽プレイヤー Voltra についてお話を伺いました。

Voltra とは何ですか?​

Voltra は、自分の音楽を所有したい人のための音楽プレイヤーです。 すでに持っているものから新しい音楽を見つけたり、購入したりできるストアでもあります。 広告なしで、デスクトップとモバイル向けのクロスプラットフォームです。 情報収集もしません。

Voltra はどんな人が対象ですか?​

音楽を聴くすべての人です。

Voltra を作ったきっかけは何ですか?​

ラジオは昔からリスナーの大きなシェアを獲得しています。 今や電波からインターネットへと移行しています。 オンデマンドで音楽をレンタルできるようにもなりました - ラジオの復活です! そのために多くの新しい製品やサービスが登場しています。しかし、ストリーミングラジオはまだ、音楽とその視聴手段を掌握されています。

私たちは、自分が持っている音楽というものに全面的にこだわったプロダクトを望みました。 アーティストやレーベルから直接、新しい音楽を発見したり購入したりすることを容易にするものです。

無料版はありますか?​

デスクトッププレイヤーは完全に無料です。 あなたの音楽を販売するのも無料です! 当サイトに広告はありません。

このアプリは無料なので、後にオープンソース化するかもしれません。 今のところそれを管理する余裕はありません。 機能や採り入れる方向性についても、とても具体的なアイデアを持っています。 活発なベータコミュニティもあり、そのフィードバックを大切にしています。

どうやって収益化するのですか?​

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

Voltra Audio Archive は、音楽に特化したクラウドバックアップサービスです。 データブロックを圧縮、共有はしません。 あなたの音楽コレクションは、物理的なバックアップです。

アーティストやレーベル向けの プロ会員 は、アナリティクスやプロアーティストのウェブページなど、より関連する視聴者に届けるためのツールを提供しています。

Voltra は何が特色なのですか?​

デザインとユーザビリティは、私たちにとって非常に重要です。 リスナーの皆様に、煩わせない視聴体験を提供したいのです! 興味深い音楽プレーヤーやストアはすでにいくつか出ています。 しかし、その多くは作者が思っているよりも高度で使いづらいのです。 一人でも多くの人が Voltra を利用できるようにしたいです。

また、アーティストやレーベルからの引き抜きはしていません。 これが差別化しているポイントです。 アーティストが自分の音楽を市場に出すための障壁を下げるには、本当に重要なことなのです。

どのようなデザイン & 技術的な決定をしましたか?​

Voltra をデザインするにあたって、ネイティブアプリやウェブの UI の慣習を考慮し、何を削るかということもたくさん考えました。 私たちには、ここ数ヶ月の間で批判的なフィードバックをくれた活発なプライベートベータグループがいます。

人々は、アルバムアートや写真を本当に大切にしているということがわかりました。 多くのプレイヤーはファイルのリストでしかありません。 アルバムアートは物理アルバムを所有するにあたって格好いい所の一つですが、Voltra デスクトップアプリではこの点を強調したいと思いました。

他人のファイルに手を出さないようにも気をつけました。 ファイルを見るだけなので、それ自体は好きな場所に置くことができます。名前を変更したり、移動したりすることはありません。 プロセスが実行されていなくても新規ファイルを追跡できるように、見ているディレクトリの状態を追跡する埋め込みデータベースがあります。

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

パフォーマンスを重視して、そこに時間をかけました。 最初はフレームワークから始めましたが、バニラ JavaScript に移行しました。 経験上、フレームワークが提供する一般的な抽象化は、導入することによるパフォーマンスの対価や儀式的な記述を上回ります。

現在はとても巨大なコレクションにも対応しています。 大きなコレクションであれば数万もの画像になるでしょう! Node.js のファイルシステムモジュールをレンダラープロセスから直接利用できるようにしたことで、DOM イベントに基づいた大量の画像の超高速での遅延ロード/アンロードが非常に簡単になりました。

一般的に、setImmediate と requestIdleCallback は、UI の応答性を維持しながら多くの処理を実行するにあたってとてつもなく重要な道具です。 具体的には、CPU に依存するタスクを別のプロセスに分散させることで、ユーザーインターフェースの応答性を保つことができます。 たとえば、実際のオーディオコンテキストを別のプロセスに移動し、ビジーな UI による潜在的な中断を IPC を介した通信で回避しました。

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

ブラウザのサンドボックスはとても制限されていますが、私たちはウェブプレイヤーも開発しています。 しかし、私たちはウェブプレイヤーも開発しています。 そのため、2 つの実装間でほぼ 100% のコードを共有できるのは大きな利点です。

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

最も重要なのは、Electron で一度開発すれば、すべての主要なプラットフォームで Just Work™ するということです。 保証はありませんが、各プラットフォームのためのネイティブコーディングのコストは、Electron を導入するコストを確実に上回っています。

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

問題解決!: Node.js のネットワークスタックと Chromium のプレゼンテーション層が一緒になっていることこそが、問題解決の秘訣です。

適性: ウェブスタックだけなので、文字通りチーム全員が製品の構築に関われます。

コミュニティ: 高度に組織化されたコミュニティがあり、コミュニケーション手段が発達しています。 このようなサポートを受けながら開発を進められることはとても素晴らしいことです。

Electron はどういったところを改善できるでしょうか?​

Electron に 1 つのパッケージャを推奨してもらいたいです。 Node にとってのパッケージマネージャーと同様に、Electron にとってもパッケージマネージャーは重要です。 ユーザーランドには複数のパッケージャーがあり、それぞれが興味深い機能を備えていますが、それぞれにもバグがあります。 コミュニティのコンセンサスが得られれば、貢献者が費やすエネルギーの方向性が定められるでしょう。

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

私たちは現在モバイルアプリを開発中で、アーティストやレーベルと協力して彼らの音楽を Voltra ショップに追加しています。 そこのあなた! アーティストやレーベルの方であれば、ぜひご登録ください! 目標の 1000 万曲を達成しましたら、ショップをオープンする予定です。

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

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