2021-01-01ãã1å¹´éã®è¨äºä¸è¦§
ãã¨ã®çºç«¯ 以åãvwã使ã£ã¦ç»é¢å¹ ã«åããããµã¤ãºèª¿æ´ãè¡ãã¢ãã¯ãã¤ããã¾ããããä»åã¯ãããç°¡åã«è¨å®ã§ããã¦ã¼ãã£ãªãã£é¢æ°ãä½ããã¨æãã¾ããã ã²ã¨ã¤ã²ã¨ã¤ãææ¸ãã§æ¸ãã¦ããã®ã¯é常ã«éª¨ãæããããã§ããblog.kimizuka.org æ¹éã¨â¦
以åã·ã³ãã«ã«ä½ãç´ããã«ã¹ã¿ã ãã㯠ãã»ãã®ãè¤éã«ä½ãç´ãã¾ããã å ·ä½çã«ã¯ä»¥åã®ãã®ã¯ã¦ã£ã³ãã¦ã®ã¹ã¯ãã¼ã«éã測å®ãããã¨ã«ç¹åãã¦ããã®ã§ãããå¼æ°ã§æ¸¬å®å¯¾è±¡ã渡ããããã«ä¿®æ£ãã次第ã§ããblog.kimizuka.org useScroll.tsx imporâ¦
è¿½è¨ ãã¨ã®çºç«¯ çµè« DEMO ã½ã¼ã¹ã³ã¼ã çµç·¯ è¿½è¨ ä¸¡æã®ã³ã³ããã¼ã©ã¼ã«å¯¾å¿ãã¾ããï¼https://kimizuka.org/mock/r127/vr-controller ãã¨ã®çºç«¯ examplesãè¦ãªããWebVRã³ã³ãã³ããã¤ãã£ã¦ããã®ã§ãããã³ã³ããã¼ã©ã¼ã®ãããªã¬ã¼ããã°ãªãããâ¦
changeã¤ãã³ãã使ãã¨å¤ã®ç¢ºå®æãinputã¤ãã³ãã使ãã¨å¤ã®å ¥åæã«çºç«ãã¾ãã DEMO ç¾èã¯ä¸è¦ã«ããããªã®ã§DEMOãæä½ãã¦ãããã®ãä¸çªæ©ãã§ãã
ãããããã±ã¼ã¹ã ã¨æãã¾ããã <ul> {list.map((item, i) => { return ( <li>{ item.title }</li> <li>{ item.text }</li> ); })} </ul> ã¨ãããããªæãã§ãè¦ç´ ãè¤æ°è¿ãããã±ã¼ã¹ã«åºãããã¾ããã <ul> {list.map((item, i) => { return ( <> <li>{ item.title }</li> <li>{ item.text }</li> ); </ul>â¦
å æ¥ãAR.js + Three.js + Next.jsã§ã¹ãã¼ããã©ã³åãã®ã¦ã§ãARãã¤ããã¾ããã3Dãªãã¸ã§ã¯ãããã©ã¦ã¶ä¸ã«ã3Dãªãã¸ã§ã¯ãã®å½±ãç¾å®ç©ºéã«è¡¨ç¤ºãããã¦ã§ãAR + ããã¸ã§ã¯ã·ã§ã³ãããã³ã°ãä½ãã¾ãããåä»ãã¦ã影絵Rï¼ã«ã²ã¨ã¼ã¢ã¼ã«ï¼ãã§ãâ¦
iOS15ããæ示çã«colorãå½ã¦ãªãã¨ãoptionã®æåè²ã«-apple-system-blueã¨å½ã¦ããã¦ãã¾ããéããªã£ã¦ãã¾ãããã§ãã body { color: #000; } option { color: #000; } ã§ã¯ä¿®æ£ã§ããªãã£ãã®ã§ããã select { color: #000; } ã§ä¸æ¸ãã¾ããããã â¦
以åä½æã»æ¤è¨¼ãããGoogleã«ã¬ã³ãã¼ã®äºå®åããäºå®ãããã«å¤æ´ããã¹ã¯ãªãããhtml2canvasã§ã®ã¹ã¯ãªã¼ã³ã·ã§ããã®æ®å½±ãã¦ã¼ã¶ã¼ã¯ãªãã¯ãªãã®ãã¡ã¤ã«ãã¦ã³ãã¼ããçµã¿åãããããã¯ãã¼ã¯ã¬ãããã¤ããã¾ããã blog.kimizuka.org blog.kimiâ¦
æè¿ã(new Date).getMonth()ã®çµæãè±èªã«ããæ©ä¼ãããã¾ãã¦ãæç´ã«ã [ 'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December' ][(new Date).getMonth()]; çãªã³ã¼ããæ¸ããâ¦
ãã®ãããç¹æ®ãªä¾ãªæ°ããã¾ãããæ¬ä¼¼è¦ç´ ã«åè§ã¹ãã¼ã¹ãè¨å®ãããã¨æããSCSSã§ã p { &:before, &:after { content: ' '; } } ã¨æ¸ãã¦ã¿ãã®ã§ãããã¡ã§ãããHTMLã§ããã°å®ä½åç §ã使ãã¨ãããªã®ã§ããã p { &:before, &:after { content: '&â¦
è¿½è¨ ã®ã¡ã« anyenv ã使ã£ã¦å°å ¥ãç´ãã¾ãããblog.kimizuka.org github.comãã¾ã¾ã§ã¯Node.jsã®ãã¼ã¸ã§ã³ç®¡çã«ndenvã使ã£ã¦ããã®ã§ããã [Deprecated] nodenv is better alternative Please consider to use nodenv. ndenv repository is not maintaâ¦
ãã¡ã¤ã«åããã¿ã¤ã ã¹ã¿ã³ãã®åé¤ ãã¡ã¤ã«åã®å¤æ´ ä¿åå ´æã®å¤æ´ ãã¬ãã¥ã¼ã表示ããå³æä¿å Macã§ã¯ã ãcommandã+ãshiftã+ ã3ã ãcommandã+ãshiftã+ ã4ã ãcommandã+ãshiftã+ ã5ã ã§ãç»é¢ã®ã¹ã¯ãªã¼ã³ã·ã§ãããæ®å½±ãããã¨ãã§â¦
Appleã·ãªã³ã³ï¼M1ï¼ã®Macã«ndenvã使ã£ã¦ã15.Xã®Node.jsãã¤ã³ã¹ãã¼ã«ãããã¨ããéã ndenv install v15.0.0 Downloading node-v14.0.0-darwin-arm64.tar.gz... -> https://nodejs.org/dist/v14.0.0/node-v14.0.0-darwin-arm64.tar.gz .ndenv/plugins/nâ¦
html2canvasã使ã£ã¦HTMLã®ç»ååã試ã¿ã¾ããã
developer.mozilla.orgaã¿ã°ã«ä»ä¸ãããã¨ã§ãã¯ãªãã¯ããéã«ãã¡ã¤ã«ããã¦ã³ãã¼ãã§ããdownloadå±æ§ã é常ã«ä¾¿å©ã«ä½¿ããã®ã§ãããã¾ã§ããaã¿ã°ã®ãã¦ã³ãã¼ãå±æ§ãã¤ãã£ãæ¤è¨¼ã¯ä½åº¦ãè¡ã£ã¦ãã¾ãããblog.kimizuka.org blog.kimizuka.orgä»åâ¦
ããã¾ã§ã input::placeholder { color: red; } input::-moz-placeholder { { color: red; } input::-ms-input-placeholder { color: red; } ã¨ããæãã§ãã³ãã¼ãã¬ãã£ãã¯ã¹ãã¤ãã¦å®è£ ãã¦ããã®ã§ãããæ¹ãã¦MDN Web Docsã確èªããã¨ãããIE以å¤â¦
ã¹ãã¬ããã·ã¼ãã«æãã16Ã16ã®ãããçµµãé åã«å¤æããGASãæ¸ãã¾ããã ä¸è¨ã®ãããçµµãã const pictures = [ ['#ffffff', '#ffffff', '#ffffff', '#ffffff', '#ffffff', '#ffffff', '#ffffff', '#ffffff', '#ffffff', '#ffffff', '#ffffff', '#ffffâ¦
ããã¾ã§ãNext.jsã§ã³ã³ãã¼ãã³ããã¤ã³ãã¼ãããéã¯ãç¸å¯¾ãã¹ã使ã£ã¦ããã®ã§ãããã³ã³ãã¼ãã³ããå¥ã®ãã£ã¬ã¯ããªã«ç§»åããéã«ããã¹ãæ¸ãæããªããã°ãªããªããã¨ããã°ãã°ããã¾ãã¦ãNuxt.jsã®ããã«ã~ãã¨ãã@ãã使ãæ¹æ³ã¯ãªããã®â¦
ãã¨ã®çºç«¯ 以åãNext.jsã§SVGãã³ã³ãã¼ãã³ãã®ããã«æ±ãæ¹æ³ã調ã¹ã¾ãããblog.kimizuka.orgä»æ¥ãã¾ãããã¤ãã®ããã«babel-plugin-inline-react-svgã使ã£ã¦SVGãèªã¿è¾¼ããã¨ããã®ã§ããã Error: Element type is invalid: expected a string (fâ¦
çµè« 調æ»çµæ Google Apple Facebook Amazon Microsoft Twitter Instagram ãã©ã³ãã®æå®ãèãã ã¦ã§ããµã¤ããä½ãã¨ãã®éè¦ãªè¦ç´ ã®ã²ã¨ã¤ã«ãã©ã³ãã®é¸å®ãããã¾ãã æè¿ã¯ãã£ã±ãNoto Sans Japaneseã使ããã¨ãå¤ãã®ã§ããããã¾æ¹ãã¦æåã¦â¦
ã¿ã¤ãã«ã®éãã§ããmicro:bitã¨Google ChromeãWeb Bluetooth APIã§ç¹ãã¾ããã Google Chromeããmicro:bitã®LEDãããªã¯ã¹ãå¶å¾¡ãã¾ããã¾ããmicro:bitã®èª¬æã¯ç«¯æãã¾ãããç°¡åã«èª¬æããã°ãã¤ã³ã³ã§ãã è±å½ã§ã¯11ã12æ³ã®åä¾ãå ¨å¡ã«ç¡åã§é â¦
Atom Matrixãè³¼å ¥ããã®ã§ãArduino IDEããã³ã¼ããæ¸ãè¾¼ãã§ãã¾ãããATOM Matrixwww.switch-science.com å®æãããã® æ¬ä½ãå¾ããã¨ä¸æ¹åãæãç¢å°ã表示ãã¾ãã ããã«è³ãã¾ã§ã«ãã£ããã¨ãé ã追ã£ã¦èª¬æãã¦ããã¾ãã Atom Matrixã®ä»æ§ãâ¦
Three.jsã«3Dã¢ãã«ãèªã¿è¾¼ãã ã¨ããæã ãç°å¢å æºï¼AmbientLightï¼ãå½ãããªãã¢ãã«ï¼å¹³è¡å æºã»DirectionalLightãç¹å æºã»PointLightãªã©ä»ã®ã©ã¤ãã¯å½ããï¼ãããã¾ãã¦ããããããªãã®ã§ä»ã®ã©ã¤ãã§ç §ããã¦ããã®ã§ããããã£ã±ãæ°ã«ãªãã®â¦
ã¦ã§ãã¢ããªã®éçºä¸ã«ã#ffffff â 255,255,255 ã¿ãããªå¤æãå¿ è¦ã«ãªãã¾ããã ãããªå¦çã¯çµ¶å¯¾ã«èª°ããæ¸ãã¦ããã¯ãã ãã¨æã調ã¹ã¦ã¿ãã¨ãããwww.npmjs.comã°ã£ã¡ãè¦ã¤ããã¾ãããã½ã¼ã¹ã³ã¼ãã37è¡ã¨ããªãçããããã使ããããªã¨ãæã£â¦
ãã¤ã³ã¿ã渡ãã°é¢æ°ã®å¼æ°ã«é åã渡ããã¨ãã§ãã¾ãã void setup() { Serial.begin(9600); } void loop() { int arr[] = { 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 }; checkArr(arr); delay(1000); } void checkArr(int *arr) { Serial.println(arr[9]); // â 9 â¦
èµ·åããéã«ãã»expressã§ãµã¼ããç«ã¦ãï¼ãã¼ãã¯3000ï¼ ã»publicãã£ã¬ã¯ããªã®ä¸èº«ããã¹ãã£ã³ã°ãã ã»socket.ioã§ãµã¼ãã¨ã¯ã©ã¤ã¢ã³ãã®éä¿¡ãè¡ãï¼ipcéä¿¡ã®ä»£æ¿ï¼ ã»Google Chromeãèµ·åãhttp://localhost:3000ãéãï¼Chromeã®ãã¦ã³ãã¼ãã¯â¦
developer.mozilla.org developer.mozilla.org以åããAndroidã®Chromeã«ã¯æè¼ããã¦ãããã®ã®ãiOSã®Safariã«ã¯æè¼ããã¦ãªãã£ãWeb Share APIã§ãããiOS15ã«ã¦ã¤ãã«æå¹ã«ãªã£ãã¨ã®ãã¨ãªã®ã§ãæ©éå®è£ ãã¦ã¿ã¾ãããä¸çªããã£ãã¨ããã¯ãnavigaâ¦
passiveãfalseã«ãã¦touchmoveã®Event.preventDefaultãå®è¡ããã°ãPull to Refreshï¼å¼ã£å¼µã£ã¦æ´æ°ï¼ãæ¢ãããã¨ãã§ãã¾ãã document.addEventListener('touchmove', function(evt) { evt.preventDefault(); }, { passive: false }); ä»åã¯ãtouchmoâ¦
ä»æãiOSã15ã«ã¢ããã°ã¬ã¼ããã¤ã¤ãMacçã®Safariãææ°ã«ãã¦ã¿ãã¨ãããã©ã¡ãããµã¤ãã«ãã£ã¦ã¡ãã¥ã¼ãã¼ãããã²ã¼ã·ã§ã³ãã¼ã®è²ãå¤ããããã«ãªã£ã¦ã¾ãããSafari15ãããtheme-colorãè©ä¾¡ããããã«ãªã£ãããã§ããdeveloper.mozilla.orgâ¦
é常ãpositionãfixedã«ããè¦ç´ ã®è¦ªè¦ç´ ã®overflowãhiddenã«ãã¦ããã¯ã¿åºããé¨åã¯é ãã¾ããã HTML <div class="parent"> <div class="child"></div> </div> CSS .parent { position: fixed; top: 0; bottom: 0; left: 0; right: 0; margin: auto; width: 160px; height: 160px; background: red; overflâ¦