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
93
見積書のビルド/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
56
Pkl/2024-04-17-llt31
ottijp
0
84
JavaScriptのデバッグ/2023-09-04-llt30
ottijp
0
160
CDK for TerraformでAzureリソースをデプロイする/2023-05-15-llt29
ottijp
1
280
TWELITEへの誘い/2022-12-27-llt28
ottijp
0
160
ビルドツールBazelを触ってみた/2022-09-28-llt27
ottijp
0
170
HashiCorp Vaultを使ったシークレットのセキュアな一元管理 〜Ansibleを添えて〜/2022-07-12-llt26
ottijp
0
150
AWSインフラのデプロイをCDKでカイゼンする/2022-03-23-llt25
ottijp
0
88
Amazon Timestreamでデータ補間/2021-12-27-llt24
ottijp
0
100
Other Decks in Programming
See All in Programming
バイブスあるコーディングで ~PHP~ 便利ツールをつくるプラクティス
uzulla
1
320
Constant integer division faster than compiler-generated code
herumi
1
110
Go製CLIツールをnpmで配布するには
syumai
2
1.1k
Claude Code と OpenAI o3 で メタデータ情報を作る
laket
0
110
Bedrock AgentCore ObservabilityによるAIエージェントの運用
licux
8
560
リッチエディターを安全に開発・運用するために
unachang113
1
350
書き捨てではなく継続開発可能なコードをAIコーディングエージェントで書くために意識していること
shuyakinjo
0
200
Gemini CLIの"強み"を知る! Gemini CLIとClaude Codeを比較してみた!
kotahisafuru
3
920
QA x AIエコシステム段階構築作戦
osu
0
240
JetBrainsのAI機能の紹介 #jjug
yusuke
0
180
No Install CMS戦略 〜 5年先を見据えたフロントエンド開発を考える / no_install_cms
rdlabo
0
430
CEDEC 2025 『ゲームにおけるリアルタイム通信への QUIC導入事例の紹介』
segadevtech
2
750
Featured
See All Featured
Scaling GitHub
holman
461
140k
Raft: Consensus for Rubyists
vanstee
140
7k
A Modern Web Designer's Workflow
chriscoyier
695
190k
Bash Introduction
62gerente
614
210k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
Producing Creativity
orderedlist
PRO
346
40k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.5k
Typedesign – Prime Four
hannesfritz
42
2.7k
Statistics for Hackers
jakevdp
799
220k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
6k
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