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

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

2025-01-01から1年間の記事一覧

BlenderとClaudeを組み合わせて自然言語でモデリングを行い、3Dプリンタで出力する ⚙️

ClaudeとBlenderを連携させて自然言語で3Dモデリングができるという話を聞いたので、試してみました。 環境 macOS: 15.5 Python: 3.11.3 準備 Blenderをインストール https://www.blender.org/www.blender.orgBlender(4.4.3)をインストールしました。 Clau…

クロッシュ(半球のフタ)に、M5Stack Core2とNeoPixelを取り付ける治具を作る ✨

以前制作した光るクロッシュ(フタ)を、M5Stack Core2でリメイクするために色々やってきました。前回まででソフト面が完成したので、今回はハードを作ります。 前回までのあらすじ 加速度センサ編 blog.kimizuka.org NeoPixel編 blog.kimizuka.org 音源再生…

M5Stack Core2 v1.1の傾きを検知して、音源を再生しながらNeoPixelを輝かせる ✨

M5Stack Core2を使ってチャーハンを輝かせるべく、プログラムを書いてます。 今回はこれまで作ったプログラムを組み合わせて、 加速度センサで傾きを検知 傾いたら音源を再生 傾いたらNeoPixelを輝かせる ボタンを押して機能をOFFにしたら傾けても何も起こら…

M5Stack Core2 v1.1のタッチパネルに押された回数をカウントするボタンを表示する 🔘

引き続き、M5Stack Core2を使ってチャーハンを輝かせるべく、プログラムを書いていきます。 加速度センサ値の読み取り、LED(NeoPixel)の制御、音源の再生ときたので、あとは組み合わせればほぼほぼOKなのですが、ゆくゆく必要になるであろう、ボタンの制御…

M5Stack Core2 v1.1からmicroSDカードに保存されたmp3を再生する 🔈

前々回、前回に引き続き、M5Stack Core2を使ってチャーハンを輝かせるべく、プログラムを書いていきます。blog.kimizuka.org blog.kimizuka.org GIFアニメにしてしまうと全く伝わらないのですが、実は蓋を開けた時に音楽が流れるようになっていまして、今回…

M5Stack Core2 v1.1を使ってNeoPixelを光らせる ✨

前回に引き続き、M5Stack Core2を使ってチャーハンを輝かせるべく、プログラムを書いていきます。blog.kimizuka.org今回は、LEDの制御部分を作ります。LEDは制御が簡単なNeoPixelを、さらに配線がスッキリするので、M5StackとGROVEで接続できるものを選定し…

M5Stack Core2 v1.1に搭載されている加速度センサにアクセスする 🍚

以前、Atom Matrixに搭載されている加速度センサにアクセスしたことがあったのですが、今回はM5Stack Core2 v1.1版です。blog.kimizuka.org docs.m5stack.com以前、黄金炒飯(を輝かせるフタ)を作ったことがあるのですが、その改修にM5Stack Core2が使えな…

Goを使ってウェブサーバを立て、POSTリクエストで電球の明るさを制御する 💡

Go

前回は、ブラウザ上のボタンを押した際に1秒間電球を光らせてみました。blog.kimizuka.org今回は、POSTリクエストの際に値を送って、その値に応じた明るさに電球を光らせてみます。 リポジトリ github.com ソースコード go.mod module github.com/kimizuka/s…

Goを使ってウェブサーバを立て、ブラウザ上のボタンを押した際に電球を光らせる 💡

Go

最近、Goを勉強し始めたので、試しに電球を光らせることのできるウェブサイトを作ってみようと思います。 なぜならば「光るのGo」と名付けたいからです。ヒカルの碁 1 (ジャンプコミックスDIGITAL)作者:ほったゆみ,小畑健集英社Amazon Goは初心者ですが、DMX…

Macからアプリケーションを削除する際に関連ファイルも削除したいので探し当てる 🔍

Mac

