同じ地図を三通りで：SVG、Rust、Flutter

EVnStevenは快適な場所に到達しました。プラットフォームは安定しており、多くのメンテナンスを必要としません。これはまさに私たちが始めたときに望んでいたことです：静かに動作し続ける小さなシステム。それが少し実験の余地を残し、創業者たちがいくつかの他のプロジェクトを始める時間を与えました。それらは最後の方で見つけることができます。

そこで私たちは実験を行いました。ホームページの地図を取り、それを2回再構築しました：一度はRustでWebAssemblyにコンパイルし、もう一度はFlutterで。この文章では3つすべてを1ページにまとめて比較します。

1. オリジナル：SVG、CSS、そして少しのJavaScript

簡単に言うと： これは私たちのホームページの地図です。ウェブページの他の部分と同じ方法で作られています：ブラウザがすでに表示とアニメーションの方法を知っている形状で描かれた図形です。3つの中で最もシンプルで、ほとんどの訪問者が目にするものです。

これは1つのSVG図形です。ブラウザはほとんどのアニメーションをCSSで実行し、残りは小さなスクリプトが処理します。

利点としては：ビルドステップが不要で、Hugoテンプレートだけで済みます。ベクター形式なので、どのサイズでも鮮明に表示されます。44個の点すべてにキーボードでアクセスでき、それぞれにスクリーンリーダー用のラベルがあります。そして少ないテキストはすべての言語に翻訳されています。

コストはページの重さです。地図のマークアップは約107KB（圧縮で約30KB）で、実行時には約670の要素と約200のCSSアニメーションがあります。ロジックもテストが難しいです：タイミングはCSSのキーフレームとページ内のスクリプトにあり、唯一のテストはそれを見て確認することです。

2. Rust と WebAssembly

簡単に言うと： Rust は高速で、プログラムが実行される前に多くのミスを検出できることで知られるプログラミング言語です。ここでは地図の「頭脳」を Rust で書き、それをブラウザで実行できるコンパクトな形（WebAssembly と呼ばれる）にパッケージ化し、まるで画家が1秒間に何度もキャンバスを描き直すように、地図全体を自分で描かせました。あなたには同じように見えます。

地図全体は、WebAssembly にコンパイルされた Rust によって単一のキャンバス上に描かれています。Rust のコードが地図のすべての動作を管理し、毎フレームすべてを描き直します。

私たちが気に入ったのは、ロジックがブラウザの要素を一切含まない純粋な Rust で書かれていることです。物の配置や変化のタイミングの数学的処理、土地の輪郭を読み取るパーサーなどです。13個のテストがあり、ほんの一瞬で実行され、サイクルのタイミングが間違っていると、誰かが見ておかしいと気づく前にテストが失敗します。約1,070行の Rust コードのうち約3分の1がこのテストされたコア部分（テストも含む）で、残りはキャンバスへの描画やマウスイベントの処理を担当しています。

ページは非常に軽量になります：キャンバス要素が1つだけです。しかしダウンロードサイズは大きくなります。コンパイル済みモジュールは約254 KB（圧縮で約92 KB）、さらにビルドツールが生成する約28 KBの JavaScript の接着コードが加わります。そして開発時には以下のようなコストも感じています：

• ツールチェーン。 ビルドにはRust、WebAssemblyターゲット、およびライブラリのバージョンと正確に一致するコマンドラインツールが必要です。ビルドスクリプトは最初にテストを実行し、1つでも失敗すると停止します。
• 個々の都市へのキーボードまたはスクリーンリーダーアクセスなし。 キャンバスは画像です。SVGバージョンの44個のフォーカス可能なドットはなくなっています。
• 英語のみ。 ラベルはプログラム内に書き込まれています。
• ぼかし。 ソフトシャドウのエッジはキャンバスのぼかしフィルターを使用しており、すべてのブラウザが対応しているわけではありません。Safariではエッジが硬く見える可能性があり、テストはしていません。

3. Flutter

簡単に言うと： FlutterはGoogleのツールキットで、1つのコードセットから電話、コンピューター、ウェブで動作するアプリを構築します。ウェブページ自身の構成要素は使わず、すべて自分で描画します。ここでの地図はこのページ内に表示される小さなアプリであり、私たちの充電計算機を動かしているのと同じツールキットです。

カスタムペインターで地図を描画し、ここではフレーム内に表示されています。Flutterは同じコードから電話やデスクトップアプリも構築できるため、これが主な利点です：地図を一度書けば、複数の場所で実行できます。

