docs.dndkit.comNext.jsとdnd-kitを組み合わせてドラッグ＆ドロップで並び替え可能なリストを実装しました。 DEMO https://develop.kimizuka.org/dnd-kit-sortable/ ソースコード package.json { "name": "dnd-kit-sortable", "version": "0.1.0", "private"…
SpeechSynthesisUtteranceを使用し、 let number = 0; setInterval(() => { const utterThis = new SpeechSynthesisUtterance(); utterThis.text = String(++number); speechSynthesis.speak(utterThis); }, 1000); こんな感じで、数字を読み上げるWebサイト…
最近は、もっぱらNext.jsを使ってWebサイトを制作したり、Electronと組み合わせてMacアプリを制作したりしています。 ペライチのWebサイトですら、Next.jsを静的サイトジェネレータとして使っているのですが、ペライチのサイトであれば、Next.jsもReactも不…
いつも通り、 npx create-next-app .で、Next.jsのプロジェクトを作成し、 npm run devで、開発サーバを起動したところ、左下に謎のアイコンが表示されるようになっていました。 .nextjs-toastというクラス名が振られています。なんだこれは。と思いましたが…
通常Macにイヤホンを繋いだ場合、音源はイヤホンから再生されます。 しかし、Macにはデフォルトアプリとして「Audio MIDI 設定」が入っており、オーディオのインアウトを好きなようにカスタマイズできます。support.apple.comそして、Audio MIDI 設定とWebAu…
結論 多くの場合、requestAnimationFrameのFPSはディスプレイのリフレッシュレートに依存します。developer.mozilla.orgもしも、ディスプレイに依存せずにFPSの最大値を設定したい場合、 const fps = 60; let lastRenderTime = 0; function render(now) { co…
これまで、superの使い道は、 class Child extends Parent { constructor(params) { super(params); } } という感じで、constructor内で実行することだけだと思っていたのですが、 いまさらながら、super.prop および super[expr] 式にて、親のメソッドを呼…
いままで、サーチコンソールで計測していたので、開発中はどうやって計測しようか悩んでいたのですが、JavaScriptで計測できることを知りました。search.google.com new PerformanceObserver((entryList) => { for (const entry of entryList.getEntries()) …
yarnpkg.comyarnのバージョンを切り替えたい時は、 yarn set version <version>にて、切り替えられることを知りました。 バージョンを指定することもできますし、 yarn set version stableで、安定版。 yarn set version latestで、最新版。 yarn set version classic</version>…
結論 URLエンコードを掛けましょう。 ことの発端 ざっくりこんな感じのコードを書いてまして、valueに渡された文字列を表示しようとしていたときのことです。 page.tsx 'use client'; import { useRouter, useSearchParams } from 'next/navigation'; import…
4年ほど前に、Three.js版の記事を書きましたが、今回はA-Frame版です。blog.kimizuka.orgまた、用途が若干変わって、3Dプリント用に作ったモデルを等倍でプレビューするために使ってみました。まずはソースコードを全文載せてしまいます。 <html> <head> <meta charset="UTF-8" /> <title>A-Frame</title> <script src="https://aframe.io/releases/1.6.0/aframe.min.js"></script> </head> <body> </body></html>
ことの発端 navigator.mediaDevices.getUserMediaを使って、ウェブカメラにアクセスするMacアプリを作っていて、 electron . で起動した際には問題ないのに、electron-packagerを使ってアプリ書き出しすると、カメラの映像が取得できずに困ったので対策を調…
公式ドキュメントに書いてある通りなのですが、ほんのりハマったのでメモ。nextjs.org ことの発端 src/app/page.tsx import { ServerComponent } from '@/components/ServerComponent'; export default function Home() { return ( <ServerComponent /> ); } src/components/Sev</servercomponent>…
3年半前の記事のアップデート版です。blog.kimizuka.org3年半前の記事には環境を書き忘れたので、今回はしっかり書き残しておこうと思うのですが、Next.js（14.2.13）のApp Routerで検証しました。Adobe FontsをWebフォントとして使おうとすると、 <script> (functio…
Three.jsやPIXI.js経由で、間接的にWebGLを使ったことはあるものの、直接操作をしたことがなかったので、めちゃめちゃ基本的なところから触ってみました。 順序としては、 試しに三角形を描く 試しに四角形を描く 四角形にテクスチャを貼る という順序で進め…
