2021-01-01から1年間の記事一覧
developer.mozilla.orgMDN Web Docsにてwindow.closeの仕様を確認してみると、 Window.close() メソッドは、現在のウィンドウ、またはそのページ上で呼び出されたウィンドウを閉じます。このメソッドが許可されるのは、window.open() メソッドを用いたスクリ…
基本的には、React.cloneElementを使い、propsを固定した状態のcomponentを作るのがセオリーのようです。ja.reactjs.orgイメージ的には、Function.prototype.bindを使って引数を固定した関数を作るのに似ている気がしました。developer.mozilla.org実際に例…
functionで宣言した関数の中でthisを使うと、 'this' implicitly has type 'any' because it does not have a type annotation. とエラーが出ます。アローファンクションと近い、functionによる関数宣言は実行方法によってthisが変化するからです。TypeScrip…
Node.jsで普通にimportを使おうとすると、 SyntaxError: Cannot use import statement outside a module と怒られます。いままではおとなしくrequireを使ってきましたが、世間はもう2021年。子供の頃思い描いていた未来です。 そう。流石にimportを使いたい…
4年ぐらいぶりにシリアル通信を行うElectronアプリを作りました。おぼろげながら、 electronとserialportを普通に組み合わせるとエラーが出る rebuildすると使える という4年前の記憶がありまして、まずは、electron + serialportで中身が空っぽのアプリを作…
process.env.npm_lifecycle_event で取得できます。Next.jsのexport設定を本番とステージング環境用で分ける際、 "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint", "export-staging": "next build && n…
jQueryのclosetとは querySelectorは己の子要素を検索するメソッドですが、closetは逆に己の親を検索する、jQueryオブジェクトのメソッドです。api.jquery.com Given a jQuery object that represents a set of DOM elements, the .closest() method searche…
microCMSのリッチエディタですが、下記サービスの埋め込みに対応しています。 YouTube(https://www.youtube.com/) Vimeo (https://vimeo.com/) Twitter (http://www.twitter.com/) Instagram (https://instagram.com) Facebook (https://www.facebook.com/…
git remote prune originで、リモートで削除されたリポジトリをローカルに反映したらpullできるようになりました。
ベクトルを合算し、原点からの角度を出すのがセオリーのようです。関数にするとこんな感じです。 function getAverageAngle(angles = []) { let x = 0; let y = 0; angles.forEach((angle) => { x += Math.sin(angle / 180 * Math.PI); y += Math.cos(angle …
MacとmycobotをUSB-Cで繋いで、python3経由で操作するための設定方法をまとめておきます。 ファームウェアの書き込みだけうまくいかず、Windows機を使いました。 myCobotとは Elephant Robotics社とM5Stack社が共同で製作した6軸の可動域を持つ協働ロボット…
Next 11を使ってウェブサイトを構築し、 yarn buildで書き出そうと思ったのですが、 Error: External synchronous scripts are forbidden. See: https://nextjs.org/docs/messages/no-sync-scripts. @next/next/no-sync-scripts とエラーが出ました。指示さ…
実装のたびに調べている気がするので、まとめておきます。iOS12.2からブラウザから加速度センサの値にアクセスするには、ユーザーからパーミッションを取ることが必須になりました。iOS12.2では設定アプリからパーミッションを取る形式だったのですが、iOS13…
会社勤めだったころは、同僚のGoogleカレンダーを確認できたので、空いてる時間を探せたり、探してもらえたりしたのですが、フリーランスでリモートで仕事を進めていると、そうはいかず、オンラインミーティングの日程を合わせるのがやや大変だったりします…
forwardRefは、以前、子コンポーネントのメソッドを叩こうとしたときに使ったことがあるのですが、今回は単純にrefを渡すだけの記事です。blog.kimizuka.orgただ、公式ドキュメントにもわかりやすい記事があるので、そちらを見た方が早いかもしれないです。j…
ことの発端 めずらしいケースだとは思うのですが、最近、ステージングと本番のURLルートのパスが違う環境でNext.jsを使う機会がありました。ざっくりいうと、 本番 https:/kimizuka.fm/production/ ステージング https:/kimizuka.fm/staging/ みたいな感じで…
creareRefを使ってrefを要素分つくるのが良いみたいです。 import { createRef, useRef } from 'react'; const list = ['', '', '']; export default function Indexpage() { const listRefs = useRef([]); list.forEach((_, i) => { listRefs.current[i] = …
developer.mozilla.orgAndroid Chromeではアンダーラインが表示されるのに、iOSのSafariでは表示されないという事態に直面しまして、いろいろ調べてみると、text-decorationを一括指定すると、Safariで表示されなくなることに気づきました。iOSでもMacOSでも…
以前作ったカスタムフックが複雑すぎたのでシンプル版を作りました。blog.kimizuka.org useScroll.tsx import { useEffect, useState } from 'react'; export default function useScroll() { const [ scrollTop, setScrollTop ] = useState(0); const [ scr…
ものすごく久しぶりにExpress + Socket.ioでウェブサイトを作ったので、手順をメモしておきます。 ※ Node.js v14.15.0、yarn 1.22.5 で作成 必要なパッケージをインストール yarn add express socket.io app.jsを作成 const express = require('express'); c…
こんな需要があるかはわかりませんが、前々回と前回の記事を併せれば実現できます。blog.kimizuka.org blog.kimizuka.orgつまり、透明なオブジェクトに対してcastShadowを有効にしてあげれば影だけが投影されるのです。 透明なのに影が映るのはおかしい気も…
Three.jsでライト(AmbientLight以外)を使うと、凹凸のあるオブジェクトには影が表示されます。 が。他のオブジェクトに対しては影が落ちません。他のオブジェクトに影を落とすためには、いろいろ設定が必要だったのでまとめておきます。 WebGLRenderer.sha…
マテリアルの変更は以前調べた し、なんならその時も半透明にしたから大丈夫でしょう。blog.kimizuka.orgと思って、取り組んだのですが、ハマったのでメモを残しておきます。まず、glbファイルを読み込みます。前回の記事を参考にmaterialを透明にします。 …
DEMO 解説 clip-pathにSVGのID(正確にはSVG内の図形のID)を渡してあげればその図形をマスクにすることができます。developer.mozilla.orgまた、SVGもタグなのでCSSアニメーションで動かすことができます。 そうすると、合わせ技でマスクをアニメーションさ…
❶ position: fixedの要素を用意する ❷ ❶で用意した要素に背景色を設定する ❸ ❶で用意した要素の子要素を用意する ❹ ❸で用意した要素をY軸で180度回転させる(裏返す)という処理、つまりコードで書くと、 HTML <div> <p></p> </div> CSS div { position: fixed; background-col…
Next 11を使ってウェブサイトを構築し、 yarn buildで書き出そうと思ったのですが、 Error: Do not use . Use Image from 'next/image' instead. See https://nextjs.org/docs/messages/no-img-element. @next/next/no-img-element とエラーが出ました。指示…
Next.js + styled-componentsでウェブサイトを作り始めてから、ずーっと気になっていました。 ページ表示時に一瞬スタイルが当たってない状態が表示のが。が。ついに、その解決方法を見つけました。この、サーバサイドレンダリングを使えば解決します。style…
_headerで設定できます。blog.kimizuka.org 設定方法 ❶ Pro以上のプランにアップグレードするwww.netlify.com❷ _headersを作成する /* Basic-Auth: user:password※ ユーザー名: user パスワード: password の例❸ ルートディレクトリに_headerを置く以上です。…
こんな感じで、顔の周りを切り抜くスクリプトを書きました。github.com (function() { window.trimAndResize = trimAndResize; function trimAndResize(canvas, size) { return faceapi.nets.tinyFaceDetector.load('https://justadudewhohacks.github.io/fa…
先日、Contentful + Nuxt.jsでつくったサイトのAPIキーの隠蔽を試みましたが、今回はそのサイトをAmplifyを使って公開する際の.envの作成方法をまとめておきます。公式サイトに書いてある通りの方法です。docs.aws.amazon.com ❶ 環境変数を設定 Amplifyコン…