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/ (ඇެࣜ೔ຊޠ༁)