ブラウザだけで処理するとはどういうことか

ファイルをサーバーに送らずブラウザ内だけで処理する仕組みを、サーバー型との違いから解説します。本当に送信していないかを開発者ツールで自分で確認する手順と、この方式の限界も説明します。

「アップロードして処理」と「端末内で処理」の違い

画像を圧縮する、PDFを結合する。同じ結果に見える作業でも、 どこで計算しているかによって仕組みはまったく違います。

サーバー型:ファイルを送って、返してもらう

多くのウェブサービスはこの方式です。 あなたのファイルはインターネットを通じて事業者のサーバーへ送られ、 そこで処理された結果が送り返されます。

重い処理でも端末の性能に左右されない利点がある一方、 ファイルが一度あなたの手を離れます。 多くのサービスは「一定時間後に削除する」と説明していますが、 利用者にはそれを確かめる手段がありません。信じるしかない、という状態です。

クライアントサイド型:ファイルはブラウザから出ない

もうひとつの方式が、あなたのブラウザの中だけで計算を完結させるやり方です。 このサイトのツールはすべてこちらです。

最初にページを開いたとき、HTML と一緒に処理を行う JavaScript が読み込まれます。 以降の計算はその JavaScript が端末の中で実行するため、 ファイルの中身がネットワークに出ることは一度もありません。

ブラウザが持っている道具

かつてブラウザは文書を表示するだけの存在でしたが、 現在は画像やファイルを扱う機能が標準で備わっています。

機能できること使っているツール
File API選んだファイルの中身を読み取る すべてのファイル系ツール
Canvas画像を描画・変形し、別形式で書き出す 画像の圧縮・リサイズ・形式変換
Web Crypto API暗号用の安全な乱数を生成する パスワード生成
Intl各国の暦や書式の変換を行う 西暦・和暦変換

PDF の結合のように標準機能では足りない処理は、 JavaScript で書かれたライブラリを読み込んで実行します。 この場合もライブラリが動くのは端末の中で、ファイルが外に出ることはありません。

本当に送信していないか、自分で確かめる方法

「送信していません」という説明を、あなたの側で検証できます。 ブラウザには通信を記録する機能が標準で付いています。

  1. ツールのページを開く
  2. 右クリックして「検証」を選ぶ(または F12 キー)
  3. 開いたパネルの上部から Network(ネットワーク)タブを選ぶ
  4. いったんページを再読み込みして、記録をきれいにする
  5. その状態で画像を読み込み、ツールを操作する

ページの表示に必要なファイルが読み込まれたあと、 ツールを操作しても新しい通信が発生しなければ、 データが送られていない証拠になります。

さらに確実な方法もあります。ページを開いたあとで Wi-Fi を切って機内モードにしてからツールを使ってみてください。 通信が必要な設計なら、この状態では動きません。動くなら、端末内で完結しています。

この検証は他のサイトにも使えます

特別な知識は要りません。手順は同じです。 普段使っているサービスがどちらの方式か、一度確かめてみると ファイルの扱い方を考えるきっかけになります。

この方式の限界

良いことばかりではありません。正直に書いておきます。

  • 端末の性能に依存します。 古いスマートフォンで大きなファイルを扱うと、処理が遅くなったり メモリ不足で失敗したりします。
  • ブラウザが対応していない形式は扱えません。 HEIC が Windows の Chrome で読み込めないのは、 ブラウザ自体がその形式を知らないためです。
  • 処理内容を共有できません。 結果は端末内にしか存在しないため、作業の続きを別の端末で再開する、 といった使い方はできません。
  • 重い処理には向きません。 動画の変換やAIによる画像生成のような計算量の大きい処理は、 現実的にサーバー側で行う必要があります。

使い分けの考え方

どちらが優れているという話ではなく、扱うファイルの性質で選ぶのが現実的です。

契約書、身分証明書、社外に出せない資料、家族の写真。 こうしたファイルは、そもそも外に出さない方式を選ぶほうが確実です。 削除の約束を信じる必要がなく、送っていないのだから漏れようがないからです。

一方、公開予定の素材や、失っても困らないファイルであれば、 処理性能を優先してサーバー型を選ぶ判断も合理的です。

まとめ

  • ブラウザ内処理では、ファイルがネットワークに出ない
  • 開発者ツールの Network タブ、または機内モードで自分で検証できる
  • 端末性能への依存、対応形式の制限といった弱点もある
  • 外に出せないファイルほど、この方式の価値が高い

この記事に関連するツール

ほかの読み物