React.jsで
CSS組版作業の効率化

React.jsで
CSS組版作業の効率化

1. 1. React.jsで
 CSS組版作業の効率化 @_tohashi
2. 2. 誰？ • @_tohashi / Takumi Ohashi • freee という会社でエンジニア • 確定申告とかやってます
3. 3. 確定申告はfreeeで！
4. 4. 会計ソフトならではの 機能
5. 5. 各種申告や手続き用の
 書類をブラウザ上で確認
 PDF形式で出力
6. 6. 一例
7. 7. 作成手順 1. CSS(SCSS)を書く 2. ブラウザで確認 3. インスペクタ見ながら調整 4. 完成するまで繰り返し
8. 8. 一連の工程を「CSS組版」と
 呼んでいます
9. 9. つらい
10. 10. もっとこうGUI的なもので
 ガーッとやってバーっと
 できないものか
11. 11. ツールを作ろう
12. 12. CSS-Typesetter • フロントで完結したWebアプリケーション • GUIで書類などの画像上に直接文字を並べ、そ の内容をHTML + CSSとして吐き出す • 入力欄の自動検出
13. 13. DEMO
14. 14. フレームワークなど • React + flux + Babel の最近よく見るやつ • + 各種Reactプラグイン • Redux移行中 • データはLSに突っ込むかJSONでインポート/エ クスポート
15. 15. 矩形検出 • 幸いにして多くの書類の入力欄は矩形で囲ま れている • CanvasのgetImageDataを使ってピクセル データ取得、走査して近似色の範囲を検出
16. 16. UNDO / REDO • fluxでデータフローが単一なのでAction毎に Storeのデータを配列に突っ込んでいく • undo/redo がdispatchされたらインデックス をずらして取り出す
17. 17. UNDO / REDO instance.dispatchToken = Dispatcher.register((action) => { case ActionTypes.UNDO: historyIdx -= 1; texts = _.cloneDeep(textsHistory[historyIdx]); instance.emitChange(); break; case ActionTypes.REDO: historyIdx += 1; texts = _.cloneDeep(textsHistory[historyIdx]); instance.emitChange(); break; default: // Action毎に履歴を記録していく textsHistory.push(_.cloneDeep(texts)); historyIdx = textsHistory.length - 1;
18. 18. UNDO / REDO • 現在の方法ではスケールしない • Storeが増えてくると副作用の範囲を明示する 必要がある • Redux移行したらreducerに組み込めないか
19. 19. UNDO / REDO with reducer
 (WIP) import foo form './foo'; import bar form './bar'; import baz form './baz'; const rootReducer = combineReducers({ foo, bar, baz }); // 副作用の範囲を登録 rootReducer.registerHistory({ foobar: [foo, bar], foobaz: [foo, baz] }); // 副作用の範囲 + 履歴に応じてundo action.undo(‘foobar');
20. 20. 書類作りたい方お試しください
21. 21. まだまだ改善していきます • http://tohashi.github.io/css-typesetter/ • https://github.com/tohashi/css-typesetter
22. 22. ありがとうございました