ターミナルから、 sudo find / -iname "*appname*" 2>/dev/nullを実行すれば、appnameが含まれるファイルやフォルダが丸わかりです。 あとは、ひとつひとつ懇切丁寧に消していきましょう。 パーミッション的に削除できないものが出てきた場合は、「システム…

Next.js(TypeScript + CSSModules)にStorybookを導入する 📕

前回のプロジェクトにStorybookを導入します。blog.kimizuka.org storybook.js.org以前、Next.js + styled-componentsの構成にStorybookを入れたときはnpxを使っていましたが、今回はyarnを使います。blog.kimizuka.org 導入手順 ❶ Storybookのセットアップ …

Next.js(TypeScript + CSSModules)+ happy-css-modulesで存在しないクラス名へのアクセスを防ぐ 💻

前回は、Next.js(TypeScript + CSSModules)+ biomeの環境を構築しました。blog.kimizuka.org今回は、それに加えて、happy-css-modules を導入します。github.com happy-css-modules とは importしているCSSModulesのクラス名をサジェストしたり、 存在しな…

biomeを使って、VSCodeでNext.js(TypeScript + CSSModules)を開発する際、ファイル保存時に自動整形を掛ける 💻

以前は、SCSSはstylelintで、TypeScriptはbiomeで整形を行っていたのですが、biomeがCSSをサポートするようになったので、biomeに一本化することにしました。 前提 biomeのVSCode拡張を入れる SCSS、PostCSSは諦める(biomeがサポートしていないため) yarn…

Next.js(15.3.2)のStatic Indicatorを非表示にする 👀

