ブラウザ上の LibreCAD

2026/07/02 10:00

ブラウザ上の LibreCAD

RSS: https://news.ycombinator.com/rss

要約

Japanese Translation:

LibreCAD は、C++ および Qt を用いて構築された無料の GPL ライセンス付 2D CAD アプリケーションであり、現在は WebAssembly を通じて Web ブラウザのタブ内で完全に動作し、デスクトップへのインストールは不要です。この移植版では、Emscripten と Qt の WebAssembly プラットフォームサポートを利用して、同一の C++ ソースコードを WebAssembly にコンパイルしており、ロジックを書き換えることも、サーバーサイドレンダリングに依存することもしない最初の読み込みには約 18 MB(圧縮形式:Brotli)が必要です。現在、完全な互換性を確保するには、Google Chrome または Edge バージョン 137 以降のような Chromium ベースのブラウザが必要であり、Firefox および Safari は JSPI が不足しているためサポートされていません。技術的な迂回措置により、Qt の blocking

exec()
呼び出しによってブロックされていたネストしたモーダルダイアログといった複雑な問題に対処され、Asyncify およびネイティブ JSPI を用いて任意のネスタリングを実現しました。ビルドには Qt 6.9.3(wasm-port ブランチ)、Emscripten 4.0.7、C++17、Ubuntu 24.04 ベース環境が使用され、wasm32 メモリモデルは 4 GB で capped されています。WebAssembly の例外機能は有効化され、カスタムパッチにより DOM イベント/タイマーコールバックを「promise 化」しています。パフォーマンス向上のため、バックストアを RGBA8888 から premultiplied ARGB32 に変更し、SIMD パスを採用した結果、フレームレートを約 4–5 fps から約 15 fps に向上させ、約 3 倍の速度向上を実現しました。ファイル処理には JavaScript シムを使用しており、
getOpenFileContent
および
saveFileContent
は MEMFS と IndexedDB を経由します。CAD フォントおよびハッチパターンは 30 MB のデータパッケージとしてバンドルされています。エクスポート機能には QPdfWriter を用いた PDF エクスポート、ダウンロード可能な DXF ファイル、SVG サポートが含まれます。物理的な印刷には、生成された PDF をブラウザが印刷する必要があります。ソースコードは github.com/magik6k/LibreCAD-Web の wasm-port ブランチでホストされており、upstream へのガード付き変更は github.com/LibreCAD/LibreCAD にあり、条件
#if defined(Q_OS_WASM)
で制御されています。

本文

LibreCAD を WebAssembly (Wasm) へ移植:ブラウザだけで動く本物の 2D CAD アプリ

はじめに:なぜこのプロジェクトが必要か

  • 簡易的な 2D 図面の描画ニーズ:床間取り图等を描きたい場合、CAD ユーザーではないため専用のソフトウェアをインストールしたくありませんでした。
  • 現在の Web 環境への適応:2026 年現在、ログインなしでタブを開いてすぐ使えるべきものなのに、ローカルアプリ(ダウンロード・インストール・起動)の必要があることに違和感を感じていました。
  • アプローチの転換:既知の無料デスクトップアプリを使わず、「オープンソースで既存の成熟したツール」を見つけ、LLM に WebAssembly (Wasm) への移植を指示することを決定しました。
    • Qt チームによる WebAssembly 支援と、成熟した Wasm エコシステムのお陰で、プロセスは驚くほど簡単かつ成功裏に進みました。

プロジェクト概要:何を実装したか?

  • 成果物:LibreCAD という無料の GPL ライセンス 2D CAD アプリを、JavaScript の再実装やサーバーサイドレンダリングではなく、正確に同じ C++ ソースコードを用いて WebAssembly にコンパイルしました。
  • プラットフォーム:Emscripten および Qt の公式 WebAssembly プラットフォーム支援機能を利用しています。
  • 動作環境:本物のデスクトップアプリケーションがブラウザのタブ内で動作します。

注記:以下のコンテンツは LLM によって作成されましたが、技術的な内容は概ね正確です。類似プロジェクトにありがちな「FAFO(愚かしく失敗するスタイル)」ではなく、実用的な成果を上げた試みですが、詳細な検査ではバグが含まれる可能性があります。

動作方法と要件

  • 起動手順:以下のリンクからソースコードを読み込みます。
    • github.com/magik6k/LibreCAD-Web(※本文の「このサイトで」という表現は、GitHub リポジトリのデモページや Wasm ファイルをブラウザで実行することを指します)
  • 初期読み込み量:初回起動時に約 18 MB(Brotli 圧縮済み)をダウンロードします。
    • その後はブラウザがキャッシュするため、次回以降は速くなります。
  • 必須ブラウザ:**Chromium ベースのブラウザ(Chrome または Edge 137 以降)**が必要です。
    • Firefox や Safari はまだ動作しません(後述する技術的理由による)。

