画面描画ツールの開発：なぜElectronではなくNativeを選んだのか？

皆さんこんにちは、CatalystPack Studioです。

前回の記事では、Spotmarkが誕生した理由についてお話ししました。今日は、現代のデスクトップアプリ開発者が必ず直面する技術的な課題について、少し深く掘り下げてみたいと思います：Nativeを選ぶべきか、Electronを選ぶべきか？

Spotmark（デスクトップ画面に直接描画、ハイライト、スポットライトを当てるツール）のプロジェクトを始めた時、技術の選定は最も難しい決断の一つでした。Electronを「こき下ろす」記事を書くつもりはありません。それ自体は素晴らしい技術だからです。代わりに、両者の長所と短所についての現実的な視点と、なぜNativeがSpotmarkのようなツールに最も適しているのかを共有したいと思います。

Electronの魅力

過去10年間、Electronがデスクトップアプリの世界を支配してきたのには理由があります。私たちが毎日開くVS Code、Slack、Figma、DiscordなどはすべてElectronで作られています。

Spotmarkの最初のProof of Concept（PoC）に取り掛かった時、その否定できない利点から、私もすぐにElectronを思い浮かべました：

1. Write Once, Run Everywhere： 小規模なチーム（またはインディーハッカー）にとって非常に魅力的です。HTML/CSS/JSでUIを一度コーディングすれば、Windows、macOS、Linux向けにパッケージ化できます。
2. 開発スピード（Development Speed）： ReactやVueなどのUIフレームワークと巨大なNPMエコシステムにより、数週間ではなく数日で洗練されたインターフェースを構築できます。
3. Standard Appsに最適： チャットアプリ、タスク管理ソフト、ノートツールなどを作る場合、Electronは最も安い開発コストで素晴らしい体験を提供します。

Spotmarkのようなツールでも、設定UIやライセンス管理をElectronで作れば「風のように速い」です。しかし、根本的な問題は最も重要な機能にありました：**画面のオーバーレイ（Screen Overlay）**です。

Screen Marker特有の課題

Spotmarkは通常のアプリケーションウィンドウではありません。Chrome上のテキストを丸で囲んだり、IDEのコード行を指す矢印を描いたりするためには、コンピュータの画面全体と同じサイズの**透明なウィンドウ（transparent window）**を作成し、常に最前面に表示（always on top）させる必要があります。

ここで、特化型タスク（Niche Task）におけるElectronの弱点が露呈します。

1. メモリのフットプリント（Memory Footprint）

Electronで透明なオーバーレイを作成するためには、OSは巨大なChromiumプロセスをバックグラウンドで維持しなければなりません。プレゼンテーション中、あなたのコンピュータはすでに重いExcelファイル、コードをビルド中のIDE、さらにビデオをストリーミングしているZoom/Teamsを処理しています。 Spotmarkのような「待機型」のツール（ほとんどの時間はシステムトレイで静かにしており、30秒間だけ呼び出される）が、さらに200MB〜300MBのRAMを消費すると、システムに遅延が生じ始めます。

2. 描画時の遅延（Latency）

スタイラスやマウスを使って画面に曲線を描く時、脳はその線がカーソルの下に即座に現れることを期待します。

Electron環境では、マウスの入力は複数の層を通過します： OS -> Node.js/Electronラッパー -> Chromiumエンジン -> DOM / Canvas -> 画面の再レンダリング

このプロセスは数ミリ秒しかかかりませんが、グラフィックス描画のようなリアルタイム性が求められる操作では、この小さな遅延によってインクがマウスの後ろに「引きずられている」ように感じられます。すべてが現実よりも少し硬く感じられます。

困難だが価値のある選択：Native（C++/Qt）

慎重に検討した結果、チームは**Native（C++/Qt）**へ方向転換することを決定しました。

Nativeでの開発は、セットアップや構成により多くの労力を必要とします。既存のクロスプラットフォームの利便性を犠牲にして、絶対的なパフォーマンスを手に入れます。システムAPI（WindowsのWin32、macOSのCocoa、LinuxのWayland/X11）の処理も、より慎重なテストとデバッグプロセスを必要とします。

しかしその見返りとして、ユーザー体験への恩恵は絶大です：

1. ハードウェアとの直接通信： パイプラインが最小化されます（OS -> Graphics API -> 画面）。マウス操作からインクの出現までの距離はほぼゼロです。スムーズな線が60FPS+で流れます（これをLiquid Drawingと呼んでいます）。
2. Zero-footprint： C++を使用することで、SpotmarkはRAMとCPUを極めて少なく消費します。ショートカットキーで呼び出すまで、その存在はあなたのコンピュータにとって完全に「見えません」。
3. OSとの深い統合： グローバルホットキー（Global Hotkeys）のキャッチやマルチモニターDPIの処理などの機能が、信じられないほどスムーズかつ正確に動作します。

おわりに

Electronは優れた技術であり、今後も他の多くのプロジェクトで使用し続けるでしょう。しかし、Spotmarkのように即時の応答性と継続的なバックグラウンド動作を必要とするツールにとって、完璧な体験を実現するにはNativeしか道はありません。

開発時間を犠牲にした結果は、Windows向けのv0.4.5 Betaリリースとして徐々に実を結んでいます。チームのエンジニアは、ARMアーキテクチャ（macOS）とWayland（Linux）環境での「難題」を解決し、間もなくコミュニティにリリースするために今も奮闘しています。

もしWindowsをお使いで、超軽量な画面描画ツールを体験したい方は、ぜひお試しください：

Spotmark v0.4.5 Beta（Windows用）のダウンロードはこちら →

次回の記事では、コンピュータがクラッシュしてもmp4ビデオファイルを安全に保存する問題をチームがどのように解決したかを共有したいと思います！

Nativeの誇りを持って構築。 ⚡