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