Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
僕たちとHTML5の2500日~Cacoo 脱Flashへの道 / 2500 days Cac...
Search
株式会社ヌーラボ
PRO
October 03, 2017
Technology
2
2.4k
僕たちとHTML5の2500日~Cacoo 脱Flashへの道 / 2500 days Cacoo and HTML5
2017年10月3日にヌーラボ東京オフィスで開催した「Geeks Who Drink in Tokyo - HTML5 Edition -」の登壇資料です。
株式会社ヌーラボ
PRO
October 03, 2017
Tweet
Share
More Decks by 株式会社ヌーラボ
See All by 株式会社ヌーラボ
ヌーラボが取り組む RevOpsのこれまでとこれから
nulabinc
PRO
1
97
【資料】30分でわかる!“とりあえず課題を作った”から抜け出すBacklog活用術
nulabinc
PRO
0
62
【展示会ご参加者様向け】Backlog概要編-配布資料
nulabinc
PRO
0
41
Why Platform Engineering? - マルチプロダクト・少人数 SRE の壁を越える挑戦 -
nulabinc
PRO
5
740
Datadog のトライアルを成功に導く技術 / Techniques for a successful Datadog trial
nulabinc
PRO
0
410
僕たちは何を守っているのか?ビジネスを守る、ヌーラボのセキュリティ実践
nulabinc
PRO
1
81
Snowflake九州ユーザー会
nulabinc
PRO
0
73
ヌーラボ‧ウェブサイト課の ⼀年間の取り組みをふり返る
nulabinc
PRO
1
1.1k
今からでも入れる re:Inventがあるんですか!?
nulabinc
PRO
0
460
Other Decks in Technology
See All in Technology
2025-07-31: GitHub Copilot Agent mode at Vibe Coding Cafe (15min)
chomado
2
300
Power Automate のパフォーマンス改善レシピ / Power Automate Performance Improvement Recipes
karamem0
0
280
完璧を目指さない小さく始める信頼性向上
kakehashi
PRO
0
130
増え続ける脆弱性に立ち向かう: 事前対策と優先度づけによる 持続可能な脆弱性管理 / Confronting the Rise of Vulnerabilities: Sustainable Management Through Proactive Measures and Prioritization
nttcom
1
230
AI によるドキュメント処理を加速するためのOCR 結果の永続化と再利用戦略
tomoaki25
0
250
相互運用可能な学修歴クレデンシャルに向けた標準技術と国際動向
fujie
0
130
Bet "Bet AI" - Accelerating Our AI Journey #BetAIDay
layerx
PRO
3
720
20250728 MCP, A2A and Multi-Agents in the future
yoshidashingo
1
170
LLMをツールからプラットフォームへ〜Ai Workforceの戦略〜 #BetAIDay
layerx
PRO
1
350
バクラクによるコーポレート業務の自動運転 #BetAIDay
layerx
PRO
1
380
【CEDEC2025】LLMを活用したゲーム開発支援と、生成AIの利活用を進める組織的な取り組み
cygames
PRO
1
2k
Vision Language Modelと自動運転AIの最前線_20250730
yuyamaguchi
2
920
Featured
See All Featured
What's in a price? How to price your products and services
michaelherold
246
12k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
How to Think Like a Performance Engineer
csswizardry
25
1.8k
Git: the NoSQL Database
bkeepers
PRO
431
65k
Why Our Code Smells
bkeepers
PRO
337
57k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Thoughts on Productivity
jonyablonski
69
4.8k
Automating Front-end Workflow
addyosmani
1370
200k
We Have a Design System, Now What?
morganepeng
53
7.7k
How GitHub (no longer) Works
holman
314
140k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
110
19k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
860
Transcript
僕たちとHTML5の2500日 ∼Cacoo 脱Flashへの道∼
自己紹介 川端 慧 ・2016 年12 月株式会社ヌーラボ入社 ・Cacoo のHTML5 版を開発中のフロントエンジニア ・最近パパになりました
国広 輝夫 ・2016 年9 月株式会社ヌーラボ入社 ・オンライン作図ツールのCacoo のHTML5 版を開発しています ・フロントエンドの開発に携わることが多く、JS に慣れ親しんで います
What's Cacoo? ・Cacoo はオンライン作図ツール ・コンセプト “ ビジュアルコラボレーション” ・世界中で使われている (270 万ユーザ)
・最近、Flash 版からHTML5 版へ移植しました!
年表 2015 年 2010 年 Cacoo の前身 をJS で作る 11
月 Flash 版 リリース 2006 年 2009 年 2013 年 2008 年 100 万ユーザ突破 Flash での開発を 始める 11 月 HTML5 移行の 調査開始 春頃 HTML5 移行へ 調査再開 150 万ユーザ突破 2016 年 6 月 ブログにて脱Flash 宣言 4 月 本格的にHTML5 版の開発を開始 200 万ユーザ突破 2017 年 8 月28 日 HTML5 版リリース 3 月 社内ベータ開始 7 月 Flash 終焉のアナウンス
Cacoo のはじまり ・Backlog のwiki 的な作図ツールを作りたかった ・2006 年 前身となるアプリをJavaScript で開発 ・単純なdiv
のみ描画するアプリ ・2008 年 Flash で開発を始める ・「Java 感覚で書ける」「描画プログラムを書きやすい」 ・2009 年 11 月Flash 版 Cacoo リリース
HTML5 化への第一歩 ・Flash 版リリース当時からFlash 排斥の風潮 ・リリース後すぐHTML5 化に着手 → 技術調査開始のチケットが切られる →
これが2010 年11 月4 日 だったのだが… !
凍結するHTML5 化プロジェクト ・サービスの成長にフォーカス ・Flash 版の追加開発を優先させるためプロジェクト凍結へ ・その間もグローバルに成長していくサービス ・2013 年 100 万ユーザ
突破 ・2015 年 150 万ユーザ 突破 ・2016 年 200 万ユーザ 突破
プロジェクトの再開 ・2015 年 春頃からHTML5 化へ向けた調査を開始 ・描画API の調査 SVG / Canvas
/ webGL ? ・データフォーマット AMF / JSON / messagepack ? ・動作保証ブラウザの調査 (IE までサポートするのか?) ・ライブラリ選定 ・2016 年 4 月 本格的に開発を開始
2016 年6 月 脱Flash 宣言 開発は進む… !
社内ベータ ・2017 年 3 月頃 社内ベータ開始 ・HTML5 で作った図が一瞬で吹き飛んだりした ・ブラウザ個別の挙動の違いや、非同期処理、同時編集やタイミング 依存のバグなど再現困難な問題に対処
・「なんか動かなくなった」に苦しむ ・全力でブラッシュアップする日々 そして… !
2017 年7 月 Flash player の終焉が告げられる
歓喜の瞬間 ・2017 年8 月28 日 リリース ・HTML5 化のissue が最初に切られた2010 年11
月4 日から2500 日が経 っていた
歓喜の瞬間の裏では… ・ブラウザ間のサポート状況の差異 ・描画API の調査 (SVG or Canvas webGL) ・データフォーマットの調査 (JSON
or messagepack) ・indexedDB の採用 ・作画ツールならではの難しさ ・エラーログの収集によるバグ検知 ・ライブラリの話
IE をサポートしない決断 ・SVG 上でのテキスト表現にforeignObject を使用しているが、 そのforeignObject が使えない ・その他開発者泣かせの独自仕様が多すぎる Chrome 57
で突然動かない! ・SVG のtransform 属性が効かなくなり、図がいきなり崩れた ・属性を再代入することで一旦は回避できた ・その後、Chrome のバージョンアップで解決 ブラウザによる差異
Safari でSVG を一部画像化できない ・テキスト表現に<foreignObject /> を使用している ・Safari ではforeignObject を画像化(Blob 化)
できない SVG Canvas Blob ・テキストをHTML に変換してCanvas 化 ・画像の読み込みが非同期で画像が抜け落ちてしまう →setTimeout で調整 あいうえお
SVG vs Canvas ・デスクトップ前提 ・Cacoo で使うような大量の オブジェクトを並べるデモ 検証 結果 ・SVG
がパフォーマンスよかった ・大画面でもSVG の方が速い
SVG の長所と短所 長所 ・拡大してもきれい ・DOM として扱えるので、開発者ツールでデバッグしやすい ・描画のための機能がネイティブで備わっている ・イベントハンドリング ・グループ化 ・ライブラリ要らず
短所 ・ブラウザのサポート状況の違い ・SVG の表現力に限界がある → 今後Canvas や画像をSVG 上に置くなどの対応が必要かもしれない
Flash 版 AMF Binary HTML5 版 JSON ・Flash に特化したバイナリデータフォーマット ・ひとかたまりのバイナリデータ
・1 つシェイプを削除したらデータ全体を 書き換える必要がある ・ユニークなID で関連付けられるツリー構造 ・必要な差分データだけを書き換えられる データ形式の刷新 Diagram Sheet Sheet Shape Shape Shape Shape Shape JSON Book Page Shape Shape Page Shape
JSON のメリット ・JavaScript で扱いやすい ・データ転送量だとバイナリの方が有利だが、Cacoo で扱うデータ 量的にはそれほど大きな利点は見られなかった ・PostgreSQL でJSON を扱う機能がある
IndexedDB ・ブラウザに備わっているDB ・キャッシュとして有効活用 ・図のデータをローカルでも保持 ・起動時には差分のみ取得 ・表示しているシートのみ読み込むことでメモリ使用量削減
データ更新の流れ Server Client User Editor IndexedDB Server Operation Request Write
Feedback ・ユーザへのフィードバックを優先 ・データの整合性を保つことに最新の注意を払う ・共同編集でのコンフリクトからの復帰などの対応 Redraw
作図ツールならではのつらさ ・速度を出すためにSVG 描画にライブラリは使用していない ・図の回転とか拡大、歪み アフィン変換、三角関数で地道に計算 ・図のグループ化で考慮すべきパターンが多い 子供の要素や親の要素の考慮のパターンが多くてつらい ・PNG 、SVG 、PPT
、PDF など複数の出力に対応しなければならない いろんなファイル形式でちゃんと見れるようにしないといけない
エラーログの収集 ・なんか動かなくなったの対処法としてログを収集 操作ログやスタックトレースなど ・エラーログはTypetalk (社内チャット)にて確認 ・それでも再現は難しい場合もあるが、だいぶエラーの原因を突き止 めることができている
ライブラリ選定 言語 TypeScript ・様々なデータタイプを交換するため、型付き言語が必須 ・成長も早くライブラリも多い HTML レンダリング Riot.js ・軽量で仮想DOM 的なのを提供してくれる
・React ほどの高機能が必要ではなかった SVG レンダリング 何も使って ません ・素のSVG のAPI を使用しています
ライブラリのメンテナンス ・メインのライブラリはなるべくバージョンをあげるようにしている。 あげるときはnpmcheckupdate などを使用して一つずつ最新に ビルドだけに使用しているものとかめんどくさいのはあげない ・最新バージョンの確認 npm outdated の結果を週一回Typetalk にポストして目視でライブラリ
のバージョンの確認をおこなう
エンジニア募集 職種 業務内容 勤務地 フロントエンジニア CacooHTML5 版クライアント開発 福岡 Go エンジニア
Cacoo のサーバーサイド開発 福岡 一緒にCacoo を世界に届けましょう!
ありがとうございました