Slide 1
Slide 1 text
/
122
Figma PHP
1
示
2
024
/
04
/
1 3
PHP
小田
@ttskch

1
#phpcon_odawara #boko
Slide 2
Slide 2 text
/
122

2
#phpcon_odawara
𝕏
🤝✨
Slide 3
Slide 3 text
/
122
PHP 13 Symfony 12
Kannade
toC
自

3
@ttskch
Slide 4
Slide 4 text
/
122

4
Slide 5
Slide 5 text
/
122
Figma PHP
1
示

5
Slide 6
Slide 6 text
/
122 手
1
. HTML/CSS PDF
2
. Excel LibreO
ff
i
ce PDF
3
.
用
手

6
🔖
Slide 7
Slide 7 text
/
122 手
1
. HTML/CSS PDF
2
. Excel LibreO
ff
i
ce PDF
3
.
用
手

7
🔖
Slide 8
Slide 8 text
/
122

8
10
PDF
力
Slide 9
Slide 9 text
/
122

9
10
PDF
力
HTML PDF
方 色
HTML 10 α
工
Slide 10
Slide 10 text
/
122

10
10
PDF
力
Slide 11
Slide 11 text
/
122

11
10
PDF
力
水
Slide 12
Slide 12 text
/
122

12 自
走
😇
水
Slide 13
Slide 13 text
/
122
PDF
力
HTML PDF
見 手 自
⾒
見
1
人 工
力

13
Slide 14
Slide 14 text
/
122 手
1
. HTML/CSS PDF
2
. Excel LibreO
ff
i
ce PDF
3
.
用
手

14
🔖
Slide 15
Slide 15 text
https://qiita.com/cognitom/items/d
39
d
5
f
1
9 054
c
8
c
8
fd
5 9
2
Slide 16
Slide 16 text
/
122
HTML/CSS
PDF OK
Chrome OK
😇
行

16
Slide 17
Slide 17 text
/
122
HTML/CSS
面
HTML/CSS
A
4一 手
自
🤢

17
Slide 18
Slide 18 text
/
122 一

18
Slide 19
Slide 19 text
HTML
Slide 20
Slide 20 text
HTML
rowspan colspan ⾒
td 🙄
Slide 21
Slide 21 text
/
122

21
見
Slide 22
Slide 22 text
/
122

22
見
人
Slide 23
Slide 23 text
/
122

23
https://alu.jp/series/ /crop/W
8
LJCePySOaAfpNuKrIb
Slide 24
Slide 24 text
/
122
1

24 言 日
Slide 25
Slide 25 text
/
122

25
HTML 😣
ʢγϯϓϧͳாථͳΒHTMLͰશવ͍͍ͱࢥ͍·͢ʣ
Slide 26
Slide 26 text
/
122 手
1
. HTML/CSS PDF
2
. Excel LibreO
ff i
ce PDF
3
.
用
手

26
🔖
Slide 27
Slide 27 text
/
122
HTML/CSS
大
Excel
🙌
小 示
🙌
文
Excel
方

27
Slide 28
Slide 28 text
/
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
Slide 29
Slide 29 text
/
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
Slide 30
Slide 30 text
/
122
Excel
行 高 ・ 小
方

30
Slide 31
Slide 31 text
No content
Slide 32
Slide 32 text
/
122

32
Excel
😣
Slide 33
Slide 33 text
/
122
Excel PDF
見 目
LibreO
ff i
ce
Mac Linux PDF
力 欠
力
誘
示

33
Slide 34
Slide 34 text
/
122

34
見 目 一
PDF
方
😣
Slide 35
Slide 35 text
/
122 手
1
. HTML/CSS PDF
2
. Excel LibreO
ff
i
ce PDF
3
.
用
手

35
🔖
Slide 36
Slide 36 text
/
122 自
用 用

36
Slide 37
Slide 37 text
/
122
SVF

37
https://www.wingarc.com/product/svf/index.html
Slide 38
Slide 38 text
/
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
月 金非
Slide 39
Slide 39 text
No content
Slide 40
Slide 40 text
/
122

40 用 高
🤦
ࠓճͷҊ݅தখاۀ͞ΜͷࣾγεςϜͩͬͨͷͰಛʹແཧ
Slide 41
Slide 41 text
/
122 月
1
月
1000 VPS
1 小

41
Slide 42
Slide 42 text
/
122 手
1
. HTML/CSS PDF
2
. Excel LibreO
ff
i
ce PDF
3
.
用
手

42
🔖
Slide 43
Slide 43 text
/
122

43
25
Slide 44
Slide 44 text
/
122
✅
✅
✅
見 目 一

44
Slide 45
Slide 45 text
/
122
✅
✅
✅
見 目 一