いつも通り、next.config.tsを設定して、 npm run devで、開発サーバを起動したところ、左下のアイコンが非表示にならなくなっていました。 devIndicators.appIsrStatus` is deprecated and no longer configurable. Please remove it from next.config.ts. …

タブを裏に回すとrequestAnimationFrameは止まり、setIntervalはガクッと更新頻度を落とす 💻

タブに現在のFPSを表示するテストサイトを作成しました。 こちらで挙動を確認したところ、Chromeでは、ブラウザのタブを裏に回した際、requestAnimationFrameは止まり、setIntervalは1秒に1回の更新になります。 DEMO requestAnimationFrame https://develop…

Electronアプリを最前面に表示する 💻

www.electronjs.orgwin.setAlwaysOnTop を使えば最前面に表示できます。 const { app, BrowserWindow } = require('electron'); app.whenReady().then(() => { const mainWindow = new BrowserWindow({ width: 800, height: 600 }); mainWindow.loadURL('htt…

Windows PCを起動した際に複数のアプリを順番に起動する 💻️

❶ start.batを作成 start.bat App1.exe、App2.exe、App3.exeを5秒間隔で起動する場合の例。 @echo off start "" "C:\Path\To\App1.exe" timeout /t 5 start "" "C:\Path\To\App2.exe" timeout /t 5 start "" "C:\Path\To\App3.exe" ❷ スタートアップフォルダ…

Windows機のブラウザでもvideoタグでmovファイルが再生できることを知る 📼

いつも念の為、mp4などに変換していましたが、いちかばちかmovファイルのままアップロードしてみたところ、Windows機でも普通に再生されました。 確認OS Windows 11 Home 確認ブラウザ Edge 135.0.3179.54 Google Chrome 135.0.7049.42 Firefox 137.0 DEMO h…

OSがダークモードかを判定して見栄えを変更する 👀

CSS メディアクエリを使ってスタイルを当てることができます。 ソースコード body { color: #2e3440; background: #d8dee9; } @media (prefers-color-scheme: dark) { body { color: #d8dee9; background: #22262a; } } @media (prefers-color-scheme: light…

ぽかぽか公園日和 🌸

今日はとてもいい天気だった。朝からお日さまがぽかぽかしていて、どこかに出かけたくなるような陽気だ。お昼ごはんを食べたあと、公園へ向かうと、たくさんの人がいた。 ベンチではおじいちゃんとおばあちゃんがゆっくり話をしていて、芝生では子どもたちが…

Gitでファイルの変更履歴を確認する 🔍

Git

git log -p ファイル名で確認できます。基本的な機能だと思うのですが、僕はGitHubのファイルのリビジョン履歴 に頼りっぱなしだったので、使ったことがありませんでした。docs.github.comGitHubのリビジョン履歴は、git blameを使っているようです。なので…

要素の多いがユニークな配列に特定の要素が含まれているか調べるときにSet.prototype.hasを検討する 🔍

const target = 'user-8823'; const hasTarget = users.includes(target); みたいなコードで、要素の多いユニークな配列から、特定の要素が含まれているかを確認するコードを高速で動かそうと思った時に、 const target = 'user-8823'; const set = newSet(u…

PCにオーディオインターフェイス(SERIES 208i)を繋いで、ブラウザから5つのスピーカに対して音源を再生する 📢

blog.kimizuka.org4チャンネルの音源再生がうまくいったので、1チャンネル増やすのなど簡単なことであろうと思っていたのですが、がっつりハマりました。 今後のためにメモを残しておきます。 結論 こちらで、5つのモノラル音源(440Hzのサイン波)を5つのス…

Windows機にオーディオインターフェイス(SERIES 208i)を繋いでブラウザから4チャンネルの音源を再生する 📢

ひさしぶりに、Windowsでオーディオインターフェイス(UR44CR)を使おうとしたら、使い方をすっかり忘れ、わたわたしてしまったため、今後そうならないようにメモを残しておきます。www.steinberg.netただ、調査の結果、UR44CRはWindowsではASIO対応のソフト…

Node.jsからVertexAI APIをさささっと叩く 🔨

かつて、Node.jsからOpenAI APIをささっと叩いたことがありましたが、今回はVertexAI APIをさささっと叩いてみようと思います。blog.kimizuka.org公式の クイックスタート はこちらです。cloud.google.com ❶ 必要なモジュールをインストールする yarn add @g…

Shopifyのカート操作やチェックアウトの実装方法を、Shopify JavaScript Buy SDK(shopify-buy)から、Storefront API Client(storefront-api-client)に乗り換える 🛒

これまで、Shopify JavaScript Buy SDKを使ってShopifyのカート操作やチェックアウトを実装していたのですが、2025年1月に廃止になってしまいました。 Deprecation notice Note: The JS Buy SDK is deprecated as of January, 2025. It will no longer be up…

Mac(OS 15.3)にオーディオインターフェイス(UR44C)を繋いでブラウザから4chの音源を再生する 🔈

Mac

ひさしぶりに、オーディオインターフェイス(UR44CR)を使おうとしたら、使い方をすっかり忘れてしまっていたので、今後のためにメモを残しておきます。 以前作った、4chの音源を再生するウェブサイトを使って検証します。https://web-audio-api-4ch.netlify…

pyenvを使ってMacでpyhonのバージョン管理をする 💻

Mac

Macにバージョン違いのpyhonをいくつかインストールしたかったので、anyenvとpyenvを使うことにしました。 導入手順をメモしておきます。 導入手順 anyenvのインストール README の通りに進めれば導入できます。 brew install anyenvanyenv initecho 'eval "…

ASARアーカイブの中身をさささっと確認する 👀

結論 例えば、app.asarに収納されているファイル一覧は、 npx asar l app.asar で確認できます。 ASARアーカイブとは Asar is a simple extensive archive format, it works like tar that concatenates all files together without compression, while havi…

Electronでメインプロセスとレンダラープロセスで通信を行う ⚡️

一昔前は、何も考えずに ipcMain と ipcRenderer でやり取りを行なっていたのですが、最近は contextBridge を挟むのがセオリーとなってます。www.electronjs.org レンダラープロセス → メインプロセス 例として、レンダラープロセスからアプリの終了を行な…