Tumblræ°çèšäºãååŸããjavascript(Vue.jså©çš)
ãã®æçš¿ã¯ä»¥äžã®ãããªæ¹ãæ³å®èªè
ãšããŠããŸãã
javascriptãhtmlãããçšåºŠããã
éçããŒãžã«tumblrã®æ°çèšäºãåã蟌ã¿ãã
ä¿®æ£åæã§ããããTumblræ°çååŸã®ããŒã¹ã®ã³ãŒããã»ãã
vue.jsã身ã«ã€ããå¿
èŠãåºãã®ã§ããšããããåããã®ãäœã£ãŠã¿ãããšã¿ã€ãã«éãæ°çååŸã®JSãäœã£ãã®ã§å
±æã
ã³ããOKãAPIããŒã®å·®ãæ¿ãã¯å¿ãããé¡ãããŸãã
æè
Vue.jsè§Šãå§ã+asyncãfetchã®çè§£ãæªããè
ã«ã€ãããããã¯ãããããã¿ãããªããšããããããŠããããããŸããã
ãšããããã³ãŒããèŠããæ¹ã¯ãã¡ãâïŒããŒã¹ã®ã³ãŒãã³ããŒããã¡ãããïŒ
詊äœtumblrè€æ°ããã°ããèšäºååŸ
CSSã¯æžããŠãªãã®ã§ãã奜ã¿ã§åœãŠãŠãã ãããã³ãŒãã®è£è¶³ãªã©ã¯æãããã¿ããã
Expand
ãšããããåããã®ãâŠãšã¯ããäœããããã®ã§ãªããšããæ°ãåºãªãâŠâŠãã©ãäœããããã®ãã®ã³ãŒããæžãèªä¿¡ãªãâŠâŠâŠãšã°ãã°ãããŠãããšããã«é¢¯çœãšçŸããchatGPTå
ç
ç§:vue.jsã§tumblr APIã䜿ã£ãŠæ°çèšäºã5ä»¶ååŸãããµã³ãã«ã³ãŒããæããŠã»ãã
å
ç:以äžããvue.jsã§tumblr APIã䜿ã£ãŠæ°çèšäºã5ä»¶ååŸãããµã³ãã«ã³ãŒãã§ã
å
çããããšãããããïŒïŒ
codepenã«ã³ã¡ã³ãå
¥ããŠããéããæžããŠããã£ããµã³ãã«ã³ãŒããæ¹ä¿®ããŠãã圢ã§äœã£ãŠãããŸãã
ãµã³ãã«ããã£ã以å€ã«ããšã©ãŒåºããšããšãã«ãã£ã¡ãèãããå
çããããšãã
ã»Tumblrã®APIããŒãçºè¡ãã
ãã¡ããåèã«ãããŠããã ãã
Tumblr APIã§webãµãŒãã¹ãäœãããå
šãŠã®äººã«åããŠæžããŸãã
Tumblr APIã®æ¥æ¬èªããã¥ã¢ã«ã§ããåå¿è
ã®æ¹ã§ãåããããããµã³ãã«ã³ãŒãã倿°çšæããŠãŸãã
èšäºã®å
¬éã¯çµæ§å€ããã©ãããŒã®ç¢ºèªãŸã§ã¯ãã®ãŸãŸãããŸããæè¬ã
æ°çèšäºã5ä»¶ãã€ååŸã
ã³ã³ãã³ãã®å
容ã«å¿ããŠåºåå
容ãåãåã
æ°ããé ã«äžŠã¹ããã®ã
衚瀺ïŒãããäžçªvue.jsãœãïŒ
ãšããããšãããŠããŸãã
ãªã¢ã«ã¿ã€ã ã§æŽæ°ã¯ãããŸãããããŒãžèªã¿èŸŒã¿æã«åããŠçµãããŸãã
2ã4ã®ãããã¯ã«ã¹ã¿ã ãããç®æããšæãã®ã§è§£èª¬ãšããããããã«ãããŸããçãªè£è¶³ãæžããŠãããŸããããšAPIããŒå
¥ãããšããã
vueãœãéšåã®è§£èª¬ã¯ãããŸãããïŒããããèªåã解説ã§ããã¬ãã«ã§ã¯ãããŸãã( ËÏË)
tumblrApiKey: 'ããã«APIããŒ',
28è¡ç®ã«ãããŸã(åœæ¹ã®APIããŒãå
¥ã£ãŠãããŸã)
äºåæºåã§ç¢ºèªããããŒãããã«
tumblrBlogNames: ['isobeagedesu', 'chikuwaaaa'],
ããã«æžãã®ã¯ããã°ã®URLãããâãhttps://ãã.tumblr.com/ããªã£ãŠããããã®ãšããããµãããã°ãåãããã¡ã€ã³å€ããŠã人ã¯ãã§ããããããã©ãæçš¿å
éžã¶ãšãã«åºãŠã衚èšã§ããããããšæããŸã( ËÏË)
è€æ°ããã°ã®å Žåã¯ã«ã³ãã§åºåãïŒäžåç
§ïŒãäœåã§ããããïŒããºïŒãã1ã€ã ãã§ããããã
const response = await fetch(https://api.tumblr.com/v2/blog/${blogName}/posts?api_key=${this.tumblrApiKey}&limit=5);
getPostsã¡ãœããå
ã36è¡ç®ã«ãããŸã
ããã®æåŸã5ãšãªã£ãŠããã®ããä»»æã®æ°ã«å€æŽããŠãã ãããïŒä»æããšãã倿°ã«ããŠãããã£ãããïŒ
ã¡ãªã¿ã«å®é衚瀺ãããã®ã¯5ä»¶Ãããã°ã®æ°ãªã®ã§ãããã°2ã€ã®å Žåã¯10件衚瀺ãããŸãã10ä»¶ãããããããšèšãå Žåã¯ããã®æ°ã調æŽãã€ã€ãæåŸã®äžŠã¹æ¿ãããšãã«ãããååãæšãŠã¿ãããªåœ¢ã«ãããšããããããšæããŸã( ËÏË)
ïŒããããã®ããã°ã®ææ°èšäºã ã1幎åã ã£ãããããšåçŽã«å¿
èŠå÷ããã°æ°ã ãšå
·åããããããªãã®ã§ããã®èŸºã¯æ§åèŠã€ã€ïŒ
åºåå
容ã¯getReturnContentã¡ãœããïŒ55è¡ç®ã68è¡ç®ïŒã§çšæããŠããã®ã§ããããã奜ã¿ã§æ¹ä¿®ããŠãã ããã
const returnItem = {
id: i,
title: firstH1Content ? firstH1Content : "",
date: new Date(date),
firstImage: firstImage || '',
first50Chars: firstImage ? '' : first50Chars,
srcBlogName: n,
};
return returnItem;
ããã®éšåïŒå59è¡ç®ã67è¡ç®ã«ãããŸãïŒã§ãåºåå
容ããŸãšããã»ããããäœã£ãŠããŸããretrunã§è¿ãããã®ã¯è¡šç€ºçšé
åïŒ74è¡ç®ïŒallPostsïŒã«æ ŒçŽãããã®ã§ãç»åãããã€ã ããšãæã£ãŠãããå Žåã¯ãç»åããªãã£ããã»ãããè¿ããªããã«ã¹ã¿ã ãšãããããšããã®ã§ã¯ãšæããŸãã
ãã®èŸºã¯vueãšãããjsãªã®ã§ãããªã«ããŠããã ããã°ãš( ËÏË)
4è¡ç®ã21è¡ç®ã«ãããŸããïŒhtmlå«ãã§ãã®ã§è²Œããªãã£ãïŒ
ããã¯ããvueã§ãããã»ãŒhtmlãªã®ã§ãã¡ãããããªã«ããŠããã ããã°ãš( ËÏË)
ãã³ãã¬ãŒãã®æ§æã«ã€ããŠã¯å
¬åŒããã¥ã¡ã³ããããããããã£ãã§ãã
Vue.js - The Progressive JavaScript Framework
ïŒjqueryãšæ¯ã¹ãŠããããŒã¿ã®å
容ãç»é¢ã«è¡šç€ºãããã®ããã¡ããããããããªïŒïŒãšãããã€ãã£ãŠãŠæã£ãïŒ
æçµçã«ä»¥äžèª¿æŽããŠçµã¿èŸŒãã ã®ããã¡ãïŒèªåã®ããŒããã©ãªãªã§ãïŒ
èšäºãžã®ãªã³ã¯ãã¿ã³ã远å
ããã®ããŒããã©ãªãªãµã€ããWEBã³ãŒããŒãããªããçµµãæããŠããŸãããªãªãžãã«ã€ã©ã¹ãã»æŒ«ç»ãªã©ã®æ°çæçš¿ãã確èªããã ããŸãã
ã¡ãªã¿ã«ãåäžãã¡ã€ã«ã³ã³ããŒãã³ãã§ãªã圢ã§çµã¿èŸŒãã®ã¯å
¬åŒã®ãCDNã®Vueãå©çšããããåèã«ãªããŸããã
Vue.js - The Progressive JavaScript Framework
ãã ãããã«ä¹ã£ãŠãCDNãèªã¿èŸŒãã§éçºè
ããŒã«ãèŠããšãããã¯éçºçšãªã®ã§æ¬çªå
¬éãããšãã¯*.prod.jsã«ããŠããã¿ãããªã¯ãŒãã³ã°ãåºãŠããŠããã®èª¬æãv3ã®ã¬ã€ãã«ã¡ãã£ãšèŠåœãããªãã®ã§æ··ä¹±ããã
詳ãã説æã¯Vueã®v2ã®æ¹ã®ã¬ã€ãã©ã€ã³ã«ãããŸãã( ËÏË)
ã€ã³ã¹ããŒã« â Vue.js
Vue.js - The Progressive JavaScript Framework
v3ã®å Žåãå
¬éãããšãã¯ãããŒãžã§ã³ãè©³çŽ°ã«æå®ãããŠãæåŸãprod.jsãã«å€ãããšããããã§ã( ËÏË)