これはRustのmapと同じロジックをDartに移植したもので、11のテストがあります。テストを含めて約1,100行です。Flutterは各都市をラベル付きボタンとしてスクリーンリーダーに渡しますが、キャンバス版にはそれがありません（実際のスクリーンリーダーでどの程度機能するかは確認していません）。また、これが最大のダウンロードサイズで、アプリは約1.8MB（圧縮で約535KB）です。Flutterの描画エンジンはさらにダウンロードが必要ですが、サイトはすでに計算機と描画エンジンを共有しているため、計算機を開いた訪問者は再度ダウンロードしません。テキストはサイトのフォントであるMerriweatherで設定されており、ブラウザが実行時に取得します。

発見したこと

速度についてもう一つ。私たちの確認では、SVGマップとRustマップはどちらも画面のリフレッシュレート（テストディスプレイで約120フレーム／秒）で動作しており、フレームレートでは区別できませんでした。Flutterのフレームレートは測定しておらず、バッテリーやCPU使用率も測定していないため、どちらがスマートフォンで軽いかは言えません。

驚いたこと

いくつかの詳細は間違いやすいです。 私たちの最初のクローンは、鍵と時計を地図の固定された割合で描画していたため、小さい画面では縮小され、オリジナルと比べて非常に小さく見えました。オリジナルはページ自身のフォント単位（rem、画面幅に応じて変わる）でサイズを決めています。クローンは現在、そのサイズをページから読み取ります。時計も異なります：オリジナルの針は15分刻みで動きますが、Rust版とFlutter版では連続的に回転します。

タイムゾーンは組み込まれていません。 RustをWebAssemblyにコンパイルしたものも、Dartも「Asia/Dubai」を知るタイムゾーンデータベースを持っていません。両者ともブラウザの組み込みIntlサービスを通じて問い合わせており、夏時間も正しく取得します。

3つとも入力を共有しています。 Rust版とFlutter版の地図は、ページ上の都市リストと陸地の輪郭を読み取ります。これはSVG地図が使うのと同じデータです。都市を変更すると、3つすべてが変わります。また、これにより地図はそれらを提供するページ上でしか動作できません。

Flutter webは記憶します。 Flutter webは独自のキャッシュをインストールするため、再構築後もしばらく古いバージョンが表示され続け、キャッシュをクリアするまで変わりませんでした。

私たちの結論

SVG地図はホームページに残ります。このサイズの描画では最も軽量で、アクセシブルで、翻訳されており、ビルドも不要です。Rustはより興味深い次点です：もし地図のロジックが証明可能に正しい必要があったり、ブラウザで重い計算を行う必要があれば、テスト済みのRustコアは良い選択肢です。Flutterは地図がFlutterアプリ内に存在する必要がある場合に理にかなっています。

実験は製品を変える必要はありません。私たちは各アプローチのコストがより明確になり、地図の挙動についてテストされた説明を得て、3つすべてを自分で見られるページを手に入れました。

私たちの創業者が次に作っているもの

安定したプラットフォームがあれば、他のアイデアに時間を割くことができます。EVnStevenに加えて、私たちの創業者は以下のプロジェクトに取り組んでいます：

ライドヘイリング、まもなく開始 Kimem ↗ (opens in a new tab) エチオピアのバヒルダール向けのライドヘイリングサービスで、創業者のメコネン・アレムによるものです。乗客は予約前に料金の見積もりを確認し、地図上で最寄りのドライバーが近づく様子を見られ、乗車後にメーター料金を現金で支払います。

非営利、オープンソース StrayCats ↗ (opens in a new tab) デイビッドによる、野良猫や路上の猫、あるいはその猫が犬であっても世話をする人々を支援するプロジェクトです。まだアイデア段階でアプリはありません。デイビッドは皆さんのアイデアやフィードバックを歓迎しています。サイボに捧ぐ、2010–2026。

現金管理、無料、まもなく開始 Effectivo ↗ (opens in a new tab) 現金を使う人向けのひと味違う不完全な会計アプリ。数タップで購入を記録し、財布の中身を数え、価値があったものを振り返ります。ひねりは、現金を使い続ける人全員が他の人のために現金を維持する助けになることです。無料で広告なし、AndroidとiPhoneで提供予定で、現在ベータ版とウェブデモが稼働中です。