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
92
見積書のビルド/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
52
Pkl/2024-04-17-llt31
ottijp
0
79
JavaScriptのデバッグ/2023-09-04-llt30
ottijp
0
150
CDK for TerraformでAzureリソースをデプロイする/2023-05-15-llt29
ottijp
1
260
TWELITEへの誘い/2022-12-27-llt28
ottijp
0
150
ビルドツールBazelを触ってみた/2022-09-28-llt27
ottijp
0
160
HashiCorp Vaultを使ったシークレットのセキュアな一元管理 〜Ansibleを添えて〜/2022-07-12-llt26
ottijp
0
140
AWSインフラのデプロイをCDKでカイゼンする/2022-03-23-llt25
ottijp
0
84
Amazon Timestreamでデータ補間/2021-12-27-llt24
ottijp
0
100
Other Decks in Programming
See All in Programming
たった 1 枚の PHP ファイルで実装する MCP サーバ / MCP Server with Vanilla PHP
okashoi
0
140
なぜ適用するか、移行して理解するClean Architecture 〜構造を超えて設計を継承する〜 / Why Apply, Migrate and Understand Clean Architecture - Inherit Design Beyond Structure
seike460
PRO
1
290
CursorはMCPを使った方が良いぞ
taigakono
0
150
「Cursor/Devin全社導入の理想と現実」のその後
saitoryc
0
110
Blazing Fast UI Development with Compose Hot Reload (droidcon New York 2025)
zsmb
1
120
iOSアプリ開発で 関数型プログラミングを実現する The Composable Architectureの紹介
yimajo
2
210
AIネイティブなプロダクトをGolangで挑む取り組み
nmatsumoto4
0
120
Railsアプリケーションと パフォーマンスチューニング ー 秒間5万リクエストの モバイルオーダーシステムを支える事例 ー Rubyセミナー 大阪
falcon8823
3
790
git worktree × Claude Code × MCP ~生成AI時代の並列開発フロー~
hisuzuya
0
200
KotlinConf 2025 現地で感じたServer-Side Kotlin
n_takehata
1
220
イベントストーミング図からコードへの変換手順 / Procedure for Converting Event Storming Diagrams to Code
nrslib
1
180
Webの外へ飛び出せ NativePHPが切り拓くPHPの未来
takuyakatsusa
1
190
Featured
See All Featured
A Modern Web Designer's Workflow
chriscoyier
693
190k
Code Reviewing Like a Champion
maltzj
524
40k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3k
Site-Speed That Sticks
csswizardry
10
650
4 Signs Your Business is Dying
shpigford
184
22k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
20
1.3k
Thoughts on Productivity
jonyablonski
69
4.7k
The Cost Of JavaScript in 2023
addyosmani
51
8.4k
The World Runs on Bad Software
bkeepers
PRO
69
11k
The Straight Up "How To Draw Better" Workshop
denniskardys
233
140k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.3k
BBQ
matthewcrist
89
9.7k
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