TutorialsTypetalk検索...ヌーラボについてヌーラボは最先端のコラボレーションツールを開発する集団です。置き換える開発を進めています。図形の描画に使用される、SVGを選択した理由と経緯について説明したいと思います。図形の描画にどんな技術を使うか。いくつか候補を上げました。(WebGL)SVG(これ以外に、Unityという意見もありましたが今回はWeb標準技術を使うことを前提にしました。)さて、どれを使おう。私たちがどの技術を選択するのか、基準を決める必要があります。そこで重視したのは「パフォーマンス」でした。図を描いていて頻繁に固まったり、待ち時間が発生したりするとイライラしますよね。版よりも動作が遅くなってしまったら、誰もHTML5版を使ってくれません。HTML5版Cacooを使って貰うためにも、パフォーマンスの良い快適なエディタを作る必要があります。快適なエディタとは一体どういうものか?私たちが作りたいエディタの要素をあげました。テキストの描画、線の色の変更、塗りつぶし、図形の移動、図形の削除などの操作を連続で大量に行うデモプログラムを、それぞれの技術で作ってみたのです。パフォーマンス比較表もちろん、実際のプログラムの書き方や利用しているライブラリによっては結果が変わってくると思いますが、これは大きな目安にはなります。ちなみに現在Cacooのブラウザのシェアで、もっとも多くを占めるのが、全体の75%のユーザーが利用するChromeです。次に多いのが、Firefoxの8%でした。2つのブラウザで使用した結果は変わりませんでした。描画エリアのサイズを大きくした場合に、目に見える違いがでました。Canvasは2D、3D共に描画エリアが大きくなったときに速度が大きく落ちたのです。比較されていますが、Canvasの場合は画面サイズが大きくなると速度に大きな影響を及ぼします。エディタは大きな画面で使いたいし、最近は4Kや5Kのディスプレイが次々と発売されています。Macユーザは当然の様にRetinaディスプレイを使っています。速い」という結果も、大きな決め手になりました。Microsoftのドキュメントでは、オブジェクトの数が増えた場合は、Canvasの方が速いことが説明されています。作成したデモプログラムで大量の図形の描画をした結果、私たちには画面サイズによる影響の方が問題でした。Canvasが快適に動作しました。GPUの影響があったのだと思います。モバイル版Cacooがどんな用途で使われるのかを考えた際に、狭いモバイルのブラウザで大きな図を描くのは難しく、ちょっとした修正やメモなどを追加するのが主な使い方になるのではないかと、私たちは考えました。採用することにしました。Canvasが良い結果を出したのかもしれませんが、Cacooの目標の1つに、プロジェクトに関わるひと全員に迷うことなく使ってほしいというものがあります。そこで、ハイスペックのマシンを使ってない人にも、快適に使ってもらえることが重要だと判断しました。メリット、デメリットいくつか思いついたものを上げてみました。自体が十分な機能を持っている拡大してもきれいもちろん。ベクターグラフィックスですから!Retinaディスプレイに対応するために、縦横2倍にしたCanvasを作る必要はありません。ブラウザの開発者ツールを使って図形を変更・調査できる開発中に「ちょっと図形がおかしい」なんてとき、開発者ツールで要素の属性を確認・変更することが簡単にできます。プログラムの中からだけでなく、外部から調査ができるのは非常に便利です。開発スピードに大きな影響があったと思っています。自体が十分な機能を持っているイベントのハンドリングや図形のグループ化などCacooを作るのに必要な機能が揃っています。特別なライブラリを用意しないと難しい処理はありません。実際にHTML5版のCacooでは、SVGの操作で外部ライブラリを使用せずに、素のSVGのAPIを直接利用しています。版と比較すると対応ブラウザが減ってしまいます。古いバージョンのブラウザなどがあてはまります。版ができた頃に主流だった古いブラウザは、今はもう使われなくなってきているので、問題にならなくなるのもそう遠くない気がします。上に置くなどの、何かしらの対応が必要になるかもしれません。ならないことを願っていますが。Cacooはまだまだ開発中です。ちなみに私は現在、図の共同編集の部分を開発しています。描画の部分以外も「共同編集ってどうやって実現しているの?」「サーバサイドはどうなっている?」など気になることなどあれば、はてなブックマークやTwitterなどで感想をいただけると嬉しいです。次回はクライアントサイドにおけるデータのアーキテクチャを紹介する予定です!最後まで読んでいただき、ありがとうございました。Reserved.EnglishEnglish。