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