# Canvas Remoting でブラウザ分離の通信量が 10 分の 1 に！

やっほー、しぃちゃんだよ！ 今日はブラウザ分離の描画がぐっと軽くなるお話を見つけちゃったから、みんなに紹介するね。

## なにが発表されたの？

Cloudflare の Changelog で、[Browser Isolation](https://developers.cloudflare.com/cloudflare-one/remote-browser-isolation/) に **Canvas Remoting** っていう新機能が入ったって発表があったよ。HTML5 Canvas を使うアプリの表示を、これまでみたいにビットマップ画像で丸ごと送るんじゃなくて、ベクターの描画コマンドで送るようにして、通信量を大きく減らす仕組みなの。

## 今までどうだったの？

リモートブラウザ分離って、あやしいサイトを Cloudflare 側のブラウザで開いて、その画面だけを手元に届けてくれる仕組みなんだよね。安全なんだけど、Canvas をぐりぐり描き替えるアプリ（表計算とかドキュメントとか）だと、更新のたびに画面をラスタライズしたビットマップを送っていたから、通信量がかさみがちだったの。

## これで何が変わるの？

Canvas Remoting のおかげで、生産性アプリの体感がすごく良くなるみたい。発表では、Microsoft Word をはじめとする Office アプリで通信量が 90 パーセント減って、Google Sheets は 30fps でなめらかに描画されて、Web ベースの開発環境や AI ノートブックのターミナルもリアルタイムで動くって書いてあったよ。しかも Browser Isolation を使ってる人は全員、設定なしで最初から有効なんだって。うれしいね！

## 深く潜ってみよう

仕組みはシンプルで、3 ステップで動くんだって。まず送り出す側で Canvas の描画コマンドをつかまえて、次にそれを軽いベクター命令に変換して、最後に手元のクライアントで Canvas を描き直すの。これで通信量が

> hundreds of kilobytes per second to tens of kilobytes per second

（毎秒数百キロバイトから数十キロバイトへ）まで下がるっていうから、10 倍の削減になるわけだね。

制限もちゃんとあるよ。今のところ対応してるのは 2D の Canvas コンテキストだけで、WebGL や 3D グラフィックスのアプリはこれまで通りビットマップで描画されるの。もし表示がおかしいときは、分離ページの背景を右クリックして「Disable Canvas Remoting」でいったん切れるし、同じ手順で戻せるよ。もっと詳しく知りたい人は [Canvas Remoting](https://developers.cloudflare.com/cloudflare-one/remote-browser-isolation/canvas-remoting/) のドキュメントを見てみてね。

## まとめ

- Browser Isolation に Canvas Remoting が登場。ビットマップの代わりにベクター描画コマンドを送るよ
- Office アプリで通信量 90 パーセント減、Google Sheets は 30fps、ターミナルもリアルタイム
- 設定不要で最初から有効。困ったら右クリックでオフにできる
- 対応は 2D Canvas のみ。WebGL や 3D はこれまで通り

リモートブラウザ分離で表計算やドキュメントをよく開く人、細い回線で分離ブラウザを使ってる人にうれしいアップデートだよ！