実装の詳細:難所と解決策

1. ツールチェーンとコンパイル戦略

  • 環境:Ubuntu 24.04、Emscripten、Qt を含む Docker イメージを使用。
  • ビルド方法
    • Qt の独自ツールチェーン (
      qt.toolchain.cmake
      ) を使用し、
      find_package(Qt6)
      を正常動作させるよう調整しました。
    • デスクトップ版の起動パス(CLI 引数解析、スプラッシュ画面等)は
      #ifndef Q_OS_WASM
      でガードされており、Wasm ビルドには影響ありません。

2. GUI の描画とイベント処理

  • 基本動作:Qt for WebAssembly は WebGL を介して描画し、プラットフォームプラグインでブラウザイベントを処理します。メインウィンドウやツールバーの表示に問題はなく問題です。
  • ネストされたダイアログの問題(難所)
    • デスクトップアプリ特有の
      QDialog::exec()
      はブロック呼び出しですが、Web 上ではメインスレッドをブロックできません。
    • Asyncify(従来の解決策)の限界:Qt の公式 Asyncify サポートはネスト深度が 1 レベルのみ対応するため、設定ダイアログ内からカラーピッカーを開くと 2 回目のサスペンド先がなく、アプリ全体がフリーズ(Wedging)しました。
    • JSPI(解決策)WebAssembly JavaScript Promise Integration (JSPI) を採用し、無制限にネストできるネイティブブラウザサスペンドメカニズムを実現しました。
      • Qt 6.9 で
        -device-option QT_EMSCRIPTEN_ASYNCIFY=2
        を使用し、Wasm 例外 (
        -fwasm-exceptions
        ) を有効化。
      • JSPI と Wasm 例外を組み合わせることで、モダルダイアログ、ドロップダウン、ネストされたカラーピッカーが任意の深度で動作します。

3. キャンバスの高速化

  • 課題:初期ビルドではフレームレートが 4〜5 フープ(画像/秒)と非常に遅くでした。
  • 原因:Qt の Wasm バッキングストアが HTML キャンバスで想定される「ストレートアルファの RGBA8888」ではなく、非最適化形式だったため、転送時に重複した変換処理が発生していました。
  • 解決策:バッキングストアを事前乗算済みの ARGB32(Qt の最適化形式) に変更。
    • これにより合成処理を SIMD パスに送り込み、1 つの変換で RGBA バイトを生成可能になりました。
    • 結果としてフレームレートは約 3 倍向上し、エンジン全体の性能改善となりキャンバスのハックでは済ませられませんでした。

4. ファイルシステムのない環境でのデータ管理

  • 制限:ブラウザには真のファイルシステムがないため、Qt の標準ヘルパー API は直接機能しません。
  • 実装したシム層
    • Open(読み込み):ファイル選択後、JS で読み取り、Emscripten のメモリ内ファイルシステム (MEMFS) に直接書き込みます。
    • Save(保存):MEMFS にシリアライズし、Blob に渡し、ブラウザのダウンロードリンクを生成します。
    • リソースバンドル:CAD フォント (47 ファイル) やハッチパターン (30 MB) は MEMFS にプリロードされ、設定は IndexedDB で永続化しています。

5. ビルドと実行環境の仕様

  • Qt バージョン:6.9.3(ソースから Wasm 用へ構築)。
  • 依存ライブラリ:Emscripten 4.0.7、ベースイメージ Ubuntu 24.04 (Docker)。
  • スレッドモデル:シングルスレッド、メモリモデルは wasm32 (4 GB ティンバー)。

実機確認レポート:テスト項目と結果

✅ 動作する機能

以下のすべての機能がブラウザ内で正常に動作しています。

  • ファイル操作:DXF の読み込み・編集・保存(ダウンロード)、DWG の読み取り。
  • 描画ツール:ライン、円弧、円、ポリライン、スプライン、ハッチ、寸法、テキストの作成。
  • 編集ツール:移動、回転、スケール、鏡像、トリム、ベベル、オフセット、破砕など全ツール。
  • プロジェクト管理:レイヤー操作、ブロック定義・挿入、ライブラリから図面の読み込み。
  • 表示機能:パン(ドラッグ)、ズーム(ホイール)、モーダルダイアログ・ドロップダウンのネスト動作。
  • 出力形式:SVG エクスポート、PDF エクスポート(QPdfWriter 経由でのダウンロード)。
  • 設定・ローカライズ:IndexedDB を利用した設定持続性、30 言語以上の翻訳対応 (.qm ファイル)。

