見積書のビルド/2020-07-14-llt15

社内のLTイベント「えるLT Vol.15 オンライン」で発表した資料です

Transcript

1. 見積書のビルド Satoshi SAKAO えるLT Vol.15 2020/07/14 (Tue) 1 データ，文書構造，スタイルの分離
2. 話すひと 2 インフォコム株式会社 品質マネジメント推進室 ソフトウェアエンジニア JS (ES6) / Node.js / GCP / IoT / iOS (Swift) 猫，平沢進サウンド Satoshi SAKAO @ottijp
3. モチベーション 3 Excel (is not excel) 見積書.xlsx
4. Excelだけで作ってる帳票のな点 • 画面通りに印刷されない • データ，ドキュメント構造，スタイルの密結合 • →メンテンナンス性，生産性の低下 • 実際このドキュメントに起因して， 間違ったり時間がかかったり，ということが多い 4
5. モチベーション 5 Disassemble the shit doc 見積書.xlsx
6. Excelの利点 • 計算 • 条件付き書式 • 入力規則など • WISIWYG • 行列値の編集 • 表示形式定義 6
7. 構成 7 メタデータ（yaml） 見積りデータ（xlsx） すごいツール 見積書（html） • 案件名 • 契約条件 • etc • 見積り内訳 • 工数計算 • etc • プレビュー • 印刷
8. 8 demo
9. 構成詳細 9 data.yaml data.xlsx *.pug *.styl 見積書.html gulp.js すごいツール データソース 文書構造 スタイル
10. 仕組み • xlsxファイルの読み込みとJSオブジェクト化 • https://www.npmjs.com/package/xlsx　（めちゃ便利） • ブラウザプレビュー（自動更新） • gulp.watch + browser-sync • htmlとcssのトランスパイル（テンプレートエンジン） • pug • stylus 10
11. 今すごく辛い点 • ここにコミットしてあります，が言えない • 4月以降，リモートでVCSにアクセスできない • 誰かVCSが使える環境をください（切実) 11
12. 12 Appendix
13. Pros • VCS管理 • OSSな技術だけで構成している • エクセルに依存しない • xlsxが編集できればよい • LibreOffice etcでもOK • 見積書に限定されない 13
14. データ，ドキュメント構造，スタイルの密結合 • 構造やスタイルをデータで調整する必要がある • データだけの流用やスタイルだけの変更が困難 • 意図しない破壊がおきやすい • 構造やスタイルのDRY原則違反がおきる 14
15. Excelの利点（前提） • セル結合しない • 異なる列（意味）を持つテーブルは異なるシートにする • 帳票ではなくデータソースとして扱う 15
16. 試したこと，詰まったこと • WordとExcelでデータと構造＋スタイルを分ける方法 • Wordが相対パスからの参照ができない • 不安定（壊れることがしばしば） • VCSと相性悪い • Vue.js（vue-cli）を使う方法 • オーバエンジニアリング • 動的・フロントエンドでのやりくりは必要ない 16
17. PDF生成の自動化 • ヘッダとフッタを印刷しないオプションが， まだchrome canaryでしか対応されていない • CSS3の`@page @bottom-center`などにどのブラウザも対応してい ないので結局無理だった • TeXとpdftk使って，PDFにページ番号追加するよう回避策を考えた • PDFにページ番号を付けるスクリプト • https://blog.ottijp.com/2020/07/09/pdf-page-numbering/ 17