表示

言語

English Español Français Deutsch Italiano Português 日本語 Русский 한국어 中文 (简体) 中文 (繁體) العربية Български Català Nederlands Ελληνικά हिन्दी Bahasa Indonesia Bahasa Melayu Polski Svenska ภาษาไทย Türkçe Українська Tiếng Việt

RoundCutの仕組み

ツールが完全にブラウザ上で動作する技術的な詳細 — ご自身で確認する方法もご紹介します。

要点

RoundCutは、ブラウザネイティブの2つのAPIを使ってすべてのツールを動作させます。 ピクセルレベルの処理にはHTML5 Canvas APIを、 より重い処理（画像フォーマットのエンコード/デコードやAI推論）には WebAssemblyを使用しています。何もアップロードされません。サーバーでは何も処理されません。 なぜなら、あなたのファイルに触れるサーバーを私たちは運用していないからです。

約30秒で確認できます。ブラウザのDevToolsを開き、Networkタブに切り替え、 ログをクリアしてから、任意のツールを使ってください。表示されるネットワークリクエストは、 静的なサイトアセット（HTML、CSS、JavaScript、フォント、WebAssemblyモジュール）だけです。 あなたの画像がページを離れることは一切ありません。

なぜクライアントサイドなのか

ほとんどのオンライン画像ツールは逆の仕組みで動いています。アップロード→サーバーが処理→ ダウンロードという流れです。このモデルにはよく知られた欠点があります。ファイルが他人のサーバーに置かれ、 二度の往復を待ち、運営者はCPU秒単位でコストを払います。だからこそ、それらのサービスはアカウント登録、 透かし、有料プランを設けるのです。

ブラウザは何年も前からこれらの処理のほとんどをネイティブに実行できるようになっています。 <canvas>要素はトリミング、回転、リサイズ、再エンコードを担い、 WebAssemblyによってSquooshでも使われている同じMozJPEG、libwebp、libavif、OxipngのC/Rustライブラリを ネイティブに近い速度で動作させることができます。2026年のリビルドを出荷した時点で、 ブラウザはデスクトップ画像編集ツールと肩を並べていました。サーバーを介する理由はなくなっていたのです。

その結果、3つの特性が相乗効果をもたらすスタックが完成しました。プライバシー （ファイルがデバイスから外に出ない）、速度（アップロード不要、キュー不要、 サーバー往復不要）、コスト（ツールを何人が使っても、CDNから静的アセットを 月数セントで配信できる）。

パイプラインの詳細

1. ファイルを選択する

ファイルピッカー、ドラッグアンドドロップ、または貼り付けで画像を選ぶと、 ブラウザはJavaScriptにFileオブジェクトを渡します。JavaScriptは FileReaderまたはBlob.arrayBuffer() APIを使ってバイトを読み取ります。 この手順では、ファイルがネットワーク越しに送信されることは一切ありません。

2. ブラウザが画像をデコードする

最新のブラウザはJPG、PNG、WebP、GIF、AVIF、そして（SafariとChromiumの最新版では）HEICを ネイティブにデコードできます。createImageBitmap()を使ってメインスレッド外で 生のバイトをGPUが処理できるビットマップに変換します。ネイティブデコードに対応していないブラウザでHEICを扱う場合は、 ブラウザ内でローカルに動作するWebAssemblyデコーダーにフォールバックします。

3. ツールが処理を行う

次に何が起きるかはツールによって異なります。RoundCutには現在3つのツールがあります。

  • Circle Crop — 円形クリップパスを使ったCanvas 2Dピクセル変換です。選んだ回転・ズームでビットマップを<canvas>に描画し、円形クリップを適用して、円の内側をImageDataとして読み返します。インタラクティブなトリミング枠の操作にはCropper.jsを使用しています。
  • Compress — jSquashのWebAssemblyモジュール（MozJPEG、libwebp、libavif、Oxipng）を使ってJPG、PNG、WebP、AVIFを再エンコードします。これらはSquooshでも使われている同じアップストリームコーデックです。高解像度写真のエンコード中もUIが応答できるようWeb Workerで実行され、確定前に並列プレビューでトレードオフを確認できます。
  • Remove Background — ONNXフォーマットの小さなAIモデル（数MB、初回のみダウンロードしてキャッシュ）をONNX Runtime Web経由でブラウザ内にて実行します。実行バックエンドはWebAssemblyです。初回実行時にモデルをダウンロードし、以降はローカルで即座に処理されます。

