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
77
見積書のビルド/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
Pkl/2024-04-17-llt31
ottijp
0
18
JavaScriptのデバッグ/2023-09-04-llt30
ottijp
0
81
CDK for TerraformでAzureリソースをデプロイする/2023-05-15-llt29
ottijp
0
69
TWELITEへの誘い/2022-12-27-llt28
ottijp
0
110
ビルドツールBazelを触ってみた/2022-09-28-llt27
ottijp
0
98
HashiCorp Vaultを使ったシークレットのセキュアな一元管理 〜Ansibleを添えて〜/2022-07-12-llt26
ottijp
0
110
AWSインフラのデプロイをCDKでカイゼンする/2022-03-23-llt25
ottijp
0
53
Amazon Timestreamでデータ補間/2021-12-27-llt24
ottijp
0
60
ncurses/2021-05-12-llt21
ottijp
0
150
Other Decks in Programming
See All in Programming
otelcol receiver 自作RTA / Pepabo Tech Conference #22 春のSREまつり
arthur1
0
1.2k
Open standards for building event-driven applications in the cloud
meteatamel
0
240
そのコード、書いたらいくら?消したらいくら?
urban_side
0
120
JS RPCを理解する
yusukebe
5
320
[RailsConf Detroit 2024] Ruby on Fails - effective error handling with Rails conventions
talyssonoc
0
310
The Final Frontier of Web Development: React Server Components vs Jakarta EE
ivargrimstad
0
280
Let's use LLMs from Ruby 〜 Refine RBS types using LLM 〜
kokuyouwind
0
260
チーム立ち上げにAWSを活用したらClaudeさんに褒められた話
mkdev10
3
240
mb_trim関数を作りました
youkidearitai
PRO
1
260
RailsConf 2024: Riffing on Rails: sketch your way to better designed code
kaspth
1
220
TypeScript Custom GitHub Action Development Tips
peaceiris
5
930
Namespace, What and Why
tagomoris
5
2.8k
Featured
See All Featured
The Art of Programming - Codeland 2020
erikaheidi
43
12k
Visualization
eitanlees
137
14k
The Cost Of JavaScript in 2023
addyosmani
21
4k
Automating Front-end Workflow
addyosmani
1357
200k
The Invisible Customer
myddelton
114
12k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
41
4.5k
The Power of CSS Pseudo Elements
geoffreycrofte
62
5k
Testing 201, or: Great Expectations
jmmastey
30
6.4k
A Modern Web Designer's Workflow
chriscoyier
689
190k
Robots, Beer and Maslow
schacon
PRO
155
8k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
20
1.8k
The Brand Is Dead. Long Live the Brand.
mthomps
49
31k
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