ギターの練習用に、Tone.js を使ってドラムマシンを作りました。16個のパッドでパターンを組んで再生すると、ループで鳴ります。作ったのものはこちらです。 音源を読み込むドラムの音はmp3のサンプルなので Tone.Sampler を使いました。音名とファイルを対応づけて、toDestination() でスピーカーにつなぎます。import * as Tone from "tone";const sampler = new Tone.Sampler( { C2: "kick.mp3" }, // 音名 → ファイル { baseUrl: "/sound/" }...

ボタンの文字などを上下中央に配置するとき、CSSで中央揃えを指定しても、少しズレて見えることがあります。この記事では、文字がズレて見える理由と、上下中央に揃えるための考え方を、CSSとフォントの仕組みから解説します。 中央揃えなのにズレて見える理由次のボタンは、横書きで1行のラベルをFlexboxで上下中央に配置した例です。<button class="button"> <span class="button-label">Save</span></button>.button { display: flex; al...

はじめにNext.js v16 には use cache: private というディレクティブがあり、cookies() などリクエスト固有の値を読んだ関数の結果をキャッシュできます。その結果がサーバーに残らないということはドキュメントに書かれています。In production, matching calls within one request can reuse the same result, but Next.js does not store it in a server cache across requests.これを読むと use cache: pri...

はじめにここでは、提案中の API である HTML-in-Canvas で DOM を画像化する方法と、その応用として CSS アニメーションを動画としてエクスポートする方法を紹介します。https://github.com/WICG/html-in-canvas!HTML-in-Canvas は仕様策定中で、API の名前や引数が Chromium のバージョンごとに変わっています。この記事のコードと結果は Chrome Canary 156.0.8071.0 のものです。 HTML-in-Canvas とはHTML-in-Canvas は、<canvas&...

弊社には「Orizm」という自社プロダクトのCMSがあり、現在私はOrizmを用いたWebサイトの開発業務を担当しています。Orizmには「デザインエディター」という、Webページを見た目そのまま直感的に編集できる機能が組み込まれているのですが、入稿作業をしながら、ふと「ここにWebMCPを組み込んだらより便利になるのでは？」と考えました。本来は人間が操作するためのGUIツールですが、AIエージェントに「このツールでページを作って」と依頼できるようになれば、入稿や編集作業がもっと楽になりそうですよね。ということで社内向けツールとして実験的に実装してみることにしました。 WebM...

この記事は Next.js を好む人間が書きました。 Proxy で redirect する方法Next.js の Proxy(旧 Middleware) でリクエストに対してリダイレクトレスポンスを返すには、次のように書きます。import { NextResponse, type NextRequest } from "next/server";export default function proxy(request: NextRequest) { if (request.nextUrl.pathname === "/redirecting") { cons...

手書きで fetch() を書くのは、URLの組み立て、レスポンスの型付け、ステータスコードごとのエラー処理…と考えることが多くて少々面倒ですよね。OpenAPIスキーマがあるなら、そこから型やコードを自動生成するツールに任せたくなります。ただ、生成されたコードが、自分のプロジェクトに最適とは限りません。この記事ではKubbとneverthrowを組み合わせて、結果を ResultAsync で表現するfetchクライアントを作りながら、自分のプロジェクトにとっての理想のfetchクライアントを設計する考え方を整理します。記事で使ったコードは、以下のリポジトリで公開しています。ht...

いいと思いませんか？！？！？！？ 前提: デザイナーの意向は尊重しましょうこれはWebフォントなどを使わずOSの標準フォントを使う場合どうするのがいいんだろう？という趣旨の記事です。デザイナーに「俺はこのサイトにラグランパンチを使いたいんだ！！！！！！！！」と言われたら素直にラグランパンチを使いましょう。なんたってラグランパンチですからね sans-serif と system-ui で表示されるフォントはなんなんだ2026夏前置きはざっくり省略しまして各OS、ブラウザ、言語で sans-serif と system-ui がどんなフォントになるか調べてきました。ご査収くだ...

pnpm 11.5.3以降でGitHub PackagesのPrivate Packageを.npmrcなしで使う設定を、備忘録として残しておきます。 pnpm 11.5.3以降の認証設定へ移行するpnpmでGitHub PackagesのPrivate Packageを利用する際は、リポジトリの.npmrcに次のような設定を記述するのが一般的でした。@example-org:registry=https://npm.pkg.github.com///npm.pkg.github.com/:_authToken=${GITHUB_PACKAGES_TOKEN}しかし、pnpm...

「AIエージェント作ったことあります！」と言えるようになりたい 🫠AIエージェントがいつも話題だし作ってみたいけど、どこからやればいいのやら...そう思っていたところ、エージェント構築フレームワーク「eve」を見かけました。https://vercel.com/evehttps://zenn.dev/chot/articles/e6748269611683ざっと眺めてみて、Claude CodeとVercelにおまかせで動くもの作れそう〜 と感じました。というわけで、eveでAIエージェントづくり始めてみました！ 作ってみたもの：CMS（管理画面）のAIアシスタント...

背景検索機能のあるサイトで、検索条件をパスで表現している（例：/search/area-13/category-2/page-1/limit-10）検索条件は7軸あり、各軸は複数選択が可能generateStaticParamsは空配列で、全URLがオンデマンド生成 課題VercelのFunction Invocationsが急増していた。しかし実ユーザー数に大きな変化はなかったログを確認するとGooglebotが検索結果ページ(/search)を延々と巡回していたrobots.txtはuser-agent: *に対して/searchを拒否していたが、Goog...

はじめにHono RPCでは、サーバー側のrouteから得たAppTypeをhc<AppType>()へ渡すことで、requestとresponseの型をクライアントへ共有できます。私が担当している開発案件でも、Hono RPCを利用してバックエンドとフロントエンドの型を共有しています。エンドポイントが増えるにつれて、IDEの動作が重くなり、本来推論されるはずの型がanyとして扱われることがありました。また、tscでは再現しないTypeScriptエラーがIDE上にだけ表示されることもありました。原因をAppTypeの大きさだけに特定できたわけではありません。ただ、AP...

ちょっと株式会社の KindBurger です！本記事は、Kiro要件分析の推しポイント紹介 & Claude Code Skillにしてみた記事です！作ったもの：https://github.com/kind-burger/dotfiles/tree/main/claude/skills/kb-spec-grill!本記事では、読みやすさを優先した日本語の意訳で記載します。正確なニュアンスは原文を参照ください :) 要件バグがコードになる前に検知Kiroが要件に潜むバグをどう検知して対処するか紹介されています！本記事では特に良いなと感じたエッセンスをお届...

はじめにプライベートで進めているプロジェクトで、複数サイトを1つの基盤で動かす仕組みを作成しています。今回はデプロイフローについて、背景や構成をご紹介します。 本記事で解説しないこと具体的なコード、設定値ハマりポイント、トラブル等（特に詰まることがなかったため）認証・認可などの権限、マルチテナント時におけるセキュリティ など 背景全体構成がほぼ同じサイトが複数あるのですが、リポジトリを分けて管理しており、同様の変更を各リポジトリに対して行って回らなければならないという、メンテナンスコストの高い構成となっています。一般向けサイト: Next.js SSGCM...

最近、Claude Code から使うことを前提にした小さな CLI ツールを Go でつくりました。きっかけは「過去に似た実装がないか、複数のリポジトリを横断して探したい」という場面がちょこちょこ出てきたことです。GitHub を毎回探しに行くのが地味に大変だったので、自然言語で投げたら良い感じに探してくれるとうれし〜と思ったのがはじまりでした。で、実際につくってみると人間向けの CLI とは違う設計判断があり面白いな〜と思ったので、気づいたことをまとめてみます。 1. Skill の内容は CLI への参照だけに留めて、使い方は CLI に同梱するClaude Code ...

2026年6月17日に、Vercel社が主催するVercel関連製品/OSSのカンファレンスVercel Ship Londonが開催されました。2024までVercel Shipとして開催され昨年、サンフランシスコで１度だけ「Ship AI」として開催されたイベントの復刻版ですかね？今年からはアムステルダム等欧米圏で複数回開催する方式になりました。https://vercel.com/ship/londonカンファレンスの目玉としてGuillermoが紹介したのが、エージェント開発用フレームワーク「Eve」です。主に以下のVercel提供のプロダクト・OSSを組み合わせたEveはエ...

はじめにCIのテスト用DBを共通にしていると、PR間でデータが競合してしまいます。TursoのBranching機能でPRごとに独立したDBを用意し、自動テストを回す構成を組んだので紹介します。 TursoのBranching機能https://docs.turso.tech/features/branchingTursoのBranching機能を使うと、既存のDBからスキーマとデータをまとめて複製できます。複製したDBは元のDBから独立しているため影響を及ぼすことがありません。執筆時点で、DB数の上限はFreeプランで100、有料プランでは無制限となっています。Dep...

TypeScript 7の襲来2026年4月21日、Microsoftは TypeScript 7.0 Beta を公式に発表しました。これはTypeScriptの12年の歴史における最大級のアーキテクチャ転換であり、TypeScript自身で書かれてきた既存コンパイラを丸ごと Go へ移植 した、いわば「中身を入れ替えた」リリースです。本記事では、TypeScript 7 の目玉である tsgo の正体、なぜ Go が選ばれたのか(Rust じゃないのか)、現行の 5 系・6 系との違い、そして 7 への移行で準備すべきことを整理します。 TypeScript 7 の主要な...

仕様書にも色々ある業務系の受託開発をやっていると、「仕様書」と言っても読み手に合わせて様々な形式のものが必要になります。エンジニア向けの仕様書: 実装の指針、データ構造、エッジケース、テスト観点まで含めたものクライアント向けの仕様書: 「何ができるのか」をビジネス用語だけで書いたもの最近はAIコーディングが主流になってきました。自分は実装前に仕様書を書くワークフローを採用しているのですが、せっかくならこの仕様書をクライアント向けの仕様書にも流用したいと思い、変換用のスキルを作ってみました。 全体像ワークフローはこうなっています。エンジニア向け仕様書（specs）...

なにやら様子のおかしいアクセスが増えている 最近の自分の話やSNS情報ついて（世間話） 自分の案件の話案件スタート時(2025年3月)は、Vercelのコストを下げることを目的にしたNext.jsのアップデートとしてスタートし、コストが高い原因を分析しながら進めてました。VercelのUsageアップデートの対応しながらVercelのログとUsageになにか異常あるなと3月末に気づくことになり、4月からBot対策に本気を出したという感じでした。(コスト下げるために案件やっていたのでこのタイミングでコスト上がってると言われたらふざけんな😡ともなるわけで...)とはいえB...