45
UI SVG
行
Slide 46
Slide 46 text
/
122 骨子

46
1
. Figma
2
.
入
% %
3
. SVG
4
. SVG
文
HTML
5
. CSS
6
. SVG
文
Slide 47
Slide 47 text
/
122 骨子

47
1
. Figma
2
.
入
% %
3
. SVG
4
. SVG
文
HTML
5
. CSS
6
. SVG
文
Slide 48
Slide 48 text
/
122
UI/UX
用
SVG
Figma

48
Slide 49
Slide 49 text
No content
Slide 50
Slide 50 text
No content
Slide 51
Slide 51 text
/
122
pdf
2
svg

51
$ brew install pdf2svg
$ pdf2svg طଘͷாථ.pdf طଘͷாථ.svg
PDF ⾒ pdf
2
svg Figma
.svg
生
Figma
面
D&D
Slide 52
Slide 52 text
/
122

52
一
🏎
Slide 53
Slide 53 text
/
122
SVG

53
https://zenn.dev/ttskch/articles/
1
f
157 2
cfd
2
e
37 5
文
力
文
id
力
用
Slide 54
Slide 54 text
No content
Slide 55
Slide 55 text
/
122 骨子

55
1
. Figma
2
.
入
% %
3
. SVG
4
. SVG
文
HTML
5
. CSS
6
. SVG
文
Slide 56
Slide 56 text
https://developer.mozilla.org/ja/docs/Web/SVG/Element/svg
Slide 57
Slide 57 text
https://developer.mozilla.org/ja/docs/Web/SVG/Element/svg
Slide 58
Slide 58 text
No content
Slide 59
Slide 59 text
HTML
見 目
Slide 60
Slide 60 text
/
122
ݟੵॻ
= file_get_contents('/path/to/ݟੵॻ.svg') ?>

60
Slide 61
Slide 61 text
No content
Slide 62
Slide 62 text
/
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
Slide 63
Slide 63 text
/
122
A
4 力
面 示 見 目
示
CSS

63
Slide 64
Slide 64 text
/
122
Figma
見 目 面 示・

64
Slide 65
Slide 65 text
/
122
Figma
見 目 面 示・

65
Slide 66
Slide 66 text
/
122 骨子

66
1
. Figma
2
.
入
% %
3
. SVG
4
. SVG
文
HTML
5
. CSS
6
. SVG
文
Slide 67
Slide 67 text
/
122
$svg = file_get_contents('/path/to/ݟੵॻ.svg');
$svg = str_replace('%ސ٬໊%', $customerName, $svg);

67
str_replace()
Slide 68
Slide 68 text
見
Slide 69
Slide 69 text
見
Slide 70
Slide 70 text
見
ͲͪΒ %ސ٬໊% ͷͭΓͳΜ͕ͩʁʁʁ
Slide 71
Slide 71 text
https://ja.wikipedia.org/wiki/
文
Slide 72
Slide 72 text
/
122
文

72
HTML
文
< <
<
文 言 文
文
Unicode
文
{16 }; {10 }; Unicode
Figma SVG
文
文
用
Slide 73
Slide 73 text
/
122
文

73
PHP html_entity_decode()
// จࣈࢀরͰهड़͞ΕͨจࣈྻΛUTF-8ͷจࣈྻʹม
echo html_entity_decode('খ田ݪ', encoding: 'UTF-8');
// ग़ྗ݁Ռ: খాݪ
UTF-
8
Slide 74
Slide 74 text
見
Slide 75
Slide 75 text
見
Μʁಉ͡ %ސ٬໊% ͳͷʹͳΜ͔2ύλʔϯ͋Δ͕ʁ
Slide 76
Slide 76 text
echo html_entity_decode('%顧客名%', encoding: 'UTF-8');
// ग़ྗ݁Ռ: %ސ٬໊%
🙆🙆🙆
Slide 77
Slide 77 text
echo html_entity_decode(
'%顧客å%',
encoding: 'UTF-8',
);
// ग़ྗ݁Ռ: %顧客å%
😱😱😱
Slide 78
Slide 78 text
文
文
255 9 3 ×
3文
UTF-
8 文
Slide 79
Slide 79 text
echo '%'.chr(233).chr(161).chr(167).chr(229).chr(174).chr(162).chr(229).chr(144).chr(141).'%';
// ग़ྗ݁Ռ:
Slide 80
Slide 80 text
echo '%'.chr(233).chr(161).chr(167).chr(229).chr(174).chr(162).chr(229).chr(144).chr(141).'%';
// ग़ྗ݁Ռ: %ސ٬໊%
😂 😂 😂
Slide 81
Slide 81 text
🤷
行
一
Figma
方
🙏
Slide 82
Slide 82 text
/
122 人
🙏
⾒
Unicode UTF-
8 文 方
Wikipedia
100 💪

