| name | pom-theme |
| description | Onboard brand assets into a pom theme. Reads brand colors (hex), an existing PPTX master, or a website/image, then generates pom-theme.json (color palette + typography + SlideMaster settings) that the pom-slide skill picks up automatically. |
| license | MIT |
| allowed-tools | Write,Edit,Read,Bash,WebFetch |
| metadata | {"version":"0.1.0"} |
ãã©ã³ãè³ç£ïŒãã©ã³ãã«ã©ãŒã»æ¢å PPTX ãã¹ã¿ãŒã»Web ãµã€ã / ç»åïŒãã pom çšã®ããŒããçæããpom-theme.json ãšããŠä¿åãããããŒããäžåºŠäœãã°ã以éã® /pom-slide ã«ããã¹ã©ã€ãçæããã©ã³ãã«æ²¿ã£ãèŠãç®ã«ãªãã
ããŒããã¡ã€ã«åœ¢åŒïŒpom-theme.jsonïŒ
æ¬ skill ã®åºåãpom-slide skill ã¯çææã«ã«ã¬ã³ããã£ã¬ã¯ããªã® pom-theme.json ãèªåã§èªã¿ããã¶ã€ã³ããŒã¯ã³ãšããŠäœ¿çšãããpom-slide ãèªåé©çšããã®ã¯ ããŒã³ã»é
è²ã»ãã©ã³ãã»èæ¯è²ïŒtone / colors / typography / slideMaster.background.colorïŒãslideMaster ã®ãã®ä»ã®èšå®ïŒmargin / objects / slideNumber / titleïŒã¯ pom-slide ã§ã¯æ¶è²»ããããbuildPptx(xml, size, { master }) ãçŽæ¥äœ¿ã API å©çšè
åãã®èšé²ãšãªãã
{
"name": "acme-corporate",
"tone": "ã³ãŒãã¬ãŒã",
"colors": {
"base": "F7F9FC",
"surface": "FFFFFF",
"ink": "1E2A38",
"muted": "5D6B7A",
"accent": "0052CC",
"charts": ["0052CC", "36B37E", "FFAB00", "6554C0"]
},
"typography": {
"fontFamily": "Noto Sans JP",
"headingFontFamily": "Noto Sans JP"
},
"slideMaster": {
"background": { "color": "F7F9FC" }
},
"source": {
"type": "brandColor",
"brandColors": ["0052CC"]
}
}
| ãã£ãŒã«ã | å
容 |
|---|
name | ããŒãåïŒkebab-caseïŒ |
tone | ããŒã³ã®èšèªè¡šçŸïŒpom-slide ã®ããŒã³éžæã«å¯Ÿå¿ãäŸ: ã³ãŒãã¬ãŒã / ããŒã¯ã»ãã㯠/ ãŠã©ãŒã ã»ãšãã£ããªã¢ã«ïŒ |
colors.base | ã¹ã©ã€ãèæ¯è²ïŒ6 æ¡ hexã# ãªãïŒ |
colors.surface | ã«ãŒãã»ããã«ã®èæ¯è² |
colors.ink | æ¬æããã¹ãè² |
colors.muted | è£å©ããã¹ãã»ãã£ãã·ã§ã³è² |
colors.accent | 匷調 1 è² |
colors.charts | ã°ã©ãçšã®é
åïŒChart ã® chartColors ã«äœ¿ããaccent ãå
é ã« 3ã5 è²ïŒ |
typography.fontFamily | æ¬æãã©ã³ãå |
typography.headingFontFamily | èŠåºããã©ã³ãåïŒçç¥æã¯ fontFamily ãšåãïŒ |
slideMaster | @hirokisakabe/pom ã® SlideMasterOptions ãšå圢ãbuildPptx(xml, size, { master }) ã«ãã®ãŸãŸæž¡ãããbackground / margin / objects / slideNumber / title ãæå®å¯èœ |
source | ããŒãã®åºèªã®èšé²ãtype 㯠brandColor / masterPptx / website / imageãmasterPptx ç±æ¥ã®å Žåã¯çžå¯Ÿãã¹ã source.masterPptx ã«èšé²ãã |
ãã©ã³ãã«ã€ããŠ: fontFamily ã¯ããŒãã«èšé²ãããããpom ã®ããã¹ãèšæž¬ã¯æšæºãã©ã³ãããŒã¹ã®ãããç¹æ®ãªãã©ã³ããã©ã³ãã§ã¯è¡å¹
ã®èšæž¬ããããããšãããïŒãã©ã³ãèšæž¬ã®æ¡åŒµã¯ pom æ¬äœã®ä»åŸã®å¯Ÿå¿ç¯å²ïŒãæ¥æ¬èªãããã§ã¯ Noto Sans JP ãæšå¥šã
æé
1. å
¥åã®è§£é
ãŠãŒã¶ãŒã®æç€ºããå
¥åãœãŒã¹ãå€å®ãã:
- ãã©ã³ãã«ã©ãŒçŽæ¥æå®: hex å€ïŒ
#0052CC ãªã©ïŒãæç€ºã«å«ãŸãã
- æ¢å PPTX ãã¹ã¿ãŒ:
.pptx ãã¡ã€ã«ã®ãã¹ãæç€ºã«å«ãŸãã
- Web ãµã€ã / ç»å: URL ãŸãã¯ç»åãã¡ã€ã«ã®ãã¹ãæç€ºã«å«ãŸãã
è€æ°ã®ãœãŒã¹ãäžããããå Žå㯠PPTX ãã¹ã¿ãŒ > ãã©ã³ãã«ã©ãŒ > Web / ç»å ã®é ãåºæ¬ãšãã€ã€ããŠãŒã¶ãŒã®æå³ïŒãè²ã¯ãã® hexããã©ã³ãã¯ãã® PPTX ã«åãããŠããªã©ïŒã«åŸã£ãŠçµã¿åãããã
æç€ºãããŠããªãå Žåã®ããã©ã«ã:
- åºåãã¡ã€ã«å:
pom-theme.jsonïŒã«ã¬ã³ããã£ã¬ã¯ããªïŒ
- åºèª¿: ã©ã€ãïŒãŠãŒã¶ãŒããããŒã¯ããæå®ããå Žåã®ã¿ããŒã¯åºèª¿ïŒ
2. ãœãŒã¹å¥ã®è²ã»ãã©ã³ãæœåº
a. ãã©ã³ãã«ã©ãŒçŽæ¥æå®
æå®ããã hex ããã®ãŸãŸæ¡çšãããè€æ°æå®ãããå Žåã¯äž»ãã 1 è²ïŒæåã«æããããè²ããŸãã¯ãã¡ã€ã³ããšæç€ºãããè²ïŒã accent ã®å
ãšããæ®ã㯠colors.charts ã®åè£ãšããŠèšé²ãããStep 3 ã®å°åºã«ãŒã«ãžé²ãã
b. æ¢å PPTX ãã¹ã¿ãŒã®èªã¿èŸŒã¿
è²ã®æœåºã¯ @hirokisakabe/pom ã® extractThemeTokensFromPptx()ïŒ#906ïŒã pom-cli çµç±ã§åŒã³åºãã<a:clrScheme> ã®æèªã¿ã¯è¡ããªãã
if command -v pom >/dev/null 2>&1; then
pom theme extract <input.pptx>
else
echo "pom-cli not installed" >&2
fi
pomïŒpom-cliïŒãç¡ãå Žåã¯ãã©ã³ãã«ã©ãŒçŽæ¥æå®ã§ã®åå®è¡ãæ¡å
ãããã®æé ãã¹ãããããïŒnpm install -g @hirokisakabe/pom-cli ã§ã€ã³ã¹ããŒã«å¯èœïŒã
- åºåã¯
ThemeTokensïŒtext / background / primary / secondary / accent3ãaccent6ïŒã® JSON é
åã§ãåå€ã¯ # ä»ã 6 æ¡å€§æå hexïŒäŸ: #4472C4ïŒãã¹ã©ã€ããã¹ã¿ãŒããšã«ãé
äžã®è¡šç€º layout æ°ã ãåãå€ãç¹°ãè¿ããããéåžžã¯å
é èŠçŽ ãæ¡çšããã°ããããã¹ã¿ãŒãè€æ°ããå€ãç°ãªãå Žåã¯åè£ãšããŠãŠãŒã¶ãŒã«æç€ºãããpom-theme.json ã® colors.* 㯠# ãªã衚èšïŒåé ãããŒããã¡ã€ã«åœ¢åŒãåç
§ïŒãªã®ã§ãåãèŸŒã¿æã« # ãå€ãã
- ã³ãã³ãèªäœã倱æããïŒPPTX ãå£ããŠããã»ãã¡ã€ã«ãååšããªãçïŒå Žåã¯ãšã©ãŒå
容ãå ±åãããã©ã³ãã«ã©ãŒçŽæ¥æå®ã§ã®åå®è¡ãæ¡å
ããã
theme1.xml ãèªããªãã»<a:clrScheme> ãå«ãŸãªãå Žåã¯ãšã©ãŒã«ãªãããOffice æšæºã®ãã©ãŒã«ããã¯é
è²ïŒprimary: #4472C4 / secondary: #ED7D31 / accent3: #A5A5A5 / accent4: #FFC000 / accent5: #5B9BD5 / accent6: #70AD47ïŒãè¿ããåºåããã®å€ãšäžèŽããå Žå㯠theme æªæ€åºãçãããŠãŒã¶ãŒã«ç¢ºèªããããã¹ã¿ãŒã 1 ã€ã解決ã§ããªãå Žåã¯åºåã空é
å [] ã«ãªãããããã®å Žåããã©ã³ãã«ã©ãŒçŽæ¥æå®ãæ¡å
ããã
ThemeTokens ã®ãã£ãŒã«ãã以äžã®å¯Ÿå¿ã§ããŒãã®ããŒã«ã«åã蟌ã:
ThemeTokens ãã£ãŒã«ã | å
XML å¯Ÿå¿ | ããŒãã®ããŒã« |
|---|
background | <a:lt1>ïŒèæ¯ 1ã<a:sysClr> ã®å Žå㯠lastClr ãå«ããŠè§£æ±ºæžã¿ïŒ | base ã®åè£ãçŽçœ FFFFFF ã®å Žå㯠Step 3 ã§ãªããã¯ã€ããžã®èª¿æŽãæ€èš |
text | <a:dk1>ïŒããã¹ã 1ãåäžïŒ | ink ã®åè£ãçŽé» 000000 ã®å Žå㯠Step 3 ã§èª¿æŽ |
primary | <a:accent1> | accent |
secondary, accent3ãaccent6 | <a:accent2>ã<a:accent6> | colors.chartsïŒprimary ãå
é ã«ãsecondary â accent3 â ... ã®é ã§ 3ã5 è²ïŒ |
surface / muted ã«çžåœããããŒã«ã¯ extractThemeTokensFromPptx() ã®æ»ãå€ã«å«ãŸããªãïŒ<a:lt2> / <a:dk2> 㯠API ã®ã¹ã³ãŒãå€ïŒãããStep 3 ã®å°åºã«ãŒã«ã§ base / ink ããéœåºŠç®åºããã
ãã©ã³ãïŒ<a:fontScheme>ïŒã«ã€ããŠ: extractThemeTokensFromPptx() ã¯è²ã®ã¿ãæ±ãããã©ã³ãæœåºã¯ #906 ã®ã¹ã³ãŒãå€ãåœé¢ã¯åŸæ¥ã©ããæèªã¿ããïŒprogrammatic åã¯å¿
èŠã«ãªãã°å¥ issue ã§å¯Ÿå¿ããïŒã
unzip -p <input.pptx> ppt/theme/theme1.xml
| theme1.xml | ããŒãã®ããŒã« |
|---|
<a:fontScheme> ã® minorFont | typography.fontFamilyïŒæ¥æ¬èªãããã§ã¯ <a:ea> ã® typeface ãåªå
ãç¡ããã° <a:latin>ïŒ |
<a:fontScheme> ã® majorFont | typography.headingFontFamily |
ãã¹ã¿ãŒã®èæ¯ãªãŒããŒã©ã€ãïŒ<p:bg>ïŒã«ã€ããŠ: extractThemeTokensFromPptx() ã¯ããŒãã®é
è²ã¹ããŒã ã®ã¿ãè¿ããã¹ã©ã€ããã¹ã¿ãŒåå¥ã®èæ¯ãªãŒããŒã©ã€ãã¯å¯Ÿè±¡å€ãªã®ã§ããããåŸæ¥ã©ããæèªã¿ããã
unzip -p <input.pptx> ppt/slideMasters/slideMaster1.xml
<p:bg> ã«åè²èæ¯ïŒ<a:solidFill>ïŒãããã° base ããã³ slideMaster.background.color ã«åæ ãããç»åèæ¯ã®å Žå㯠slideMaster.background ã«ã¯åã蟌ãŸããå®äºå ±åã§ãã®æšãäŒããïŒç»åèæ¯ã®ç§»æ€ã¯å¯Ÿè±¡å€ïŒã
c. Web ãµã€ã / ç»åããã®æœåº
- Web ãµã€ã:
WebFetchïŒãŸã㯠curlïŒã§ãããããŒãžã® HTML / CSS ãååŸãããã©ã³ãã«ã©ãŒãç¹å®ãããæããã: <meta name="theme-color">ãCSS ã«ã¹ã¿ã ããããã£ïŒ--primary / --brand ãªã©ïŒãããããŒã»ãã¿ã³ã«äœ¿ãããŠããè²ã
- ç»åïŒããŽãªã©ïŒ:
Read ããŒã«ã§ç»åãèªã¿ãèŠèŠçã«æ¯é
çãªãã©ã³ãã«ã©ãŒãç¹å®ã㊠hex ã§è¡šçŸããã
ç¹å®ããè²ãäž»ãã©ã³ãã«ã©ãŒãšã㊠Step 3 ã®å°åºã«ãŒã«ãžé²ãã確信ãæãŠãªãå Žåã¯åè£è²ããŠãŒã¶ãŒã«æç€ºããŠç¢ºèªããã
3. 5 ããŒã«ãã¬ããã®å°åº
äž»ãã©ã³ãã«ã©ãŒã accent ã«æ®ããæ®ãã®ããŒã«ãå°åºãããPPTX ãã¹ã¿ãŒç±æ¥ã§ base / ink / accent ã倿ããŠããå Žåãã以äžã®åè³ªåºæºïŒçŽçœã»çŽé»åé¿ãã³ã³ãã©ã¹ãïŒãæºãããã埮調æŽããã
ã©ã€ãåºèª¿:
accent: äž»ãã©ã³ãã«ã©ãŒãèæ¯ã«å¯ŸããŠæããã»æããããå Žåã®ã¿æåºŠã埮調æŽãã
base: ãã©ã³ãã«ã©ãŒã®è²çžããããã«å«ããªããã¯ã€ãïŒæåºŠ 96ã98%ã»äœåœ©åºŠïŒãçŽçœ FFFFFF åºå®ã«ããªã
surface: FFFFFF ãŸã㯠base ãããããã«æããè²
ink: ãã©ã³ãã«ã©ãŒãšåç³»è²çžã®ããŒã¯ã°ã¬ãŒïŒæåºŠ 12ã20%ïŒãçŽé» 000000 ã¯é¿ãã
muted: ink ãš base ã®äžéïŒæåºŠ 40ã55%ïŒ
ããŒã¯åºèª¿:
base: ãã©ã³ãã«ã©ãŒã®è²çžãå«ãããŒã¯ïŒæåºŠ 8ã14%ïŒ
surface: base ããæåºŠ +6ã10%
ink: ãªããã¯ã€ãïŒæåºŠ 92ã96%ïŒ
muted: æåºŠ 55ã70% ã®ã°ã¬ãŒ
accent: äž»ãã©ã³ãã«ã©ãŒãæãå Žåã¯æåºŠãäžããŠèŠèªæ§ã確ä¿ãã
colors.charts 㯠accent ãå
é ã«ãè²çžããããã調åè²ãŸã㯠PPTX ã® accent2ã6 ãã 3ã5 è²ãéžã¶ã
4. ã³ã³ãã©ã¹ãæ€èšŒ
WCAG ã®çžå¯ŸèŒåºŠã«åºã¥ãã³ã³ãã©ã¹ãæ¯ã§ä»¥äžã確èªããæºãããªãå Žåã¯æåºŠã調æŽããŠå確èªãã:
| çµã¿åãã | æäœåºæº |
|---|
| ink / base | 7:1 以äžïŒæäœã§ã 4.5:1ïŒ |
| ink / surface | 4.5:1 ä»¥äž |
| muted / base | 3:1 ä»¥äž |
| accent / base | 3:1 以äžïŒaccent ãããã¹ãã现ãããŒã«äœ¿ãããïŒ |
ã³ã³ãã©ã¹ãæ¯ã¯ (L1 + 0.05) / (L2 + 0.05)ïŒL ã¯çžå¯ŸèŒåºŠãL1 â§ L2ïŒãå³å¯ãªèšç®ãé£ããå Žå㯠python3 ã¯ã³ã©ã€ããŒã§ç®åºãã:
python3 -c "
def lum(h):
r,g,b=(int(h[i:i+2],16)/255 for i in (0,2,4))
f=lambda c: c/12.92 if c<=0.04045 else ((c+0.055)/1.055)**2.4
return 0.2126*f(r)+0.7152*f(g)+0.0722*f(b)
a,b=lum('1E2A38'),lum('F7F9FC')
print(round((max(a,b)+0.05)/(min(a,b)+0.05),2))
"
5. SlideMaster èšå®ã®çæ
slideMaster ãã£ãŒã«ãã SlideMasterOptions ã®åœ¢ã§çµã¿ç«ãŠã:
background.color: base ãšåãè²ïŒPPTX ãã¹ã¿ãŒã«åè²èæ¯ãããã°ãã®è²ïŒ
- ãŠãŒã¶ãŒãããŒãžçªå·ãåžæããå Žå:
slideNumber ãå³äžã«é
眮ïŒäŸ: { "x": 1180, "y": 690, "w": 60, "h": 20, "fontSize": 10, "color": "<muted>" }ïŒ
- ãŠãŒã¶ãŒãããã¿ãŒïŒäŒç€Ÿåã»ã³ããŒã©ã€ãçïŒãåžæããå Žå:
objects ã« text ãªããžã§ã¯ãã远å ãã
æå°æ§æã¯ background ã®ã¿ã§ãããæç€ºããªããã° slideNumber / objects ã¯è¿œå ããªãã
6. ãã¡ã€ã«ãžã®ä¿å
Write ããŒã«ã§ pom-theme.json ã«ä¿åãããsource ãã£ãŒã«ãã«åºèªïŒtypeããã©ã³ãã«ã©ãŒã® hexãPPTX ã®çžå¯Ÿãã¹ãURL çïŒãèšé²ããã
7. ãµã³ãã«ã¹ã©ã€ãã§ã®ç¢ºèªïŒãªãã·ã§ã³ïŒ
pomïŒpom-cliïŒãã€ã³ã¹ããŒã«æžã¿ã®å ŽåãããŒããé©çšãã 1 æã®ãµã³ãã«ã¹ã©ã€ãïŒã¿ã€ãã« + æ¬æ + accent ããŒïŒãäžæãã¡ã€ã«ã«çæããpom build ãéãããšãšãå¯èœãªãã¬ã³ããªã³ã°ç»åã§é
è²ã®å°è±¡ã確èªãããåé¡ãããã° Step 3ã4 ã«æ»ã£ãŠèª¿æŽãããpom-cli ããªãå Žåã¯ã¹ãããããã
8. å®äºå ±å
以äžãå ±åãã:
- ä¿åããããŒããã¡ã€ã«ã®ãã¹
- 確å®ãã 5 ããŒã«ã®è²ãšãã©ã³ãïŒã³ã³ãã©ã¹ãæ€èšŒã®çµæãå«ãïŒ
- 次ã®ã¹ããã: åããã£ã¬ã¯ããªã§
/pom-slide ãå®è¡ãããš pom-theme.json ãèªåã§é©çšãããããš
- PPTX ãã¹ã¿ãŒç±æ¥ã®å Žå:
source.masterPptx ã«å
ãã¡ã€ã«ã®ãã¹ãèšé²ããããšãpom-mdïŒ.pom.mdïŒã® front-matter masterPptx: ã buildPptx ã® masterPptx ãªãã·ã§ã³ã§å
PPTX ã®èæ¯ãåå©çšã§ããããšïŒmasterPptx ãåã蟌ãã®ã¯èæ¯ã®ã¿ã§ãobjects / margin / slideNumber / ãã©ã³ãã¯åæ ãããªãïŒ