Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
React.jsで

CSS組版作業の効率化
@_tohashi
誰?
• @_tohashi / Takumi Ohashi
• freee という会社でエンジニア
• 確定申告とかやってます
確定申告はfreeeで!
会計ソフトならではの
機能
各種申告や手続き用の

書類をブラウザ上で確認

PDF形式で出力
一例
作成手順
1. CSS(SCSS)を書く
2. ブラウザで確認
3. インスペクタ見ながら調整
4. 完成するまで繰り返し
一連の工程を「CSS組版」と

呼んでいます
つらい
もっとこうGUI的なもので

ガーッとやってバーっと

できないものか
ツールを作ろう
CSS-Typesetter
• フロントで完結したWebアプリケーション
• GUIで書類などの画像上に直接文字を並べ、そ
の内容をHTML + CSSとして吐き出す
• 入力欄の自動検出
DEMO
フレームワークなど
• React + flux + Babel の最近よく見るやつ
• + 各種Reactプラグイン
• Redux移行中
• データはLSに突っ込むかJSONでインポート/エ
クスポート
矩形検出
• 幸いにして多くの書類の入力欄は矩形で囲ま
れている
• CanvasのgetImageDataを使ってピクセル
データ取得、走査して近似色の範囲を検出
UNDO / REDO
• fluxでデータフローが単一なのでAction毎に
Storeのデータを配列に突っ込んでいく
• undo/redo がdispatchされたらインデックス
をずらして取り出す
UNDO / REDO
instance.dispatchToken = Dispatcher.register((action) => {
case ActionTypes.UNDO:
historyIdx -= 1;
texts = _.c...
UNDO / REDO
• 現在の方法ではスケールしない
• Storeが増えてくると副作用の範囲を明示する
必要がある
• Redux移行したらreducerに組み込めないか
UNDO / REDO with reducer

(WIP)
import foo form './foo';
import bar form './bar';
import baz form './baz';
const rootReduc...
書類作りたい方お試しください
まだまだ改善していきます
• http://tohashi.github.io/css-typesetter/
• https://github.com/tohashi/css-typesetter
ありがとうございました
Upcoming SlideShare
Loading in …5
×

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

2,412 views

Published on

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

Published in: Technology
  • Be the first to comment

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. ありがとうございました

×