⚠️ 動作しない機能や制限事項

以下の項目は Web プラットフォームの制約によりサポートされていません。

  • 物理プリンターへの直接印刷:対応なし(PDF をダウンロードして印刷してください)。
  • マルチウィンドウ (MDI):OS レベルの複数ウィンドウ化は不可、タブ内で 1 つの実行環境です。
  • ファイルシステムへの保存:ブラウザは「開いたファイル」に書き戻せないため、「保存」は常に**ダウンロードされたコピー(別ファイル)**になります。ディスク上での上書き編集は手動で行う必要があります。
  • 最近使用履歴 (MRU):リロードすると消えます(メモリアンダー上の永続ハンドルがリセットされるため)。
  • ブラウザサポート:Chromium ベースのみ(Chrome/Edge 137+)。Firefox/Safari は JSPI 依存のため未対応です。

テスト手順(お試しください)

以下のステップで簡易的な 2D スケッチや図面を確認できます。

  1. アプリ起動:リンクから読み込み待ち(初回は数秒〜数十秒かかります)。
  2. DXF の開く
    File → Open
    からコンピュータ上の DXF ファイルを選択します。(サンプルがない場合はリポジトリ内を探してください)
  3. 線の描画:ラインツールを選択し、キャンバス上で 2 カ所をクリックして図形を作成します。
  4. パン/ズーム:マウスホイールで拡大縮小、中指ドラッグ(またはクリック&ドラッグ)で移動させます。
  5. 保存
    File → Save As
    から DXF ファイルをダウンロードします。
  6. PDF エクスポート
    File → Print
    で PDF を生成し、ダウンロードします。

技術仕様とライセンス情報

ビルド環境

  • C++ スタンダード:C++17
  • ビルド方法:ソースコードからの純粋な WebAssembly コンパイル(再実装なし)。
  • 依存関係
    libdxfrw
    (DWG 読み込み用) はバンドル済み。

バイナリサイズ(Brotli 圧縮後)

  • メインバイナリ (Wasm): ~18 MB (未圧縮 39 MB)
  • データファイル(フォント+パターン): ~2.2 MB (未圧縮 30 MB)
  • ランタイムグルー (JS): ~52 KB (未圧縮 264 KB)
  • 合計転送量: 約 18 MB

ソースコードとライセンス

  • フォーク先github.com/magik6k/LibreCAD-Web (wasm-port ブランチ)。
  • アップストリームgithub.com/LibreCAD/LibreCAD
  • 変更内容の隔離:すべての Wasm 特化変更は
    #if defined(Q_OS_WASM)
    #ifndef LC_NO_PRINT
    などのガードで囲まれており、デスクトップ版への影響を完全に排除しています。
  • ライセンス:GPL-2.0。Wasm バイナリも同じライセンス下にあります。

まとめ

このプロジェクトでは、LLM の指示に従いながら、LibreCAD という成熟したオープンソースアプリの本物ごとを WebAssembly に移植することに成功しました。 難しかったネストされたダイアログ処理やキャンバス速度向上は、JSPI や最適化バッキングストアの導入によって解決され、ブラウザ上で本格的な 2D CAD 作業が可能になっています。

今後の Firefox/Safari への JSPI サポートが広がることで、さらに多くのプラットフォームで利用可能になることを期待しています。

同じ日のほかのニュース

一覧に戻る →

2026/07/03 6:03

バージニア州、地理的位置データ販売を禁止

## Japanese Translation: 提供されたテキストは、一貫した記事ではなく二進データ、符号化文字、および読み取れない内容のみから構成されているため、要約することができません。事実や日付、製品名を含む標準的な記事とは異なり、この源資料には有意義な分析に必要な理解可能性を欠いています。その解読不可能な性質から、特定の文脈、出来事、または背景情報は導き出すことができません。テキストを処理できないというこの状況のため、有益な洞察や関連する事実を引き出すことは不可能です。源入力を人間が読み取れる言語に変換されるまで、有効な要約を作成することは不可能です。その間もなお、中央テーマ、主要な論点、または具体的な物語を特定しようとするのは無駄であり、データには識別可能なストーリーが存在しないためです。最も重要な点は、この入力が混乱した非構造化形式のため、標準的な読解タスクに根本的に使用できないということです。

2026/07/03 3:41

エキスパンクス(2018)

