FigmaとPHPで作る1ミリたりとも表示崩れしない最強の帳票印刷ソリューション

PHPカンファレンス小田原2024 の発表資料です。
https://phpcon-odawara.connpass.com/event/296492/
https://fortee.jp/phpconodawara-2024/proposal/7c57d5ca-213a-4d7a-aaf0-26ddc44897f0

登壇時の様子がYouTubeに上がっていますのでよろしければあわせてご覧ください。
https://www.youtube.com/watch?v=tIxd8C5IDLQ

Transcript

1. / 122 Figma PHP 1 示 2 024 / 04 / 1 3 PHP 小田 @ttskch  1 #phpcon_odawara #boko
2. / 122  2 #phpcon_odawara 𝕏 🤝✨
3. / 122 PHP 13 Symfony 12 Kannade toC 自  3 @ttskch
4. / 122  4
5. / 122 Figma PHP 1 示  5
6. / 122 手 1 . HTML/CSS PDF 2 . Excel LibreO ff i ce PDF 3 . 用 手  6 🔖
7. / 122 手 1 . HTML/CSS PDF 2 . Excel LibreO ff i ce PDF 3 . 用 手  7 🔖
8. / 122  8 10 PDF 力
9. / 122  9 10 PDF 力 HTML PDF 方 色 HTML 10 α 工
10. / 122  10 10 PDF 力
11. / 122  11 10 PDF 力 水
12. / 122  12 自 走 😇 水
13. / 122 PDF 力 HTML PDF 見 手 自 ⾒ 見 1 人 工 力  13
14. / 122 手 1 . HTML/CSS PDF 2 . Excel LibreO ff i ce PDF 3 . 用 手  14 🔖
15. https://qiita.com/cognitom/items/d 39 d 5 f 1 9 054 c 8 c 8 fd 5 9 2
16. / 122 HTML/CSS PDF OK Chrome OK 😇 行  16
17. / 122 HTML/CSS 面 HTML/CSS A 4一 手 自 🤢  17
18. / 122 一  18
19. <table> <tr> <td colspan="4"></td> <th></th> <td></td> </tr> <tr> <th rowspan="3"></th> <td colspan="3"></td> <td colspan="2"></td> </tr> <tr> <td rowspan="2" colspan="3"></td> </tr> <tr> <td colspan="2"></td> </tr> <tr> <th rowspan="5"></th> <td colspan="2"></td> <td rowspan="4"></td> <th></th> <td></td> </tr> <tr> <td rowspan="3" colspan="2"></td> <th></th> <td></td> </tr> <tr> <th></th> <td></td> </tr> <tr> <th></th> <td></td> </tr> <tr> <td></td> <td colspan="2"></td> <th></th> <td></td> </tr> </table> HTML
20. <table> <tr> <td colspan="4"></td> <th></th> <td></td> </tr> <tr> <th rowspan="3"></th> <td colspan="3"></td> <td colspan="2"></td> </tr> <tr> <td rowspan="2" colspan="3"></td> </tr> <tr> <td colspan="2"></td> </tr> <tr> <th rowspan="5"></th> <td colspan="2"></td> <td rowspan="4"></td> <th></th> <td></td> </tr> <tr> <td rowspan="3" colspan="2"></td> <th></th> <td></td> </tr> <tr> <th></th> <td></td> </tr> <tr> <th></th> <td></td> </tr> <tr> <td></td> <td colspan="2"></td> <th></th> <td></td> </tr> </table> HTML rowspan colspan ⾒ td 🙄
21. / 122  21 <table> <tr> <td colspan="4"></td> <th></th> <td></td> </tr> <tr> <th rowspan="3"></th> <td colspan="3"></td> <td colspan="2"></td> </tr> <tr> <td rowspan="2" colspan="3"></td> </tr> <tr> <td colspan="2"></td> </tr> <tr> <th rowspan="5"></th> <td colspan="2"></td> <td rowspan="4"></td> <th></th> <td></td> </tr> <tr> <td rowspan="3" colspan="2"></td> <th></th> <td></td> </tr> <tr> <th></th> <td></td> </tr> <tr> <th></th> <td></td> </tr> <tr> <td></td> <td colspan="2"></td> <th></th> <td></td> </tr> </table> 見
22. / 122  22 <table> <tr> <td colspan="4"></td> <th></th> <td></td> </tr> <tr> <th rowspan="3"></th> <td colspan="3"></td> <td colspan="2"></td> </tr> <tr> <td rowspan="2" colspan="3"></td> </tr> <tr> <td colspan="2"></td> </tr> <tr> <th rowspan="5"></th> <td colspan="2"></td> <td rowspan="4"></td> <th></th> <td></td> </tr> <tr> <td rowspan="3" colspan="2"></td> <th></th> <td></td> </tr> <tr> <th></th> <td></td> </tr> <tr> <th></th> <td></td> </tr> <tr> <td></td> <td colspan="2"></td> <th></th> <td></td> </tr> </table> 見 人
23. / 122  23 https://alu.jp/series/ /crop/W 8 LJCePySOaAfpNuKrIb
24. / 122 <table> <tr> <td colspan="4"></td> <th></th> <td></td> </tr> <tr> <th rowspan="3"></th> <td colspan="3"></td> <td colspan="2"></td> </tr> <tr> <td rowspan="2" colspan="3"></td> </tr> <tr> <td colspan="2"></td> </tr> <tr> <th rowspan="5"></th> <td colspan="2"></td> <td rowspan="4"></td> <th></th> <td></td> </tr> <tr> <td rowspan="3" colspan="2"></td> <th></th> <td></td> </tr> <tr> <th></th> <td></td> </tr> <tr> <th></th> <td></td> </tr> <tr> <td></td> <td colspan="2"></td> <th></th> <td></td> </tr> </table> 1  24 言 日
25. / 122  25 HTML 😣 ʢγϯϓϧͳாථͳΒHTMLͰશવ͍͍ͱࢥ͍·͢ʣ
26. / 122 手 1 . HTML/CSS PDF 2 . Excel LibreO ff i ce PDF 3 . 用 手  26 🔖
27. / 122 HTML/CSS 大 Excel 🙌 小 示 🙌 文 Excel 方  27
28. / 122 LibreO ffi ce Microsoft O ff i ce OSS CLI Excel PDF PDF  28 https://qiita.com/hirohiro 77 /items/ 942 eb 46 1 e 8 f 47 27 e 4 b 38
29. / 122 LibreO ffi ce Microsoft O ff i ce OSS CLI Excel PDF PDF  29 https://qiita.com/hirohiro 77 /items/ 942 eb 46 1 e 8 f 47 27 e 4 b 38
30. / 122 Excel 行 高 ・ 小 方  30
32. / 122  32 Excel 😣
33. / 122 Excel PDF 見 目 LibreO ff i ce Mac Linux PDF 力 欠 力 誘 示  33
34. / 122  34 見 目 一 PDF 方 😣
35. / 122 手 1 . HTML/CSS PDF 2 . Excel LibreO ff i ce PDF 3 . 用 手  35 🔖
36. / 122 自 用 用  36
37. / 122 SVF  37 https://www.wingarc.com/product/svf/index.html
38. / 122 SVF  38 https://web.archive.org/web/ 20 21120 7 2 1 48 06 /https://www.wingarc.com/cloud/svfc/price.html 2021 11 月 金非
40. / 122  40 用 高 🤦 ࠓճͷҊ݅͸தখاۀ͞Μͷࣾ಺γεςϜͩͬͨͷͰಛʹແཧ
41. / 122 月 1 月 1000 VPS 1 小  41
42. / 122 手 1 . HTML/CSS PDF 2 . Excel LibreO ff i ce PDF 3 . 用 手  42 🔖
43. / 122  43 25
44. / 122 ✅ ✅ ✅ 見 目 一  44
45. / 122 ✅ ✅ ✅ 見 目 一  45 UI SVG 行
46. / 122 骨子  46 1 . Figma 2 . 入 % % 3 . SVG 4 . SVG 文 HTML <svg> 5 . CSS 6 . SVG 文
47. / 122 骨子  47 1 . Figma 2 . 入 % % 3 . SVG 4 . SVG 文 HTML <svg> 5 . CSS 6 . SVG 文
48. / 122 UI/UX 用 SVG Figma  48
51. / 122 pdf 2 svg  51 $ brew install pdf2svg $ pdf2svg طଘͷாථ.pdf طଘͷாථ.svg PDF ⾒ pdf 2 svg Figma .svg 生 Figma 面 D&D
52. / 122  52 一 🏎
53. / 122 SVG  53 https://zenn.dev/ttskch/articles/ 1 f 157 2 cfd 2 e 37 5 文 <path> <text> 力 文 <text> id 力 用
55. / 122 骨子  55 1 . Figma 2 . 入 % % 3 . SVG 4 . SVG 文 HTML <svg> 5 . CSS 6 . SVG 文
56. https://developer.mozilla.org/ja/docs/Web/SVG/Element/svg <svg>
57. https://developer.mozilla.org/ja/docs/Web/SVG/Element/svg <svg>
59. HTML 見 目
60. / 122 <!-- index.php --> <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>ݟੵॻ</title> </head> <body> <?= file_get_contents('/path/to/ݟੵॻ.svg') ?> </body> </html>  60
62. / 122  62 CSS * { margin: 0; padding: 0; user-select: none; } body { width: 210mm; color-adjust: exact; svg { width: 210mm; height: 297mm; page-break-after: always; } } @page { size: A4 portrait; margin: 0; } @media screen { body { background: #dbdce0; margin: 0 auto; svg { background: #fff; box-shadow: 0 .5mm 2mm rgba(0,0,0,.3); margin-top: 5mm; } } } https://zenn.dev/ttskch/articles/ 1 f 157 2 cfd 2 e 37 5
63. / 122 A 4 力 面 示 見 目 示 CSS  63
64. / 122 Figma 見 目 面 示・  64
65. / 122 Figma 見 目 面 示・  65
66. / 122 骨子  66 1 . Figma 2 . 入 % % 3 . SVG 4 . SVG 文 HTML <svg> 5 . CSS 6 . SVG 文
67. / 122 $svg = file_get_contents('/path/to/ݟੵॻ.svg'); $svg = str_replace('%ސ٬໊%', $customerName, $svg);  67 str_replace()
68. 見
69. 見
70. 見 ͲͪΒ΋ %ސ٬໊% ͷͭ΋ΓͳΜ͕ͩʁʁʁ
71. https://ja.wikipedia.org/wiki/ 文
72. / 122 文  72 HTML 文 < &lt; &lt; 文 言 文 文 Unicode 文 &#x{16 }; &#{10 }; Unicode Figma SVG 文 文 用
73. / 122 文  73 PHP html_entity_decode() // จࣈࢀরͰهड़͞ΕͨจࣈྻΛUTF-8ͷจࣈྻʹม׵ echo html_entity_decode('খ&#x7530;ݪ', encoding: 'UTF-8'); // ग़ྗ݁Ռ: খాݪ UTF- 8
74. 見
75. 見 Μʁಉ͡ %ސ٬໊% ͳͷʹͳΜ͔2ύλʔϯ͋Δ͕ʁ
76. echo html_entity_decode('%&#x9867;&#x5ba2;&#x540d;%', encoding: 'UTF-8'); // ग़ྗ݁Ռ: %ސ٬໊% 🙆🙆🙆
77. echo html_entity_decode( '%&#233;&#161;&#167;&#229;&#174;&#162;&#229;&#144;&#141;%', encoding: 'UTF-8', ); // ग़ྗ݁Ռ: %顧客å&#144;&#141;% 😱😱😱
78. 文 文 255 9 3 × 3文 UTF- 8 文
79. echo '%'.chr(233).chr(161).chr(167).chr(229).chr(174).chr(162).chr(229).chr(144).chr(141).'%'; // ग़ྗ݁Ռ:
80. echo '%'.chr(233).chr(161).chr(167).chr(229).chr(174).chr(162).chr(229).chr(144).chr(141).'%'; // ग़ྗ݁Ռ: %ސ٬໊% 😂 😂 😂
81. 🤷 行 一 Figma 方 🙏
82. / 122 人 🙏 ⾒ Unicode UTF- 8 文 方 Wikipedia 100 💪  82 Unicode UTF- 8 chr()
83. / 122  83 方 💪
84. / 122 // จࣈࢀরॻࣜͰॻ͔ΕͨUTF-8όΠτྻΛσίʔυ $svg = preg_replace_callback( '/&#(\d+);/', fn ($matches) => chr($matches[1]), $svg ); // ௨ৗͷจࣈࢀরΛσίʔυ $svg = html_entity_decode($svg, encoding: 'UTF-8');  84
86. 👍
87. / 122 文  87 %customerName% 一 面 日 見 用 日 ⏳
88. 一手 % % id id=" " 🤦 id id="_ _"
89. / 122 // id ʹ͍ͭͯͷΈ % Λ _ ʹஔ׵ $svg = preg_replace('/id="%(.+)%"/', 'id="_$1_"', $svg);  89 一手
90. 👍
91. / 122 $replacements = [ '%ސ٬໊%' => 'גࣜձࣾ΄͛΄͛', '%ݟੵ೔%' => '2024/04/13(౔)', // : // : ]; foreach ($replacements as $placeholder => $value) { $svg = str_replace($placeholder, $value, $svg); }  91 str_replace()
92. / 122 🙌  92
93. / 122 🙌  93
94. / 122 🙌  94
95. / 122 🙌  95 文
96. / 122 🙌  96
97. / 122 🙌  97
98. / 122  98 😓
99. / 122 自 小  99 https://zenn.dev/ttskch/articles/ 1 f 157 2 cfd 2 e 37 5 SVG <text> textLength 長 小 長 😓 長 ⾒ textLength 文
100. / 122 ・  100 https://zenn.dev/ttskch/articles/ 1 f 157 2 cfd 2 e 37 5 SVG <text> text-anchor ( | | ) 力 ( | ) <text> X 心 ⾒ ／ ⾒ ⾒ X 自
101. / 122 ・  101 https://zenn.dev/ttskch/articles/ 1 f 157 2 cfd 2 e 37 5 text-anchor ໌ࡉֹۚ ςΩετςΩετςΩετ X ໌ࡉֹۚ ςΩετςΩετςΩετ X text-anchor="end" ໌ࡉֹۚ ςΩετςΩετςΩετ X ໌ࡉֹۚ ςΩετςΩετςΩετ X ໌ࡉֹۚ ςΩετςΩετςΩετ X text-anchor="end"
102. / 122  102 行 一
103. / 122 一行 🙌 ・ 🙌  103
104. / 122 一行 🙌 ・ 🙌 行 自  104
105. / 122 自 小  105 https://zenn.dev/ttskch/articles/ 1 f 157 2 cfd 2 e 37 5 SVG <text> 行 自 行 1 . 行 2 . 高 font-size 小 行 3 . 1, 2 😓
106. / 122  106 行 一
107. / 122  107 🎉
108. 🙏 https://zenn.dev/ttskch/articles/ 1 f 1 5 7 2 cfd 2 e 375
109. / 122 手 1 . HTML/CSS PDF 2 . Excel LibreO ff i ce PDF 3 . 用 手  109 🔖
110. / 122  110 一 用 🙆
111. / 122  111 一 用 🙆 用 npm
112. ttskch/svg-paper https://github.com/ttskch/svg-paper
113. / 122 ✅ ✅ 一行 自 小・ ・ ✅ 行 自 ・ 小 API 🙌 README ttskch/svg-paper  113
114. / 122 Figma + svg-paper =  114 🥰 🥰
115. / 122 Figma + svg-paper =  115 🥰 🥰 DX
116. / 122  116
117. / 122  117 🌈
118. / 122 人  118
119. / 122 行 2 手 SVG 工 行  119
120. / 122 1 ⾒ 2 ⾒ 3 ⾒ 3 Figma 行 💡  120
121. / 122  121 1 2 3 ⾒
122. / 122  122 @ttskch ʘThanks!ʗ ・ 🫰