Upgrade to Pro — share decks privately, control downloads, hide ads and more …

僕たちとHTML5の2500日~Cacoo 脱Flashへの道 / 2500 days Cac...

僕たちとHTML5の2500日~Cacoo 脱Flashへの道 / 2500 days Cacoo and HTML5

2017年10月3日にヌーラボ東京オフィスで開催した「Geeks Who Drink in Tokyo - HTML5 Edition -」の登壇資料です。

株式会社ヌーラボ

October 03, 2017
Tweet

More Decks by 株式会社ヌーラボ

Other Decks in Technology

Transcript

  1. 自己紹介 川端 慧 ・2016 年12 月株式会社ヌーラボ入社 ・Cacoo のHTML5 版を開発中のフロントエンジニア ・最近パパになりました

    国広 輝夫 ・2016 年9 月株式会社ヌーラボ入社 ・オンライン作図ツールのCacoo のHTML5 版を開発しています ・フロントエンドの開発に携わることが多く、JS に慣れ親しんで います
  2. 年表 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 終焉のアナウンス
  3. Cacoo のはじまり ・Backlog のwiki 的な作図ツールを作りたかった ・2006 年 前身となるアプリをJavaScript で開発 ・単純なdiv

    のみ描画するアプリ ・2008 年 Flash で開発を始める ・「Java 感覚で書ける」「描画プログラムを書きやすい」 ・2009 年 11 月Flash 版 Cacoo リリース
  4. プロジェクトの再開 ・2015 年 春頃からHTML5 化へ向けた調査を開始 ・描画API の調査 SVG / Canvas

    / webGL ? ・データフォーマット AMF / JSON / messagepack ? ・動作保証ブラウザの調査 (IE までサポートするのか?) ・ライブラリ選定 ・2016 年 4 月 本格的に開発を開始
  5. 歓喜の瞬間の裏では… ・ブラウザ間のサポート状況の差異 ・描画API の調査 (SVG or Canvas webGL) ・データフォーマットの調査 (JSON

    or messagepack) ・indexedDB の採用 ・作画ツールならではの難しさ ・エラーログの収集によるバグ検知 ・ライブラリの話
  6. IE をサポートしない決断 ・SVG 上でのテキスト表現にforeignObject を使用しているが、 そのforeignObject が使えない ・その他開発者泣かせの独自仕様が多すぎる Chrome 57

    で突然動かない! ・SVG のtransform 属性が効かなくなり、図がいきなり崩れた ・属性を再代入することで一旦は回避できた ・その後、Chrome のバージョンアップで解決 ブラウザによる差異
  7. Safari でSVG を一部画像化できない ・テキスト表現に<foreignObject /> を使用している ・Safari ではforeignObject を画像化(Blob 化)

    できない SVG Canvas Blob ・テキストをHTML に変換してCanvas 化 ・画像の読み込みが非同期で画像が抜け落ちてしまう →setTimeout で調整 あいうえお
  8. Flash 版 AMF Binary HTML5 版 JSON ・Flash に特化したバイナリデータフォーマット ・ひとかたまりのバイナリデータ

    ・1 つシェイプを削除したらデータ全体を 書き換える必要がある ・ユニークなID で関連付けられるツリー構造 ・必要な差分データだけを書き換えられる データ形式の刷新 Diagram Sheet Sheet Shape Shape Shape Shape Shape JSON Book Page Shape Shape Page Shape
  9. データ更新の流れ Server Client User Editor IndexedDB Server Operation Request Write

    Feedback ・ユーザへのフィードバックを優先 ・データの整合性を保つことに最新の注意を払う ・共同編集でのコンフリクトからの復帰などの対応 Redraw