Gotanda.js #2 で発表した資料です。

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

2. 誰？
• @_tohashi / Takumi Ohashi
• freee という会社でエンジニア
• 確定申告とかやってます

3. 確定申告はfreeeで！

4. 会計ソフトならではの
機能

5. 各種申告や手続き用の
書類をブラウザ上で確認
PDF形式で出力

6. 一例

7. 作成手順
1. CSS(SCSS)を書く
2. ブラウザで確認
3. インスペクタ見ながら調整
4. 完成するまで繰り返し

8. 一連の工程を「CSS組版」と
呼んでいます

9. つらい

10. もっとこうGUI的なもので
ガーッとやってバーっと
できないものか

11. ツールを作ろう

12. CSS-Typesetter
• フロントで完結したWebアプリケーション
• GUIで書類などの画像上に直接文字を並べ、そ
の内容をHTML + CSSとして吐き出す
• 入力欄の自動検出

13. DEMO

14. フレームワークなど
• React + flux + Babel の最近よく見るやつ
• + 各種Reactプラグイン
• Redux移行中
• データはLSに突っ込むかJSONでインポート/エ
クスポート

15. 矩形検出
• 幸いにして多くの書類の入力欄は矩形で囲ま
れている
• CanvasのgetImageDataを使ってピクセル
データ取得、走査して近似色の範囲を検出

16. UNDO / REDO
• fluxでデータフローが単一なのでAction毎に
Storeのデータを配列に突っ込んでいく
• undo/redo がdispatchされたらインデックス
をずらして取り出す

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. UNDO / REDO
• 現在の方法ではスケールしない
• Storeが増えてくると副作用の範囲を明示する
必要がある
• Redux移行したらreducerに組み込めないか

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. 書類作りたい方お試しください

21. まだまだ改善していきます
• http://tohashi.github.io/css-typesetter/
• https://github.com/tohashi/css-typesetter

22. ありがとうございました