HTML帳票 / Frontend Study Group in Sannin 3rd

第3回フロントエンド勉強会 in 山陰で HTML帳票について発表した際の狭く浅い資料。資料中のサンプルコードは下記にある。
https://github.com/hidakatsuya/html-chohyo

Transcript

1. HTMLாථ ୈ3ճϑϩϯτΤϯυษڧձ in দߐ Katsuya Hidaka @hidakatsuya
4. ாථϚϯΒ͘͠
 ϑϩϯτΤϯυͬΆ͍ ாථͷ࿩Λͯ͠Έ·͢
5. PDFாථ • αʔόʔαΠυ • ྫ͑͹ Ruby ͩͱ • Thinreports, Prawn • wkhtmltopdf, WickedPDF
6. HTMLாථ • ϑϩϯτΤϯυͷٕज़ͰாථΛ࡞੒͢Δ • ϒϥ΢βͷҹ࡮ػೳͰҹ࡮͢Δ
7. ாථػೳͷཁ݅ • ඞཁͳσβΠϯΛදݱͰ͖Δ • ਖ਼͘͠ҹ࡮Ͱ͖Δ • ҹ࡮ΛίϯτϩʔϧͰ͖Δ • ༻ࢴαΠζɺ༨നͳͲ • ্ه͕े෼ͳϒϥ΢βͰ࣮ݱͰ͖Δ
8. ඞཁͳσβΠϯΛදݱͰ͖Δ • HTML, CSS, JavaScript, ը૾(SVG) ͰͳΜͱͰ΋ͳΔ • 1pxະຬͷܩઢ͸දݱͰ͖ͳ͍ • ҹ࡮΋Ͱ͖ͳ͍
9. ਖ਼͘͠ҹ࡮Ͱ͖Δ • ϒϥ΢β/؀ڥʹΑͬͯද͕ࣔҟͳΔ৔߹͕͋Δ • ϑΥϯτपΓ͸ WebϑΥϯτΛ࢖͏ͱྑͦ͞͏ • എܠ͸σϑΥϧτͰҹ࡮͞Εͳ͍ • ϢʔβʹΑͬͯઃఆͷ༗ޮԽ͕ඞཁ • -webkit-print-color-adjust Ͱڧ੍తʹ༗ޮʹ͸Ͱ͖Δ
10. ҹ࡮ΛίϯτϩʔϧͰ͖Δ • ாථͷ༻ࢴαΠζͰͦͷ··ҹ࡮Ͱ͖Δʁ • Chrome ͸ҹ࡮࣌ʹ༻ࢴͷαΠζͰҹ࡮Ͱ͖Δɻૉ੖Β͍͠ • Firefox/Safari ͸μϝɻϓϦϯλͷσϑΥϧτ༻ࢴʹͳΔͬΆ ͍ɻIE/Edge ͸Έͯͳ͍ • ҹ࡮࣌ʹ༨ܭͳ৘ใ͕ҹࣈ͞Εͳ͍ʁʢϔομʔͱ͔ʣ • Chrome/Firefox ͸ @page Ͱ margin:0 ʹ͢Ε͹OK • Safari ͸μϝɻIE/Edge ͸Έͯͳ͍
11. ࣮ࡍʹΈͯΈ·͠ΐ͏ ͜ͷͱ͖࢖༻ͨ͠ίʔυ͸Լهʹஔ͍ͯ͋Γ·͢ https://github.com/hidakatsuya/html-chohyo
12. cognitom/paper-css • ࢓૊Έ͸͜ͷϥΠϒϥϦͱ΄ ͱΜͲಉͩ͡ͱࢥ͏ɻ࢖͍ํ ΋͍͍ͩͨಉ͡ • ͋Β͔ͨ࡞Γऴ͑ͨͱ͜ΖͰ ͜ΕΛݟ͚ͭͯઈ๬ͨ͠… • Έͳ͞Μ͸ͪ͜ΒΛ࢖͍·͠ΐ ͏ɻ࢖͍΍ͦ͢͏
13. ͦͷଞͷݒ೦ࣄ߲ • 1ϖʔδʹऩ·Βͳ͍৔߹ͷվϖʔδ • ঺հͨ͠ํ๏Ͱ͸ᷓΕͨ಺༰͸ҹ࡮͞Εͳ͍ • JavaScript Ͱߴ͞Λܭࢉͯ͠ sheet Λ͍͍ײ͡ʹ͢Δ... ͳͲͷ޻෉͕ඞཁ • ϔομʔ/ϑολʔɺϖʔδ൪߸ͷ࣮ݱ • ͳΜͱͰ΋ͳΔͱࢥ͏ɻ position: fixed ͱ͔΋࢖͑Δ • ෳ਺༻ࢴαΠζͷࠞࡏ • Ͱ͖ͳ͍ɻҰ൪େ͖͍༻ࢴαΠζʹ߹͏ʁ • େྔϖʔδͷ৔߹ͷϨϯμϦϯάύϑΥʔϚϯε • ҹ࡮͢Δʹ͸࣮ࡍʹϨϯμϦϯά͞Ε͍ͯͳ͍ͱ͍͚ͳ͍ • ਺ඦϖʔδͳͲͷ৔߹ɺϓϨϏϡʔͷ޻෉͕ඞཁʢεΫϩʔϧ࣌΍ҹ࡮࣮ߦ࣌ͷϩʔυॲཧͱ͔ʣ
14. ࢀߟʹ͍ͨ͠Ζ͍Ζ • ͦΖͦΖਅ໘໨ʹɺHTMLͰாථΛඳ͘࿩Λ͠Α͏͔/ Qiita
 https://qiita.com/cognitom/items/d39d5f19054c8c8fd592 • paper-css/Github
 https://github.com/cognitom/paper-css • Paged Media/w3c
 https://drafts.csswg.org/css-page-3/ (ඇެࣜ೔ຊޠ༁)
15. ·ͱΊ • ͋Δఔ౓ͷ੍໿Λڐ༰Ͱ͖ΔͳΒे෼࢖͑ͦ͏ͱ͜Ζ·Ͱ དྷ͍ͯΔͱࢥ͏ • Electron ΞϓϦͰ͸ϒϥ΢βͷҧ͍ʹӨڹ͞Εͳ͍ͷͰྑ ͍બ୒ࢶ͔΋͠Εͳ͍ • ҹ࡮Ͱ͖Δ͔΋ؚΊͯະௐࠪ • ॳΊͯ CSS Paged Media ΛͪΌΜͱಡΜ͕ͩ໘ന͔ͬͨ
 https://drafts.csswg.org/css-page-3/ (ඇެࣜ೔ຊޠ༁)