目指すのはぶっちぎりの速さ! なぜ HTML5 版CacooはSVGを採用するのか

こんにちは！ Cacoo チームの中原です。現在CacooチームはFlashで作られている図の編集画面(以下エディタと表現します)を* HTML5 で置き換える開発を進めています。このブログでは、 HTML5 版 Cacoo で図形の描画に使用される、SVGを選択した理由と経緯について説明したいと思います。

（*置き換える理由については「Good-Bye Flash ~ CacooはHTML5で生まれ変わります」をご覧ください）

どの技術を使って図形を描く?重視したのは「パフォーマンス」

図形の描画にどんな技術を使うか。いくつか候補を上げました。

• 2D Canvas
• 3D Canvas (WebGL)
• SVG

(これ以外に、Unityという意見もありましたが今回はWeb標準技術を使うことを前提にしました。)

さて、どれを使おう。私たちがどの技術を選択するのか、基準を決める必要があります。そこで重視したのは「パフォーマンス」でした。

図を描いていて頻繁に固まったり、待ち時間が発生したりするとイライラしますよね。まして、Flash 版よりも動作が遅くなってしまったら、誰もHTML5版を使ってくれません。私たちは、皆さんに HTML5版Cacooを使って貰うためにも、パフォーマンスの良い快適なエディタを作る必要があります。

では快適なエディタとは一体どういうものか？私たちが作りたいエディタの要素をあげました。

• Flash版よりも素早く起動する
• Flash版よりも少ないメモリで動作する
• 含まれる要素が増えても快適に操作できる
• 大きな画面でも快適に図が描ける

では、これらの要素を実現する技術は、一体どれなのか？採用する技術をさらに絞るために、実際にものを作ってみました。

矩形・円・曲線・テキストの描画、線の色の変更、塗りつぶし、図形の移動、図形の削除などの操作を連続で大量に行うデモプログラムを、それぞれの技術で作ってみたのです。

図のデモプログラム

結果は、SVG >> 3D Canvas > 2D Canvas となり、もっとも速かったのが 「SVG」 でした。

SVG 、3D Canvas 、2D Canvas のパフォーマンス比較表

もちろん、実際のプログラムの書き方や利用しているライブラリによっては結果が変わってくると思いますが、これは大きな目安にはなります。ちなみに現在Cacooのブラウザのシェアで、もっとも多くを占めるのが、全体の75%のユーザーが利用するChromeです。次に多いのが、Firefoxの8%でした。2つのブラウザで使用した結果は変わりませんでした。

さらに、描画エリアのサイズを大きくした場合に、目に見える違いがでました。Canvasは2D、3D共に描画エリアが大きくなったときに速度が大きく落ちたのです。Microsoftが公開しているドキュメントでも、Canvasと SVG が比較されていますが、Canvasの場合は画面サイズが大きくなると速度に大きな影響を及ぼします。

エディタは大きな画面で使いたいし、最近は4Kや5Kのディスプレイが次々と発売されています。Macユーザは当然の様にRetinaディスプレイを使っています。「高解像度ディスプレイでは SVG が速い」という結果も、大きな決め手になりました。

Microsoftのドキュメントでは、オブジェクトの数が増えた場合は、Canvasの方が速いことが説明されています。しかし、作成したデモプログラムで大量の図形の描画をした結果、私たちには画面サイズによる影響の方が問題でした。

モバイルとデスクトップの結果の違いへのアプローチ

モバイルのブラウザでデモプログラムを動かした場合は、3D Canvasが快適に動作しました。おそらくGPUの影響があったのだと思います。しかし、モバイル版Cacooがどんな用途で使われるのかを考えた際に、狭いモバイルのブラウザで大きな図を描くのは難しく、ちょっとした修正やメモなどを追加するのが主な使い方になるのではないかと、私たちは考えました。

そこで、まずはデスクトップでのパフォーマンスを優先にして、 SVG を採用することにしました。デスクトップでも、高性能のGPUを搭載したハイスペックなPCであれば、3D Canvasが良い結果を出したのかもしれませんが、Cacooの目標の1つに、プロジェクトに関わるひと全員に迷うことなく使ってほしいというものがあります。そこで、ハイスペックのマシンを使ってない人にも、快適に使ってもらえることが重要だと判断しました。

SVG のメリット、デメリット

いくつか思いついたものを上げてみました。いまのところ SVG を選択して良かったと思っています！

メリット

• 拡大してもきれい
• ブラウザの開発者ツールを使って図形を変更・調査できる
• SVG 自体が十分な機能を持っている

拡大してもきれい

もちろん。ベクターグラフィックスですから！
Retinaディスプレイに対応するために、縦横2倍にしたCanvasを作る必要はありません。

ブラウザの開発者ツールを使って図形を変更・調査できる

開発中に「ちょっと図形がおかしい」なんてとき、開発者ツールで要素の属性を確認・変更することが簡単にできます。プログラムの中からだけでなく、外部から調査ができるのは非常に便利です。開発スピードに大きな影響があったと思っています。

SVG 自体が十分な機能を持っている

イベントのハンドリングや図形のグループ化などCacooを作るのに必要な機能が揃っています。特別なライブラリを用意しないと難しい処理はありません。実際にHTML5版のCacooでは、SVGの操作で外部ライブラリを使用せずに、素のSVGのAPIを直接利用しています。

デメリット

• ブラウザのサポート状況の違い
• SVG 自体の表現力の限界

ブラウザのサポート状況の違い

ブラウザによっては対応していない機能があるため、Flash 版と比較すると対応ブラウザが減ってしまいます。特に古いバージョンのブラウザなどがあてはまります。ただ、Flash 版ができた頃に主流だった古いブラウザは、今はもう使われなくなってきているので、問題にならなくなるのもそう遠くない気がします。

SVG 自体の表現力の限界

SVG で描画できないものを描画する必要が出てきた場合は、Canvasや画像をSVG 上に置くなどの、何かしらの対応が必要になるかもしれません。そうならないことを願っていますが。

最後に

HTML5版 Cacooはまだまだ開発中です。ちなみに私は現在、図の共同編集の部分を開発しています。描画の部分以外も「共同編集ってどうやって実現しているの?」「サーバサイドはどうなっている?」など気になることなどあれば、はてなブックマークやTwitterなどで感想をいただけると嬉しいです。次回はクライアントサイドにおけるデータのアーキテクチャを紹介する予定です！

最後まで読んでいただき、ありがとうございました。