82
Unicode UTF-
8
chr()
Slide 83
Slide 83 text
/
122

83
方
💪
Slide 84
Slide 84 text
/
122
// จࣈࢀরॻࣜͰॻ͔ΕͨUTF-8όΠτྻΛσίʔυ
$svg = preg_replace_callback(
'/(\d+);/', fn ($matches) => chr($matches[1]), $svg
);
// ௨ৗͷจࣈࢀরΛσίʔυ
$svg = html_entity_decode($svg, encoding: 'UTF-8');

84
Slide 85
Slide 85 text
No content
Slide 86
Slide 86 text
👍
Slide 87
Slide 87 text
/
122 文

87
%customerName%
一 面
日 見
用 日
⏳
Slide 88
Slide 88 text
一手
% %
id id=" " 🤦
id id="_ _"
Slide 89
Slide 89 text
/
122
// id ʹ͍ͭͯͷΈ % Λ _ ʹஔ
$svg = preg_replace('/id="%(.+)%"/', 'id="_$1_"', $svg);

89 一手
Slide 90
Slide 90 text
👍
Slide 91
Slide 91 text
/
122
$replacements = [
'%ސ٬໊%' => 'גࣜձࣾ΄͛΄͛',
'%ݟੵ%' => '2024/04/13()',
// :
// :
];
foreach ($replacements as $placeholder => $value) {
$svg = str_replace($placeholder, $value, $svg);
}

91
str_replace()
Slide 92
Slide 92 text
/
122
🙌

92
Slide 93
Slide 93 text
/
122
🙌

93
Slide 94
Slide 94 text
/
122
🙌

94
Slide 95
Slide 95 text
/
122
🙌

95 文
Slide 96
Slide 96 text
/
122
🙌

96
Slide 97
Slide 97 text
/
122
🙌

97
Slide 98
Slide 98 text
/
122

98
😓
Slide 99
Slide 99 text
/
122 自 小

99
https://zenn.dev/ttskch/articles/
1
f
157 2
cfd
2
e
37 5
SVG textLength
長 小 長
😓
長
⾒ textLength
文
Slide 100
Slide 100 text
/
122 ・

100
https://zenn.dev/ttskch/articles/
1
f
157 2
cfd
2
e
37 5
SVG text-anchor ( | | )
力
( | )
X
心
⾒
／
⾒
⾒ X
自
Slide 101
Slide 101 text
/
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"
Slide 102
Slide 102 text
/
122

102 行 一
Slide 103
Slide 103 text
/
122
一行
🙌
・
🙌

103
Slide 104
Slide 104 text
/
122
一行
🙌
・
🙌
行 自

104
Slide 105
Slide 105 text
/
122
自 小

105
https://zenn.dev/ttskch/articles/
1
f
157 2
cfd
2
e
37 5
SVG
行 自
行
1
.
行
2
.
高
font-size
小 行
3
. 1, 2
😓
Slide 106
Slide 106 text
/
122

106 行 一
Slide 107
Slide 107 text
/
122

107
🎉
Slide 108
Slide 108 text
🙏
https://zenn.dev/ttskch/articles/
1
f
1 5
7 2
cfd
2
e
375
Slide 109
Slide 109 text
/
122 手
1
. HTML/CSS PDF
2
. Excel LibreO
ff
i
ce PDF
3
.
用
手

109
🔖
Slide 110
Slide 110 text
/
122

110
一 用
🙆
Slide 111
Slide 111 text
/
122

111
一 用
🙆
用
npm
Slide 112
Slide 112 text
ttskch/svg-paper
https://github.com/ttskch/svg-paper
Slide 113
Slide 113 text
/
122
✅
✅
一行 自 小・ ・
✅
行 自 ・ 小
API 🙌
README
ttskch/svg-paper

113
Slide 114
Slide 114 text
/
122
Figma + svg-paper =

114
🥰
🥰
Slide 115
Slide 115 text
/
122
Figma + svg-paper =

115
🥰
🥰
DX
Slide 116
Slide 116 text
/
122

116
Slide 117
Slide 117 text
/
122

117
🌈
Slide 118
Slide 118 text
/
122 人

118
Slide 119
Slide 119 text
/
122 行
2
手
SVG
工 行

119
Slide 120
Slide 120 text
/
122
1 ⾒
2 ⾒
3 ⾒
3 Figma
行
💡

120
Slide 121
Slide 121 text
/
122

121
1 2 3
⾒
Slide 122
Slide 122 text
/
122

122
@ttskch
ʘThanks!ʗ
・
🫰