4. 結果をダウンロードする

出力ビットマップをBlobにエンコードし、object URLでラップして ブラウザ標準のファイル保存ダイアログに渡します。対応ブラウザでは File System Access API （showSaveFilePicker）を使い、保存先フォルダを直接指定できます。 ファイルはディスクに保存され、サーバーを経由することはありません。

自分で確認する方法

「アップロードなし」という主張は2分以内に確認できます。好きな方法を選んでください。

方法1 — Networkタブを確認する

  1. 新しいタブでRoundCutを開く。
  2. DevToolsを開いて（F12または右クリック→検証）Networkタブに切り替える。
  3. Networkタブの「クリア」ボタンをクリックしてログをリセットする。
  4. 任意のツールを使う。画像を読み込み、編集し、結果をダウンロードする。
  5. Networkのログを確認する。HTML、CSS、JS、フォント、（初回利用時は）該当のWebAssemblyモジュールへのリクエストが表示されます。画像のバイトデータを含むリクエストは一切表示されません。

「Initiator」列は各リクエストを開始したスクリプトを、「Type」列は送信された内容を示します。 「Fetch/XHR」でフィルタするとデータリクエストだけに絞れます。 すべて小さく、すべて静的なオリジン宛で、あなたのファイルを含むものは一つもないことが確認できます。

方法2 — オフラインでツールを使う

  1. RoundCutの任意のツールページを読み込む。一度使用して関連するWebAssemblyモジュールをキャッシュしておく。
  2. DevToolsを開き、Networkタブでオフラインチェックボックスをオンにする（またはWi-Fiをオフにする）。
  3. ページを再読み込みする。ブラウザが静的アセットをキャッシュしているので、それでも読み込まれる。
  4. ツールを最初から最後まで再び使う。問題なく動作する。

オフラインでツールが動作したなら、処理中にサーバーと通信していなかったことは定義上明らかです。 これが最も強力な証明です。他のマシンに到達できない中で、すべての処理があなたのマシンで完結したのです。

私たちが見えていること

何が収集されるかを明確にします。ページを読み込むと、アナリティクスプロバイダー （Cloudflare Web Analytics）が あるブラウザがあのURLをある国から読み込んだことを記録します。 クッキーなし、永続識別子なし、個人と紐付くデータは一切ありません。

初回利用時にWebAssemblyモジュールをダウンロードするツール（jSquashコーデック、ONNX背景削除モデル）については、 ホスティングプロバイダーがそのモジュールが取得されたことを把握します。CSSファイルの取得を把握するのと同じです。 モジュール自体にあなたの画像に関する情報は一切含まれていません。

完全なデータの目録はプライバシーポリシーに記載しています。

技術スタック

詳細に興味がある方のために、RoundCutを構成するものを紹介します。

  • Astro — 静的サイトジェネレーター。すべてのページはプレーンHTMLとして配信され、インタラクティブなツールがある場所にのみプログレッシブエンハンスメントのJavaScript「islands」が使われます。
  • バニラCSSとカスタムプロパティ — TailwindもCSS-in-JSも不使用。デザインシステム全体が1つのtokens.cssファイルに収まっています。
  • jSquash — 画像エンコード用のMozJPEG、libwebp、libavif、OxipngへのWebAssemblyバインディング。
  • Cropper.js — トリミングツール用のトリミング矩形インタラクションレイヤー。
  • ONNX Runtime Web — WebAssembly経由でブラウザ内の背景削除モデルを実行します。
  • Cloudflare Pages — 静的ビルドをホスティングし、エッジから配信。DNSとDDoS保護も提供。
  • Cloudflare Web Analytics — クッキーなしの集計ページビュー計測。

ブラウザのサポート

すべてのツールは、Chrome、Firefox、Safari、Edgeの現行バージョンと1つ前のバージョンで デスクトップ・モバイル問わず動作します。サイトはプログレッシブエンハンスメントを採用しており、 新しいAPI（showSaveFilePicker、OffscreenCanvasなど）に対応したブラウザではそれを使い、 未対応の場合は従来の代替手段にフォールバックします。「お使いのブラウザは対応していません」という壁はありません。

唯一の必須要件はJavaScriptです。JavaScriptを無効にするとツールは動作しません。 そもそも画像処理を行うサーバーが存在しないため、サーバー側のフォールバックも存在しません。

ご質問

カバーしていない内容がありましたら、 support@araluma.comまでメールでお問い合わせください。 技術的なご質問も歓迎します。