Skip to content

Commit 4190c9d

Browse files
su-usu-u
committed
Add: 画像のプリセット機能を追加
1 parent a015349 commit 4190c9d

4 files changed

Lines changed: 197 additions & 35 deletions

File tree

‎src/app/image_generator/ImageGenerator.tsx‎

Lines changed: 22 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -55,9 +55,11 @@ export const ImageGenerator: FC = () => {
5555
<Panel bordered header={<PanelHeader title="プリセット" />}>
5656
<FormRow label="サイズ">
5757
<Select
58-
style={{ width: 250 }}
58+
style={{ width: 400 }}
5959
options={PRESET_SIZE_OPTIONS}
6060
onSelect={onSelectPreset}
61+
listHeight={1024}
62+
showSearch
6163
/>
6264
</FormRow>
6365
<Button type="primary" onClick={onClickGenerate}>
@@ -69,7 +71,7 @@ export const ImageGenerator: FC = () => {
6971
</Col>
7072
<Col xs={24} md={12}>
7173
<Panel bordered header={<PanelHeader title="生成画像" />}>
72-
<img src={src} width="100%" loading="lazy" alt="生成画像" />
74+
<img src={src} width="100%" loading="lazy" alt="" />
7375
</Panel>
7476
</Col>
7577
</Row>
@@ -82,21 +84,33 @@ export const ImageGenerator: FC = () => {
8284
const CommonForm: FC<{ control: any }> = ({ control }) => {
8385
return (
8486
<>
85-
<FormRow label="高さ">
87+
<FormRow label="幅">
8688
<Controller
8789
render={({ field }) => (
88-
<InputNumber {...field} style={{ width }} min={SIZE_LIMIT.min} max={SIZE_LIMIT.max} />
90+
<InputNumber
91+
{...field}
92+
style={{ width }}
93+
min={SIZE_LIMIT.min}
94+
max={SIZE_LIMIT.max}
95+
defaultValue={DEFAULT_VALUES.wight}
96+
/>
8997
)}
90-
name="height"
98+
name="wight"
9199
control={control}
92100
/>
93101
</FormRow>
94-
<FormRow label="幅">
102+
<FormRow label="高さ">
95103
<Controller
96104
render={({ field }) => (
97-
<InputNumber {...field} style={{ width }} min={SIZE_LIMIT.min} max={SIZE_LIMIT.max} />
105+
<InputNumber
106+
{...field}
107+
style={{ width }}
108+
min={SIZE_LIMIT.min}
109+
max={SIZE_LIMIT.max}
110+
defaultValue={DEFAULT_VALUES.height}
111+
/>
98112
)}
99-
name="wight"
113+
name="height"
100114
control={control}
101115
/>
102116
</FormRow>

‎src/app/image_generator/presetSize.ts‎

Lines changed: 164 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,171 @@
1-
export const PRESET_SIZE = [
1+
// 参考
2+
// https://www.comnico.jp/we-love-social/social-media-image-sizes-guide
3+
export const PRESET_SIZES = [
24
{
3-
label: '100x100',
4-
value: {
5-
width: 100,
6-
height: 100,
7-
},
5+
label: '基本サイズ',
6+
options: [
7+
{
8+
label: '100x100',
9+
value: {
10+
width: 100,
11+
height: 100,
12+
},
13+
},
14+
{
15+
label: '256x256',
16+
value: {
17+
width: 256,
18+
height: 256,
19+
},
20+
},
21+
],
822
},
923
{
10-
label: '256x256',
11-
value: {
12-
width: 256,
13-
height: 256,
14-
},
24+
label: 'X（Twitter）',
25+
options: [
26+
{
27+
label: 'プロフィールアイコン画像 400×400',
28+
value: {
29+
width: 400,
30+
height: 400,
31+
},
32+
},
33+
{
34+
label: '投稿画像 900×1200',
35+
value: {
36+
width: 900,
37+
height: 1200,
38+
},
39+
},
40+
{
41+
label: '投稿画像 1200×675',
42+
value: {
43+
width: 1200,
44+
height: 675,
45+
},
46+
},
47+
{
48+
label: '投稿画像 1200×1200',
49+
value: {
50+
width: 1200,
51+
height: 1200,
52+
},
53+
},
54+
{
55+
label: '投稿画像 1200×1350',
56+
value: {
57+
width: 1200,
58+
height: 1350,
59+
},
60+
},
61+
{
62+
label: ' ヘッダー画像 1500×500',
63+
value: {
64+
width: 1500,
65+
height: 500,
66+
},
67+
},
68+
],
1569
},
16-
] as const satisfies {
17-
label: string;
18-
value: {
19-
width: number;
20-
height: number;
21-
};
22-
}[];
70+
{
71+
label: 'Instagram',
72+
options: [
73+
{
74+
label: 'アイコン・プロフィール画像 320×320',
75+
value: {
76+
width: 320,
77+
height: 320,
78+
},
79+
},
80+
{
81+
label: 'ハイライトアイコン画像 320×320',
82+
value: {
83+
width: 320,
84+
height: 320,
85+
},
86+
},
87+
{
88+
label: 'フィード投稿(1:1) 1080×1080',
89+
value: {
90+
width: 1080,
91+
height: 1080,
92+
},
93+
},
94+
{
95+
label: 'ストーリーズ・リール 1080×1920',
96+
value: {
97+
width: 1080,
98+
height: 1920,
99+
},
100+
},
101+
],
102+
},
103+
{
104+
label: 'Facebook',
105+
options: [
106+
{
107+
label: 'プロフィールアイコン画像 320x320',
108+
value: {
109+
width: 320,
110+
height: 320,
111+
},
112+
},
113+
{
114+
label: 'プロフィールアイコン画像 960x960',
115+
value: {
116+
width: 960,
117+
height: 960,
118+
},
119+
},
120+
{
121+
label: 'Facebookカバー画像 851×315',
122+
value: {
123+
width: 851,
124+
height: 315,
125+
},
126+
},
127+
{
128+
label: 'リンク投稿 1200×630',
129+
value: {
130+
width: 1200,
131+
height: 630,
132+
},
133+
},
134+
],
135+
},
136+
{
137+
label: 'TikTok',
138+
options: [
139+
{
140+
label: 'プロフィールアイコン画像 90x90',
141+
value: {
142+
width: 90,
143+
height: 90,
144+
},
145+
},
146+
],
147+
},
148+
];
23149

24-
export const PRESET_SIZE_OPTIONS = PRESET_SIZE.map(({ label }) => ({
150+
export const PRESET_SIZE_OPTIONS = PRESET_SIZES.map(({ label, options }) => ({
25151
label,
26-
value: label,
152+
options: options.map(({ label }) => ({
153+
label,
154+
value: label,
155+
})),
27156
}));
157+
158+
export const getPresetSize = (selectedValue: string) => {
159+
let v = {
160+
width: 0,
161+
height: 0,
162+
};
163+
PRESET_SIZES.forEach(({ options }) =>
164+
options.forEach(({ label, value }) => {
165+
if (label === selectedValue) {
166+
v = value;
167+
}
168+
}),
169+
);
170+
return v;
171+
};

‎src/app/image_generator/useImageGenerator.ts‎

Lines changed: 11 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { useCallback, useState } from 'react';
2-
import { PRESET_SIZE } from '@/app/image_generator/presetSize';
2+
import { getPresetSize } from '@/app/image_generator/presetSize';
33
import { useCustomForm } from '@/components/common/Form/useCustomForm';
44

55
type ImageGeneratorForm = {
@@ -52,6 +52,7 @@ export const useImageGenerator = () => {
5252

5353
const onClickGenerate = useCallback(() => {
5454
const values = getValues();
55+
console.log({ values });
5556
switch (values.tab) {
5657
case 'unsplash':
5758
setSrc(createUnsplashURL(values));
@@ -63,10 +64,9 @@ export const useImageGenerator = () => {
6364
}, [getValues]);
6465

6566
const onSelectPreset = useCallback(
66-
(value: any) => {
67-
const {
68-
value: { width, height },
69-
} = PRESET_SIZE.find(({ label }) => label === value);
67+
(value: string) => {
68+
const { width, height } = getPresetSize(value);
69+
7070
setValue('wight', width);
7171
setValue('height', height);
7272
},
@@ -76,8 +76,13 @@ export const useImageGenerator = () => {
7676
const onChangeTab = useCallback(
7777
(key: ImageGeneratorForm['tab']) => {
7878
setValue('tab', key);
79+
80+
const { type } = getValues();
81+
if (type === 'webp') {
82+
setValue('type', DEFAULT_VALUES.type);
83+
}
7984
},
80-
[setValue],
85+
[setValue, getValues],
8186
);
8287

8388
return {

‎src/components/common/Form/useCustomForm.ts‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@ export const useCustomForm = <T>(options: UseFormProps<T> = {}) => {
77
reValidateMode: 'onChange',
88
criteriaMode: 'firstError',
99
shouldFocusError: true,
10-
shouldUnregister: true,
1110
...options,
1211
});
1312
};

0 commit comments

Comments
 (0)