【ITニュース解説】From frustration to open source adoption: my journey building SnapDOM

ウェブの世界では、ユーザーが見ているウェブページを正確に画像として保存したり、その一部を別の場所で利用したりしたいというニーズが頻繁に発生する。例えば、ウェブページのサムネイル画像を生成したり、特定の時点でのウェブページの状態を記録したりする際に、表示されている内容を正確に「キャプチャ」する必要がある。今回解説する「SnapDOM」は、まさにこの「ウェブページの表示を高速度かつ高精度にキャプチャする」という課題を解決するために開発されたライブラリである。

SnapDOMの開発は、あるズーム可能なユーザーインターフェース（UI）プロジェクト「Zumly」の内部ツールとして始まった。開発者は、ウェブページの構造を定義する「DOM（Document Object Model）」という仕組みの要素を、非常に速く、そして見た目そのままに捉える方法を必要としていた。しかし、当時すでに存在していた「DOMを画像化する」ためのライブラリ、例えば「html2canvas」といったものには、いくつかの問題点があった。具体的には、ウェブページを構成する細かい要素が正しくキャプチャされなかったり、フォントが意図した通りに表示されなかったり、さらには特定のブラウザ（Safariなど）で正常に動作しないケースがあったのだ。こうした既存ツールの限界に直面したことが、SnapDOM開発の大きなきっかけとなった。当初は個人的な「ちょっとしたハック」のつもりだったが、既存ツールの問題点を解決するためには、より本格的なプロジェクトとして取り組む必要があったのである。

SnapDOMの開発において、二つの重要な原則が掲げられた。一つは「忠実度（fidelity）」、つまりウェブページの見た目をどれだけ正確に再現できるかということ。もう一つは「速度（speed）」、つまりどれだけ速く処理できるかということだ。どんなに正確にキャプチャできても、処理に時間がかかりすぎては実用的ではない。そのため、開発者は「キャッシング戦略」（一度計算した結果を保存しておき、次回以降はそれを利用して高速化する仕組み）や「増分アップデート」（変更があった部分だけを更新する仕組み）、そして「効率的なDOMクローニング」（ウェブページの構造情報を効率的にコピーする仕組み）に多大な時間を費やした。他の既存ライブラリとの性能比較も日常的に行い、正確さと同じくらい、あるいはそれ以上にパフォーマンスを重視して開発が進められた。

このプロジェクトが大きな転機を迎えたのは、SnapDOMを「オープンソース」として公開したときである。オープンソースとは、ソフトウェアのソースコード（プログラムの中身）を公開し、誰でも自由に利用したり、修正・改良したりできるようにすることだ。コードを公開するまでは、開発者自身がテストする環境に限られていたが、オープンソースになったことで、SnapDOMの利用者は世界中の多様なブラウザ、CSSスタイル、HTML構造を持つ人々になった。これにより、開発者は「攻撃面（attack surface）」がどれほど広大であるかを痛感することになった。異なるブラウザのバージョン、OS、ウェブページのデザインや使われている技術の組み合わせによって、予期せぬバグが頻繁に発生するようになったのだ。時には圧倒されそうになることもあったが、開発者はそれぞれのバグを「再現可能なパターン」として捉え、問題を切り分け、修正し、そこから得られた教訓を今後の開発に活かすというアプローチを学んでいった。

技術的な側面では、SnapDOMの開発は開発者に様々な知識と経験をもたらした。例えば、「DOMクローニング戦略」は、ウェブページの情報をコピーする際の効率と正確さを追求する奥深いテーマである。「キャッシング」は、パフォーマンスを向上させるための重要なテクニックだ。また、ウェブページで使われる「フォントの埋め込み」を正しく行うための「ヒューリスティック」（経験則や発見的手法）や、各ブラウザの動作の違いに対応するための「ブラウザ固有のハック」も必要となった。そして常に「忠実度」と「パフォーマンス」という二つの価値の間で、どちらを優先するか、どのようにバランスを取るかという「トレードオフ」の判断が求められた。

個人的な側面でも、このプロジェクトは多くの学びをもたらした。開発者は忍耐力、謙虚さ、そしてユーザーの声に真剣に耳を傾けることの重要性を学んだ。特に、他の開発者から寄せられる「プルリクエスト（PR）」（コードの改善提案）や、問題を再現するための明確な手順（再現ケース）は、プロジェクトを本当に良いものに変えてくれた。これらの貢献に見られる相互の尊重が、開発の大きなモチベーションの一つとなったのだ。

SnapDOMの成功は数字にも表れている。わずか数ヶ月で、GitHubでのスター数（プロジェクトへの関心度を示す指標）は6,000を超え、さらにはGitHub Sponsors（開発者を金銭的に支援する仕組み）から最初の支援者も現れた。多くの人がSnapDOMに価値を見出し、支援や関心を示してくれたことは、開発者にとってこの上ない喜びと報酬となった。

今後の展望としては、SnapDOMの「プラグインシステム」の設計が進められている。これは、ライブラリの核となる部分をシンプルに保ちつつ、画像の一部を切り抜く「クロッピング」や「フィルター」機能、あるいは他の形式で出力する「代替エクスポーター」といった追加機能を、拡張機能として後から追加できるようにする仕組みである。まだメインのコードには統合されていないが、開発者はこの方向性に大きな期待を寄せている。プラグインシステムは、プロジェクトに新たな複雑さをもたらすが、同時にさらなる機能性と柔軟性を提供するものとなるだろう。

2023年4月に小さな内部ツールとして始まったプロジェクトが、今や世界中のユーザーを持ち、多くの貢献者や支援者に支えられるオープンソースプロジェクトへと成長した。技術的な困難と、オープンソースならではの人々との交流という両面を経験したことは、開発者にとってこれまでにないほど充実した経験となっている。