ãéè¨ãæåWordPressãªJAMstackã¡ãã£ã¢ã®æªæ¥
â»æ¬è¨äºã¯WordPressèªä½ãå¦å®ãã¦ããã®ã§ã¯ãªããWordPressã使ã£ãã¡ãã£ã¢éçºãä¸è¬çãªSPAéçºã«æ¯ã¹ã¦DXï¼éçºä½é¨ï¼ãæªãã®ã§ãããã³ãã¨ã³ãã¨ã³ã¸ãã¢ã¨ãã¦ã¯ãããã£ãç¾å ´ãæ¸ããã¦ããããã¨ããæ°æã¡ãããã¾ããWordPress大好ããªæ¹ããä»å¾ãå½åWordPressãçæ¥ã¨ãã¦è¡ãã¤ãããªæ¹ã¯ããããããæ°åæªããããããªãã®ã§åãå³ãã¦ãã ããã
â»ããã³ãã¨ã³ãã¨ã³ã¸ãã¢ã¨ä¸å£ã«è¨ã£ã¦ããã¶ã¤ãã¼çãªäººãWebpackè·äººãè²ã ããã®ã§ããã®ä¸ã§ãç¹ã«SPAéçºã«ç¹åãã¦ãã人ãä¸æ¦ãã®è¨äºå ã§ã¯SPAã¨ã³ã¸ãã¢ã¨å¼ã³ã¾ããã§ãå¥ã«ä¸è¬çãªã¯ã¼ããããªãã®ã§ãã®è¨äºä»¥å¤ã§ã¯å¼ã°ãã
ã¯ããã«
WordPressã¯ä¸çã®ãµã¤ãã®30%以ä¸ã§ä½¿ããã¦ããããããã·ã§ã¢ãããï¼
æ¨ä»ã®"Webã¡ãã£ã¢éçºã«æºããSPAã¨ã³ã¸ãã¢"ã®å£çã¯ãããããã®ã¡ãã£ã¢ã¯SPAã§ä½ãã¹ãï¼ããããã¬ã¹CMSæé«ï¼ããJAMstackã§è¡ããï¼ããªã®ã§ãããå 輪ã§ã¯ã¤ã¯ã¤ãã£ã¦ããã ãã§å ¨ç¶WordPressã®æ ªã奪ãã¦ããå®æãããã¾ããðãã¡ããèªåãã¡ã®æã®å±ãç¯å²ã§ã¯ã¿ããªé å¼µã£ã¦è±WordPressãã¦ã¾ããã
ã¤ã¾ãã¾ã ã¾ã 話é¡ã«ãªã£ã¦æ®åãã¦ããã®ã¯ä»²éå ã ããªãã§ãããã
JAMstackï¼ãããã¬ã¹CMSï¼ãªã«ããã£ã¦äººã®ããã®ç«
JAMstackã¨ã¯ãJavaScript, API, Markupãã®é æåãã¨ã£ããããã§æ§æããWebãµã¤ãã®ã¢ã¼ããã¯ãã£ã®ç·ç§°ã§ãã
WordPressã¯ã¡ãã£ã¢ã®ã³ã³ãã³ã管çã¨ã表示ããæ©è½ãåããµã¼ãã¼ã§ãã¹ã¦ä¸æ¬ç®¡çããã®ã¨ã¯å¯¾è±¡çã«ãJAMstackã§Webã¡ãã£ã¢ãä½ãã¨ããã
- JavaScriptã§ã³ã³ãã³ãã®åºãåããè¡ã
- ã³ã³ãã³ãã¯APIçµç±ã§åå¾ã
- éçãªãã¼ã¸ã«ã¤ãã¦ã¯Markupãã¤ã¾ãäºåã«htmlãçæãã¦éçãµã¤ãåãã¦ãã
ã¨ããæ§æãJAMstackã«ãªãã¾ããReact.jsãªã©ã®SPAã©ã¤ãã©ãªãå©ç¨ãã¦ã«ã¼ãã£ã³ã°ã®ç®¡çãè¡ãã®ã§åºæ¬çã«ã¯SPAã¨ã»ããã§ãã
ããã¦ãããã¬ã¹CMSã¨ã¯ããããã£ãæ§æã®APIé¨åãæä¾ãããã¡ãã£ã¢ã®ã³ã³ãã³ã管çãè¡ãå°ç¨ã®ãµã¼ãã¹ãã¨ãªãã¾ãã
ç¾ç¶
Contentfulã¨ãããµã¼ãã¹çãä¸å¿ã¨ãã¦ããããã¬ã¹CMSã¯çµæ§å±éããã¦å©ç¨ãããã¦ãã¾ãã
ãããã³ã³ãã³ã管çãåé¢ã§ãã¦JAMstackãµã¤ããä½ããã«ããçµå±è¡¨ç¤ºé¨åã¯ã¨ã³ã¸ãã¢ãããªãã¨ä½ãä½ããªãã®ãç¾ç¶ã§ãã
çµå±ç®¡çã¨è¡¨ç¤ºãåé¢ãããã£ã¦è¨ã£ã¦ãã®ã¯ã¨ã³ã¸ãã¢ã®é½åã§ãã£ã¦ã管çè ã«ã¨ã£ã¦ã®çæçãªã¡ãªããããã¾ããªãã§ããï¼ãã¡ããã»ãã¥ãªãã£ããã¨ãã®é·æçãªã¡ãªããã¯å¤ã ããã¾ãï¼
é²è¦§è ã«ã¨ã£ã¦ã¯Gatsby.js(JAMstackç¨ã©ã¤ãã©ãª)çã§ã§ãããµã¤ãã¯åºæ¬çã«è¡¨ç¤ºãé·ç§»ãæ©ãã®ã§å¤å°ã®ã¡ãªããã¯ããã¾ãã
ãããWordPressã®ãããªMPAãµã¤ãã§ããã£ãã·ã¥ããã£ããè¨å®ããã°SPAã»éçãµã¤ãã¨éè²ãªãã¬ãã«ã«æã£ã¦ãããï¼ãã¡ããããç¨åº¦ã®ã¨ã³ã¸ãã¢ãªã³ã°ã¯å¿ è¦ã§ããï¼ã®ã§ãWebãµã¼ãã¹éçºã¨éãWebã¡ãã£ã¢éçºã«ããã£ã¦ã¯SPAãµã¤ãã§ãMPAãµã¤ãã§ãUXã¯å¤§ããå¤ãããã大ããå·®ããªãããã§ãã
ãããªç¶æ ã§ã¨ã³ã¸ãã¢ã®é½åã ãã§WordPressãããã¦SPAã«ãããã¨è¨ã£ãã£ã¦ãããããªãã¨ããã®ãç¾ç¶ã§ãããããªãããªã§WordPressã®å¤©ä¸ããã¤ã¾ã§çµã£ã¦ãæºããããªãã®ã§ãã
ãããªä¸SPAã¨ã³ã¸ãã¢ã¨ãã¦Webã¡ãã£ã¢éçºã«ã©ãé¢ãã£ã¦ããã°è¯ãã®ã
åºæ¬çã«ã¯SPAã¨ã³ã¸ãã¢ã«ã¨ã£ã¦ã¯SPAã®ã»ããDXãè¯ãã®ã§æ¨é²ãã¦ããããã§ãããï¼
ããã¾ã§ãããã³ãã¨ã³ãã¨ã³ã¸ãã¢ã¨ãã¦ã®ã¡ãªããã大ãããã¨ããã®ãé ããçæ¯ã«å°å ¥ãé²ãã¦ãããã°ããæ°ããã¾ãã
SPAã®æè¡é¸å®ã«ã¤ãã¦ã¯æè¿ã®è±è°·ããã®ã¹ã©ã¤ããé常ã«ããã¾ã¨ã¾ã£ã¦ããã®ã§ããããåèã«ãã¾ãããã
ä»å¾JAMstackï¼SPAãæ¨é²ããããã«ã©ããããããããã©ããªãµã¼ãã¹ããã£ããããã
ããã§ãåãSPAã¨ã³ã¸ãã¢ã¨ãã¦ã¯ãã¡ããJAMstackãæ®åããã¦ããããããã§ããããããªã®ã¨ã³ã¸ãã¢ã®é½åã ãã§ãã£ã¦ã¡ãã£ã¢ç®¡çè ã®ã¡ãªãããããã¾ããªãããã¯ã£ããè¨ã£ã¦å¾®å¦ã¨ãã話ã¯ãã¾ããã
ãªããªãã¨ã³ã¸ãã¢ãªã³ã°ãã¾ã£ããå¿ è¦ã¨ããªãããã«ãWebã¡ãã£ã¢ãä½ãä¸ã§ãçµå±noteãã¯ã¦ããã§ããããããªãããã£ã¦ããé¸æè¢ãåºã¦ããã®ã¯ãã³ããããï¼ãã©ãããã©ã¼ã ã¨ãã¦ã®å½¹å²ãããã®ã§ãã¡ãã£ã¢å±éããã¨ãã«ãã®è¾ºã®å¹åã¯ç¡è¦ã§ããªãã§ããããï¼
å ã WordPressã¦ã¼ã¶ã¼ã¯çµå±ã«ã¹ã¿ãã¤ãºæ§ãï¼ä»ã¾ã§ã®è³ç£ãæµç¨ããã¨ããæå³ã§ãï¼æ±ãã¦ãã¦ãããã¨åããã®ãSPAã§ã¤ãããã«ããSPAéçºã®æ·å± ãéããã³ãã¨ã³ãã¨ã³ã¸ãã¢ã«ã¯é«ãã®ã§å³ããã¨ããç¾ç¶ã§ããã
ããã§æå¾ ãã¦ãããµã¼ãã¹ã®ä¸ã¤ãSTUDIOã§ãã
Webãµã¤ããå®å ¨GUIã§ãã¶ã¤ã³ã«ã¹ã¿ãã¤ãºãã¤ã¤ä½ãã¦ãæ¥å¹´ãããã«APIã§ã®ã³ã³ãã³ã表示ã«å¯¾å¿ããäºå®ããããªã£ã¦ããã¨ããã¾ãè¡ãã°WordPressã®ãããªã«ã¹ã¿ãã¤ãºæ§ãéããã³ãã¨ã³ãã¨ã³ã¸ãã¢ã§ãæã«å ¥ãããã¾ãã
ãããããµã¼ãã¹ãåºã¦ãã¦ãã£ã¨ãããã¬ã¹CMSã¨ããåå¨ãã¨ã³ã¸ãã¢ä»¥å¤ã«ãæ¬é ãçºæ®ã§ãã¦ã管çè ã«ã¨ã£ã¦ã®ã¡ãªãããçºæ®ãããµã¼ãã¹ã¨ãã¦WordPressã¨æ¦ããå俵ã«ä¸ãã£ã¦ããã¨æãã¾ããï¼ãã¡ããSTUDIO CMSã¿ãããªã®ãåºã¦ãã¦é£æºãå¯ã«ã§ããããä»ã®ãããã¬ã¹CMSãããªããªãã¨ããå¯è½æ§ããããã©ï¼
ãããã¬ã¹CMSèªä½ã¯ãããã伸ã³ã¦ããããContentfulãåºè³ãåããããã¦ããã®ã¯ããããæå¾ ã ã¨æãã¾ãããç§ã¨ãã¦ã¯ãããã¬ã¹CMSã ãã§ã¯WordPressãåãã®ã«ã¯çæè½ã¡ã ã¨æã£ã¦ãã¦ãSTUDIOã®ãããªãµã¼ãã¹ããã³ãã³åºã¦ãã¦ãã£ã¨æ¦äºãæããã¨æã£ã¦ãã¾ãã
ãããã¬ã¹CMSã使ãã¡ãªããã¨ãã¦
- ã³ã³ãã³ãã®ç®¡çã®ãããã
- è¨äºã®æ¸ãããã
- å ±æã®ãããã
ãåºã¦ãã¦ï¼ãã¡ãããµã¼ãã¹ã«ä¾åãã¾ããï¼ãSTUDIOã®ãããªãµã¼ãã¹ãããã表示ããäºã«å¯¾å¿ããã¨
- ãµã¤ãã®ã«ã¹ã¿ãã¤ãºæ§
- ããã«å¯¾ããã¨ã³ã¸ãã¢ãªã³ã°ä¸è¦ãªç°å¢
ããããã£ã¦WordPressããã¯ã¤ã³ããå¤ãã¦ããªããã¤å°ãªãå·¥æ°ã§å®ç¾ã§ããã¡ãã£ã¢éçºãä¸è¬çã«ãªã£ã¦ããã¨ãããªãã¨æã£ã¦ãã¾ãã
...
...ããã ãã ã¨å°æ¥çã«ã¯ãã¡ãã£ã¢éçºã«SPAã¨ã³ã¸ãã¢ã¯ä¸è¦ãè«ã§ããããï½
ã¾ãããã§ä¸è¨ã®æµãã§ãããã¬ã¹CMSã¨ãããã®ãã¬ã·ã¬ã·æ®åãã¦ãã£ã¦ããã¾ãWordPressã§ä½ãããã£ã¦ã®ããªããªã£ã¦ãã£ã¦ããã®å¾STUDIOãªã©ã®ãµã¼ãã¹ãã足ãåºããããªæ¡å¼µã»éçºãè¡ãããã£ã¦ã¨ãã«åãã¦SPAã¨ã³ã¸ãã¢ãJAMstackã§ä½ã£ã¦ããã°ããã®ããªãã¨æãã¾ãã
ãã¶ã¤ã³ã®ã«ã¹ã¿ãã¤ãºã«ã¤ãã¦
ã»ãã§ãã¡ãã£ã¨è©±ã¯æ»ããã§ãããSTUDIOã¯ã¡ãã£ã¢ä»¥å¤ã«ãããããWebã³ã³ãã³ãã®ã¬ã¯ãæ ããµã¼ãã¹ã«ãªã£ã¦ããã¨æãã¾ãã
API対å¿ã«ãã£ã¦ãShopifyã§ECãµã¤ããä½ãããããããã¨ã«ãªãããã§ãããããããããµã¼ãã¹ã«ã¨ã£ã¦ã¯ãã¶ã¤ã³ã«ã¹ã¿ãã¤ãºã®èªç±åº¦ã¯é常ã«éè¦ã§ããï¼ãã®ãã¨ã®æç« ã«ããã¦STUDIOãå¦å®ãããããã§ã¯ãªãã¨ããããã®å¼æã§ããç¬ï¼
ããã"æç« ä¸å¿ã®Webã¡ãã£ã¢"ã¨ãããã®ã«é¢ãã¦ããã¶ã¤ã³ã®å·®å¥åã¯ã©ãã§ãããããã¹ããã§ã®é²è¦§ã主ã«ãªã£ã¦ãã¦ããç¾ä»£ã®ãã¹ãã¼ããã©ã³ã§æç« ãèªããã¨ããUIã«ããã¦ãã¯ã£ãããã£ã¦ã©ã®ã¡ãã£ã¢ã大ããªå·®ããªããã¨ããã®ãç¾ç¶ã§ã¯ãªãã§ããããããããå ¨ã¡ãã£ã¢ã§èªã¿å¿å°ãçµ±ä¸ããã¦ããæ¹ãã¦ã¼ã¶ã¼ã«ã¨ã£ã¦ã¡ãªããã大ããã£ããããã®ã§ã¯ãªãã§ããããã
Webã¡ãã£ã¢ã«ã¨ã£ã¦ããã¶ã¤ã³ã®ã«ã¹ã¿ãã¤ãºã¯åºæ¬çã«å³ã«å£ãã§ç¬èªæ§ãæ¼ãåºãå¿ è¦ãç¡ãããããªããã¨æãã¦ãã¾ãã
ãããªã£ã¦æ¥ãã¨STUDIO以å¤ã®é¸æè¢ã¨ãã¦ããã¶ã¤ã³ã«é¢ãã¦ã¯ã«ã¹ã¿ãã¤ãºæ§ããããããããããªãã³ãã¬ã«ã½ãã£ã¨ä¸¸æãã§ãããã¨ãããªãµã¼ãã¹ãå¿ è¦ã«ãªã£ã¦ããããããªããã¨ã
ãããªããããã¬ã¹CMSã使ã£ã¦ãéããã³ãã¨ã³ãã¨ã³ã¸ãã¢ã§ãWebã¡ãã£ã¢ãç«ã¡ä¸ãããããµã¼ãã¹ããä»å¾ã®Webã¡ãã£ã¢ç«ã¡ä¸ãã®ä¸å¿ã«ãªã£ã¦ããããããªããã¨è¨ãã®ãç§ã®æè«ã§ãã
ãããã£ããµã¼ãã¹ã«æ¢åã®WordPressã¦ã¼ã¶ã¼ãæµãã¦ãã£ã¦ãåãã¦æåWordPressã«ä¸æ©è¿ã¥ãã®ã§ã¯ãªãã§ãããããJAMstackããã¯ã¡ãã£ã¨æèãé¢ãã¦ãã¾ãã¾ãããç¬
ãããã«
ãã æ¸ãããæç« ã¨ããæãã§ãã¨ãã¨ãããªãã®ã«æå¾ã¾ã§èªãã§ãã ãã£ã¦ãããã¨ããããã¾ãï¼
Webã¡ãã£ã¢éçºã®æªæ¥ã«ã¤ãã¦ä¸è¨è¨ãããï¼ã£ã¦æ¹ã¯ã©ããç§ã®Twitterã¾ã§ãé£çµ¡ãã ããã
JAMstackã§æåWordPressãï¼ã£ã¦æãæ²ãããæ¹ã¯ã話ãããã®ã§ã©ã³ãã§ãèªã£ã¦ãã ããã
ç§ã¨ãã¦ãNetlifyãmicroCMSãå¿æ´ãã¦ãã¾ãï¼ãã¡ããSTUDIOã®ä»å¾ãããã¼æ¥½ãã¿ã§ãã
ãã¨ã¯ããããã¬ã¹CMSã使ã£ã¦ãéããã³ãã¨ã³ãã¨ã³ã¸ãã¢ã§ãWebã¡ãã£ã¢ãç«ã¡ä¸ãããããµã¼ãã¹ãã£ã¦è¨ã£ã¦ããã©ããã欲ãããããåãä½ããï¼ã£ã¦æã£ãæ¹ã¯ã©ããTwitterã§ãªãã©ã¤ãã¦ãã ãããâããããæ¥ããèãã¾ããç¬
ããããããï¼ï¼æçµããã¨ãåããããããªã¨ãã«é§ææ¸ãã¦ããæãªãããã£ãã®ã俺ã