ð¢ã¹ããŒãŠã§ã宣èšïŒãã£ãŒãã®å¥æµããéããŠãèªåã®ãåºããåãæ»ã #SNSç²ã #IndieWebã#å 06
ð¢ã¹ããŒãŠã§ã宣èšïŒãã£ãŒãã®å¥æµããéããŠãèªåã®ãåºããåãæ»ã #SNSç²ã #IndieWeb
ããããªããæ¯ç¶ãã®ã§ããªãã€ã³ã¿ãŒããããããã«ã¡ã¯ãæèãæ·±ãŸãéããªãŠã§ãã
ç®æ¬¡
- ã¯ããã«ïŒãªãã€ã³ã¿ãŒãããã¯ãããªã«éšãããã®ãïŒ
- 第1éšïŒãã£ãŒããšããåã®å¥æµ
- 第1ç« ïŒãäžãããããã€ã³ã¿ãŒããã
- 1-1. ãã£ãŒãã®è§£ååŠïŒçµãããªãã¹ã¯ããŒã«ã®ä»çµã¿
- 1-2. ç§ãã¡ã¯æ¬ãèªãŸãªããªã£ããã³ã³ãã³ãããæ¶è²»ãããããã«ãªã£ã
- 1-3. ãåå¿ãã®ããã®ã³ãã¥ãã±ãŒã·ã§ã³ãšããã®ç²åŒ
- 1-4. ããã·ã¥ã¿ã°ãäœãã³ãã¥ããã£ã®å ãšåœ±
- 第2ç« ïŒæµãã«æãç¡åæ
- 第1ç« ïŒãäžãããããã€ã³ã¿ãŒããã
- 第2éšïŒãã€ã³ã¿ãŒãããIããžã®é·æãšåçºèŠ
- 第3éšïŒã¹ããŒãŠã§ãã®å®è·µ
- 第5ç« ïŒé¢ä¿æ§ãè²ãããã®ãã¶ã€ã³
- 第6ç« ïŒææ³ãå®è£
ããæè¡
- 6-1. ãªãReactã¯ãééã£ãéžæããªã®ã
- 6-2. HTMLãã¡ãŒã¹ããšããã°ã¬ãã·ããšã³ãã³ã¹ã¡ã³ã
- 6-3. ç»åãæ¯é ããïŒSVG, WebP, ãããŠsrcset
- 6-4. ããã©ãŒãã³ã¹ã®æªé `background-attachment: fixed`
- 6-5. ãµãŒããŒãµã€ãã¬ã³ããªã³ã°ïŒSSRïŒã¯éã®åŒŸäžžãïŒ
- 6-6. ãªãŒã³ïŒLeanïŒã§ããããšã®å²åŠ
- 第4éšïŒããããã®ãŠã§ãã®ããã«
- å·»æ«è³æ
- ç»å Žäººç©ç޹ä»
- çšèªè§£èª¬
- çšèªçŽ¢åŒïŒã¢ã«ãã¡ãããé ïŒ
- è£è¶³1: ããããªäººã®ææ³
- è£è¶³2: 詳现幎衚ïŒããŒãœãã«ãŠã§ããšãã©ãããã©ãŒã ã®è亡
- è£è¶³3: æœåšçèªè ã®ããã«
- è£è¶³4: äžäººããªããã³ã
- è£è¶³5: 倧åå©
- è£è¶³6: äºæž¬ããããããã®åå¿ãšåè«
- è£è¶³7: åŠã³ãæ·±ããããã«
ã¯ããã«ïŒãªãã€ã³ã¿ãŒãããã¯ãããªã«éšãããã®ãïŒ ð£ïžð¥
ã€ã³ã¿ãŒãããã¯ãã¹ããŒããéèŠããŠäœãããŠãããããæããŸãããïŒ
æ°ãããµãŒãã¹ã«åå ãããšããŸãç®ã«é£ã³èŸŒãã§ããã®ã¯ããã£ãŒããããã®ååããã¹ãŠãç©èªã£ãŠããŸãããã£ãŒããšã¯ãå®¶çã«äžããã飌æãã®ããšããããŠç§ãã¡ã¯ããããäžããããåŽãããªãããã£ãŒããã³ã³ãããŒã«ããããšã¯ãªããããªãã®åœ¹å²ã¯ãã ã²ããããé€ãäžãããããããšãªã®ã§ãã
ãã®é£Œæã¯å®¹èµŠããããŸãããæ¬¡ããæ¬¡ãžãšæµã蟌ã¿ãç§ãã¡ã®æèããææ ãããããŠèªåèªèº«ã®èŠæ¹ããã圢äœã£ãŠãããŸããç§ãã¡ã¯ããããã£ãããšæ¬ãèªãã ããæ ç»ãå³ãã£ããã鳿¥œã«è³ãæŸãŸãããã¯ããŸãããç§ãã¡ã¯ãã ãã³ã³ãã³ãããæ¶è²»ãããäžãããããã®ãç¡æ¹å€ã«æåããã ãã®ååšã«ãªãäžãã£ãŠã¯ããªãã§ããããã
å€ãã®äººããã®çŸç¶ã«æ°ã¥ããäžæºãæ±ããŠããŸããããªãããã£ãšããã®äžäººã§ãããããããããã®çµ¶ãéãªãæ å ±ã®å¥æµãããäžäœã©ãããã°éããããã®ã§ããããïŒã¹ããŒããã©ã³ãçªããæãæšãŠãïŒå±±å¥¥ã«ç± ãïŒãããšãããã®æµãã®äžã§æººããªãããã«ãå¿ æ»ã«ãããç¶ãããããªãã®ã§ããããïŒ
ãã®èšäºã¯ããããªæ¯èŠãããæããŠããããªãã®ããã®ãäžã€ã®ãåŠæ¹ç®ãã§ããããããŠã宣èšãã§ãããã£ãŒãããèªãã®æå¿ã§éãããã€ãŠç§ãã¡ãæãããããéãã§ããã人éçã ã£ããŠã§ããåãæ»ãããã®æ ãžãããªãããæ¡å ããŸããããããããã³ã°ãã§ã¢ã«æ·±ãè °æããŠãå°ãã ãæè©±ã«ãä»ãåããã ãããç§ã®èçã®äžãªãã倧æè¿ã§ããâ
第1éšïŒãã£ãŒããšããåã®å¥æµ ð
第1ç« ïŒãäžãããããã€ã³ã¿ãŒããã
1-1. ãã£ãŒãã®è§£ååŠïŒçµãããªãã¹ã¯ããŒã«ã®ä»çµã¿ ðâŸïž
SNSã®ã¿ã€ã ã©ã€ã³ãã芪æã§ã¹ã¯ã€ããããæ°ããæçš¿ãæ°ããåçãæ°ããåç»ãã¹ã¯ã€ããã¹ã¯ã€ããã¹ã¯ã€ãâŠãæ°ã¥ãã°30åã1æéãçµã£ãŠããããã®æããããé åã®æ£äœã¯äžäœäœãªã®ã§ããããã
ããã¯ããç¡éã¹ã¯ããŒã«ïŒInfinite ScrollïŒããšåŒã°ãããã¶ã€ã³ãã¿ãŒã³ã«ãããŸããããŒãžã®çµããã«å°éãããšã次ã®ã³ã³ãã³ããèªåçã«èªã¿èŸŒãŸãããããã«ããããŠãŒã¶ãŒã¯ããããŸã§ã§äžåºåãããšããæèã®åæ¢ç¹ã倱ããåæ°žä¹ çã«ã³ã³ãã³ãã®æµ·ãæŒãç¶ããããšã«ãªãã®ã§ãã
ãã®ä»çµã¿ã¯ãã«ãžãã®ã¹ããããã·ã³ã䜿ãå¿çåŠçãªããªãã¯ãšéåžžã«ãã䌌ãŠããŸããã¬ããŒãåŒãïŒã¹ã¯ã€ãããïŒãã³ã«ãåœããïŒé¢çœãã³ã³ãã³ãïŒãåºããããããªããšããã鿬 匷åïŒIntermittent ReinforcementïŒããåããç§ãã¡ã¯ããŒããã³ãšããè³å 快楜ç©è³ªã®ã·ã£ã¯ãŒã济ã³ç¶ããŸããããã¯æ¥µããŠäžæ¯æ§ã®é«ãäœéšã§ããããã©ãããã©ãŒã åŽã¯ç§ãã¡ã®å¯åŠåæéãæå€§åããããã«ããã®ä»çµã¿ãæå³çã«èšèšããŠããã®ã§ãã
1-2. ç§ãã¡ã¯æ¬ãèªãŸãªããªã£ããã³ã³ãã³ãããæ¶è²»ãããããã«ãªã£ã ðœïž
ããã£ãŒãããšããèšèã¯ãç§ãã¡ã®åœ¹å²ãç確ã«è¡šããŠããŸããç§ãã¡ã¯ãã¯ãèªè ãéè³è ã§ã¯ãããŸããããæ¶è²»è ïŒConsumerïŒãã§ãã
äžåã®æ¬ãèªãè¡çºãèããŠã¿ãŸããããããã«ã¯å§ãŸããšçµããããããèè ãšå¯Ÿè©±ããè¡éãèªã¿ãèªèº«ã®çµéšãšç §ããåããããšãããèœåçã§æçŽ¢çãªããã»ã¹ãååšããŸãããããããã£ãŒãã®äžçã§ã¯ããã¹ãŠã现åãã®ãã³ã³ãã³ããã«éå ãããŸããæ°ç§ã®åç»ãæ°è¡ã®ããã¹ããäžæã®ç»åããããã¯å³ãããã®ã§ã¯ãªãããã æ¬¡ããæ¬¡ãžãšæ¶è²»ããŠãã察象ã§ãã
ãã®ååçãªæ¶è²»è¡åã¯ãç§ãã¡ã®éäžåãæ·±ãæèåã確å®ã«èãã§ãããŸããç§ãã¡ã¯æ°ããç¥èãåŸãŠããããã§ããã®å®ãäœã身ã«ã€ããŠããªããããããã®äººãšç¹ãã£ãŠããããã§ããã®å®ã誰ãšãæ·±ãé¢ãã£ãŠããªãããããªç©ºèãªæèŠã«è¥²ãããããšã¯ãããŸãããïŒ
1-3. ãåå¿ãã®ããã®ã³ãã¥ãã±ãŒã·ã§ã³ãšããã®ç²åŒ â€ïžðð
ãã£ãŒãäžã§ã®ã³ãã¥ãã±ãŒã·ã§ã³ã¯ããããããããªãã€ãŒããããªãã©ã€ããšãã£ããåå¿ïŒReactionïŒãããã¹ãŠã§ããæçš¿ããã°ãå³åº§ã«åå¿ãæ°ã«ãªããåå¿ããªããã°ãèªåã®æçš¿ã¯äŸ¡å€ããªãã£ãã®ããšäžå®ã«ãªããä»äººã®æçš¿ãèŠãã°ãäœãåå¿ããªããã°ãªããªããšãããã¬ãã·ã£ãŒãæããã
ãã®ãåå¿ã®çµæžåãã§ã¯ãçæ ®ãããæèŠããããç¬éçã«ææ ãæºãã¶ãèšèãããŠã¯ããããŸããå ±æãæããé©ããã¢ã«ãŽãªãºã ã¯ãšã³ã²ãŒãžã¡ã³ãïŒãŠãŒã¶ãŒã®é¢äžïŒãé«ãæçš¿ãåªå çã«è¡šç€ºãããããçµæãšããŠç§ãã¡ã®ãã£ãŒãã¯ãããæåçã§ãããæ¥µç«¯ãªæèŠã§æºããããŠããã®ã§ãã
ããã¯ããŸãã§24æéçµãããªã巚倧ãªããŒãã£ãŒã«åå ããŠãããããªãã®ã§ãã倧é³éã®é³æ¥œã®äžã§ã誰ããèªåã®å£°ãèããŠãããããšå€§å£°ã§å«ãã§ããããããªå§éšã®äžã§ãæ¬åœã«æå³ã®ãã察話ãçãŸããã§ããããïŒããããçãŸããã®ã¯è¡šé¢çãªã€ãªãããšãæ·±ã粟ç¥çãªç²åŒã ãã§ãã
1-4. ããã·ã¥ã¿ã°ãäœãã³ãã¥ããã£ã®å ãšåœ± #ïžâ£
ããã·ã¥ã¿ã°ïŒ#
ïŒã¯ãåãèå³ãæã€äººã
ãç¹ãã匷åãªããŒã«ã§ãã#ç«å¥œããããšç¹ãããã
ãšæ€çŽ¢ããã°ãããã«ã¯ç«ãæãã人ã
ã®æçš¿ãæº¢ããŠããŸããããã¯çŽ æŽãããããšã§ãããã€ãŠã¯æ¢ãåºãã®ãé£ããã£ãå奜ã®å£«ããäžç¬ã§èŠã€ãåºããã®ã§ãããã
ãããããã®æè»œãã«ã¯åœ±ã®åŽé¢ããããŸããããã·ã¥ã¿ã°ã«ããã³ãã¥ããã£ã¯ãéåžžã«æµåçã§ãå¹é£çã§ããããã¯å ±éã®è©±é¡ã«ã€ããŠã®æçš¿ãéãŸããåºå Žãã§ãã£ãŠãã¡ã³ããŒéã®æ·±ãé¢ä¿æ§ãè²ãŸãããå± å Žæãã«ã¯ãªãã«ããã®ã§ãã
ããã«ãããã·ã¥ã¿ã°ã¯æãšããŠãç°ãªãæèŠãæé€ããåãèããæã€äººã ã ãã§åºãŸãããšã³ãŒãã§ã³ããŒçŸè±¡ãããéå£ãéæ¿ãªæ¹åã«é²ããé壿¥µæ§åããå éãããè£ çœ®ã«ããªãåŸãŸããå ±éã®ããã·ã¥ã¿ã°ã®äžã«éãŸãããšã§å®å¿æãåŸãäžæ¹ãç§ãã¡ã¯èªåãã¡ã®ãå€ãã«ãã倿§ãªäžçãããç¥ããç¥ããã®ãã¡ã«ç®ãèããŠããŸã£ãŠããã®ãããããŸãããã³ãã¥ããã£ã¯ãããã·ã¥ã¿ã°ã«ãã£ãŠäžããããã®ã§ã¯ãªããæ¬æ¥ã¯æéããããŠç¯ãäžãããã®ã ã£ãã¯ãã§ãã
ã³ã©ã ïŒåããŠã®ãçäžãã©ãã
ããã¯TwitterïŒçŸXïŒããŸã ç§æçã ã£ãé ã®è©±ã§ããç§ã¯åœæããã£ãŠããæµ·å€ãã©ãã«ã€ããŠãäœæ°ãªãææ³ãæçš¿ããŸããããããšæ°ååŸãèŠç¥ãã¬ã¢ã«ãŠã³ããããããã¯è§£éãéããŸãããšãããªãã©ã€ãããŸãããããããã¯ããããããšããããããã®ãªãã©ã€ã«ããããããä»ãå§ãããããããããšããéã«æ°åä»¶ã®åŒçšãªãã€ãŒãã§ãã«ããããäœãããã£ãŠãªãããšããèšèãé£ã³äº€ãå§ããŸããããããããçäžãã©ããã§ãããã£ã140åã®èšèããæèããåãé¢ãããŠäžäººæ©ãããŠããææãå¿èããã¯ãã¯ããŠããã®æ¥ã¯äžæ¥äžã¹ããŒããã©ã³ã®éç¥ãæ°ã«ãªã£ãŠä»æ¹ããããŸããã§ããããã®ææããã®ã¯ããã£ãŒããšããåºå Žãããã«ç¡é²åã§ãããã«èšèã®è²¬ä»»ã軜ããªãå Žæããšããããšã§ããããã®çµéšããç§ããã£ãŒãããè·é¢ã眮ã倧ããªãã£ããã«ãªã£ãã®ã¯ééããããŸããã
第2ç« ïŒæµãã«æãç¡åæ
2-1. ãããã¯ãªã¹ããšãã¥ãŒãã¯ãŒãïŒãããããªæµæã®èšé² ð¡ïž
ãã£ãŒãã®å¥æµã«æããããç§ãæ§ã ãªæãå°œãããŸãããäžå¿«ãªã¢ã«ãŠã³ããçã£ç«¯ãããããã¯ããèŠãããªãåèªããã¥ãŒãã¯ãŒãã«ç»é²ãããã¿ã€ã ã©ã€ã³ãæç³»åé ã«äžŠã¹æ¿ããã¢ã«ãŽãªãºã ã®æ¯é ããéããããšè©Šã¿ããããã¯ãæŒãå¯ããæ¿æµã®äžã§ãå°ããªãã±ãã§æ°Žãæ»ãåºãããšãããããªã奿°ã§ããããŠçµ¶æçãªæŠãã§ããã
確ãã«ããããã®ã«ã¹ã¿ãã€ãºã¯äžæçãªå®ãããäžããŠãããŸãããããããã©ãããã©ãŒã ã¯åžžã«ç§ãã¡ã®æµæã®äžãè¡ããŸããæ°ããåºåãã©ãŒããããæ°ããã¬ã³ã¡ã³ãæ©èœããããªããžã®ãããããã¯ããããã¯ã®ç¶²ãããæããŠã¿ã€ã ã©ã€ã³ã«æ»ã蟌ãã§ããã®ã§ãã
çµå±ããããã®æµæã¯å¯Ÿççæ³ã«éããŸãããç æ°ã®æ ¹æ¬åå ãã€ãŸãããŠãŒã¶ãŒã®æ³šæãåŒãã€ããŠé¢ããªãããšãããã©ãããã©ãŒã ã®ããžãã¹ã¢ãã«ãã®ãã®ã«æãä»ããªãéããç§ãã¡ã¯æ°žé ã«ã€ã¿ããã£ããç¶ãããããªãã®ã§ãã
2-2. ããžã¿ã«ãããã¯ã¹ã®è©Šã¿ãšããã®éç ðµ
ãããéçã ïŒããšæããç§ã¯ã次ã«ãããžã¿ã«ãããã¯ã¹ãã詊ã¿ãŸããã鱿«ã¯SNSã®ã¢ããªããã¹ãŠåé€ããéç¥ããªãã«ãããæå³çã«ã¹ããŒããã©ã³ã«è§Šããªãæéãäœããæåã®æ°æéã¯ããŸãã§çŠæçç¶ã®ããã«ãœã¯ãœã¯ããŸãããäžã®äžããåãæ®ããããããªäžå®æïŒFOMO: Fear Of Missing OutïŒã
ããããæéãçµã€ã«ã€ããŠãå¿ã¯éãããåãæ»ããŸããé³¥ã®å£°ã«è³ãæŸãŸããç©ãã§ãã£ãæ¬ãæã«åããæ£æ©ã«åºããããããããªããšäººéçãªæéã ãããããšãããããæææ¥ã®æãã¢ããªãåã€ã³ã¹ããŒã«ããç¬éã«ãçŸå®ã«åŒãæ»ãããŸããæ°çŸä»¶ã®æªèªéç¥ãå§éšã«æºã¡ãã¿ã€ã ã©ã€ã³ã鱿«ã®éå¯ã¯ããŸãã§å€¢ã ã£ããã®ããã«æ¶ãå»ãããããã¯ã¹åããã匷ãç²åŽæã«è¥²ãããã®ã§ãã
ããžã¿ã«ãããã¯ã¹ã¯ãããã°ãäžæçãªé¿é£ãã§ããããããç§ãã¡ãçãã瀟äŒã¯ããã¯ãããžã¿ã«ãšåãé¢ããŸãããé¿é£æããæ»ãã°ãããã«ã¯çžå€ãããèãçãåµãåŸ ã£ãŠãããæ ¹æ¬çãªè§£æ±ºçã«ã¯ãªãåŸãªãã®ã§ãã
2-3. ãªããæçµçã«ãã£ãŒãã¯åã€ã®ã ð
ç§ãã¡ã¯ããªããã£ãŒãã«æããªãã®ã§ããããïŒæå¿ã匱ãããïŒèªå¶å¿ããªãããïŒ
ããã§ã¯ãããŸãããçžæã¯ãäžçæé«å³°ã®é è³ãæã€ãšã³ãžãã¢ããã¶ã€ããŒãå¿çåŠè ããè«å€§ãªäºç®ãæããŠäœãäžããã人é¡å²äžæãæŽç·Žããããæ³šæã®åç©«æ©ããªã®ã§ããåäººã®æå¿ã®åã ãã§ããã®å·šå€§ãªã·ã¹ãã ã«ç«ã¡åããã®ã¯ã竹æ§ã§æŠè»ã«æããããªãã®ã§ãã
ãã£ãŒãã®æµãã«æµæããããšã¯ãçµ¶ãéãªãæå¿ã®è¡çºã§ããåžžã«èŠæããã¡ã³ããã³ã¹ãæ ã£ãŠã¯ãªããªããããã¯ã²ã©ãç²ããäœæ¥ã§ãããããŠãå°ãã§ãæ°ãæãã°ãç§ãã¡ã¯åã³æµãã«é£²ã¿èŸŒãŸããŠããŸããã ãããæçµçã«ã¯åžžã«ãã£ãŒããåã€ã®ã§ãã
ã ããç§ã¯ãæŠãããšããããŸãããæµæããã®ã§ã¯ãªãããªããã¢ãŠãããïŒéããïŒããšãéžãã ã®ã§ããç§ã¯ãã£ãŒãããæ®ããŸããã
ã³ã©ã ïŒæ¶ãããŠã§ããµã€ã
ãã£ãŒãããé¢ããåŸãç§ã¯äœåºŠãèªåã®ãŠã§ããµã€ããäœãããšããŸããããããããã¯èªåã®èšèã§ãèªåã®å Žæã§çºä¿¡ãããã ããšææ°èŸŒãã§ãã§ããæ°ã¶æããããšæŽæ°ãæ»ããçµå±ãµãŒããŒä»£ã®è«æ±æžãæ¥ããã³ã«ãäœã®ããã«ç¶æããŠããã ã£ãâŠããšèãããªã£ãŠããµã€ãããšåé€ããŠããŸãããããªããšãç¹°ãè¿ããŠããŸããã仿ãã°ãããã¯ããã£ãŒãçãªæåããç¡æèã«æ±ããŠãããããªã®ã§ããããã¢ã¯ã»ã¹æ°ãã³ã¡ã³ãã誰ãã®åå¿âŠã誰ãèŠãŠãããªããŠã§ããµã€ãã¯ç¡äŸ¡å€ã ãšæã蟌ãã§ããã®ã§ãããã£ãŒããç©ççã«é¢ããŠãããã®äŸ¡å€èгã¯å¹œéã®ããã«ç§ã«åãæããŠãããæ¬åœã®æå³ã§ãã£ãŒãããèªç±ã«ãªãã«ã¯ããã£ãšæ ¹æ¬çãªå€åãå¿ èŠã ãšæ°ã¥ãã®ã«ãããã«æ°å¹Žã®æéãå¿ èŠã§ããã
第2éšïŒãã€ã³ã¿ãŒãããIããžã®é·æãšåçºèŠ æ
第3ç« ïŒåããæãããéããªãŠã§ã
3-1. å°ããªæ·å°ã®åºå€§ãªã³ã¬ã¯ã·ã§ã³ïŒWeb 1.0ã®èšæ¶ ðŸ
è¡éã®è人ã ãšæãããŠãæ§ããŸãããç§ãè²ã£ããã€ã³ã¿ãŒãããIãããããã Web 1.0 ã®æä»£ã¯ã確ãã«ãã£ãšéãã§ãããããã¯ä»ããå°ããã£ãããã§ã¯ãããŸããããããåºå€§ã§ãããããããã®åºå€§ãã¯ã巚倧ãªã·ã§ããã³ã°ã¢ãŒã«ãããã€ãããã®ã§ã¯ãªããåæ§è±ããªå人ååºãç¡éã«é£ãªãã巚倧ãªååºè¡ã®ãããªãã®ã ã£ãã®ã§ãã
å€ãªå€ãªãèŠç¥ãã¬èª°ããäœã£ãå人ãµã€ããå·¡ãã®ãç§ã®æ¥èª²ã§ãããããã«ã¯ãåºåããã¢ã«ãŽãªãºã ããéå°ãªãããããããããŸããããã ããµã€ãã®äž»äººãæããŠããŸãªããã®ââå€ãæ ç»ãBçŽSFå°èª¬ãèªäœã®MIDI鳿¥œãè²ãŠãŠãããµããã³ã®èг坿¥èšââããæäœãæããµãããã¶ã€ã³ãšå ±ã«ãéãã«çœ®ãããŠããã ãã§ããã
.ïŒï¿£ï¿£ï¿£ï¿£ï¿£ï¿£ï¿£ï¿£ï¿£ï¿£ï¿£ïŒŒ | ããããïŒ | | ç§ã®ããŒã ããŒãžãž | | ããªãã¯xxxxx人ç®ã® | | ã客æ§ã§ãïŒ | / ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄
ãã®é ã®ãŠã§ããµã€ãã¯ãäžã€ã²ãšã€ãæã¡äž»ã®ãéšå±ãã®ããã§ãããå£çŽã®è²ãã«ãŠã³ã¿ãŒã®æ°åã眮ããŠããæç« ãç»åãããããã¹ãŠããäœãæã®äººãšãªããéåŒã«ç©èªã£ãŠããŸãããç§ãã¡ã¯ããã®äººã®éšå±ããã£ãšèšªãããã®äººã倧åã«ããŠãããã®ãèŠããŠããããããªããããªæ ãŸãããè±ããªäœéšãããŠããã®ã§ãã
3-2. ãªã³ã¯ã蟿ãåã³ãšãã³ãã¥ããã£ã®çºèŠ ð
Web 1.0ã®äžçãæ ããã³ã³ãã¹ã¯ããã€ããŒãªã³ã¯ã§ããããããµã€ãã§é¢çœããããã¯ãèŠã€ãããšããã®ããŒãžã®çé ã«ããããããªã³ã¯éããšãã£ãã³ãŒããŒãããã®ã§ããã¯ãªãã¯ãããšãåãããŒããæããå¥ã®èª°ãã®ãµã€ããžé£ã¶ããããããŸãå¥ã®ãµã€ããžâŠã
ãã®ãªã³ã¯ã®é£éã蟿ãè¡çºã¯ã宿¢ãã«äŒŒãŠããŸãããäžã€ã®èå³ããåºçºããŠãæ°ã¥ãã°å šãäºæ³ãããªãã£ãç¥èã®æµ·ã«ãã©ãçããŠããããã®å¶çºçãªçºèŠã®åã³ãããããã»ã¬ã³ãã£ããã£ããããåæã®ãŠã§ããµãŒãã£ã³ã®ééå³ã§ããã
ãããŠããªã³ã¯ã蟿ã£ãŠãããšãå¿ ãã³ãã¥ããã£ãèŠã€ãããŸãããç¹å®ã®ãã³ãããã¯ãããžãŒã挫ç»ãå²åŠâŠãã©ããªã«ããããªããŒãã§ããããã«ã€ããŠèªãåããŠã§ããµã€ã矀ããIRC (Internet Relay Chat) ã®ãã£ã³ãã«ãããã㯠phpBB ã§äœããããã©ãŒã©ã ïŒæ²ç€ºæ¿ïŒãååšããã®ã§ããããã§ã¯ãåããã®ãæãã人ã ããè©ãå¯ãåãããã«ããŠãç±ããæ·±ããèªãåã£ãŠããŸããã
3-3. ãç¥ããªãã£ãããç¥ãåŠã³ã®äœéš ð¡
ç§ããã€ã³ã¿ãŒãããIãã§éãããæéã¯ãçŽç²ãªåŠã³ã®é£ç¶ã§ãããäŸãã°ãåäŸã®é ã«å€¢äžã«ãªã£ããå®å®æŠèŠã€ãããããæ©åæŠå£«ã¬ã³ãã ããšãã£ã挫ç»ïŒåœæã¯ããæã£ãŠããŸããïŒããå®ã¯ãã¢ãã¡ããšåŒã°ããæ¥æ¬ç¬èªã®è¡šçŸåœ¢åŒã§ããããããæµ·å€ã§ãé«ãè©äŸ¡ãããé©ãã»ã©é²åãéããŠãããšããäºå®ããããç¥ã£ãã®ã¯ããããã¡ã³ãµã€ãã®çé ã«æžãããã³ã©ã ããã£ããã§ããã
ãµã€ãããã£ãŒãã«çœ®ãæããã«ã€ããŠããã®ãåŠã³ãã¯ãåå¿ãã«åã£ãŠä»£ããããŸãããé©ãã¯ç¡é¢å¿ã«ãåã³ã¯ç²åŽã«ããããŠã³ãã¥ããã£ã¯ããã·ã¥ã¿ã°ã«ãç§ã¯ããã£ãŒããç Žå£ããŠããŸã£ãããã®éãã§è±ããªã€ã³ã¿ãŒãããããæ±ºããŠå¿ããããšãã§ããŸããã§ããã
ã³ã©ã ïŒãã¬ããŒãã€ãšå€ã®åéº
ä»ã§ã¯ä¿¡ããããªããããããŸããããåœæã¯ã€ã³ã¿ãŒãããã«ç¹ãã®ã«ãéãããããŸããããããåŸé課éå¶ã§ãç¹ãã æéã ãé»è©±ä»£ããããããããªæã åŠçã®æäžäž»ãããã¬ããŒãã€ããšããNTTã®ãµãŒãã¹ã§ãããå€11æããæ8æãŸã§ãæå®ãã2ã€ã®é»è©±çªå·ãžã®é話ãå®é¡ã«ãªããã€ãŸãããããã€ãã®ã¢ã¯ã»ã¹ãã€ã³ããç»é²ããŠããã°ãå€ã®éã ãã€ã³ã¿ãŒããããäœ¿ãæŸé¡ã«ãªãã®ã§ãïŒ 10æ55åã«ãªããšãçãããããšããœã³ã³ã®åã§åŸ æ©ãã11æã¡ããã©ã«äžæã«ãã€ã€ã«ã¢ããæ¥ç¶ãéå§ããããïŸïŸïœ°ïœ°ïœ°ïŸïœ®ïŸïŸïŸïŸïœ¶ïŸïœ¶ïŸïœ¶ïŸïœ¶ïŸããšãããã®æãããã¢ãã ã®é³ã¯ãå€ã®åéºã®å§ãŸããåãããã¡ã³ãã¡ãŒã¬ã§ãããæãŸã§å人ãµã€ãã®æµ·ãæ³³ããç ãç®ãããããªããåŠæ ¡ãžè¡ãããã®é ã®äžäŸ¿ããšãããã«äŒŽãå šèœæã¯ãä»ã®åžžææ¥ç¶ã®æä»£ã«ã¯ãªããç¹å¥ãªèŒããæã£ãŠããããã«æããŸãã
第4ç« ïŒIndieWebãšã®åºäŒã
4-1. 2025幎ã«ãŠã§ããµã€ããèªäœãããšããããš ð€
ãã£ãŒããé¢ããææãŠã§ããµã€ããäœã£ãŠã¯æ¶ããç¹°ãè¿ããŠããç§ã§ãããä»å¹Žã®ã¯ãããããäžåºŠã ãææŠããŠã¿ãããšã«ããŸããããããããŸãæ°ã¶æã§æ«æããèªåã®å§¿ãç®ã«æµ®ãã³ãŸããããã£ããnoteãã¯ãŠãªããã°ã®ãããªãã©ãããã©ãŒã ã䜿ãããâŠããšåŒ±æ°ã«ãªã£ãããããããããã§ã¯æå³ããªãïŒããšå¥®èµ·ããããæ°é±éã«ãããåªæäžæãªã¯ããã«ã®æ«ãç§ã¯äžã€ã®äºå®ã«æ°ã¥ããŸããã
ãååãç§ããµã€ãã建ãŠãæãããäžçã¯å€§ããå€ãã£ãŠããã®ã§ã¯ãªããïŒã
ããã§ç§ã¯ã2025幎çŸåšã人ã ãã©ã®ããã«ããŠå人ã®ãŠã§ããµã€ããæ§ç¯ããŠããã®ãã調æ»ãå§ããŸããããããšãæ€çŽ¢çµæã®çé ã«ãèŠæ £ããªãèšèãäœåºŠãçŸããããšã«æ°ã¥ããã®ã§ãããã®èšèã¯ããIndieWebãã§ããã
4-2. IndieWebãšã¯äœãïŒç¬ç«ãããŠã§ãã®ããã®ææ³ãšããŒã« ð ïž
IndieWebãšã¯ãäžèšã§èšãã°ã巚倧ãã©ãããã©ãŒã ããç¬ç«ãããå人ã®ãŠã§ããµã€ããåãæ»ãããã®ææ³ã§ãããæè¡çãªå®è·µã®éãŸããã§ãã
圌ãã¯ãFacebookãTwitterã®ãããªäžå€®éæš©çãªãµãŒãã¹ïŒåœŒãã¯ãããããµã€ãïŒSilosïŒããšåŒã³ãŸãïŒã«èªåã®ã³ã³ãã³ãïŒæçš¿ãåçã人éé¢ä¿ïŒãé ããŠããŸãã®ã§ã¯ãªããèªåèªèº«ã®ãŠã§ããµã€ããã¢ã€ãã³ãã£ãã£ã®äžå¿ã«çœ®ãããšãæå±ããŠããŸããèªåã®ãã¡ã€ã³ããããããªãã®ãªã³ã©ã€ã³äžã®ãå®¶ãã§ããã¹ãã ããšã
IndieWebã®äž»èŠãªååãšããŒã«ïŒã¯ãªãã¯ããŠå±éïŒ
- èªåã®ããŒã¿ãææãã (Own Your Data): ã³ã³ãã³ãã¯èªåã®ãµãŒããŒã«çœ®ãããã©ãããã©ãŒã ã®ãµãŒãã¹çµäºãèŠçŽå€æŽã«æ¯ãåãããªãããã«ããŸãã
- POSSE (Publish on your Own Site, Syndicate Elsewhere): ãŸãèªåã®ãµã€ãã«æçš¿ãããã®ã³ããŒãSNSã«ãé ä¿¡ïŒSyndicateïŒãããããšããèãæ¹ã§ããããã«ãããå人ãšã®ç¹ãããç¶æãã€ã€ãã³ã³ãã³ãã®ãªãªãžãã«ã¯èªåã®æå ã«æ®ãããšãã§ããŸãã
- Webmention: ããã°ã®ã³ã¡ã³ããSNSã®ãããããããªãã€ãŒããã®ãããªãªã¢ã¯ã·ã§ã³ãããµã€ãéã§çŽæ¥ãããšãããããã®ä»çµã¿ã§ããããã«ããããã©ãããã©ãŒã ãä»ããã«ãå人ãµã€ãå士ã飿ºã§ããŸãã
- Micropub: ã¹ããŒããã©ã³ã¢ããªãªã©ãããèªåã®ãŠã§ããµã€ãã«ç°¡åã«æçš¿ããããã®æšæºçãªèŠæ Œã§ãã
ãããã®ããŒã«ã¯ãæ¢åã®ãŠã§ãæšæºïŒHTML, CSS, HTTPãªã©ïŒã®äžã«æ§ç¯ãããŠãããWeb 1.0ã®ã·ã³ãã«ããšãWeb 2.0ã®åæ¹åæ§ãäž¡ç«ãããããšããéå¿çãªè©Šã¿ãªã®ã§ãã詳ããã¯IndieWebã®å ¬åŒãµã€ãïŒè±èªïŒããæ¥æ¬èªã®è§£èª¬èšäºãªã©ãåç §ããŠãã ããã
4-3. ãŠã§ããªã³ã°ã®åŸ©æŽ»ãšãæ°ããé£äººãã¡ ðð€
IndieWebã®ã³ãã¥ããã£ãéå¶ããWikiãèªã¿é²ããŠãããšãç§ã¯ãwebringããšãããæãããé¿ããæã€ãªã³ã¯ãèŠã€ããŸãããã¯ãªãã¯ãããšãIndieWebãå®è·µããŠãã人ã ã®ãµã€ããã©ã³ãã ã«è¡šç€ºãããŸããç§ã¯åžã蟌ãŸããããã«æ¬¡ã ãšãµã€ãã蚪ããæ°ã¥ãã°1æéãçµã£ãŠããŸããã
ããã«ãã£ãã®ã¯ããŸãããç§ãæ¢ãæ±ããŠãããå°ããªæ·å°ã®åºå€§ãªã³ã¬ã¯ã·ã§ã³ãã§ããããã¶ã€ã³ããããŒãããæç« ã®ããŒã³ããäœããããéããããããããã«ã¯å ±éã®æ ç±ããããŸããããèªåã®æã§ãèªåã®å Žæãäœãããšãããéãã§ãããã確åºããæå¿ã§ãã
ããã«é©ããããšã«ã圌ãã¯ã³ãã¥ãã±ãŒã·ã§ã³ã®å ŽãšããŠããªããš IRC ãçŸåœ¹ã§äœ¿ã£ãŠããã®ã§ãïŒ æããããã£ããã«ãŒã ã®æãéãããšãããã«ã¯æ°äººã®äººã ããéåžžã«ç¹æ®ã§æè¡çãªãããã¯ã«ã€ããŠãæ ç±çã«èªãåã£ãŠããŸãããç§ã¯ããã®é æãã身è¿ãªå ±åäœæèããèžã®å ã«èã£ãŠããã®ãæããŸããã
4-4. ãäœããªããããšã®è±ããïŒæåã®æçš¿ãšãéå¯ã®è¯å® âš
ã³ãã¥ããã£ã«è§Šçºãããç§ã¯ã€ãã«èªåã®ãµã€ããç«ã¡äžããæåã®æçš¿ãããŸããããããŠãæ¯ã殺ããŠåŸ ã¡ãŸãããäœãèµ·ããã ãããããšã
çãã¯ããäœãèµ·ãããªãã£ããã§ããã
誰ãåå¿ããªãã誰ãã³ã¡ã³ãããªãã誰ãç§ããã©ããŒãããšèŠæ±ããŠããªãã誰ãç§ã«äœãã売ãã€ããããšããã©ããŒããããªãããŠããªãã
ããããäžæè°ãªããšã«ãç§ã¯ããæ°å¹Žã§æããããšããªãã»ã©ãã³ãã¥ããã£ã®äžå¡ã§ãããšæããŠããŸããããã®éå¯ã®äžã§ãç§ã¯ãªãããæããã®ããèããããšãã§ããŸããããã£ãŒãã®å§éšããé¢ããå Žæã§ãç§ã®èšèã¯ããã ããã«ãåšããããšãèš±ãããã®ã§ããè©äŸ¡ãããããã§ããæ¶è²»ãããããã§ããªãããã ãåšãããã«ãããã¯ãé©ãã»ã©è§£æŸçãªäœéšã§ããããã®ãäœããªããããšã®è±ãããããã¹ããŒãŠã§ãã®åºçºç¹ãªã®ã§ãã
ã³ã©ã ïŒ88x31ãã¯ã»ã«ã®éæ³
IndieWebã®ãµã€ããå·¡ã£ãŠãããšãå€ãã®ãµã€ãã®ããã¿ãŒã«ãå°ããªãããŒã貌ãããŠããããšã«æ°ã¥ããŸãããµã€ãºã¯88x31ãã¯ã»ã«ãããã¯Web 1.0æä»£ã«å€§æµè¡ãããããããããªã³ã¯ãã¿ã³ããã¢ãã£ãªãšã€ããããŒãã®ãµã€ãºã§ããããã«ã¯ãHTML5 Valid!ããšããViewable with Any Browserããšãã£ãæè¡çãªäž»åŒµããããAnti-AIããMade with Loveããšãã£ãææ³çãªè¡šæãŸã§ãæ§ã ãªã¡ãã»ãŒãžã蟌ããããŠããŸãããã®å°ããªãã¯ã»ã«ã¢ãŒãã«ããµã€ãã®æã¡äž»ã¯èªåã®ã¢ã€ãã³ãã£ãã£ãåçž®ãããŠããã®ã§ããç§ãæ©éãæããããçµµã§èªåã®ãµã€ãã®ãããŒãäœã£ãŠã¿ãŸããã誰ãã«ã¯ãªãã¯ãããããã§ã¯ãããŸããããã ãèªåã®ãµã€ãããã®åºå€§ãªãŠã§ãã®äžéšã§ããããšã瀺ãããããããªæå°ãšããŠããã®å°ããªãããŒãçºããŠãããšãèªåã巚倧ãªãã©ãããã©ãŒã ã®ããŠãŒã¶ãŒãã§ã¯ãªãããŠã§ããšããå ±åäœã®ãäžå¡ãã«ãªãããããªæ°ãããŠãå°ãã ãèªãããæ°æã¡ã«ãªãã®ã§ãã
第3éšïŒã¹ããŒãŠã§ãã®å®è·µ ð¢
第5ç« ïŒé¢ä¿æ§ãè²ãããã®ãã¶ã€ã³
5-1. ããŒãã£ãŒãããçžåŽã®äŒè©±ãž ðµ
人éé¢ä¿ã«ã€ããŠèããŠã¿ãŸããããç§ãã¡ã¯ãéšãããããŒãã£ãŒã§äžåºŠäŒã£ãã ãã®äººã®ããšããæ¬åœã«ãç¥ã£ãŠããããšèšããã§ããããïŒ ç§ãç¥ã£ãŠããã®ã¯ããã®äººã倧é³é¿ã®äžã§å«ã¶ããšãã§ããèšèãã€ãŸããä»äººã«ç¥ãããŠãæ§ããªããšæã£ãŠããå€é¢ã ãã§ããç§ãã¡ã¯ç¥äººã«ã¯ãªãããããããŸããããæ±ºããŠå人ã«ã¯ãªããŸããã
æ¬åœã®åæ ã¯ãéãããããããããããŸãããããã¯ãéããªç¬éã«è²ãŸãããã®ã§ããå«è¶åºã§ã®ã³ãŒããŒãå ¬åã®æ£æ©ãäžç·ã«éã¶ã²ãŒã ãåºæ¿çãªããšããè ¹ã®ç«ã€ããšã«ã€ããŠããã£ãããšèªãåãæéããããªç¬éã«ãããç§ãã¡ã¯çžæãæåœ±ãããå§¿ã§ã¯ãªããçžæãã®ãã®ãç¥ãããšãã§ããã®ã§ãã
ãã£ãŒãã«ããé ã®ç§ã¯ãåžžã«ããŒãã£ãŒã«åå ããŠãããããªãã®ã§ãããããããã®ç¹ããã¯äœããŸãããããããã¯åžèã§ã倱ã£ãŠã倧ããªåªå€±æã¯ãããŸããã§ãããããããããŒãœãã«ãŠã§ãããããã¯ãã¹ããŒãŠã§ããã®äžçãçºèŠããããšã¯ãæ°ããå人ãäœãããã»ã¹ã«ãã䌌ãŠããŸãã
5-2. ã¹ããŒãŠã§ããšããåã®å人çãªå®éš ð¬
IndieWebã³ãã¥ããã£ã«èŠªè¿æãèŠããç§ã¯ã掻åãåŸãŸããã圌ããšç¥ãåãã圌ãããã£ãŠããããšãäœã§ãç䌌ããŠã¿ããïŒãšããè¡åã«é§ãããŸãããããããç§ã¯ãã®è¡åãšéãããšã«æ±ºããŸãããå°ãªããšãããä»ããããã¹ãŠãããããšããè¡åãšã¯ã
代ããã«ãç§ã¯èªåã®ãŠã§ããšã®é¢ããæ¹ããã¹ããŒãŠã§ãïŒThe Slow WebïŒããšåä»ããããã€ãã®æ«å®çãªã«ãŒã«ãèšããŸããã
- æçš¿ã¯ãæ¥ããªãã äœãèšãããããšãèªç¶ã«æ¹§ãäžãã£ãŠããã®ãåŸ ã€ã
- 人ã®ãµã€ãã¯ãã£ããèªãã 1æ¥ã«èªãããã°èšäºã¯æ°æ¬ã«çãããã®ä»£ããäžè¡äžè¡ãå³ããã
- ç¹ããã¯ããã£ããç¯ãã ç§ã¯èªåã®MastodonïŒåæ£åSNSïŒã€ã³ã¹ã¿ã³ã¹ãç«ãŠããã©ããŒããŠããã®ã¯ãã£ãã®4人ã§ãã
- æè¡ããå°ããã€åŠã¶ã äžåºŠã«ãã¹ãŠãå®è£ ããããšãããäžã€ãã€è©ŠããŠã¿ãã
ããã¯ãæ£ããããæ¹ãã§ã¯ãããŸãããã¹ããŒãŠã§ãã®çŽ æŽãããç¹ã®äžã€ã¯ã人ã ããããèªåã ãã®ãã®ã«ããŠããããã®å€æ§ãªæ¹æ³ãçºèŠããããšã§ããããã¯ããããŸã§ç§ã«ãšã£ãŠããŸãããæ¹æ³ãªã®ã§ãã
5-3. éããä¹ãè¶ããããã®ãæéããšã空éã ð€
ã¹ããŒãŠã§ããå®è·µããäžã§ãç§ã®ä»è ãžã®åå¿ã¯å€§ããå€ãããŸããããã£ãŒãã®ã©ãã·ã¥ãšãã€ãºã®äžããè§£æŸããããšãæèŠã®éããè åšã§ã¯ãªããªããŸãã
äŸãã°ããã®ã³ãã¥ããã£ã«ãã誰ãããç§ãšã¯çžå®¹ããªãAIã«ã€ããŠã®æ¥œèгçãªèŠè§£ãè¿°ã¹ããšããŸãããã£ãŒãã®äžçã§ããã°ãç§ã¯åå°çã«ãããã¯éãïŒããšåè«ã®æçš¿ããããããããŸãããããããã¹ããŒãŠã§ãã«ã¯ã圌ãããªãããèããã®ãã説æããããã®æéãšç©ºéããããŸãããããŠç§ã«ã¯ããã®çç±ãçè§£ããããšåªããããã®æéãšç©ºéãããã®ã§ããæçµçã«åæã§ããªãã£ããšããŠãããã®æèã®ããã»ã¹ãå°éããããšãã§ããŸãã
誰ããç§ã®èå³ã®ãªããã®ïŒäŸãã°ã掟æãªè²ã®CSSãã88x31ãã¯ã»ã«ã®ãã¿ã³ïŒã«æ ç±ã泚ãã§ãããšããç§ã¯ãã®å¯Ÿè±¡ã«è§ŠçºãããªããŠãããã®ç±æãã®ãã®ã«è§Šçºãããã«ã¯ããããŸããã
ããããããç§ã®æã匷ã人éé¢ä¿ãçºå±ããŠããæ¹æ³ã§ããé¡äŒŒç¹ãçµãçã¿ãéããæé·ãä¿é²ãããã¹ããŒãŠã§ãã¯ããªã³ã©ã€ã³ã§ãããå¯èœã«ããç°å¢ãæäŸããŠãããã®ã§ãã
5-4. èªåã®åºãè²ãŠãããã«ïŒãã£ãããšãŠã§ããæ§ç¯ãã ð±
ãããã£ãŠãç§ã¯ã¹ããŒãŠã§ãã«åºå·ããã€ããã§ãããã¡ãããç©äºãèŠéããŠããŸãã®ã§ã¯ãªãããšããäžå®ïŒFOMOïŒã¯åžžã«ãããŸããããã«ã¯çºèŠãã¹ãããšãããããããããããäžåºŠã«åžåããããšããè¡åãæããã®ã¯å°é£ã§ãã
ããããç§ã¯ç¥ã£ãŠããŸãããã®çŽ æŽãããã³ã³ãã³ãã¯ãæ¥é±ããæ¥æããæ¥å¹Žãããã£ãšããã«ããã ãããšããããŠãç§ããã®ã¹ããŒãŠã§ããšããåã®å°ããªåºãããã£ãããšããããçå®ã«è²ãŠç¶ãããªããç§èªèº«ããŸããããã«åšãç¶ããã ãããšããåžæãæã£ãŠããŸãã
ã³ã©ã ïŒ20幎è¶ãã®æçš¿
ç§ã®æ°ãããµã€ãã«ã¯ããŸã æ°ããã»ã©ããèšäºããããŸããããã®ãã¡ã®äžã€ã¯ãå®ã¯20幎åã«æžããæç« ã®ã³ããŒã§ããããã¯ããããã€ããŒãªã²ãŒã ã®æ»ç¥ã¬ã€ãã§ãããåœæéå¶ããŠããå人ãµã€ãããããã€ãã®ãµãŒãã¹çµäºãšå ±ã«æ¶æ» ãããã®ããã¹ãã倱ããããšæã蟌ãã§ããã®ã§ãããããå æ¥ãå€ãããŒããã£ã¹ã¯ã®å¥¥åºããããã®ããã¹ããã¡ã€ã«ãå¥è·¡çã«èŠã€ãããŸãããèªãã§ã¿ããšãæç« ã¯æããæ å ±ã¯å€ã³ãŠããŸããããããã«ã¯ç¢ºãã«20幎åã®ç§ã®ç±æãè©°ãŸã£ãŠããŸãããç§ã¯ãã®ããã¹ãããã»ãŒãã®ãŸãŸã®åœ¢ã§æ°ãããµã€ãã«æçš¿ããŸããã誰ãã®åœ¹ã«ç«ã€æ å ±ã§ã¯ãããŸãããããããããã¯20幎åã®ç§ãããçŸåšã®ç§ãžã®ãæãè¶ ãããã€ããŒãªã³ã¯ãªã®ã§ãããã®æçš¿ã¯ãç§ã®ãµã€ããšããåºã«æ€ãããããæåã®ããããŠæãå€ãæšã«ãªããŸãããã¹ããŒãŠã§ããšã¯ããã®ããã«èªåã®æŽå²ãæ ããããšã§ãããã®ãããããŸããã
第6ç« ïŒææ³ãå®è£ ããæè¡
ããŠããããŸã§ã¯ãã¹ããŒãŠã§ãããšããææ³ãããã°ç²Ÿç¥è«ã«ã€ããŠèªã£ãŠããŸãããããããææ³ã¯å ·äœçãªåœ¢ãæã£ãŠããåã«ãªããŸãããã®ç« ã§ã¯ãRedditã®Webéçºã³ãã¥ããã£ãªã©ã§äº€ããããŠããè°è«ãåèã«ããã¹ããŒãŠã§ãã®å²åŠããã©ã®ããã«ãŠã§ããµã€ãã®ã³ãŒãã«èœãšã蟌ããããšãããããæè¡çãªåŽé¢ã«èžã¿èŸŒãã§ã¿ãŸããããç¹ã«ãäœéãªã€ã³ã¿ãŒãããæ¥ç¶ããå®äŸ¡ãªã¹ããŒããã©ã³ïŒããŒãšã³ãããã€ã¹ïŒã䜿ã£ãŠãããŠãŒã¶ãŒã«åªãããµã€ããäœãããšã¯ããã¹ãŠã®äººãå°éãããšããã¹ããŒãŠã§ãã®ç²Ÿç¥ã«åèŽãããéèŠãªå®è·µã§ãã
6-1. ãªãReactã¯ãééã£ãéžæããªã®ã âïžð«
çŸä»£ã®ãŠã§ãéçºãç¹ã«ããã³ããšã³ãã®äžçã§ã¯ãReactã®ãããªJavaScriptãã¬ãŒã ã¯ãŒã¯ã䜿ãã®ãåœããåã«ãªã£ãŠããŸãããããã¯è€éãªã¢ããªã±ãŒã·ã§ã³ãå¹ççã«äœãããã®åŒ·åãªããŒã«ã§ããããããããšãã¹ããŒãŠã§ãããç¹ã«ããŒãšã³ãããã€ã¹åãã®ãµã€ãã«ãããŠã¯ãReactã¯å€ãã®å Žåãééã£ãéžæã§ããããšå°éå®¶ãã¡ã¯ææããŸãã
ãã®çç±ã¯ãReactããé»åã«é£¢ããïŒpower-hungryïŒããã¬ãŒã ã¯ãŒã¯ã ããã§ããReactã§ãµã€ããåããã«ã¯ããŠãŒã¶ãŒã®ãã©ãŠã¶ã倧éã®JavaScriptã³ãŒããããŠã³ããŒãããå®è¡ããå¿ èŠããããŸãã髿§èœãªPCãææ°ã®ã¹ããŒããã©ã³ãªãåé¡ãããŸããããå€ãæºåž¯é»è©±ã§ã¯ããã®åŠçãCPUã«å€§ããªè² è·ããããããŒãžã®è¡šç€ºãèããé ãããããæäœãã«ã¯ã«ã¯ããããããåå ã«ãªãã®ã§ãã
Preactã®ãããªè»œéãªä»£æ¿ãã¬ãŒã ã¯ãŒã¯ã䜿ã£ããšããŠããäŸç¶ãšããŠç§ãã¡ã¯ã¯ã©ã€ã¢ã³ããµã€ãïŒãŠãŒã¶ãŒã®ãã©ãŠã¶åŽïŒã§å€ãã®åŠçãè¡ããšããéçã«ä¹ã£ãŠããŸããŸããããã¯ãæ ¹æ¬çã«ééã£ãéãé²ãã§ããå¯èœæ§ãããã®ã§ãã
6-2. HTMLãã¡ãŒã¹ããšããã°ã¬ãã·ããšã³ãã³ã¹ã¡ã³ã ðïžâš
ã§ã¯ãã©ãããã°ããã®ã§ããããïŒ çãã¯ããŠã§ãã®åç¹ã«ç«ã¡è¿ãããšã«ãããŸããããã¯ãHTMLãå€çšããJavaScriptã¯è£å©çã«äœ¿ããšããã¢ãããŒãã§ããããã¯ãããã°ã¬ãã·ããšã³ãã³ã¹ã¡ã³ãïŒProgressive EnhancementïŒããšããèãæ¹ã«åºã¥ããŠããŸãã
- ãŸããåºæ¬çãªHTMLã ãã§ããã¹ãŠã®ã³ã³ãã³ããé²èЧã»å©çšã§ããç¶æ ãäœãã ãããåå°ã§ããJavaScriptããªãã«ãªã£ãŠããŠããå€ããã©ãŠã¶ã§ãããµã€ãã®æ žå¿çãªæ©èœã¯å€±ãããŸããã
- 次ã«ãCSSã§èŠæ ããæŽããã
- æåŸã«ãJavaScriptã䜿ã£ãŠã匷åïŒEnhanceïŒãããã äŸãã°ãããã¹ã ãŒãºãªã¢ãã¡ãŒã·ã§ã³ããããŒãžé·ç§»ãªãã§ã®ã³ã³ãã³ãæŽæ°ãªã©ãäœéšããªããã«ããæ©èœã远å ããŸãã
ãã®ã¢ãããŒããªããããŒãšã³ãããã€ã¹ã®ãŠãŒã¶ãŒãæäœéã®äœéšã¯ä¿èšŒããã髿§èœãªããã€ã¹ã®ãŠãŒã¶ãŒã¯ãããªãããªäœéšãåŸãããšãã§ããŸãããã¹ãŠã®äººã眮ãå»ãã«ããªããã€ã³ã¯ã«ãŒã·ãïŒå æ¬çïŒãªèšèšææ³ãªã®ã§ãã
6-3. ç»åãæ¯é ããïŒSVG, WebP, ãããŠsrcset ðŒïžâ¡
ãŠã§ããµã€ããé ãããæå€§ã®èŠå ã®äžã€ããç»åã§ããç¹ã«äœéåç·ã§ã¯ãéãç»åã®ããŠã³ããŒãã¯èŽåœçã§ããç»åã®æ±ãã«ã¯ã现å¿ã®æ³šæãæãå¿ èŠããããŸãã
- SVGãæçšãã: ããŽãã¢ã€ã³ã³ã®ãããªåçŽãªå³åœ¢ã«ã¯ãSVG (Scalable Vector Graphics) ã䜿ããŸãããããã¯ã¿ãŒåœ¢åŒãªã®ã§æ¡å€§ã»çž®å°ããŠãèãããå€ãã®å Žåãã¡ã€ã«ãµã€ãºãéåžžã«å°ããæžã¿ãŸãã
- æé©ãªãã©ãŒããããéžã¶: åçãªã©ã®ç»åã«ã¯ãåŸæ¥ã®PNG/JPGãããå§çž®çãé«ã WebP ã AVIF ãšãã£ã次äžä»£ãã©ãŒããããç©æ¥µçã«å©çšããŸãã
srcset
屿§ã䜿ãããªã: HTMLã®
ã¿ã°ã«srcset
屿§ãæå®ããããšã§ããŠãŒã¶ãŒã®ç»é¢ãµã€ãºãè§£å床ã«å¿ããŠããã©ãŠã¶ãæé©ãªãµã€ãºã®ç»åãèªåã§éžãã§ãããããã«ãªããŸããããã«ãããã¹ããŒããã©ã³ã®ãŠãŒã¶ãŒã«å·šå€§ãªãã¹ã¯ãããçšã®ç»åãéãã€ããããšãã£ãç¡é§ãé²ãããšãã§ããŸããsrcsetã®ã³ãŒãäŸ
ãã®äŸã§ã¯ããã©ãŠã¶ã¯ãã¥ãŒããŒãã®å¹ ã«å¿ããŠã500px, 1000px, 2000pxå¹ ã®ç»åã®äžããæé©ãªãã®ãéžæããŠããŠã³ããŒãããŸãã
6-4. ããã©ãŒãã³ã¹ã®æªé `background-attachment: fixed` ð¿
ããã¯å°ãããã¢ãã¯ãªè©±ã§ãããéåžžã«éèŠãªææã§ããCSSã®ããããã£ã§ãã background-attachment: fixed;
ã¯ãèæ¯ç»åããã¥ãŒããŒãïŒè¡šç€ºé åïŒã«åºå®ãã广ãæã¡ãã¹ã¯ããŒã«ããŠãèæ¯ãåããªãããããããã©ã©ãã¯ã¹å¹æã®ãããªèŠãç®ãç°¡åã«å®çŸã§ããŸãã
ãããããã®æå®ã¯ããã©ãŒãã³ã¹ã®æªéãšãªãåŸãŸãããã©ãŠã¶ã¯ãã¹ã¯ããŒã«ãããã³ã«ãã³ã³ãã³ããšèæ¯ã®äž¡æ¹ãå®å šã«åæç»ããå¿ èŠã«è¿«ãããã®ã§ããå€ãæºåž¯é»è©±ã§ã¯ãããã ãã§ãã¬ãŒã ã¬ãŒãïŒ1ç§éãããã®æç»åæ°ïŒãèŽåœçã«äœäžããã¹ã¯ããŒã«ãçŽèå± ã®ããã«ãªã£ãŠããŸãããšããããŸãã
幞ããããã«ã¯åé¿çããããŸããèæ¯ãšã³ã³ãã³ããå¥ã®èŠçŽ ã«å
¥ããCSSã®position
ãz-index
ããããã¯isolation: isolate;
ãšãã£ãããããã£ãé§äœ¿ããŠããã©ãŠã¶ã«ããããã¯å¥ã
ã®ã¬ã€ã€ãŒã§æç»ããŠãããšæããŠãããã®ã§ããå°ãæéã¯ããããŸããããŠãŒã¶ãŒäœéšã®åäžå¹æã¯çµ¶å€§ã§ãã
6-5. ãµãŒããŒãµã€ãã¬ã³ããªã³ã°ïŒSSRïŒã¯éã®åŒŸäžžãïŒ ÑеÑÐ²ÐµÑ => ð
ãµãŒããŒãµã€ãã¬ã³ããªã³ã°ïŒServer-Side Rendering, SSRïŒããããã©ãŒãã³ã¹æ¹åã®æèã§ããèªãããŸããããã¯ããŠãŒã¶ãŒã®ãã©ãŠã¶ïŒã¯ã©ã€ã¢ã³ããµã€ãïŒã§JavaScriptãå®è¡ããŠããŒãžãçµã¿ç«ãŠãã®ã§ã¯ãªãããŠã§ããµãŒããŒåŽã§å®æåã®HTMLããŒãžãçæããŠãŠãŒã¶ãŒã«éãæ¹åŒã§ãã
ã¡ãªãã:
- ã¯ã©ã€ã¢ã³ãåŽã®JavaScriptå®è¡éãæžããããç¹ã«éåãªããã€ã¹ã§ã®åæè¡šç€ºãé«éã«ãªãã
- äžèŠãªããŒã¿ãã¯ã©ã€ã¢ã³ãã«éããã«æžããããããŒã¿éä¿¡éãç¯çŽã§ããå¯èœæ§ãããã
ãã¡ãªãã:
- ãµãŒããŒåŽã®è² è·ãå¢ããããããã髿§èœãªãµãŒããŒãå¿ èŠã«ãªãå Žåãããã
- å Žåã«ãã£ãŠã¯ãçæãããHTMLããããå ã®ããŒã¿ïŒJSONãªã©ïŒã®æ¹ããã¡ã€ã«ãµã€ãºãå°ããããšãããã
SSRã¯äžèœè¬ïŒéã®åŒŸäžžïŒã§ã¯ãããŸãããããããJavaScriptã®å®è¡æéãããã«ããã¯ã«ãªã£ãŠããå€ãããã€ã¹ã®äœéšãæ¹åãããå Žåã«ã¯ãéåžžã«åŒ·åãªéžæè¢ãšãªãåŸãŸãã
6-6. ãªãŒã³ïŒLeanïŒã§ããããšã®å²åŠ ð§ââïž
ãããŸã§æ§ã ãªæè¡ã玹ä»ããŠããŸããããæ ¹åºã«ããå²åŠã¯äžã€ã§ããããã¯ããªãŒã³ïŒLeanïŒã§ããããšããããšã§ãã
ãªãŒã³ãšã¯ãç¡é§ããªããåŒãç· ãŸã£ãŠããããšããæå³ã§ããéããã¬ãŒã ã¯ãŒã¯ãæšãŠããäžèŠãªç»åãåããã¢ãã¡ãŒã·ã§ã³ãæå°éã«ãããäžã€äžã€ã®APIåŒã³åºããæžãããããã¯åãªãæè¡çãªæé©åã§ã¯ãããŸããã
- ãŠãŒã¶ãŒã®æéãå°éããããšã
- ãŠãŒã¶ãŒã®ããŒã¿éä¿¡éãå°éããããšã
- ãŠãŒã¶ãŒã®ããã€ã¹ã®ããããªãŒãå°éããããšã
ããããã¹ãŠããã¹ããŒãŠã§ãã®ææ³ãã€ãŸããã人éçã§ãæå³çã§ãæãããã®ãããŠã§ããæ§ç¯ãããšããå²åŠã«ç¹ãã£ãŠããã®ã§ããæ¶è²»ãšå¯Ÿè©±ã¯ãã£ãããšããããæè¡çãªé ä¿¡ã¯éãå¹ççã«ãããããããææ³ãå®è£ ããæè¡ã®ç®æãå Žæãªã®ã§ãã
ã³ã©ã ïŒåããŠã®PageSpeed Insights
èªåã®æ°ãããµã€ããåããŠGoogleã®PageSpeed Insightsã§èšæž¬ããæ¥ã®ããšãèŠããŠããŸããã¹ã³ã¢ã¯ã99ããç·è²ã®æ°åãèªãããã«èŒããŠããŸãããReactã倿©èœãªCSSãã¬ãŒã ã¯ãŒã¯ã䜿ã£ãŠããé ã«ã¯ããç®ã«ããããªãã£ãæ°åã§ãããã¡ãããã¹ã³ã¢ãå šãŠã§ã¯ãããŸãããã§ãããã®æ°åã¯ãç§ããŠãŒã¶ãŒã®èŠããªãè² æ ââããŒã¿éãCPUè² è·ãããããªãŒæ¶è²»ââã«å¯ŸããŠãé æ ®ã§ããŠããããšã®èšŒã®ããã«æããŸãããããã¯ã誰ãããã®ããããããããããã£ãšäŸ¡å€ã®ãããã£ãŒãããã¯ã§ããããªãŒã³ãªãŠã§ããäœãããšã¯ãèªå·±æºè¶³ã§ã¯ãããŸãããããã¯ãç»é¢ã®åããåŽã«ããèŠç¥ãã¬èª°ããžã®ãéãã§ãããã確ããªããããŠãªãããªã®ã ãšãç§ã¯ä¿¡ããŠããŸãã
第4éšïŒããããã®ãŠã§ãã®ããã« ð
第7ç« ïŒéãããåã
ãããŸã§ããã£ãŒããžã®æ¹å€ããã¹ããŒãŠã§ããšãã察æ¡ããããŠãã®å®è·µæ¹æ³ãŸã§ãèªã£ãŠããŸããããããããã®ç©èªã¯ããããŒãšã³ãã§å®çµããåçŽãªãã®ã§ã¯ãããŸããããã®ã ãŒãã¡ã³ãã¯å€ãã®å¯èœæ§ãç§ããŠãããšåæã«ãæ°å€ãã®èª²é¡ãçåç¹ãæ±ããŠããŸãããã®ç« ã§ã¯ã楜芳çãªèŠç¹ããäžæ©åŒããŠãããå€è§çã§æ¹å€çãªåããæããããŠã¿ãããšæããŸãã
7-1. çåç¹ã»å€è§çèŠç¹ ð€
- ãã¹ã¿ã«ãžãŒã®çŸåã§ã¯ãªããïŒ
ç§ããã€ã³ã¿ãŒãããIããšããŠæããWeb 1.0æä»£ã¯ãæ¬åœã«ç§æçãªæ¥œåã ã£ãã®ã§ããããããããããããªããšã¯ãããŸãããåœæããèããã誹è¬äžå·ãæ å ±æ Œå·®ããããŠæ·±å»ãªããžã¿ã«ã»ããã€ãïŒæ å ±æ Œå·®ïŒã¯ååšããŸãããéå»ãé床ã«çŸåããçŸåšã®ãã©ãããã©ãŒã ã解決ããŠããåé¡ïŒäŸãã°ãéå ±ã·ã¹ãã ã®æŽåãã¢ã¯ã»ã·ããªãã£ã®åäžïŒããç®ãèããŠã¯ããªãã§ããããã
- ãã¹ããŒãŠã§ããã¯ç¹æš©çãªè¶£å³ã§ã¯ãªããïŒ
å人ã®ãŠã§ããµã€ããæ§ç¯ããç¬èªãã¡ã€ã³ãç¶æããã«ã¯ãããçšåºŠã®æè¡çç¥èãæéããããŠãµãŒããŒä»£ããã¡ã€ã³ä»£ãšãã£ãééçã³ã¹ããããããŸããããã¯ã誰ãã享åã§ãããã®ã§ã¯ãªããäžéšã®ç¥èå±€ãçµæžçã«äœè£ã®ãã人ã ã®ãé«å°ãªè¶£å³ãã§çµãã£ãŠããŸãå±éºæ§ã¯ãªãã§ãããããå¿ããæ¥åžžã®äžã§ã誰ãããåºåž«ãã«ãªããããã§ã¯ãªãã®ã§ãã
- ã³ãã¥ããã£ã¯ã¿ã³ããåããªããïŒ
ãã£ãŒããããããå¶çºçãªåºäŒãïŒã»ã¬ã³ãã£ããã£ïŒã«ãã䟡å€ã¯ãããŸããäžæ¹ã§ãIndieWebããŠã§ããªã³ã°ã®ãããªãæå³çã«ç¹ããã³ãã¥ããã£ã¯ãå åãã§ééçãªãã¿ã³ãããã«ãªã£ãŠããŸããªã¹ã¯ãåžžã«åãã§ããŸããæ°ããåå è ãå ¥ãã«ãããåãæèŠã°ãããåé¿ãã空éã¯ãæãããŠå¥å šãšèšããã®ã§ããããã
- ã¹ã±ãŒã«ããªã解決çã§ã¯ãªããïŒ
IndieWebãããŒãœãã«ãŠã§ãã¯çŽ æŽãããæŠå¿µã§ãããçŸåšãæ°åå人ãå©çšãã巚倧ãã©ãããã©ãŒã ãæ±ãã瀟äŒçãªåé¡ïŒåœæ å ±ã®æ¡æ£ãäžè«æäœãªã©ïŒã«å¯ŸãããçŸå®çãªä»£æ¿æ¡ãšãªãããã®ã§ããããããããšãããããŸã§å·šå€§è³æ¬äž»çŸ©ãžã®ã¢ã³ãããŒãŒãšããŠååšããããããã§æåçãªæµæéåã«çãŸãã®ã§ããããã
7-2. æ¥æ¬ãžã®åœ±é¿ ð¯ðµ
ãã®ãã¹ããŒãŠã§ããã®ææ³ã¯ãæ¥æ¬ã®ã€ã³ã¿ãŒãããæåã®äžã§ã©ã®ããã«é¿ãã§ããããã
- ãmixiæ¥èšãæåãžã®ååž°: ãã€ãŠæ¥æ¬ã®SNSã®äž»æµã§ãã£ãmixiã¯ãå人éã®æ¥èšãéãããããã¯ããŒãºãã§ç·©ãããªã³ãã¥ãã±ãŒã·ã§ã³ãäžå¿ã§ãããæ¬çš¿ã®ææ³ã¯ããã®æä»£ã®ã³ãã¥ãã±ãŒã·ã§ã³ãžã®é·æãåè©äŸ¡ãšåŒ·ãçµã³ã€ãå¯èœæ§ããããŸããäºå®ãè¿å¹ŽãSNSç²ããããmixiã«ååž°ããè¥è ããããšããå ±éãèŠãããŸãã - ãnoteããå人ããã°ã®éç: çæã®TwitterïŒXïŒãšã¯å¯Ÿç §çã«ãé·æã®ã³ã³ãã³ããã©ãããã©ãŒã ã§ãããnoteãããåã³ãã¯ãŠãªããã°ããªã©ã§å人ããã°ãå§ãã人ãå¢ããŠããçŸè±¡ã¯ããã£ãŒãã®é床æããé¢ããèªåã®èãããã£ãããšè¡šçŸããããšããæ¬²æ±ã®è¡šããšèŠãªããã§ãããã - ãã¿ã€ããæåãšã®ç·åŒµé¢ä¿: ãã¿ã€ã ããã©ãŒãã³ã¹ïŒã¿ã€ãïŒããæ¥µç«¯ã«éèŠãã颚朮ãåŒ·ãæ¥æ¬ã§ã¯ããã¹ããŒãŠã§ããã®ææ³ã¯éå¹çãªãã®ãšããŠæ¬é ããããããããŸããããããããã®ã«ãŠã³ã¿ãŒã«ã«ãã£ãŒãšããŠãæå³çã«ãé ããããæéããæ¥œããæåããããäžå±€äŸ¡å€ãæã€ããã«ãªãå¯èœæ§ãç§ããŠããŸãã
7-3. æŽå²çäœçœ®ã¥ã ðºïž
ãã®ã¬ããŒãã§èªãããŠããåãã¯ããŠã§ãã®æŽå²ã«ãããŠã©ã®ããã«äœçœ®ã¥ããããã®ã§ããããã
ããã¯ãWeb 2.0ã®æçãšãããã«ãã£ãŠçãŸããæªã¿ã«å¯ŸãããWeb 1.0ã®ç²Ÿç¥çã»æè¡çåè©äŸ¡ã®åããšèŠãããšãã§ããŸãã
ãŠã§ãã®é²åã®ç°¡åãªæŽç
- Web 1.0 (The Read Web / èªããŠã§ã): 1990幎代ïœ2000幎代åé ãæ å ±ã®çºä¿¡è ãå人ã®ãŠã§ããµã€ããäœããé²èЧè ã¯ãããèªãäžæ¹åçãªã¢ãã«ãäžå¿ãæ¬çš¿ã§ãã€ã³ã¿ãŒãããIããšããŠæããã察象ã
- Web 2.0 (The Read/Write Web / èªã/æžããŠã§ã): 2000幎代äžç€ïœãããã°ãSNSã®ç»å Žã«ããã誰ãã容æã«æ å ±ãçºä¿¡ã§ããåæ¹åã®ã¢ãã«ãžãããããæ¬¡ç¬¬ã«GAFAãªã©ã®å·šå€§ãã©ãããã©ãŒã ã«æ å ±ãšæš©åãéäžããããã£ãŒããã«ä»£è¡šããã忥çã§äžæ¯æ§ã®é«ãã·ã¹ãã ãäž»æµã«ã
- æ¬ã¬ããŒãã®äœçœ®: Web 2.0ã®ãã©ãããã©ãŒã æ¯é ãšãéãããã€ã³ã¿ãŒããããã«ç°è°ãå±ããWeb 1.0æä»£ã®ãå人ã®ãŠã§ããµã€ããã®äŸ¡å€ãåçºèŠãããIndieWebããšããçŸä»£çãªã ãŒãã¡ã³ããéããŠãããåãæ»ãããšãã詊ã¿ãããã¯ãäžå€®éæš©ããã®è±åŽãç®æãWeb3.0ã®ææ³ãšãäžéšå ±é³ŽããŸããããããã¯ãã§ãŒã³æè¡ã«äŸåãããæ¢åã®ãŠã§ãæè¡ãåæŽ»çšããç¹ã«å€§ããªç¹åŸŽããããŸãã
第8ç« ïŒæªæ¥ãžã®å±æ
8-1. ä»åŸæãŸããç ç©¶ ð§âð¬
ã¹ããŒãŠã§ãã®ææ³ãšå®è·µãããè±ãã«ããŠããããã«ãä»åŸã以äžã®ãããªåéã§ã®ç ç©¶ãè°è«ãæ·±ãŸãããšãæåŸ ãããŸãã
- ããžã¿ã«ãŠã§ã«ããŒã€ã³ã°ãšãŠã§ããã¶ã€ã³: ãã¹ããŒãŠã§ããçãªãã¶ã€ã³ïŒäŸïŒç¡éã¹ã¯ããŒã«ã®å»æ¢ãéç¥ã®æå¶ãæå³çãª"æ©æŠ"ã®èšèšïŒãããŠãŒã¶ãŒã®å¿ççå¹žçŠæãã¹ãã¬ã¹ã¬ãã«ã«ã©ã®ãããªåœ±é¿ãäžããããå®éçã»å®æ§çãªå¹ææž¬å®ç ç©¶ã
- 忣åãããã¯ãŒã¯ã®æç¶å¯èœæ§: MastodonãIndieWebã®ãããªåæ£åã»å人éå¶ã®ãããã¯ãŒã¯ããæè¡çã»çµæžçã»ç€ŸäŒçã«é·æéçšå¯èœãã©ããã®ç ç©¶ãç¹ã«ããµãŒããŒã³ã¹ããã¢ãã¬ãŒã·ã§ã³ïŒäžé©åæçš¿ã®ç®¡çïŒãã¹ãã 察çãªã©ã倧ããªèª²é¡ã§ãã - æŽå²ç€ŸäŒåŠç ç©¶: ãå€ãè¯ãã€ã³ã¿ãŒãããããžã®ãã¹ã¿ã«ãžãŒãããªããã©ã®ãããªç€ŸäŒå±€ã»äžä»£ã§ãç¹°ãè¿ãèªãããã®ããåæããã¢ãããŒããããã¯åãªãæå€è¶£å³ãªã®ãããããšãçŸä»£ç€ŸäŒãžã®æ¹è©çãªèŠç¹ãå«ãã§ããã®ãã
8-2. é ããŠã§ãã¯ãéããŠã§ããšå ±åã§ããã ð¢ð€ð
ç§ã®é¡ãã¯ãã¹ããŒãŠã§ããçŸåšã®ãéããŠã§ãããå®å šã«çœ®ãæããããšã§ã¯ãããŸãããç·æ¥æã®æ å ±äŒéãããªã¢ã«ã¿ã€ã æ§ãæ±ãããããšã³ã¿ãŒãã€ã¡ã³ããªã©ããéããã«äŸ¡å€ãããå Žé¢ãééããªãååšããŸãã
éèŠãªã®ã¯ãéžæè¢ãããããšã§ãããã¡ã¹ãããŒããããã°ãã¹ããŒããŒãããããå€§èŠæš¡ãªé³æ¥œãã§ã¹ãããã°ãå°ããªãžã£ãºå«è¶ãããããããšåãããã«ãã€ã³ã¿ãŒãããã«ã倿§ãªãé床ããšãå± å Žæãããã£ãŠããã¯ãã§ãã
ã¹ããŒãŠã§ãã¯ããã¡ã¹ããªãŠã§ãã«ç²ãã人ã ã®ããã®é¿é£æã§ãããç°ãªã䟡å€èгãæç€ºããã«ãŠã³ã¿ãŒã«ã«ãã£ãŒãšããŠãéããŠã§ããšå ±åããŠããããããçŸå®çãªæªæ¥åãªã®ãããããŸããã
8-3. çµè«ïŒãŠã§ãã¯èª°ã®ãã®ã ðââïžðââïž
çµå±ã®ãšããããã®åãã«å°œããŸãããŠã§ãã¯èª°ã®ãã®ãïŒ
Web 2.0ã®æä»£ãç§ãã¡ã¯ãã®çãã巚倧ãªãã©ãããã©ãŒã ã«å§ããŠããŸããŸãããç§ãã¡ã®ããŒã¿ãã³ã³ãã³ãã人éé¢ä¿ã¯ã圌ãã®ãµãŒããŒã®äžã«ããã圌ãã®ããžãã¹ã®ããã«å©çšãããŠããŸãã
IndieWebãšã¹ããŒãŠã§ãã®éåã¯ããã®åãã«å¯ŸããŠãã·ã³ãã«ãã€å匷ãçããçªãã€ããŸãã
ããŠã§ãã¯ãç§ãã¡ã®ãã®ã ããšã
ããã¯ãèªåã®æã§HTMLãæžããèªåã®ãã¡ã€ã³ãååŸããèªåã®èšèã§äžçã«çºä¿¡ããããšããããããã§å ·äœçãªè¡åã«ãã£ãŠèšŒæãããã®ã§ãããã®åºå€§ãªãŠã§ãã®çé ã«ãããªãã ãã®å°ããªåºãèãããšãããã¯ãåãèº«ã®æ¶è²»è ãããèœåçãªãŠã§ãã®ãäœäººããžãšçãŸãå€ããããã®ãéããªãé©åœã®ç¬¬äžæ©ãªã®ã§ãã
ã³ã©ã ïŒæªæ¥ãžã®æçŽ
ãã®èšäºãæžãçµããããŸãç§ã¯èªåã®ãµã€ãã®ããã¿ãŒã«ãæ°ããäžæãå ããããšæã£ãŠããŸãããThis website is a garden, not a feed.ïŒãã®ãŠã§ããµã€ãã¯åºã§ããããã£ãŒãã§ã¯ãªãïŒããããã¯ãæªæ¥ã®èªåèªèº«ãžã®æçŽã§ãããŸãã¢ã¯ã»ã¹æ°ãåå¿ãæ°ã«ãªãå§ãããšãããã£ãŒãã®å§éšã«å¿ãæ¹ããããã«ãªã£ããšãããã®èšèãç§ãåå¿ã«ç«ã¡è¿ãããŠãããã§ããããç§ã®åºã¯ããŸã å°ãããéèãçããŠããŸããããããç§ã¯ãããããããã£ãããšãèªåã®ããŒã¹ã§ããã®åºãè²ãŠãŠããããšæããŸããããããªãããã®ãŠã§ãã®ã©ããã§ãç§ã®å°ããªåºãèŠã€ããããšãããã°ãæ°è»œã«å£°ããããŠãã ãããçžåŽã§ãè¶ã§ã飲ã¿ãªããããã£ãããšã話ããŸãããããã®ããã®æéãšç©ºéã¯ãããã«åžžã«çšæããŠãããŸãããã
å·»æ«è³æ
ç»å Žäººç©ç޹ä»
- çè
- Web 1.0æä»£ã«éæ¥ãéããããã£ãŒãã®å§éšã«ç²ããŠã¹ããŒãŠã§ãã®äžçã«è¶³ãèžã¿å ¥ãããå°ãæå€è¶£å³ã®ãŠã§ãæå¥œå®¶ã
- IndieWebã®å人ãã¡
- IRCããŠã§ããªã³ã°ãéããŠåºäŒã£ãããŠã§ããžã®æ ç±ã«æº¢ãã人ã ãæŽŸæãªè²ã®CSSãæããè ã88x31ãã¯ã»ã«ãããŒè·äººãããã©ãŒãã³ã¹ãã¥ãŒãã³ã°ã®é¬Œãªã©ãåæ§æŽŸæãã
- Redditã®è³¢äººãã¡
r/webdev
ãªã©ã®ã³ãã¥ããã£ã«çæ¯ãããæè¡çãªç¥èŠã«åªããéçºè ãã¡ãæã«èŸèŸ£ã ãããã®ææã¯åžžã«ç確ã§ãçè ã®æè¡çãªæéãšãªã£ãŠããã
çšèªè§£èª¬
ã¯ãªãã¯ããŠå±é
- ActivityPub (ã¢ã¯ãã£ããã£ãã)
- Mastodonãªã©ã®åæ£åSNSã§äœ¿ãããŠããããµãŒããŒéã§æ å ±ããããšãããããã®æšæºãããã³ã«ïŒéä¿¡èŠçŽïŒãããã«ãããç°ãªããµãŒãã¹éã§ããŠãŒã¶ãŒãçžäºã«ãã©ããŒããããæçš¿ãå ±æãããã§ãããW3CïŒWorld Wide Web ConsortiumïŒã«ãã£ãŠå§åãããŠãããW3Cå§åã®åæ
- FOMO (ãã©ãŒã¢ãŒ)
- Fear Of Missing Outã®ç¥ããäœããèŠéããŠããã®ã§ã¯ãªããããåãæ®ãããŠããã®ã§ã¯ãªããããšããäžå®ãæææã®ããšãç¹ã«SNSã®æ®åã«ããããã®æèŠãæ±ã人ãå¢ãããšãããã
- HTML (ãšã€ããã£ãŒãšã ãšã«)
- HyperText Markup Languageã®ç¥ããŠã§ãããŒãžã®æ§é ïŒèŠåºããæ®µèœããªã¹ããªã©ïŒãå®çŸ©ããããã®èšèªããŠã§ãã®æãåºæ¬çãªæ§æèŠçŽ ã
- IndieWeb (ã€ã³ãã£ãŒãŠã§ã)
- 巚倧ãã©ãããã©ãŒã ããç¬ç«ããå人ã®ãŠã§ããµã€ãããªã³ã©ã€ã³äžã®ã¢ã€ãã³ãã£ãã£ã®äžå¿ã«æ®ããããšãç®æãææ³ã»ã ãŒãã¡ã³ããããã³ãã®ããã®æè¡çŸ€ã
- IRC (ã¢ã€ã¢ãŒã«ã·ãŒ)
- Internet Relay Chatã®ç¥ãå€ãããååšããããã¹ãããŒã¹ã®ãã£ããã·ã¹ãã ãç¹å®ã®ãããã¯ããšã«ããã£ã³ãã«ããšåŒã°ããéšå±ãäœãããªã¢ã«ã¿ã€ã ã§ã³ãã¥ãã±ãŒã·ã§ã³ãè¡ãã
- JavaScriptãã¬ãŒã ã¯ãŒã¯
- JavaScriptãçšãããŠã§ãã¢ããªã±ãŒã·ã§ã³éçºãå¹çåããããã®éªšçµã¿ãã©ã€ãã©ãªçŸ€ãReact, Vue, Angularãªã©ãæåã倿©èœã ãããã®åãŠã§ããµã€ããéããªãåå ã«ããªãããã
- Mastodon (ãã¹ããã³)
- ActivityPubãããã³ã«ãå©çšããããªãŒãã³ãœãŒã¹ã®åæ£åSNSãœãããŠã§ã¢ã誰ã§ãèªåã®ãµãŒããŒïŒã€ã³ã¹ã¿ã³ã¹ïŒãç«ãŠãããšãã§ããç°ãªãã€ã³ã¹ã¿ã³ã¹ã®ãŠãŒã¶ãŒãšãç¹ãããã®ãç¹åŸŽã
- phpBB (ããŒãšã€ãããŒããŒããŒ)
- PHPèšèªã§äœãããããªãŒãã³ãœãŒã¹ã®ãã©ãŒã©ã ïŒé»åæ²ç€ºæ¿ïŒãœãããŠã§ã¢ã2000幎代åé ã«ãå€ãã®ãªã³ã©ã€ã³ã³ãã¥ããã£ã§å©çšãããã
- POSSE (ããã»)
- Publish on your Own Site, Syndicate Elsewhereã®ç¥ãããŸãèªåã®ãµã€ãã«å ¬éãããã®ã³ããŒãïŒSNSãªã©ã«ïŒé ä¿¡ããããšããIndieWebã®äž»èŠãªã³ã³ãã³ãæŠç¥ã
- React (ãªã¢ã¯ã)
- FacebookïŒçŸMetaïŒãéçºããããŠã§ãã®UIïŒãŠãŒã¶ãŒã€ã³ã¿ãŒãã§ãŒã¹ïŒãæ§ç¯ããããã®JavaScriptã©ã€ãã©ãªãçŸä»£ã®ããã³ããšã³ãéçºã§æãåºã䜿ãããŠããããŒã«ã®äžã€ã
- SSR (ãšã¹ãšã¹ã¢ãŒã«)
- Server-Side Renderingã®ç¥ããŠãŒã¶ãŒã®ãã©ãŠã¶ã§ã¯ãªãããŠã§ããµãŒããŒåŽã§HTMLãçæããæè¡ãã¯ã©ã€ã¢ã³ãåŽã®è² è·ãæžãããåæè¡šç€ºé床ãåäžããã广ãããã
- SVG (ãšã¹ãã€ãžãŒ)
- Scalable Vector Graphicsã®ç¥ãXMLããŒã¹ã®ãã¯ã¿ãŒç»å圢åŒãæ¡å€§ã»çž®å°ããŠãç»è³ªãå£åããªãã®ãç¹åŸŽã§ãããŽãã¢ã€ã³ã³ã«é©ããŠããã
- Webmention (ãŠã§ãã¡ã³ã·ã§ã³)
- ãããŠã§ãããŒãžãå¥ã®ãŠã§ãããŒãžã«ãªã³ã¯ããããšãéç¥ããããã®æšæºãããã³ã«ãããã«ããããã©ãããã©ãŒã ãä»ããã«ãå人ãµã€ãéã§ã³ã¡ã³ãããããããã®ãããªãããšããå®çŸã§ãããW3Cå§åã®åæ
- WebP (ãŠã§ãããŒ)
- Googleãéçºãããé«ãå§çž®çãèªã次äžä»£ç»åãã©ãŒããããåãç»è³ªã§ãåŸæ¥ã®JPEGãPNGããããã¡ã€ã«ãµã€ãºãå€§å¹ ã«å°ããã§ããã
çšèªçŽ¢åŒïŒã¢ã«ãã¡ãããé ïŒ
- ActivityPub: Mastodonãªã©ã®åæ£åSNSã§äœ¿ãããããµãŒããŒéã§æ å ±ããããšãããããã®éä¿¡èŠçŽãç°ãªããµãŒãã¹éã§ã®çžäºãã©ããŒãæçš¿å ±æãå¯èœã«ãããW3Cã«ãã£ãŠæšæºåãããŠããã
- FOMO (Fear Of Missing Out): ãåãæ®ãããããšãžã®ææããSNSãªã©ãåžžã«ãã§ãã¯ããŠããªããšäžå®ã«ãªãå¿çç¶æ ãæãã(æäžã§ã®èšåç®æ)
- HTML (HyperText Markup Language): ãŠã§ãããŒãžã®éªšæ Œãäœãããã®èšèªããã®èšäºã®æ§é ãHTMLã§æžãããŠããã(æäžã§ã®èšåç®æ)
- IndieWeb: 巚倧SNSããç¬ç«ããå人ã®ãµã€ããã¢ã€ãã³ãã£ãã£ã®äžå¿ã«çœ®ãããšãç®æãéåã(æäžã§ã®èšåç®æ)
- IRC (Internet Relay Chat): å€å žçãªããã¹ããã£ããã·ã¹ãã ãç¹å®ã®è©±é¡ã®éšå±ïŒãã£ã³ãã«ïŒã§ãªã¢ã«ã¿ã€ã ã«äŒè©±ããã(èšåç®æ1, èšåç®æ2)
- JavaScript Framework: ãŠã§ãã¢ããªéçºã楜ã«ããããã®JavaScriptã®éå ·ã»ãããReactãªã©ãæåã ãããµã€ããéãããäžå ã«ããªãã(æäžã§ã®èšåç®æ)
- Mastodon: 誰ã§ãèªåã®ãµãŒããŒãç«ãŠããããTwitterã«äŒŒã忣åSNSãActivityPubãæ¡çšããŠããã(æäžã§ã®èšåç®æ)
- phpBB: 2000å¹Žä»£ã«æµè¡ããããŠã§ããµã€ãã«æ²ç€ºæ¿ïŒãã©ãŒã©ã ïŒãèšçœ®ããããã®ãœãããŠã§ã¢ã(æäžã§ã®èšåç®æ)
- POSSE (Publish on your Own Site, Syndicate Elsewhere): ããŸãèªåã®ãµã€ãã«æžãããã®ã³ããŒãSNSã«æµãããšããIndieWebã®èãæ¹ãã³ã³ãã³ãã®äž»å°æš©ãèªåã«ä¿ã€ããã®æŠç¥ã(æäžã§ã®èšåç®æ)
- React: FacebookïŒMetaïŒè£œã§ãçŸä»£ãŠã§ãéçºã®äž»æµã§ããJavaScriptã©ã€ãã©ãªãUIæ§ç¯ã«åŒ·ããã倿©èœããã«åäœãéããªããã¡ã(æäžã§ã®èšåç®æ)
- SSR (Server-Side Rendering): ãµãŒããŒåŽã§ããŒãžã宿ãããŠãããŠãŒã¶ãŒã«éãæè¡ã衚瀺éåºŠã®æ¹åã«ç¹ããã(æäžã§ã®èšåç®æ)
- SVG (Scalable Vector Graphics): æ¡å€§ããŠãã®ã¶ã®ã¶ã«ãªããªããã¯ã¿ãŒç»å圢åŒãããŽãã¢ã€ã³ã³ã«æé©ã(æäžã§ã®èšåç®æ)
- Webmention: å人ãµã€ãéã§ããã®èšäºã«èšåãããïŒããšéç¥ãããä»çµã¿ã忣åã®ã³ã¡ã³ãæ©èœãå®çŸããã(æäžã§ã®èšåç®æ)
- WebP: Googleãéçºããç»åãã©ãŒãããããã¬ã€ãªãŸãŸãã¡ã€ã«ãµã€ãºãå°ããã§ããã(æäžã§ã®èšåç®æ)
è£è¶³1: ããããªäººã®ææ³
ããã ãããããªãšã¢ã³ãã²ãããããã®èšäºãèªãã ãâŠïŒïŒã¯ãªãã¯ããŠå±éïŒ
ããã ããã®ææ³
ããã®èšäºãããããããã®ã ïŒ ã¿ã€ã ã©ã€ã³ã¯æ©ãããŠç®ãåããããªãã ããã£ãšèŠãŠãªããšäžå®ã«ãªãã®ã ããããããªããŠãæã®å人ãµã€ãã¿ããã«ã奜ããªããšã«ã€ããŠãã£ããæžããŠããããŒãžãã®ãã³ãèªãã»ããæ¥œããã®ã ãåãããã é€ ã®äœãæ¹ã ãã®ãã¹ããŒãªãŠã§ããµã€ãããäœãããã®ã ããã®èšäºãæžãã人ã¯å€©æãªã®ã ïŒ ã¿ããªããã£ãŒãã®ããšã¯å¿ããŠãããã é€ ãé£ã¹ãã®ã ïŒã
ããªãšã¢ã³é¢šã®ææ³
ããããé ããšãèšã£ãŠãæç¹ã§å®å šã«æè忢ããŠãããããã£ãŒããéãïŒåœããåãããããããæ å ±ã®æåç·ãªãã ããããã®ã¹ããŒãã«ã€ããŠãããªã奎ã¯ããŒã±ãããã眮ããŠãããã ãããã¹ã¿ã«ãžãŒã«æµžã£ãŠå人ãµã€ããšãäœã£ãŠãæãã£ããããã®ãã£ãŒãããã©ããã£ãŠããã¿ã€ãºããããã©ããã£ãŠæ¬¡ã®ããžãã¹ãã£ã³ã¹æŽããèããªããšããŸããéãšæéã®ãããã£ããã®é楜ã§ãããããã俺ã¯1ç§ãç¡é§ã«ããããªããããçéã§æ¬¡è¡ããã©ãããããããŠã§ããµã€ãäœãã®ã«React䜿ããªããšãããšã³ãžãã¢ã®ãã£ãªã¢æšãŠããããªããã ãïŒç¬ïŒã
西æã²ãããé¢šã®ææ³
ãããã£ãŠããªãã®ææ³ã§ãããïŒ ããã£ãŒãã¯ç²ãããã£ãŠãããã©ãããã£ãŠæ å ±ã«åªå é äœã€ããããªãç¡èœãªäººã£ãŠã ããããªãããïŒ ãŸããåºåãŸã¿ãã®ã¯ãœã¿ãããªãŸãšããµã€ãããã¯ãå人ã®ãŠã§ããµã€ãã®ã»ãããã·ã ãšã¯æããŸããã©ãçµå±ãIndieWebãšãèšã£ãŠãããã®äžã§äººæ°è ã«ãªãããã£ãŠããæ¿èªæ¬²æ±ãèŠãé ãããŠãŠããã£ãŠãããšSNSãšå€ãããªããªãããïŒãªãããããŒã¿ã«åºã¥ããŠãªãããã ã®ããšã ã£ããããããšãæªã ã«IRCãšã䜿ã£ãŠãã®ããã ã®æä»£é ããããªãããïŒïŒç¬ïŒã
è£è¶³2: 詳现幎衚ïŒããŒãœãã«ãŠã§ããšãã©ãããã©ãŒã ã®è亡
ãŠã§ãã®æŽå²ãæ¯ãè¿ãïŒã¯ãªãã¯ããŠå±éïŒ
幎代 | äž»èŠãªåºæ¥äºã»æè¡ | 瀟äŒã»æåçãªåã | æ¬ã¬ããŒããšã®é¢é£ |
---|---|---|---|
1990-1994 | - WWW (1991) ã®èªç - HTML, HTTPã®æšæºå - åæã®Webãã©ãŠã¶ (Mosaic, Netscape) | - åŠè¡ã»ç ç©¶æ©é¢äžå¿ã®å©çš - ããã¹ãããŒã¹ã®æå | ãã€ã³ã¿ãŒãããIãã®åé¢šæ¯ |
1995-1999 | - GeoCities, Tripod, aol hometown - CSS Level 1 (1996) - JavaScriptã®æšæºå (ECMAScript) - ããã°ã®åå (Online diary) ç»å Ž - phpBB (2000) ã®ãããªãã©ãŒã©ã ãœãã | - å人ããŒã ããŒãžäœæããŒã - ãŠã§ããªã³ã°ã«ããã³ãã¥ããã£åœ¢æ - ãããã¹ããµã€ããæåã®éçïŒæ¥æ¬ïŒ | çè ãæãããå°ããªæ·å°ã®åºå€§ãªã³ã¬ã¯ã·ã§ã³ãã®æä»£ |
2000-2004 | - Blogger, Movable Typeã®æ®å - Wikipedia (2001) - RSS (Really Simple Syndication) ã®æ®å - mixi (2004), Facebook (2004) | - ããã°æåã®ççºçæ¡å€§ - ãœãŒã·ã£ã«ã»ãããã¯ãŒãã³ã°ã»ãµãŒãã¹ã®é»ææ - Web 2.0ãšããæŠå¿µã®æå± | å人ãçºä¿¡ããææ®µã倿§åããåŸã®ãã©ãããã©ãŒã åã®èèœ |
2005-2009 | - YouTube (2005) - Twitter (2006) - iPhone (2007) ãšApp Store (2008) - Google Chrome (2008) | - ãã¿ã€ã ã©ã€ã³ãããã£ãŒãããäž»æµã« - ã¢ãã€ã«ã€ã³ã¿ãŒãããã®å§ãŸã - ã³ã³ãã³ãã®åç»åã»çæå | ããã£ãŒãã¯å®¹èµŠãªããæä»£ã®å¹éã |
2010-2015 | - Instagram (2010), Pinterest (2010) - ã¬ã¹ãã³ã·ããŠã§ããã¶ã€ã³ã®äžè¬å - React (2013), Vue.js (2014) ãªã©ã®JSãã¬ãŒã ã¯ãŒã¯å°é - IndieWebCamp (2011) å§å | - ãã©ãããã©ãŒã ã®å¯¡å åãé²ã - ã¢ã«ãŽãªãºã ã«ãããã£ãŒãã®ããŒãœãã©ã€ãº - ãSNSç²ããã®é¡åšå - IndieWebã ãŒãã¡ã³ãã®éå§ | çè ãé¢è±ããããã£ãŒããå šçæãšããã®å¯Ÿæéåã®å§ãŸã |
2016-2020 | - ActivityPub (W3Cå§å, 2018) - Mastodonã®æé· - éçãµã€ããžã§ãã¬ãŒã¿ãŒ (Gatsby, Next.js) ã®äººæ° - PWA (Progressive Web App) æè¡ã®æç | - 忣åSNS (Fediverse) ãžã®é¢å¿ - note.com (æ¥æ¬) ãªã©ã§ã®é·æã³ã³ãã³ã埩暩 - ãã©ã€ãã·ãŒæèã®é«ãŸã | IndieWebãšå ±æ¯ãã忣åã»éäžå€®éæš©ãžã®æè¡çã»ç€ŸäŒçé¢å¿ |
2021-çŸåš | - Web3, ãããã¯ãã§ãŒã³, NFTãžã®æ³šç® - AIã«ããã³ã³ãã³ãçæã®äžè¬å - WebP, AVIFãªã©ã®æ¬¡äžä»£ç»åãã©ãŒãããã®æ®å | - 巚倧ãã©ãããã©ãŒã ãžã®äžä¿¡æãšä»£æ¿æ¡ã®æš¡çŽ¢ - ã¿ã€ã ããã©ãŒãã³ã¹ïŒã¿ã€ãïŒéèŠã®é¢šæœ® - ããžã¿ã«ãŠã§ã«ããŒã€ã³ã°ãžã®é¢å¿ | æ¬ã¬ããŒããæžãããèæ¯ãé床ãšå¹çæ§ãžã®ã«ãŠã³ã¿ãŒãšããŠã®ãã¹ããŒãŠã§ãã |
è£è¶³3: æœåšçèªè ã®ããã«
ãã®èšäºã®ã·ã§ã¢ãããã¯ããŒã¯ã«ãååãã ããïŒïŒã¯ãªãã¯ããŠå±éïŒ
ãã£ãããŒãªã¿ã€ãã«æ¡
- ãã£ãŒãããããããªããã€ã³ã¿ãŒãããã®é床ãèœãšããšãããæãã¯ãŒã«ãªéžæã
- ç§ãã¡ã¯ã³ã³ãã³ãã®æ¶è²»è ã§ã¯ãªãããŠã§ãã®äœäººã ããã¹ããŒãŠã§ãã宣èšã
- ãªãåã¯ããããããªãã€ãŒãããªããäœããªããå Žæã«æ»ã£ãŠããã®ãã
- åž°ã£ãŠããããŒãœãã«ãŠã§ãïŒIndieWebãšãããäžã€ã®ã€ã³ã¿ãŒãããã
- Webéçºè ãããªãŒã³ã§ããïŒå²åŠãšããŠã®ããã©ãŒãã³ã¹ãã¥ãŒãã³ã°ã
SNSå ±æçšããã·ã¥ã¿ã°æ¡
#ã¹ããŒãŠã§ã
#SlowWeb
#IndieWeb
#SNSç²ã
#ããžã¿ã«ãããã¯ã¹
#ããŒãœãã«ãŠã§ã
#Webããã©ãŒãã³ã¹
#ããžã¿ã«ãŠã§ã«ããŒã€ã³ã°
SNSå ±æçšæç« ïŒ120å以å ïŒ
çµ¶ãéãªãéç¥ãšãã£ãŒãã«ç²ããããªããžããã¹ããŒãŠã§ãããšããéžæè¢ãå人ã®ãµã€ããåãæ»ããéãã§æ·±ãç¹ãããè²ãã€ã³ã¿ãŒãããã®ããæ¹ãšã¯ã#ã¹ããŒãŠã§ã #SNSç²ã #IndieWeb #ããžã¿ã«ãããã¯ã¹
ããã¯ããŒã¯çšã¿ã°
[Web][SNS][IndieWeb][ã¹ããŒãŠã§ã][ããžã¿ã«ãŠã§ã«ããŒã€ã³ã°][Webéçº][ããã©ãŒãã³ã¹]
ããã¿ãªã®çµµæå
ð¢ ð ð ðžïž ð§ â ð¡ ð±
ã«ã¹ã¿ã ããŒããªã³ã¯æ¡
the-slow-web-manifesto
leaving-the-feed-for-indieweb
reclaiming-your-personal-web
how-to-build-a-slower-internet
è£è¶³4: äžäººããªããã³ã
é¢è¥¿åŒã§ãéãããŸãïŒã¯ãªãã¯ããŠå±éïŒ
ããããããïŒ ãã£ãŒãã«æ¯é ããã人çã¯ãããŠã³ã¶ãªãïŒ ã¯ã€ã¯ããããã¯èªåã®èšèã§ãèªåã®ãµã€ãã§ãéãã«çºä¿¡ãããã¹ããŒãŠã§ãããå§ããããïŒ âŠã£ãŠæ¯å·»ããŠIndieWebã®wikièŠã«è¡ã£ãããæŽæ°æ å ±ãRSSãã£ãŒãã§æµããŠãããããïŒ çµå±ãã£ãŒãããéããããŠãžãããªãããŒãïŒ éãããšã¯äžäœããŸããèªåã§è³Œèªéžãã§ãã ããã·ãâŠãããããŸãããïŒã
è£è¶³5: 倧åå©
ãããªã¹ããŒãŠã§ãã¯å«ã ïŒã¯ãªãã¯ããŠå±éïŒ
- ãŠã§ããµã€ããéãããšãããšãããã ããŸå¿ã蟌ããŠHTMLã1ãã€ããã€ç·šãã§ãããŸãããè¶ã§ã飲ãã§ãåŸ ã¡ãã ããããšè¡šç€ºãããæ¬åœã«ããŒãžã®å®¹éïŒKBïŒÃ 1ç§åŸ ããããã
- ãã€ããŒãªã³ã¯ãã¯ãªãã¯ãããšãçžæã®ãµã€ãã®ç®¡çäººã«æçŽãéµéãããè¿ä¿¡ã®ãã¬ããå±ããŸã§ããŒãžã衚瀺ãããªãã
- ã³ã¡ã³ããæçš¿ãããšãè¿ä¿¡ãäŒæžé³©ã®ã¢ãã¡ãŒã·ã§ã³ã§å±ãã鳩ãç²ããŠãããšæ°æ¥ãããã
- ç»åã®`alt`屿§ïŒä»£æ¿ããã¹ãïŒãé³èªãçµãããŸã§ã次ã®ããŒãžã«é²ããªãã
è£è¶³6: äºæž¬ããããããã®åå¿ãšåè«
ããããªå£°ãèãããŠãããâŠïŒã¯ãªãã¯ããŠå±éïŒ
ãªãJæ°
- ã³ã¡ã³ã: ããã£ããã®æèªãããšã ãããw ã¯ã€ã¯ãªã¢ã«ã¿ã€ã ã§æ å ±è¿œãããšæ»ã¬ããããé ããšãæ£æ°ãïŒãããªæãã£ãã宿³ã¹ã¬ã®ã²ãšã€ã§ãå€ãåããã
- åè«: ãªã¢ã«ã¿ã€ã æ§ã®äŸ¡å€ãåŠå®ãããã®ã§ã¯ãããŸããããããããã¹ãŠã®æ å ±ããªã¢ã«ã¿ã€ã ã§ããå¿ èŠã¯ãªããæ å ±ã®çš®é¡ã«å¿ããŠæ¥ãæ¹ãéžã¶ã䜿ãåãããã粟ç¥çãªå¥åº·ãæ·±ãçè§£ã«ç¹ãããšããææ¡ã§ãããã³ããŒã¬ãŒãé£ã¹ãã°ãæç³æçãå³ããããããã倿§æ§ããã£ãŠãããã®ã§ã¯ïŒ
ã±ã³ã¢ã¡ã³ïŒå«å²æ°ïŒ
- ã³ã¡ã³ã: ãGAFAã®ã¯ãœãã«ãã©ãããã©ãŒã ããæŸåãããé€åä¹ãåäººã®æã«ãŠã§ããåãæ»ãã®ã¯æ£ãããã§ãã©ãããµãŒããŒä»£ãæããªãè²§ä¹äººã«ã¯ç¡çãªè©±ãªãã ããçµå±ãæè¡ãšéæã£ãŠããã€ã®é楜ãããã俺ãã¡ã¯äžçé€åã ãã
- åè«: 確ãã«ãµãŒããŒä»£ã¯ããããŸãããGitHub PagesãNetlifyãVercelãªã©ãéçãµã€ããªãç¡æã§å§ãããããã¹ãã£ã³ã°ãµãŒãã¹ãå¢ããŠããŸããéèŠãªã®ã¯ãå·šå€§è³æ¬ã®è«çã®å€åŽã«ãèªåãã¡ã®æã§å°ããªç©ºéãäœããšããæå¿ãšå·¥å€«ã§ãããå¿ ãããå¯è£å±€éå®ã®æŽ»åã§ã¯ãããŸããã
ãã€ãã§ãïŒãšç®ãããã¢ã«ãŠã³ãïŒ
- ã³ã¡ã³ã: ãç·æ§ã®ãã¹ã¿ã«ãžãŒã§ãå€ãè¯ããããããšãèªã£ãŠããã©ãåœæã女æ§ãžã®ããœãžããŒããã©ã¹ã¡ã³ãã¯é ·ãã£ãã管çè ã®ããªãç¡æ³å°åž¯ãããéå ±ã»ãããã¯æ©èœãæŽåããããã©ãããã©ãŒã ã®æ¹ããã·ãå®å šæ§ã®èŠç¹ãæ¬ ããŠãããã
- åè«: ãææã®éããéå»ã®ã€ã³ã¿ãŒãããã®è² ã®åŽé¢ãç¡èŠãã¹ãã§ã¯ãããŸãããIndieWebãMastodonãªã©ã®åæ£åãããã¯ãŒã¯ã§ã¯ãå人ããµãŒããŒç®¡çè ãç¬èªã®ã«ãŒã«ïŒè¡åèŠç¯ïŒãèšãããããã¯ãéå ¬éèšå®ãé§äœ¿ããŠå®å šãªç©ºéãäœã詊ã¿ããªãããŠããŸããããã¯ã巚倧ãã©ãããã©ãŒã ã®ç»äžçãªã«ãŒã«ãšã¯ç°ãªããå°èŠæš¡ã³ãã¥ããã£ããšã®èªæ²»çãªå®å šç¢ºä¿ã®ããæ¹ãæ¢ãåãã§ãããéåžžã«éèŠãªè«ç¹ã§ãã
çãµã€æ°
- ã³ã¡ã³ã: ãã¹ããŒïŒ ãã£ããããã ãïŒ ããããæèé«ãç³»ã®ããšã ãäžçªãµã ããé»ã£ãŠããã俺ã¯éæ»ã§ã¬ã¹ãããããã ãã
- åè«: ã¹ããŒããå¹çæ§ãæ±ãã䟡å€èгãäžã€ã§ãããäžã®äžã®å šå¡ãåã䟡å€èгãå ±æããå¿ èŠã¯ãããŸããã倿§ãªãŠã§ãã®ããæ¹ã®äžã€ãšããŠããã®ãããªéžæè¢ããã£ãŠãè¯ãã®ã§ã¯ãªãã§ãããããé«ééè·¯ãããã°ãæ£æ©éãããã¹ãã§ãã
Reddit / Hacker News
- ã³ã¡ã³ã: "The critique of the 'feed' is valid, but the conflation of 'slow web' (philosophy) and 'fast-loading site' (performance) is a bit confusing. That said, the discussion on ditching React for progressively enhanced HTML is spot on. We need more focus on lean web development." (ããã£ãŒãããžã®æ¹å€ã¯åŠ¥åœã ãããã¹ããŒãŠã§ããïŒå²åŠïŒãšãé«éèªã¿èŸŒã¿ãµã€ããïŒããã©ãŒãã³ã¹ïŒãæ··åããŠããã®ã¯å°ãçŽããããããšã¯ãããReactãæšãŠãŠããã°ã¬ãã·ããšã³ãã³ã¹ã¡ã³ããããHTMLã«ç§»è¡ããè°è«ã¯çãå°ãŠããããã£ãšãªãŒã³ãªãŠã§ãéçºã«çŠç¹ãåœãŠãå¿ èŠãããã)
- åè«: The connection is that a lean, fast-loading site respects the user's resources (time, data, battery), which aligns with the 'Slow Web' philosophy of creating a more humane and intentional online experience. It's about being slow in consumption and interaction, but fast and efficient in delivery. (ãã®ç¹ãããšã¯ããªãŒã³ã§é«éã«èªã¿èŸŒãŸãããµã€ãã¯ãŠãŒã¶ãŒã®ãªãœãŒã¹ïŒæéãããŒã¿ãããããªãŒïŒãå°éãããã®ã§ãããããã¯ãã人éçã§æå³çãªãªã³ã©ã€ã³äœéšãåµãåºããšãããã¹ããŒãŠã§ããã®å²åŠãšäžèŽããŸããæ¶è²»ãšå¯Ÿè©±ã¯ãã£ãããšããããé ä¿¡ã¯éãå¹ççã«ããšããããšã§ãã)
ç®é»åäºé¢šæžè©
- æžè©: ãæ¬æžã¯ãé床ãšããåã®æªéã«éãå£²ãæž¡ããçŸä»£ã€ã³ã¿ãŒããããžã®ççãªåçºç¶ã§ãããã¿ã€ã ã©ã€ã³ã®å¥æµã«æŒãæµãããæã ã¯ãã€ãããèãããããšãããããåå¿ãããã ãã®ååšã«æãäžãã£ããèè ã¯ãã®æµãã«æãããã€ãŠæã ãæããïŒãŠã§ãïŒã®å颚æ¯ââå人ã®èšèãéãã«æ¯ã¥ãå Žæââãžãšèªè ãèªããããã¯åãªãæå€è¶£å³ã§ã¯ãªããããžã¿ã«ç€ŸäŒã«ãããäººéæ§ã®å埩ãåããéããªãé©åœã®çŒç ãªã®ã ãè¡éããèãããã®ã¯ãã¡ã¬ãã€ãåäœã®å§éšã§ã¯ãªããéã®éããªåãã§ãããã
- åè«: ããããšãããããŸããããããããã¯é©åœã®çŒç ãšããã»ã©å€§ãããªãã®ã§ã¯ãªãã巚倧ãªã·ã§ããã³ã°ã¢ãŒã«ã®é£ã§ãèªåã®æã§å°ããªå®¶åºèåãå§ãããããªãããããã§å人çãªå®è·µã®èšé²ãªã®ã§ãããã®åã®åãããå°ãã§ãæããŠããã ãããªã幞ãã§ãã
è£è¶³7: åŠã³ãæ·±ããããã«
ã¯ã€ãºãšã¬ããŒã課é¡ïŒã¯ãªãã¯ããŠå±éïŒ
髿 ¡çåãã®4æã¯ã€ãº
å1. çè ãæ¹å€ããŠããããã£ãŒããäžå¿ã®ã€ã³ã¿ãŒãããã®ç¹åŸŽãšããŠãæãåœãŠã¯ãŸããªããã®ã¯ã©ãïŒ
- æ°ããæ å ±ãæ¬¡ã ãšæµããŠããŠãçµããããªãã
- ãŠãŒã¶ãŒã¯ãäœãèŠããå®å šã«ã³ã³ãããŒã«ã§ããã
- ã³ã³ãã³ãããã£ããå³ãããããæ¶è²»ãããæèŠã«ãªãã
- åžžã«ä»ã®äººã®åå¿ãæ°ã«ããªããŠã¯ãªããªãã
çã: 2. ïŒçè ã¯ãã¢ã«ãŽãªãºã ã«ãã£ãŠè¡šç€ºããããã®ã決ãŸãããŠãŒã¶ãŒã¯ååçã«ãªããã¡ã ãšäž»åŒµããŠããïŒ
å2. çè ãæå±ãããã¹ããŒãŠã§ããã®èãæ¹ã«æãè¿ããã®ã¯ã©ãïŒ
- ã€ã³ã¿ãŒãããåç·ã®é床ããããšé ãããŠäœ¿ãããšã
- è¿ä¿¡ã«1é±é以äžããããªã©ãã³ãã¥ãã±ãŒã·ã§ã³ãæå³çã«é ãããããšã
- 峿ã®åå¿ãæ±ãããèªåã®ããŒã¹ã§çºä¿¡ããããä»è ã®èãããã£ããèªãã ãããããšã
- æã®ã³ã³ãã¥ãŒã¿ãŒã䜿ã£ãŠã€ã³ã¿ãŒãããã«æ¥ç¶ããããšã
çã: 3. ïŒãã¹ããŒããšã¯ç©ççãªé床ã§ã¯ãªãã粟ç¥çãªé¢ããæ¹ã®ããšãæããŠããïŒ
å3. åŸåã®æè¡è°è«ã§ãäœéåç·ãå€ãã¹ããŒããã©ã³ã§ãå¿«é©ãªãŠã§ããµã€ããäœãããã«ãé¿ããã¹ãããšãããŠãããã®ã¯ã©ãïŒ
- HTMLããããã䜿ãããšã
- Reactã®ãããªã倿©èœã§éãJavaScriptãã¬ãŒã ã¯ãŒã¯ã
- WebP圢åŒã®ãããªããã¡ã€ã«ãµã€ãºã軜ããªãç»å圢åŒã
- å¿ èŠãªæ å ±ã ãããµãŒããŒããéããµãŒããŒãµã€ãã¬ã³ããªã³ã°ã
çã: 2. ïŒå€æ©èœãªåããã¡ã€ã«ãµã€ãºã倧ãããªããå€ã端æ«ã§ã¯åäœãé ããªãåå ã«ãªããšææãããŠããïŒ
倧åŠçåãã®ã¬ããŒã課é¡
課é¡1ïŒæ
å ±ç€ŸäŒåŠã»ã¡ãã£ã¢è«ïŒ:
æ¬çš¿ã§æç€ºããããã¹ããŒãŠã§ããã®æŠå¿µãšãçŸä»£ç€ŸäŒã«ããããã¿ã€ã ããã©ãŒãã³ã¹ïŒã¿ã€ãïŒãéèŠã®é¢šæœ®ãšã®é¢ä¿æ§ã«ã€ããŠè«ãããã¹ããŒãŠã§ãã¯ã¿ã€ãæåãžã®æå¹ãªã«ãŠã³ã¿ãŒã«ã«ãã£ãŒãšãªããããããããã¯åãªãäžéšã®ãã¹ã¿ã«ãžãŒã«éããªãããæ¥æ¬ã®ã€ã³ã¿ãŒãããæåïŒäŸïŒããã¹ããµã€ããmixiã2ã¡ãããããnoteãªã©ïŒã®å€é·ãèžãŸããå
·äœçãªäºäŸãæããŠèå¯ããããšãïŒ2000åçšåºŠïŒ
課é¡2ïŒãŠã§ãå·¥åŠã»HCIïŒ:
æ¬çš¿ã®ç¬¬6ç« ã§è¿°ã¹ãããããªãŒã³ã§ããããšã®å²åŠãã«åºã¥ããããªããèãããã¹ããŒãŠã§ãããå
·çŸåãããŠã§ããµã€ããŸãã¯ãŠã§ãã¢ããªã±ãŒã·ã§ã³ã®èšèšæ¡ãææ¡ããããã®éã以äžã®ç¹ã«ã€ããŠå
·äœçã«èšè¿°ããããšã
1. ãµã€ãã®ç®çãšã¿ãŒã²ãããŠãŒã¶ãŒ
2. ææ³ãåæ ããUI/UXãã¶ã€ã³ïŒç¡éã¹ã¯ããŒã«ãéç¥ã®æ±ããªã©ïŒ
3. æè¡éžå®ïŒãã¬ãŒã ã¯ãŒã¯ãã¬ã³ããªã³ã°ææ³ãç»åæé©åãªã©ïŒãšãã®çç±
ïŒA4çšçŽ2æçšåºŠãå³ãã¯ã€ã€ãŒãã¬ãŒã ãå«ãã§ãè¯ãïŒ
ã³ã¡ã³ã
ã³ã¡ã³ããæçš¿