みかづきブログ・カスタム

基本的にはちょちょいのほいです。

Next.jsでページのスクロールを管理してクロールする 🏊‍♂️

blog.kimizuka.org以前つくったスクロール管理の仕組みをつかって、ページをスクロールするとクロールするサイトをつくりました。kimizuka.github.ioNext.jsを使ってページスクロールに連動してクロールするサイトを作りました。https://t.co/Mdth7el9XS pic…

Next.jsでページのスクロールを管理する 📄

スクロールに連動してアニメーションを動かすサイトや、パララックスを実装する際、 ページのスクロール量(一番上から何%スクロールしているか) スクロールの方向 を管理すると、非常に楽に実装することができます。 今回はNext.js(React.js)のHooks API…

Next.jsで使えるAnimationクラスをつくる 🎥

npmで探したら似たようなものがある気もしなくもないですが、すごくシンプルなものが欲しかったので自作しました。 process.browserを使っている点以外はNuxt.jsに依存しているところはないですが、Next.jsで使うことを前提に作ってます。 TypeScrtipt expor…

SCSSの@forをstyled-componentsで書き換える 🔁

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 …

navigator.mediaDevices.getUserMediaで立ち上げるカメラを指定する際のポイント 🎥

MediaDevices.getUserMedia()の仕様を確認すると、 すべての constraint が数字とは限りません。例えば、次の例はリアカメラよりもフロントカメラを (利用できるなら) を選好します。 { audio: true, video: { facingMode: "user" } } リアカメラが必要であ…

text-transformを使ってCSSの力でテキストを大文字にしたり小文字にしたりする 📝

CSS

アルファベットのユーザー名をデータベースには小文字で収納しつつ、HTMLに表示する際は大文字で表示したい。 最近そんな感じのケースがありまして、ReactやVueを使って、 <p className="username">{ username.toUpperCase() }</p> <p class="username">{{ username.toUpperCase() }}</p> といった感じにバインデ…

A-Frameで深度をつかってマスクを掛ける 👀

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…

Macでlocalhost:3000を使っているプロセスをターミナルからkillする 🗡

Mac

Next.jsやNuxt.jsを使っているとき、自動的に空いているポートを探してローカルサーバを立ててくれますが、ターミナルで終了してもごく稀にサーバが落ちないことがあります。 そんなときは、ターミナルコマンドでプロセスをkillするしかないので、その手順を…

Next.jsにTypeScript、SCSS、styled-componentsを導入する 📄

Next.jsのプロジェクト作成方法 TypeScript導入方法 SCSS導入方法 styled-components導入方法 .babelrc Next.jsのプロジェクト作成方法 yarn create next-app app(以下のコマンドはappディレクトリ以下で行う) TypeScript導入方法 yarn add -D typescript …

TypeScript導入済みのNuxtプロジェクトで型定義ファイルのないnpmパッケージを使う 💻

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とは A-FrameでARコンテンツをつくる マーカーをつくる ミニマルなWebARの例 DEMO ソースコード マーカーが認識されたことを検知する DEMO ソースコード マーカーの認識が切れたことを検知する DEMO ソースコード 思ったこと マーカーの…

A-FrameにGoogleフォントを読み込んで使う ✏️

結論 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/api-clientを使ってHubSpotのdealを取得する 🛒

HubSpotとは ことの発端 dealとは APIを調べる @hubspot/api-client - npmを調べる メソッドを見つける メソッドを叩いてみる ものすごくニッチな記事になりますが、未来の自分のためにも書き残しておきます。 HubSpotとは www.hubspot.jp一言で言うと、「EC…

jQueryを使わずにoffset().topを実装する 📄

ページの上部を起点としたときのDOMのY座標を知りたいとき、jQueryを使うのであれば、 const targetTop = $('#target').offset().top; と書けますが、それだけのためにjQueryを導入するのは勿体ない気がしてしまいます。そんなときは、 const targetTop = do…

Nuxt.js + microCMS + NetrifyでJAMstackを実装しつつAPIキーを隠す 🔑

micoCMSを使った実装 基本的には公式のブログの通りに実装すればOKです。microcms.io .env API_KEY=XXXXXXXXXXXX nuxt.config.js require('dotenv').config(); const { API_KEY } = process.env; const isDevelop = process.env.NODE_ENV !== 'production'; …

A-Frameでアニメーションを複数設定する 🎬

傷口から痛いのが飛んでいくAR絆創膏を作りました。 pic.twitter.com/j67S3y4dOl— 君塚史高 (@ki_230) 2020年12月8日 ふと思い出したのですが、こちらを作成したとき、「痛いのオブジェクト」の「position」「scale」「rotation」をアニメーションさせていま…

音声認識 + WebAR で頭の上に吹き出しを表示する 💬

直近のツイートを頭の上に表示する帽子を作りました。 pic.twitter.com/RwyY0JiFWi— 君塚史高 (@ki_230) 2020年11月13日 先日、帽子にARマーカーをつけてみたのですが、なかなか可能性を感じまして、思い切ってARマーカー付きの帽子を作ってみることにしまし…

