スクロールに連動してアニメーションを動かすサイトや、パララックスを実装する際、 ページのスクロール量（一番上から何%スクロールしているか） スクロールの方向 を管理すると、非常に楽に実装することができます。 今回はNext.js（React.js）のHooks API…
npmで探したら似たようなものがある気もしなくもないですが、すごくシンプルなものが欲しかったので自作しました。 process.browserを使っている点以外はNuxt.jsに依存しているところはないですが、Next.jsで使うことを前提に作ってます。 TypeScrtipt expor…
Nuxt.js + styled-componentsで開発をしているのですが、SCSSのような感じで、 SCSS ol { @for $i from 0 through 10 { li:nth-child(#{$i + 1}) { &:before { content: '#{$i}'; } } } } こちらをstyled-componentsに書き換えてみると、 styled-components …
MediaDevices.getUserMedia()の仕様を確認すると、 すべての constraint が数字とは限りません。例えば、次の例はリアカメラよりもフロントカメラを (利用できるなら) を選好します。 { audio: true, video: { facingMode: "user" } } リアカメラが必要であ…
アルファベットのユーザー名をデータベースには小文字で収納しつつ、HTMLに表示する際は大文字で表示したい。 最近そんな感じのケースがありまして、ReactやVueを使って、 <p className="username">{ username.toUpperCase() }</p> <p class="username">{{ username.toUpperCase() }}</p> といった感じにバインデ…
A-Frameは内部でThree.jsを使っているので、Three.Material.colorWriteをfalseにすることで、実現できます。 threejs.org .colorWrite : Boolean Whether to render the material's color. This can be used in conjunction with a mesh's renderOrder prope…
Next.jsやNuxt.jsを使っているとき、自動的に空いているポートを探してローカルサーバを立ててくれますが、ターミナルで終了してもごく稀にサーバが落ちないことがあります。 そんなときは、ターミナルコマンドでプロセスをkillするしかないので、その手順を…
Next.jsのプロジェクト作成方法 TypeScript導入方法 SCSS導入方法 styled-components導入方法 .babelrc Next.jsのプロジェクト作成方法 yarn create next-app app（以下のコマンドはappディレクトリ以下で行う） TypeScript導入方法 yarn add -D typescript …
www.npmjs.comTypeScript導入済みのNuxtプロジェクトにdelegateを導入しようと思ったのですが、 Could not find a declaration file for module 'delegate'. '/node_modules/delegate/src/delegate.js' implicitly has an 'any' type. Try `npm install @typ…
はじめに A-Frameとは A-FrameでARコンテンツをつくる マーカーをつくる ミニマルなWebARの例 DEMO ソースコード マーカーが認識されたことを検知する DEMO ソースコード マーカーの認識が切れたことを検知する DEMO ソースコード 思ったこと マーカーの…
結論 HTML <link rel="preconnect" href="https://fonts.gstatic.com"> <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap" rel="stylesheet"> もしくは、 CSS @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap'); という感じで、普通に読み込むだけでOK。 blog.kimizuka.org以前、頭の上…</link></link>
HubSpotとは ことの発端 dealとは APIを調べる @hubspot/api-client - npmを調べる メソッドを見つける メソッドを叩いてみる ものすごくニッチな記事になりますが、未来の自分のためにも書き残しておきます。 HubSpotとは www.hubspot.jp一言で言うと、「EC…
ページの上部を起点としたときのDOMのY座標を知りたいとき、jQueryを使うのであれば、 const targetTop = $('#target').offset().top; と書けますが、それだけのためにjQueryを導入するのは勿体ない気がしてしまいます。そんなときは、 const targetTop = do…
micoCMSを使った実装 基本的には公式のブログの通りに実装すればOKです。https://microcms.io/blog/nuxt-secure-api-key/microcms.io .env API_KEY=XXXXXXXXXXXX nuxt.config.js require('dotenv').config(); const { API_KEY } = process.env; const isDeve…
傷口から痛いのが飛んでいくAR絆創膏を作りました。 pic.twitter.com/j67S3y4dOl— 君塚史高 (@ki_230) 2020年12月8日 ふと思い出したのですが、こちらを作成したとき、「痛いのオブジェクト」の「position」「scale」「rotation」をアニメーションさせていま…
