従来のオンライン変換サービスの流れ
一般的なオンライン変換サービスは、次のような流れで動いています。
- 利用者がファイルを選ぶ
- ファイルがサービスのサーバーへ送信される(アップロード)
- サーバー上で変換処理が行われる
- 変換後のファイルをダウンロードする
- 一定時間後、サーバー上のファイルが削除される(とされている)
この方式には明確な利点があります。サーバーは高性能なので処理が速く、端末の性能を問いません。古いパソコンでも、スマホでも、同じ速度で処理できます。
一方で、ファイルが自分の手元を離れるという性質があります。運営者がどう扱うか、保存期間はどうか、通信経路は安全か——これらを利用者が確かめる手段は基本的にありません。多くのサービスは適切に運用されていますが、家族の動画や仕事の記録を扱うときに気になるのは自然なことです。
ブラウザ内で完結させるという方法
これに対して、当サイトが採っているのが処理をブラウザの中だけで行う方式です。流れはこうなります。
- ページを開くと、変換のプログラムが端末にダウンロードされる
- 利用者がファイルを選ぶ(この時点でもファイルは送信されない)
- 端末の中で、ブラウザが変換処理を行う
- できあがったファイルを端末内に保存する
通信が発生するのは1番の「プログラムを取りに行く」ところだけです。利用者のファイルは、最初から最後まで端末の外に出ません。サーバーに保存期間もなければ、削除を待つ必要もありません。そもそも預けていないからです。
これを可能にしている2つの技術
WebAssembly —— ブラウザで本格的なプログラムを動かす
これまで、ブラウザの中で動くプログラムといえばJavaScriptでした。JavaScriptは便利な言語ですが、動画の圧縮のように膨大な計算を必要とする処理には向いていません。
そこで登場したのがWebAssembly(ウェブアセンブリ)です。これは、パソコン用に書かれた高速なプログラムを、ブラウザで動く形式に変換して実行する仕組みです。C言語などで書かれた既存のソフトウェアを、ほぼそのままの性能でブラウザに持ち込めます。
当サイトの動画ツールは、この仕組みでFFmpegを動かしています。FFmpegは動画編集の世界で20年以上使われてきたオープンソースのソフトウェアで、動画配信サービスや編集ソフトの内部でも広く採用されています。つまり、プロの現場で使われているのと同じ変換処理が、あなたの端末のブラウザの中で動いていることになります。
Canvas —— ブラウザに元々ある描画機能
画像の処理には、もっとシンプルな仕組みを使っています。ブラウザにはCanvasという、絵を描くための機能が標準で備わっています。図形を描く、写真を表示する、色を塗る——こうした操作がすべて端末内で行えます。
画像ツールがやっているのは、この機能の応用です。
- 圧縮 —— 画像を小さいサイズで描き直し、品質を少しずつ変えながら、目標容量に収まる中で最も高画質になる設定を探します
- ぼかし・モザイク —— 指定された範囲だけを、ぼかした状態や粗くした状態で描き直します
- 文字入れ —— 画像の上に文字を描いてから、一枚の画像として書き出します
Canvasは追加のプログラムを必要としないため、動画ツールより軽快に動きます。ただしiPhoneのHEIC形式だけはブラウザが直接開けないため、そのときだけlibheifというオープンソースソフトウェアを端末に読み込んで変換しています。
アップロード型との比較
| 項目 | アップロード型 | ブラウザ内処理型 |
|---|---|---|
| ファイルの送信 | あり | なし |
| 処理速度 | 速い(高性能サーバー) | 端末の性能に依存する |
| アップロードの待ち時間 | ファイルが大きいほど長い | なし |
| 通信量 | ファイルサイズぶん消費 | 初回のプログラム読み込みのみ |
| 扱えるファイルの大きさ | 大きなファイルも可 | 端末のメモリに制限される |
| 古い端末での動作 | 問題なし | 処理に時間がかかる |
| 会員登録・回数制限 | あることが多い | 不要(サーバー費用が発生しないため) |
公平に言えば、どちらが優れているという話ではありません。何ギガバイトもある長時間の動画を、性能の低い端末で速く変換したいなら、アップロード型のほうが実用的です。一方、手元から出したくないファイルを扱うなら、ブラウザ内処理型が向いています。用途に応じて使い分けるのが現実的です。
本当に送信されていないか、自分で確かめる方法
「送信していません」という説明を鵜呑みにする必要はありません。パソコンのブラウザなら、誰でも確認できます。
- ツールのページを開く
- キーボードのF12キーを押して開発者ツールを開く
- 「ネットワーク」タブを選ぶ
- その状態でファイルを選び、処理を実行する
ここには、そのページが行った通信がすべて一覧表示されます。変換エンジンの読み込み以外に、ファイルサイズに見合う大きなデータの送信が起きていないことを、その場で確認できます。仕組みを説明するだけでなく、利用者自身が検証できることが、この方式のいちばんの利点かもしれません。
ブラウザ内処理の弱点
誠実にお伝えすると、この方式には次のような制約があります。
- 初回の読み込みが重い —— 動画ツールでは変換エンジンとして約31MBを読み込みます。初回だけ待ち時間が発生します
- 処理に時間がかかる —— 目安として、動画の再生時間と同じ〜2倍程度かかります
- 大きすぎるファイルは扱えない —— ブラウザが使えるメモリには上限があり、長時間の4K動画などは処理中に止まることがあります
- 処理中はページを閉じられない —— 端末の中で動いているためです
うまくいかないときは、動画を短く分けてから処理する、目標サイズを大きめにする、パソコンで試す、といった方法で解決することがほとんどです。
使っているオープンソースソフトウェア
当サイトは以下のソフトウェアを、改変せずそのままの形で利用しています。ライセンスや詳細は運営者情報に記載しています。
- FFmpeg —— 動画の圧縮・変換(WebAssembly版)
- libheif —— HEIC形式の読み込み
よくある質問
- Q. 本当にファイルは送信されていないのですか?
- A. されていません。確かめる方法もあります。ブラウザの開発者ツール(F12キー)を開き「ネットワーク」タブを表示した状態で処理を実行すると、通信の一覧が見られます。変換エンジンの読み込み以外に、大きなデータの送信が発生しないことを確認できます。
- Q. オフラインでも使えますか?
- A. 一度ページと変換エンジンを読み込んだ後であれば、通信が切れても処理自体は動きます。ただしページを開き直すと再読み込みが必要になります。
- Q. なぜサーバー型より処理が遅いのですか?
- A. 処理を行うのがお使いの端末だからです。サーバー型は高性能なマシンで処理するため速く、その代わりファイルを預ける必要があります。速度と、ファイルを手元から出さないこと。どちらを取るかの選択になります。
- Q. スマホでも同じように動きますか?
- A. 動きます。ただし端末の性能とメモリに依存するため、長い動画や高解像度の動画では途中で処理が止まることがあります。スマホでは数分以内の動画をおすすめしています。