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

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

Claude Codeのサブエージェントを調査する 👹

最近、Claude Codeのサブエージェントについて調査&実験をしたので結果をまとめます。 code.claude.com サブエージェントとは? サブエージェントは、Claude Codeの中で動く専門化されたAIです。 普段のClaude Codeは「何でも屋」ですが、サブエージェント…

JavaScriptで台形補正 ▫️

WebGLで台形補正の処理を書いてみました。 DEMO https://jsfiddle.net/kimizuka/hzfk5xvr/5/ ソースコード const state = { corners: null, selectedCornerIndex: null, image: null, gridSize: 50, isDragging: false, dragStartPos: null }; const mat4 = …

MacでArduino IDEを使ってM5Stack Basicを開発する環境を整える 💻

先日、新しいMacでM5Stackの開発を始めようとしたのですが、開発環境の構築方法をすっかり忘れていたのでメモしておきます。 手順 ❶ Arduino IDEのダウンロード こちら からダウンロードしてインストールします。https://docs.arduino.cc/software/ide/ ❷ Ad…

The `yarn' command exists in these Node versions: X.X.X を完全に解決する 💪

現象 nodenvでNode.jsのバージョンを切り替えながら、yarnしようとすると、 The `yarn’ command exists in these Node versions: 24.5.0と表示される。(いま使っているバージョンにyarnがインストールされていないため) rm -rf /Users/ユーザー名/.anyenv/…

特定の文字列を含んだCloud RunのログをJSONファイルに書き出す 🔍

結論 gcloud logging read \ 'resource.type="cloud_run_revision" resource.labels.service_name="サービス名" textPayload=~"検索したいキーワード"' \ --project=プロジェクトID \ --freshness=30d \ --limit=50000 \ --format=json > logs.json ひとまず…

Next.jsをGitHub Pagesにデプロイする 🐱

Next.jsを使う時、これまで、ほとんどの場合Vercelに、ごくたまにNetlifyにデプロイしてきました。 なぜなら楽なので。今回は、Github Actionsを使ってGitHub Pagesにデプロイしてみようと思います。今回作成したウェブサイトはこちら。 https://kimizuka.gi…

2025年にMacBook Air(Mid 2011)をセットアップする 💻

Mac

普段展示をするときは、 ちょっとした処理 M5Stack / Arduino ちょっとだけ複雑な処理 Raspberry Pi 複雑な処理 Mac mini を使うことが多いのですが、昔使っていたMacBook Air(Mid 2011)を初期化したら、Raspberry PiとMac miniの間ぐらいの用途に使え…

Next.js + biome + WebGLにてuseEffect内でgl.useProgramを実行しようとしてハマる(This hook is being called conditionally, but all hooks must be called in the exact same order in every component render.) 🙀

Next.js + biome で WebGLコンテンツを開発していたところ、 useEffect(() => { if (gl && program) { gl.useProgram(programRef.current); } }, [gl, program]); と、useEffect内でgl.useProgramを実行しようとすると、 This hook is being called conditio…

数値に各国の通貨単位を付与する 💰

ShopifyのStoreFront APIでtotalAmountやsubtotalAmountの戻り値は、amountとcurrencyCodeになっています。shopify.devshopify.devamountとcurrencyCodeは配送先住所に依存するようで、日本を配送先にすると、 { amount: "4400.0" currencyCode: "JPY" } ア…

気づいたらGoogle Chromeで-webkit-fill-availableが効かなくなっている 🙀

CSS

以前制作したウェブサイトをひさしぶりに見てみると、Chomeで表示が崩れていたので、検証したところ、-webkit-fill-availableが怪しかったので検証しました。 DEMO jsfiddle.net Google Chrome(138.0.7204.158) 背景がグラデーションのdivが表示されてい…

M5Stack CoreS3-SEでUnit Glass2を制御する 📺

docs.m5stack.com docs.m5stack.comUnit Glass2のページの最下部に、 "Unit Glass2" & "CoreS3" Grove Port Connection Note: Please modify the example program according to the actual PIN number when using. Available Ports: PORT.A PORT.B PORT.C . …

JavaScriptでHH:MMを比較する ⏰

HH:MMと、形式が揃っていれば、 const start = '10:30'; const end = '16:00'; console.log(start < end); // true console.log(start > end); // false console.log(start === end); // false という感じで、比較できることを知りました。 いままで、わざわ…

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にしたら傾けても何も起こら…