Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
見積書のビルド/2020-07-14-llt15
Search
Satoshi SAKAO
July 14, 2020
Programming
0
88
見積書のビルド/2020-07-14-llt15
社内のLTイベント「えるLT Vol.15 オンライン」で発表した資料です
Satoshi SAKAO
July 14, 2020
Tweet
Share
More Decks by Satoshi SAKAO
See All by Satoshi SAKAO
Testcontainers/2024-11-20-llt32
ottijp
0
46
Pkl/2024-04-17-llt31
ottijp
0
77
JavaScriptのデバッグ/2023-09-04-llt30
ottijp
0
150
CDK for TerraformでAzureリソースをデプロイする/2023-05-15-llt29
ottijp
1
250
TWELITEへの誘い/2022-12-27-llt28
ottijp
0
150
ビルドツールBazelを触ってみた/2022-09-28-llt27
ottijp
0
150
HashiCorp Vaultを使ったシークレットのセキュアな一元管理 〜Ansibleを添えて〜/2022-07-12-llt26
ottijp
0
140
AWSインフラのデプロイをCDKでカイゼンする/2022-03-23-llt25
ottijp
0
82
Amazon Timestreamでデータ補間/2021-12-27-llt24
ottijp
0
98
Other Decks in Programming
See All in Programming
JSAI2025 RecSysChallenge2024 優勝報告
unonao
1
380
Spring gRPC で始める gRPC 入門 / Introduction to gRPC with Spring gRPC
mackey0225
0
180
❄️ tmux-nixの実装を通して学ぶNixOSモジュール
momeemt
1
120
ts-morph実践:型を利用するcodemodのテクニック
ypresto
1
540
抽象データ型について学んだ
ryounasso
0
210
TSConfigからTypeScriptの世界を覗く
planck16
2
1.3k
Passkeys for Java Developers
ynojima
1
330
Parallel::Pipesの紹介
skaji
2
870
〜可視化からアクセス制御まで〜 BigQuery×Looker Studioで コスト管理とデータソース認証制御する方法
cuebic9bic
2
270
インターフェース設計のコツとツボ
togishima
2
490
『Python → TypeScript』オンボーディング奮闘記
takumi_tatsuno
1
140
Building an Application with TDD, DDD and Hexagonal Architecture - Isn't it a bit too much?
mufrid
0
370
Featured
See All Featured
Optimising Largest Contentful Paint
csswizardry
37
3.3k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.7k
Statistics for Hackers
jakevdp
799
220k
Adopting Sorbet at Scale
ufuk
76
9.4k
Code Review Best Practice
trishagee
68
18k
Reflections from 52 weeks, 52 projects
jeffersonlam
349
20k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
30
2.4k
How STYLIGHT went responsive
nonsquared
100
5.6k
Building Flexible Design Systems
yeseniaperezcruz
329
39k
Unsuck your backbone
ammeep
671
58k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Transcript
見積書のビルド Satoshi SAKAO えるLT Vol.15 2020/07/14 (Tue) 1 データ,文書構造,スタイルの分離
話すひと 2 インフォコム株式会社 品質マネジメント推進室 ソフトウェアエンジニア JS (ES6) / Node.js /
GCP / IoT / iOS (Swift) 猫,平沢進サウンド Satoshi SAKAO @ottijp
モチベーション 3 Excel (is not excel) 見積書.xlsx
Excelだけで作ってる帳票のな点 • 画面通りに印刷されない • データ,ドキュメント構造,スタイルの密結合 • →メンテンナンス性,生産性の低下 • 実際このドキュメントに起因して, 間違ったり時間がかかったり,ということが多い
4
モチベーション 5 Disassemble the shit doc 見積書.xlsx
Excelの利点 • 計算 • 条件付き書式 • 入力規則など • WISIWYG •
行列値の編集 • 表示形式定義 6
構成 7 メタデータ(yaml) 見積りデータ(xlsx) すごいツール 見積書(html) • 案件名 • 契約条件
• etc • 見積り内訳 • 工数計算 • etc • プレビュー • 印刷
8 demo
構成詳細 9 data.yaml data.xlsx *.pug *.styl 見積書.html gulp.js すごいツール データソース
文書構造 スタイル
仕組み • xlsxファイルの読み込みとJSオブジェクト化 • https://www.npmjs.com/package/xlsx (めちゃ便利) • ブラウザプレビュー(自動更新) • gulp.watch +
browser-sync • htmlとcssのトランスパイル(テンプレートエンジン) • pug • stylus 10
今すごく辛い点 • ここにコミットしてあります,が言えない • 4月以降,リモートでVCSにアクセスできない • 誰かVCSが使える環境をください(切実) 11
12 Appendix
Pros • VCS管理 • OSSな技術だけで構成している • エクセルに依存しない • xlsxが編集できればよい •
LibreOffice etcでもOK • 見積書に限定されない 13
データ,ドキュメント構造,スタイルの密結合 • 構造やスタイルをデータで調整する必要がある • データだけの流用やスタイルだけの変更が困難 • 意図しない破壊がおきやすい • 構造やスタイルのDRY原則違反がおきる 14
Excelの利点(前提) • セル結合しない • 異なる列(意味)を持つテーブルは異なるシートにする • 帳票ではなくデータソースとして扱う 15
試したこと,詰まったこと • WordとExcelでデータと構造+スタイルを分ける方法 • Wordが相対パスからの参照ができない • 不安定(壊れることがしばしば) • VCSと相性悪い •
Vue.js(vue-cli)を使う方法 • オーバエンジニアリング • 動的・フロントエンドでのやりくりは必要ない 16
PDF生成の自動化 • ヘッダとフッタを印刷しないオプションが, まだchrome canaryでしか対応されていない • CSS3の`@page @bottom-center`などにどのブラウザも対応してい ないので結局無理だった •
TeXとpdftk使って,PDFにページ番号追加するよう回避策を考えた • PDFにページ番号を付けるスクリプト • https://blog.ottijp.com/2020/07/09/pdf-page-numbering/ 17