アップロード不要のオンラインツールのしくみと確かめ方

ファイルをサーバーに送らないオンラインツールは、処理プログラムをブラウザに読み込み、お使いの端末の中でファイルを読んで結果を作ります。ページは画面の表示に必要なファイルや処理エンジンを受け取りますが、ファイルの中身やファイル名は送信しません。この記事では、そのしくみと、ブラウザの開発者ツールで自分で確かめる方法を説明します。

ブラウザ内で処理するしくみ

サーバーで処理するツールは、ファイルをサーバーに送り、サーバーが作った結果をダウンロードします。ブラウザ内で処理するツールはその逆で、処理プログラムのほうがブラウザに届きます。ファイルは端末に置かれたままで、ページのコードがその場でファイルを読んで結果を作ります。

ウェブページが読めるのは、ユーザーがファイル選択の画面やドラッグ＆ドロップで渡したファイルだけです。ファイルを選んだだけで、そのファイルがどこかに送信されるわけではありません。送信するにはページのコードが別にネットワークリクエストを送る必要があり、そうしたリクエストは開発者ツールに記録されます。

ブラウザ内の処理を支える技術は、主に次の3つです。

技術	役割（MDNの説明の要約）	ZEKILO Studioでの用途
WebAssembly	C・C++・Rustなどで書かれたプログラムを、ブラウザでネイティブに近い速度で実行する	画像圧縮のエンジン（MozJPEG・OxiPNGなど）、MP3エンコーダー（LAME）、動画の代替エンジン（FFmpeg）
Web Worker	画面を担当するメインスレッドとは別のバックグラウンドのスレッドでスクリプトを実行し、重い処理の間も画面が止まらないようにする	画像・PDF・動画の処理
WebCodecs	ブラウザに内蔵されたコーデックで、動画や音声をフレーム単位でエンコード・デコードする（ハードウェアアクセラレーションを活用）	動画圧縮、MP4変換、動画GIF変換、動画MP3変換

メインスレッドとWorkerは、メッセージでデータをやり取りします。これは同じブラウザの中で行われる受け渡しで、ネットワークリクエストではありません。PDF結合は、pdf-libというJavaScriptライブラリをWorkerの中で動かしています。

ページが受け取るもの・送らないもの

区分	内容
受け取るもの：ページのファイル	HTML・CSS・JavaScript・画像など、画面を表示するための静的ファイル
受け取るもの：処理エンジン	ツールごとに必要なエンジンを、初めて使うときに受け取ります。ブラウザが扱えない動画コーデックの場合は、代替エンジン（FFmpeg、約31 MB）を初回だけダウンロードし、ブラウザのキャッシュに保存します
受け取り・送信するもの：広告・アクセス解析	広告を掲載するページの広告スクリプトと、Googleのアクセス解析スクリプト。アクセス解析には、ページのアドレスとあわせて、使ったツール・ファイル形式・おおまかなサイズの区分といった利用情報が記録されることがあります
送らないもの	ファイルの中身、ファイル名、正確なファイルサイズ、結果ファイル

処理エンジンは、サイトと同じアドレスから受け取ります。エンジンの受け取りは処理プログラムのダウンロードであり、お手持ちのファイルを送信するものではありません。

ネットワークタブの見方

Chromeを例に説明します。ほかのブラウザの開発者ツールにも、同様の機能があります。

• 開き方：WindowsはF12またはCtrl+Shift+I、MacはCmd+Option+Iで開発者ツールを開き、Network（ネットワーク）タブを選びます。開発者ツールは開いている間のリクエストしか記録しないため、ファイルを選ぶ前に開いておきます。
• Method列：リクエスト一覧の見出しを右クリックすると、Method列を表示できます。ファイルを受け取るリクエストは多くがGETで、データを載せて送るリクエストはPOSTなどと表示されます。
• フィルタ：フィルタ欄に method:POST と入力すると、POSTのリクエストだけを表示できます。種類のボタンでWasmを選ぶと、WebAssemblyのエンジンファイルだけが表示されます。
• Payloadタブ：リクエストをクリックしてPayloadタブを開くと、そのリクエストが送った値を確認できます。
• Size列：サーバーから受け取ったレスポンスの大きさです。この値が大きくても、何かを送ったという意味ではありません。

ZEKILO Studioでの手順

1. 画像圧縮のページを開いて開発者ツールのNetworkタブを表示し、Clear（消去）ボタンで一覧を空にします。
2. ［ファイルを選択］で写真を選びます。画像圧縮は追加するとすぐに圧縮が始まり、結果が出たら［ダウンロード］で保存します。
3. 新しく増えたリクエストを確認します。エンジンファイルを受け取るリクエストが表示されるほか、アクセス解析のリクエストがPOSTとして表示されることもあります。それらをクリックしてPayloadを開くと、ファイルの中身やファイル名が含まれていないことを確認できます。

PDF結合と動画圧縮も同じ方法で確認できます。どちらのツールも、ファイルを追加して［開始］を押すと処理が始まります。動画圧縮で代替エンジンが必要なファイルを追加して［開始］を押すと、処理中の画面に「処理エンジンを準備中・初回のみ約31 MB」と表示され、初回だけネットワークタブにエンジンファイルを受け取るリクエストが現れます。

ブラウザ内処理の限界

• 端末の性能とメモリ：処理にはお使いの端末のCPUとメモリを使うため、処理時間は端末によって異なります。ツールごとにおすすめのサイズがあり、超えると警告が表示されます。メモリが足りないと「端末のメモリが不足したため停止しました」と表示されることがあります。
• ブラウザの対応：MDNは、WebCodecsで使えるコーデックが端末やブラウザによって一部に限られる場合があると説明しています。必要な機能がないブラウザでは「このブラウザではこのツールを使えません」と表示されます。
• 初回のダウンロード：代替エンジンはサイズが大きいため、モバイルデータ通信の場合はWi-Fiへの接続をおすすめします。
• ページを閉じる：処理はこのページの中で行われるため、処理中にページを閉じると作業も止まります。

まとめ

• ファイルを送らないオンラインツールは、WebAssembly・Web Worker・WebCodecsを使い、ブラウザ内でファイルを処理します。
• ページが受け取るのは、画面のファイル、処理エンジン、広告・アクセス解析のスクリプトです。ファイルの中身・ファイル名・正確なサイズは送信しません。
• 開発者ツールのNetworkタブで、Method列とPayloadタブを使えば、何がやり取りされているかを自分で確かめられます。
• 処理の速さや扱えるファイルの大きさは、端末の性能とブラウザによって変わります。