メインコンテンツへスキップ

今週のプロジェクト：Kap

·7分間の読書
skllcrn
skllcrn
sindresorhus
sindresorhus
zeke
zeke

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

この投稿はシリーズの最初のもので、地理的に分散されたフリーランスのデザイナーと開発者のチームであるWulkanoによって作成されたオープンソースのスクリーンレコーディングアプリであるKapを紹介します。

Kap Screencast

Kapとは？​

Kapはオープンソースのスクリーンレコーダーです。主にデザイナーや開発者が自分の作業を簡単にキャプチャするために作られました。アニメーションプロトタイプの共有、バグの記録、面白いGIFの作成など、あらゆる用途で使われています。

私たちは、あらゆる年齢層や背景の人々が教育現場、スクリーンキャスト、チュートリアルなどでKapを使用しているのを見てきました。制作資産の作成にも使われています！私たちの小さなサイドプロジェクトがこれほど好評だったことに、完全に驚いています。

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

それはとても良い質問です。市場にはスクリーンレコーダーが不足しているわけではありません！しかし、既存の選択肢は複雑すぎる、高価すぎる、または機能が限定的すぎるように感じました。私たちの毎日のニーズに「ちょうど良い」ものはありませんでした。また、私たちが仕事で使用するツールがオープンソースであることは素晴らしいと考えています。そうすれば、誰もがツールを形作るのに役立ちます。Kapの開発は、私たちが何もしなかったことについても同じくらい重要なことでした。それは細部すべてにあり、小さな改善の積み重ねが、私たちが使いたいツールのアウトラインとなりました。

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

なぜElectronを使用してKapを開発したのですか？​

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

  • Web技術
  • チームのほとんどはWeb開発者です
  • 私たちはJavaScriptに投資しています
  • より多くの人が貢献できるようになります
  • Electron自身もオープンソースです
  • node_modulesの強力で容易に維持可能なモジュール性
  • クロスプラットフォームの可能性

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

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

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

Electronが提供するリソースを使用して画面を録画することが最大の課題でした。それらは、私たちの要件を満たすにはパフォーマンスが不十分であり、私たちの目にはプロジェクトの失敗につながるでしょう。Electron自身のせいではありませんが、ネイティブ開発とWeb技術によるデスクトップアプリの構築の間には依然としてギャップがあります。

私たちは、Chromiumに由来する問題であるgetUserMedia APIのパフォーマンスの悪さを回避するために多くの時間を費やしました。Kapを作成する際に設定した主な目標の1つは、アプリ全体をWeb技術で構築することでした。（Retina画面で30 FPSを最低要件として）機能させるためにあらゆることを試した後、最終的に別の解決策を見つけなければなりませんでした。

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

getUserMediaの代替手段を探すことを余儀なくされたため、ffmpegを試してみました。オーディオとビデオの変換のための最高のツールの1つであることに加えて、ほとんどすべてのOSで画面を録画する機能があり、Retina画面で30 FPSという最小要件を満たす鮮明なビデオを録画することができました。問題？パフォーマンスは "😩CPU使用率が急上昇していました。そこで私たちは設計図に戻り、選択肢について話し合った結果、妥協する必要があることに気づきました。その結果、Swiftで記述されたmacOS用の独自のスクリーンレコーディングライブラリであるApertureが生まれました。

Electronはどこを改善すべきですか？​

Electronアプリはメモリ消費が多いことで知られていますが、これはChromiumの特性によるものです。動作原理の一部であり、実行するアプリケーションによって異なります。例えば、KapやHyperは通常100MB以下のメモリしか使用しません。

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

クロスプラットフォームElectronアプリの開発体験を向上させる必要があります。現状では、プラットフォーム間の不整合、プラットフォーム固有のAPI、機能の欠如が多いため、コードベースがif-else文だらけになっています。例えば、ビブランシーはmacOSのみでサポートされ、自動アップデートはmacOSとWindowsで動作が異なり、Linuxではサポートされていません。透過性もLinuxではうまくいかないことが多いです。

ネイティブシステムAPIの呼び出しも容易にする必要があります。Electronは優れたAPIセットを提供していますが、提供されていない機能が必要になることもあります。ネイティブNode.jsアドオンを作成するという選択肢がありますが、扱いが困難です。理想的には、ElectronはFFI API（fastcallなど）を備えているべきです。これにより、Swift部分をJavaScriptで記述することが可能になります。

Electronの良い点は何ですか？​

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

フロントエンドの観点から見ると、Kapの開発はブラウザAPIを使ったシンプルなウェブサイトの開発と変わりませんでした。Electronはアプリ開発をWeb開発と非常に似ている（ほぼ同一）ものにする素晴らしい仕事をしています。実際、フレームワークなどは必要なく、クリーンでモジュール化されたJSとCSSだけで十分でした。

また、Electron開発チームの献身とサポート、そして活気のあるフレンドリーなコミュニティにも大きな感謝をしています。皆さんに感謝！

Kapの今後の展開は？​

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

Wulkanoとは？​

Wulkanoは、デザインスタジオでありデジタルコレクティブです。クライアントの仕事と独自のプロジェクトの両方で協力して作業することを好む、リモートワーカーのチームです。私たちは分散型でありながら緊密なグループであり、異なる場所や背景を持つ人々が、知識、アイデア、経験、そして何よりも面白いGIFやミームを仮想オフィス（ElectronベースのSlackです！）で共有しています。

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

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