## Japanese Translation: EXAPUNKS プロジェクトは、プレイヤーが現実的なハッキング活動に取り組み、「EXas」と呼ばれる自律エージェントを管理し、複雑なデジタルタスクを実行できるサンドボックス環境を提供します。従来のシミュレーションとは異なり、このエコシステムではユーザーが現実世界の物体を操作したり、実際のネットワークを侵害したりし、その侵害された状態の中でゲーム世界内で安全に行動することができます。体験の中核には、秘密のヒント、コメント、チュートリアル、EXas をプログラミングしてファイルを破棄させたり、自己複製したり、他のエージェントを停止させたり、痕跡を残さずに姿を消させたりするための詳細を提供する公式 *TRASH WORLD NEWS* ズィンがあります。プレイヤーは銀行、大学、工場、テレビ局、高速道路の標識、ゲームコンソール、政府システム、さらには自身の肉体など幅広い対象を対象とし、その後「ПАСЬЯНС」(パシアンズ)、地域ロックをハッキングした後の「HACK*MATCH」、あるいは TEC Redshift 用のホームブロー開発などの代替ミニゲームにアクセスできます。物理的なデラックス版のズィンセットは、2020 年 4 月に Lulu でのオンデマンド印刷を通じて復活し、7 ドルプラス送料で提供されましたが、両方の号への注文が必要でした。開発者向けには、2018 年 7 月 16 日に詳細とともにリリースされた「Axiom VirtualNetwork+」があり、ホスト、ファイル、レジスタ、ゴール、そしてその API を通じた完全なパズル仕様機能を利用して、ホストスクリプトを記述した JavaScript ベースの「バーチャルネットワーク」を作成することでカスタムパズルの作成が可能になります。2018 年と 2020 年のこれらのリリース以降、専用のコミュニティが栄え、標準的な商業制約を超えたサイバーセキュリティの探求やイノベーションを促進し続けます。

2026/06/28 8:36

現実には驚くほど多くの詳細が存在する (2017)

## Japanese Translation: 私たちが単純なものとして扱っている多くのタスク—地下室の階段を築くことや水を沸かすことなど—is、実行前に深い調査が必要となる重要な細部を隠しています。著者の父は 18 歳でコロンビアから北米へ移住し、実地作業を通じて建築を教えてくれました(フェンスの取り替え、塹壕の掘削、床および小屋の築造など)。著者はフェンスの手すりを取り替える際、床を敷設し、地下室の階段を築く際にこの教訓を実際の経験として学びました。 二つの 2×12 に角度ブラケットを用いて作られた階段は一見単純に見えますが、複数の副次的タスクを含んでいます:切り取り角度を計算またはトラACING し、U ブラケットを取り付けること、および板材を固定することです。木材は乾燥するにつれて歪むため、2x12 を正しい角度に切り取ることは容易ではありません。視覚的な対齐も失敗するため、三角関数を使用するか、円鋸用ガイドを雇用するか、または計算だけよりも木目追跡の方法を好む必要があります。ブラケットを引かれた線上に合わせてからネジを取り付けた場合でも、最初にもうけホールを掘らないとネジが斜めに取り付けられてしまいます;ブラケットを数インチ移動して再 drilling することでより良い結果が得られます。2 インチより長いネジを使用すると、階段の踏み面から突き抜け足に刺さるリスクがあるため、短いネジが不可欠です。 同様に、沸騰は単に「100°C の水」ではありません。真の沸騰の前に小さな気泡が発生します。ガラス鍋はより高い温度を耐え、硫酸で清掃されたガラス容器では水を過加熱することができ、攪拌によって爆発的に飛び散ります。二つの液体の間にわずか一滴の水を挟むだけでも、沸騰せずに約 300°C に加熱でき、一般的な主張と矛盾します。これらのリスクは、充填ベッドとロケット軌道計画を必要とする工業プロセスにも広がっており、見えない力は正確なスロットル制御と使い回し可能なロケットのための慎重な重量管理を要求します。 歴史もこれらの教訓に反響しています:アルコール熱計は 18 世紀にジャン=アンドレ・デュリュがその非線形性を明らかにするまで標準的なものでした。重要な細部が見えないままにされる時、知的な行き詰まりが生じます—例えば、「すべてのデータは「偽造されている」と主張し気候変動を否定する代わりに、見落とした過ちを注意すること—。一度見えなかった細部が出会うと透明化し、進捗はそれを見無視する場合のみ停滞します(例:三角関数 versus トラACING を巡る家族の議論)。究極的に言えば、住宅修理、大規模なエンジニアリング、科学的探究における成功は、予期しない変数を積極的に探し求め、詳細な観察を受け入れ、表面的な仮説への依存を拒むことにかかっています。

ブラウザ上の LibreCAD | そっか~ニュース