Blender 2.8でテキスト(日本語)を立体にしてA-Frameで表示する 🩹

4つのポイント Blenerでテキスト入力モード切り替えはTab 日本語フォントを設定すれば日本語の入力も可能 何故か入力できないときはテキストエディタからコピペで入力 objファイルであれば楽々A-Frameで表示できた 傷口から痛いのが飛んでいくAR絆創膏を作り…

Blender 2.8でstlファイルを作って3Dプリンタ(UP Plus2)でプリントする 📦

以前Three.js上で作ったこちらのモデルをBlenderでモデリングして3Dプリンタでプリントしてみました。 See the Pen CubeMan by kimmy (@kimmy) on CodePen. Blender 2.8でモデリング 設定の変更 まずは、単位をmmにするために、LengthをMillimetersに、Unit …

Expressを使ってスタティックなサーバを立ててSocket.IOを使って通信を行う ⚡️

server.js const express = require('express'); const app = express(); const http = require('http').Server(app); const io = require('socket.io')(http); const path = require('path'); app.use('/', express.static(path.join(__dirname, 'public'))…

image-renderingをつかってCanvasをニアレストネイバー法で拡大してドット絵のような見た目にする

Three.jsでレンダリングした3Dモデルを、セガサターンのような見た目にしたいなと思い、ポストプロセスやシェーダーを書いていたんですが、CSSにimage-renderingたるものがあることを知り、早速試してみました。 developer.mozilla.org 使い方はものすごく簡…

Blenderで作ったglbファイルをThree.jsで読み込んでマテリアルを変更する 📦

以前、Blenderで作ったモデルをThree.jsで読み込んでOculus QuestのブラウザのVRモードで鑑賞するという検証をした際に、Blenderからglbファイルを書き出して、Three.jsに読みました。blog.kimizuka.org今回は、Three.js側で読み込んだglbファイルのマテリア…

CanvasRenderingContext2D.filterでCanvasをグレースケールにする 🖼

以前、ピクセルデータを編集することでCanvasをグレースケールにしました。blog.kimizuka.org今回は CanvasRenderingContext2D.filter をつかってグレースケール化を試します。 const canvas = document.createElement('canvas'); const ctx = canvas.getCon…

A-FrameでCanvasをテクスチャーに設定して動的に更新する 🎥

以前、Three.jsでCanvasをテクスチャーに設定した場合、material.map.needsUpdateをtrueに設定すれば動的に更新できることを調べました。blog.kimizuka.org今回は、それのA-Frame版です。 A-Frameも内部はThree.jsを使っているので、material.map.needsUpdat…

サーバにインストールしたGitLabとNetlifyを連携させる 🦊

いつもはGitHubやBitbucketと連携して使うことの多いNetlifyですが、初めてGitLabと連携させてみました。GitHub、Bitbucketと並列にGitLabボタンもあるので、いつもと同じように連携できるのかと思いきや、リポジトリがひとつも見つかりません。 どうやらサ…

Nuxt.jsがローカルではビルドできるのにCIだとビルドがコケる(There are multiple modules with names that only differ in casing. This can lead to unexpected behavior when compiling on a filesystem with other case-semantic.)😱

結論から書くと、ものすごく単純な話なんですが、大文字小文字はしっかり区別しようという話です。 Nuxt.jsで作ったプロジェクトがローカルだとビルドが通るのに、CIだとコケていて「なんでだろう」と思いログを確認してみました。 [fatal] Nuxt build error…

Nuxt.jsの静的書き出しではてなブログのRSSを表示するウェブサイトを作る 📝

はじめに はてなブログのRSS取得 Nuxtプロジェクトの作成 Nuxtプロジェクト内でAPIを取得し、静的なHTMLとして書き出す準備 静的なHTMLとして書き出す準備 はじめに はてなブログの最近記事30件と、JSONに記載されているモックを取得して羅列するウェブサイ…

Jestを使ってwindow.locationやwindow.navigatorなどのwindow直下の変数(グローバル変数)にアクセスする関数のテストをする 💯

locationのテストの例 JavaScript Jest 変数を受け取る例 navigatorのテストの例 JavaScript Jest 変数を受け取る例 locationのテストの例 JavaScript const isProduction = () => { return location.hostname === 'kimizuka.fm'; }; export default isProdu…

A-FrameでARマーカーが回転したことを検知する 🔁

ARマーカーの回転検知。 pic.twitter.com/W6ukDJorN8— 君塚史高 (@ki_230) 2020年11月19日 以前は、マーカーのpositionを取得する方法を使ったデモを作りましたが、今回はマーカーの回転を検知してみます。blog.kimizuka.org JavaScript let timer; let last…

VoxelでThree.jsに読み込み可能な3Dモデルをつくってアニメーションさせる 🏃‍♂️

https://blog.kimizuka.org/entry/2020/11/05/145418blog.kimizuka.orgこちらの記事 の応用版です。 1フレームずつポーズを作りアニメーションさせてみました。作り始めた時は、1フレームあたり10x10x10の1000個のcubeで想定していましたが、途中でどうして…