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
76
見積書のビルド/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
12
JavaScriptのデバッグ/2023-09-04-llt30
ottijp
0
76
CDK for TerraformでAzureリソースをデプロイする/2023-05-15-llt29
ottijp
0
53
TWELITEへの誘い/2022-12-27-llt28
ottijp
0
100
ビルドツールBazelを触ってみた/2022-09-28-llt27
ottijp
0
97
HashiCorp Vaultを使ったシークレットのセキュアな一元管理 〜Ansibleを添えて〜/2022-07-12-llt26
ottijp
0
110
AWSインフラのデプロイをCDKでカイゼンする/2022-03-23-llt25
ottijp
0
51
Amazon Timestreamでデータ補間/2021-12-27-llt24
ottijp
0
56
ncurses/2021-05-12-llt21
ottijp
0
140
Other Decks in Programming
See All in Programming
Ruby GitHub Packages
bkuhlmann
0
630
チーム力を高めるスクラム実践法:カンバン公開と課題攻略について - ニフティのスクラムトーク Vol. 2 - NIFTY Tech Talk #18
niftycorp
PRO
1
110
Build Apps for iOS, Android & Desktop in 100% Kotlin With Compose Multiplatform (mDevCamp 2024)
zsmb
0
200
大規模Reactアプリのリアーキテクチャ~8万行のTanStack Query移行の軌跡~
kj455
4
930
try!Swift Tokyo 2024 参加報告 LT
akidon0000
1
220
新宿ダンジョンを可視化してみた
satoshi7190
2
220
Front-end application development, Symfony-style(s)
dunglas
2
2k
try! Swift Tokyo 初参加報告LT
hinakko2
0
210
0→1と1→10の狭間で Javaという技術選定を振り返る/Reflecting on the Decision to Choose Java Between Scaling from 0 to 1 and 1 to 10
jaguar_imo
2
380
SwiftUI Performance 不要なViewの再描画と更新を抑える
bigamitiongit
1
160
PHPの次期バージョンはこの時期どうなっているのか - Internalsの開発体制について - PHPカンファレンス小田原
youkidearitai
PRO
1
190
try! Swift Tokyo 2024 参加報告 / try! Swift Tokyo 2024 Report
hironytic
0
200
Featured
See All Featured
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
220
21k
GraphQLとの向き合い方2022年版
quramy
31
12k
Testing 201, or: Great Expectations
jmmastey
27
6.3k
10 Git Anti Patterns You Should be Aware of
lemiorhan
647
58k
BBQ
matthewcrist
80
8.8k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
658
120k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
13
1.5k
What's in a price? How to price your products and services
michaelherold
237
11k
Learning to Love Humans: Emotional Interface Design
aarron
266
39k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
5
1.5k
The Invisible Customer
myddelton
114
12k
Typedesign – Prime Four
hannesfritz
36
2.1k
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