第3回フロントエンド勉強会 in 山陰で HTML帳票について発表した際の狭く浅い資料。資料中のサンプルコードは下記にある。 https://github.com/hidakatsuya/html-chohyo
HTMLாථୈ3ճϑϩϯτΤϯυษڧձ in দߐKatsuya Hidaka@hidakatsuya
View Slide
ாථϚϯΒ͘͠ ϑϩϯτΤϯυͬΆ͍ாථͷΛͯ͠Έ·͢
PDFாථ• αʔόʔαΠυ• ྫ͑ Ruby ͩͱ• Thinreports, Prawn• wkhtmltopdf, WickedPDF
HTMLாථ• ϑϩϯτΤϯυͷٕज़ͰாථΛ࡞͢Δ• ϒϥβͷҹػೳͰҹ͢Δ
ாථػೳͷཁ݅• ඞཁͳσβΠϯΛදݱͰ͖Δ• ਖ਼͘͠ҹͰ͖Δ• ҹΛίϯτϩʔϧͰ͖Δ• ༻ࢴαΠζɺ༨നͳͲ• ্ه͕ेͳϒϥβͰ࣮ݱͰ͖Δ
ඞཁͳσβΠϯΛදݱͰ͖Δ• HTML, CSS, JavaScript, ը૾(SVG) ͰͳΜͱͰͳΔ• 1pxະຬͷܩઢදݱͰ͖ͳ͍• ҹͰ͖ͳ͍
ਖ਼͘͠ҹͰ͖Δ• ϒϥβ/ڥʹΑͬͯද͕ࣔҟͳΔ߹͕͋Δ• ϑΥϯτपΓ WebϑΥϯτΛ͏ͱྑͦ͞͏• എܠσϑΥϧτͰҹ͞Εͳ͍• ϢʔβʹΑͬͯઃఆͷ༗ޮԽ͕ඞཁ• -webkit-print-color-adjust Ͱڧ੍తʹ༗ޮʹͰ͖Δ
ҹΛίϯτϩʔϧͰ͖Δ• ாථͷ༻ࢴαΠζͰͦͷ··ҹͰ͖Δʁ• Chrome ҹ࣌ʹ༻ࢴͷαΠζͰҹͰ͖ΔɻૉΒ͍͠• Firefox/Safari μϝɻϓϦϯλͷσϑΥϧτ༻ࢴʹͳΔͬΆ͍ɻIE/Edge Έͯͳ͍• ҹ࣌ʹ༨ܭͳใ͕ҹࣈ͞Εͳ͍ʁʢϔομʔͱ͔ʣ• Chrome/Firefox @page Ͱ margin:0 ʹ͢ΕOK• Safari μϝɻIE/Edge Έͯͳ͍
࣮ࡍʹΈͯΈ·͠ΐ͏͜ͷͱ͖༻ͨ͠ίʔυԼهʹஔ͍ͯ͋Γ·͢https://github.com/hidakatsuya/html-chohyo
cognitom/paper-css• Έ͜ͷϥΠϒϥϦͱ΄ͱΜͲಉͩ͡ͱࢥ͏ɻ͍ํ͍͍ͩͨಉ͡• ͋Β͔ͨ࡞Γऴ͑ͨͱ͜ΖͰ͜ΕΛݟ͚ͭͯઈͨ͠…• Έͳ͞Μͪ͜ΒΛ͍·͠ΐ͏ɻ͍ͦ͢͏
ͦͷଞͷݒ೦ࣄ߲• 1ϖʔδʹऩ·Βͳ͍߹ͷվϖʔδ• հͨ͠ํ๏ͰᷓΕͨ༰ҹ͞Εͳ͍• JavaScript Ͱߴ͞Λܭࢉͯ͠ sheet Λ͍͍ײ͡ʹ͢Δ... ͳͲͷ͕ඞཁ• ϔομʔ/ϑολʔɺϖʔδ൪߸ͷ࣮ݱ• ͳΜͱͰͳΔͱࢥ͏ɻ position: fixed ͱ͔͑Δ• ෳ༻ࢴαΠζͷࠞࡏ• Ͱ͖ͳ͍ɻҰ൪େ͖͍༻ࢴαΠζʹ߹͏ʁ• େྔϖʔδͷ߹ͷϨϯμϦϯάύϑΥʔϚϯε• ҹ͢Δʹ࣮ࡍʹϨϯμϦϯά͞Ε͍ͯͳ͍ͱ͍͚ͳ͍• ඦϖʔδͳͲͷ߹ɺϓϨϏϡʔͷ͕ඞཁʢεΫϩʔϧ࣌ҹ࣮ߦ࣌ͷϩʔυॲཧͱ͔ʣ
ࢀߟʹ͍ͨ͠Ζ͍Ζ• ͦΖͦΖਅ໘ʹɺ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/ (ඇެࣜຊޠ༁)
·ͱΊ• ͋Δఔͷ੍Λڐ༰Ͱ͖ΔͳΒे͑ͦ͏ͱ͜Ζ·Ͱདྷ͍ͯΔͱࢥ͏• Electron ΞϓϦͰϒϥβͷҧ͍ʹӨڹ͞Εͳ͍ͷͰྑ͍બࢶ͔͠Εͳ͍• ҹͰ͖Δؚ͔Ίͯະௐࠪ• ॳΊͯ CSS Paged Media ΛͪΌΜͱಡΜ͕ͩ໘ന͔ͬͨ https://drafts.csswg.org/css-page-3/ (ඇެࣜຊޠ༁)