/ 122 Figma PHP 1 示 2 024 / 04
/ 1 3 PHP 小田 @ttskch  1 #phpcon_odawara #boko
/ 122  2 #phpcon_odawara 𝕏 🤝✨
/ 122 PHP 13 Symfony 12 Kannade toC 自 
3 @ttskch
/ 122  4
/ 122 Figma PHP 1 示  5
/ 122 手 1 . HTML/CSS PDF 2 . Excel
LibreO ff i ce PDF 3 . 用 手  6 🔖
/ 122 手 1 . HTML/CSS PDF 2 . Excel
LibreO ff i ce PDF 3 . 用 手  7 🔖
/ 122  8 10 PDF 力
/ 122  9 10 PDF 力 HTML PDF 方
色 HTML 10 α 工
/ 122  10 10 PDF 力
/ 122  11 10 PDF 力 水
/ 122  12 自 走 😇 水
/ 122 PDF 力 HTML PDF 見 手 自 ⾒
見 1 人 工 力  13
/ 122 手 1 . HTML/CSS PDF 2 . Excel
LibreO ff i ce PDF 3 . 用 手  14 🔖
https://qiita.com/cognitom/items/d 39 d 5 f 1 9 054 c 8
c 8 fd 5 9 2
/ 122 HTML/CSS PDF OK Chrome OK 😇 行 
16
/ 122 HTML/CSS 面 HTML/CSS A 4一 手 自 🤢
 17
/ 122 一  18
<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
<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 🙄
/ 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> 見
/ 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> 見 人
/ 122  23 https://alu.jp/series/ /crop/W 8 LJCePySOaAfpNuKrIb
/ 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 言 日
/ 122  25 HTML 😣 ʢγϯϓϧͳாථͳΒHTMLͰશવ͍͍ͱࢥ͍·͢ʣ
/ 122 手 1 . HTML/CSS PDF 2 . Excel
LibreO ff i ce PDF 3 . 用 手  26 🔖
/ 122 HTML/CSS 大 Excel 🙌 小 示 🙌 文
Excel 方  27
/ 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
/ 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
/ 122 Excel 行 高 ・ 小 方  30
None
/ 122  32 Excel 😣
/ 122 Excel PDF 見 目 LibreO ff i ce
Mac Linux PDF 力 欠 力 誘 示  33
/ 122  34 見 目 一 PDF 方 😣
/ 122 手 1 . HTML/CSS PDF 2 . Excel
LibreO ff i ce PDF 3 . 用 手  35 🔖
/ 122 自 用 用  36
/ 122 SVF  37 https://www.wingarc.com/product/svf/index.html
/ 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 月 金非
None
/ 122  40 用 高 🤦 ࠓճͷҊ݅தখاۀ͞ΜͷࣾγεςϜͩͬͨͷͰಛʹແཧ
/ 122 月 1 月 1000 VPS 1 小 
41
/ 122 手 1 . HTML/CSS PDF 2 . Excel
LibreO ff i ce PDF 3 . 用 手  42 🔖
/ 122  43 25
/ 122 ✅ ✅ ✅ 見 目 一  44
/ 122 ✅ ✅ ✅ 見 目 一  45
UI SVG 行
/ 122 骨子  46 1 . Figma 2 .
入 % % 3 . SVG 4 . SVG 文 HTML <svg> 5 . CSS 6 . SVG 文
/ 122 骨子  47 1 . Figma 2 .
入 % % 3 . SVG 4 . SVG 文 HTML <svg> 5 . CSS 6 . SVG 文
/ 122 UI/UX 用 SVG Figma  48
None
None
/ 122 pdf 2 svg  51 $ brew install
pdf2svg $ pdf2svg طଘͷாථ.pdf طଘͷாථ.svg PDF ⾒ pdf 2 svg Figma .svg 生 Figma 面 D&D
/ 122  52 一 🏎
/ 122 SVG  53 https://zenn.dev/ttskch/articles/ 1 f 157 2
cfd 2 e 37 5 文 <path> <text> 力 文 <text> id 力 用
None
/ 122 骨子  55 1 . Figma 2 .
入 % % 3 . SVG 4 . SVG 文 HTML <svg> 5 . CSS 6 . SVG 文
https://developer.mozilla.org/ja/docs/Web/SVG/Element/svg <svg>
https://developer.mozilla.org/ja/docs/Web/SVG/Element/svg <svg>
None
HTML 見 目
/ 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
None
/ 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
/ 122 A 4 力 面 示 見 目 示
CSS  63
/ 122 Figma 見 目 面 示・  64
/ 122 Figma 見 目 面 示・  65
/ 122 骨子  66 1 . Figma 2 .
入 % % 3 . SVG 4 . SVG 文 HTML <svg> 5 . CSS 6 . SVG 文
/ 122 $svg = file_get_contents('/path/to/ݟੵॻ.svg'); $svg = str_replace('%ސ٬໊%', $customerName, $svg);
 67 str_replace()
見
見
見 ͲͪΒ %ސ٬໊% ͷͭΓͳΜ͕ͩʁʁʁ
https://ja.wikipedia.org/wiki/ 文
/ 122 文  72 HTML 文 < < <
文 言 文 文 Unicode 文 &#x{16 }; &#{10 }; Unicode Figma SVG 文 文 用
/ 122 文  73 PHP html_entity_decode() // จࣈࢀরͰهड़͞ΕͨจࣈྻΛUTF-8ͷจࣈྻʹม echo
html_entity_decode('খ田ݪ', encoding: 'UTF-8'); // ग़ྗ݁Ռ: খాݪ UTF- 8
見
見 Μʁಉ͡ %ސ٬໊% ͳͷʹͳΜ͔2ύλʔϯ͋Δ͕ʁ
echo html_entity_decode('%顧客名%', encoding: 'UTF-8'); // ग़ྗ݁Ռ: %ސ٬໊% 🙆🙆🙆
echo html_entity_decode( '%顧客å%', encoding: 'UTF-8', ); // ग़ྗ݁Ռ: %顧客å% 😱😱😱
文 文 255 9 3 × 3文 UTF- 8 文
echo '%'.chr(233).chr(161).chr(167).chr(229).chr(174).chr(162).chr(229).chr(144).chr(141).'%'; // ग़ྗ݁Ռ:
echo '%'.chr(233).chr(161).chr(167).chr(229).chr(174).chr(162).chr(229).chr(144).chr(141).'%'; // ग़ྗ݁Ռ: %ސ٬໊% 😂 😂 😂
🤷 行 一 Figma 方 🙏
/ 122 人 🙏 ⾒ Unicode UTF- 8 文 方
Wikipedia 100 💪  82 Unicode UTF- 8 chr()
/ 122  83 方 💪
/ 122 // จࣈࢀরॻࣜͰॻ͔ΕͨUTF-8όΠτྻΛσίʔυ $svg = preg_replace_callback( '/(\d+);/', fn ($matches)
=> chr($matches[1]), $svg ); // ௨ৗͷจࣈࢀরΛσίʔυ $svg = html_entity_decode($svg, encoding: 'UTF-8');  84
None
👍
/ 122 文  87 %customerName% 一 面 日 見
用 日 ⏳
一手 % % id id=" " 🤦 id id="_ _"
/ 122 // id ʹ͍ͭͯͷΈ % Λ _ ʹஔ $svg
= preg_replace('/id="%(.+)%"/', 'id="_$1_"', $svg);  89 一手
👍
/ 122 $replacements = [ '%ސ٬໊%' => 'גࣜձࣾ΄͛΄͛', '%ݟੵ%' =>
'2024/04/13()', // : // : ]; foreach ($replacements as $placeholder => $value) { $svg = str_replace($placeholder, $value, $svg); }  91 str_replace()
/ 122 🙌  92
/ 122 🙌  93
/ 122 🙌  94
/ 122 🙌  95 文
/ 122 🙌  96
/ 122 🙌  97
/ 122  98 😓
/ 122 自 小  99 https://zenn.dev/ttskch/articles/ 1 f 157
2 cfd 2 e 37 5 SVG <text> textLength 長 小 長 😓 長 ⾒ textLength 文
/ 122 ・  100 https://zenn.dev/ttskch/articles/ 1 f 157 2
cfd 2 e 37 5 SVG <text> text-anchor ( | | ) 力 ( | ) <text> X 心 ⾒ / ⾒ ⾒ X 自
/ 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"
/ 122  102 行 一
/ 122 一行 🙌 ・ 🙌  103
/ 122 一行 🙌 ・ 🙌 行 自  104
/ 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 😓
/ 122  106 行 一
/ 122  107 🎉
🙏 https://zenn.dev/ttskch/articles/ 1 f 1 5 7 2 cfd 2
e 375
/ 122 手 1 . HTML/CSS PDF 2 . Excel
LibreO ff i ce PDF 3 . 用 手  109 🔖
/ 122  110 一 用 🙆
/ 122  111 一 用 🙆 用 npm
ttskch/svg-paper https://github.com/ttskch/svg-paper
/ 122 ✅ ✅ 一行 自 小・ ・ ✅ 行
自 ・ 小 API 🙌 README ttskch/svg-paper  113
/ 122 Figma + svg-paper =  114 🥰 🥰
/ 122 Figma + svg-paper =  115 🥰 🥰
DX
/ 122  116
/ 122  117 🌈
/ 122 人  118
/ 122 行 2 手 SVG 工 行  119
/ 122 1 ⾒ 2 ⾒ 3 ⾒ 3 Figma
行 💡  120