技術・設計
57件の記事
ブラウザでデモ動画ツールを作った設計判断 — Canvas + MediaRecorder + FFmpeg WASMの3層アーキテクチャ
ブラウザだけで動作するデモ動画作成ツールを開発する際に直面した設計判断を記録。FFmpegフィルターグラフの複雑さを回避し、Canvas API + MediaRecorder + FFmpeg WASMの3層に分離したアーキテクチャの経緯と実装を解説する。
自分で作ったデモ動画ツールを使ってUI/UXを改善した話 — ズーム3フェーズ設計とイージング関数の体感速度
自作のデモ動画作成ツールを自分で使い、ズームの違和感、動画配置の不自由さ、MP4エクスポートエラーの3つの問題を発見・改善した。ドッグフーディングで見えるUI/UXの細部と、easeOutCubicが体感速度を変える発見を記録する。
API先行・Web UI後追いの開発パターン — MCP Serverと無料ツールの統合設計
MCP Server開発で発見した「API first, Web UI later」パターンの実践記録。API仕様がMCP開発で固まっているため、Web UI実装がスムーズになる逆転の開発フローと設計判断を解説。
自作MCP Serverで自サイトを診断して即日改善した話 — ドッグフーディングで見えた5つの問題
MCP Serverのrun_web_launch_auditで自サイトを診断し、セキュリティヘッダー追加・カラーコントラスト677箇所修正・next/font移行を即日実施。64点から88点への改善プロセスを記録。
npm公開前チェックリストで3つのドキュメント不整合を発見した話 — コードは通ってもドキュメントは嘘をつく
MCP Server v0.5.0のnpm公開時に体系的なチェックリストがCHANGELOG/READMEの数値不整合を3件発見。コードの品質とドキュメントの品質は別の軸であるという学びを、複数フェーズの実例で振り返る。
Web検査ツールを8個から12個に増やした設計判断 — 「もう十分」から「プロレベル」へ
MCP Server v0.5.0でSEO検査ツールを8個から12個に拡張した設計判断の記録。ギャップ分析から実装順序の最適化、SSRF対策、構造化データ18スキーマ対応まで全過程を解説。
SEO監査の手動チェック項目をゼロにした話 — MCP Serverによる段階的自動化
MCP ServerのSEO監査ワークフローで手動チェック項目を16項目中0にした段階的自動化の記録。OGPチェッカーの「メタ情報ハブ」化、robots.txt/サイトマップ検証ツール新設、SSRF対策のredirect: manual実装。
個人開発者がnpmパッケージを公開するまでの全手順 — zeronova-lab-mcp v0.1.0〜v0.2.2
個人開発のMCP Serverをnpmパッケージとして公開した実体験。クラウドIDEからの公開制約、ZIPダウンロード経由の6ステップフロー、Granular Access Tokenによるセキュリティ、バージョン被りの失敗と学び。
個人開発でも必要なライセンス監査 — 601パッケージを調査して分かったこと
IdeaSPoolの601パッケージとWakulierの260パッケージを監査し、LGPL・MPL・Apache-2.0の実務判断、FFmpeg GPL問題の是正、SaaS特有のグレーゾーンへの対応を記録します。
作って、壊して、やめた — MapLibre マップジェネレーターで撤退を決めた話
簡易マップジェネレーターに徒歩ルート表示を追加しようとして、OSRMとOpenFreeMapの座標ズレ問題に直面。4回のスタイル修正で根本原因を特定し、313行を削除して撤退を決断した過程を記録。
ブラウザでMarkdownからEPUBを生成する — 正規表現の限界とステートマシン設計
電子書籍作成ツールで正規表現ベースのMarkdownパーサーがGFMテーブルやネストリストで破綻。ステートマシン方式に移行した設計判断と、FileReaderレースコンディション・XHTML妥当性の実装課題を解説。
Next.js APIルートのSSRF対策 — redirect: manual とホップ毎検証の実装
リンク切れチェッカーやOGPチェッカーなど外部URLフェッチ系ツールで直面したSSRF脆弱性と、redirect: manualとホップ毎検証で対策した実装記録。ドッグフーディングで発見した実バグの修正も解説。
Markdownの対話セクションをチャット風UIに自動変換する実装
Journal記事のZeronova×Claude Code対話セクションをreact-markdownのカスタムコンポーネントでSlack風チャットUIに自動描画する仕組みの設計と実装。スピーカー検出・後方互換・著者情報統一も解説。
BandBridge 開発記 — ミュージシャン向けマッチングサービスの設計判断
ミュージシャン同士をつなぐマッチングサービス BandBridge の開発で直面した、RLS設計、リアルタイムチャット、セキュリティ監査の舞台裏を振り返ります。
自治会DXで学んだシニア向けWebアプリ開発の設計判断
自治会の業務をデジタル化するWebアプリを開発した際に直面した、シニアユーザー向けUI設計の試行錯誤と設計判断の舞台裏を振り返ります。
E-E-A-T × SEO改善を個人開発サイトに実装した全記録
ZERONOVA LABでE-E-A-T（経験・専門性・権威性・信頼性）を強化するために実施した24の施策と、トップページSEO最適化の具体的な実装内容を解説します。
X 風オンボーディングチェックリストの実装 — 初回体験で離脱を防ぐ UX パターン
Wakulier で実装したオンボーディングチェックリストの設計と実装。X（Twitter）のプログレスバー型UIを参考に、ステップ設計と中間状態の可視化で初回離脱を防ぐ方法を解説します。
PWA beforeinstallprompt の早期キャプチャパターン — React ライフサイクルとの不整合を解決する
PWA の beforeinstallprompt イベントが React マウント前に発火する問題に直面し、グローバル変数パターンで解決した経緯と、インストール促進UIの実装方法を解説します。
PWA に Pull-to-Refresh を実装する — ネイティブ風ジェスチャーの実現
IdeaSpool の PWA 対応で実装した Pull-to-Refresh の閾値設計、減衰係数の調整、React コンポーネントでの状態管理を実例ベースで解説します。
Supabase Storage でアバター画像を管理する — バケット設計と RLS の実践
Wakulier のプロフィール機能で実装した Supabase Storage によるアバター画像管理の設計パターン。バケット構成、RLS ポリシー、表示名の優先順位ロジックを実例で解説します。
カレンダー UI を自作した話 — ライブラリを使わない判断と flexbox 実装
Wakulier のスケジュールビューで、FullCalendar や react-big-calendar を検討した末に自作を選んだ経緯と、flexbox で週間カレンダーを実装した方法を紹介します。
JavaScript で月額課金の更新日を計算する — 月末日とタイムゾーンの罠
サブスクリプションの次回更新日を JavaScript で計算する際に遭遇した月末日問題とタイムゾーン問題。Date オブジェクトの自動調整の挙動と、安全な日付計算のパターンを解説します。
Next.js App Router の error.tsx と not-found.tsx でエラーハンドリングを実装する
BandBridge の開発中にエラー画面がない問題に気づき、error.tsx と not-found.tsx を実装。use server 制約との組み合わせで遭遇した落とし穴と、実践的なエラーハンドリングパターンを解説します。
OAuth リダイレクトで状態を保持する方法の比較 — Cookie・Query Parameter・localStorage
OAuth 認証フローでログイン後のリダイレクト先を保持する3つの方法を比較。Cookie、Query Parameter、localStorage それぞれの落とし穴と、実プロダクトでの試行錯誤を共有します。
分散環境対応のレート制限を Supabase で実装する — Redis なしのアプローチ
Vercel のサーバーレス環境でインメモリのレート制限が機能しない問題に直面し、Supabase テーブルで永続化する方法を採用。Redis を使わずにレート制限を実現した設計と実装を解説します。
開発中に毎日使う無料ツール — データ変換・コード支援編
JSON整形、Base64変換、正規表現テスト、JWT解析、curl変換、chmod計算、コード差分比較など、開発者が日常的に使うデータ変換・コード支援ツール14種を自作した経緯と、クライアントサイド完結で実現した設計判断を解説します。
Web開発のモックアップを効率化するツール活用術
ダミー画像生成、ダミーテキスト、Markdownプレビュー、HTMLテーブル生成の4ツールを自作した経緯と、Canvas API・自前パーサーなどの設計判断、モックアップ作成の効率化ワークフローを解説します。
datetime-local のタイムゾーン罠（決定版）
datetime-local 入力値の二重タイムゾーン変換で納期が8時間ズレる問題に2度遭遇。原因の解説と、Supabase の timestamptz と組み合わせたときの確実な解決パターンを紹介します。
Gemini API を使った AI 支援機能の実装
フリーランス向け依頼管理ツールに Gemini API で確認リクエスト自動生成機能を実装。プロンプト設計の3段階の試行錯誤と、フォールバック処理・Zod バリデーションの実践パターンを紹介します。
Next.js ブログに構造化データ（JSON-LD）を実装する方法
Next.js App Router のブログに BlogPosting・BreadcrumbList などの JSON-LD 構造化データを実装した手順と、検索結果でのリッチスニペット表示を狙うための設計判断を解説します。
React.memo でリスト表示のパフォーマンスを改善する
2つのプロダクトで遭遇したリスト表示のパフォーマンス問題。React.memo の適用判断基準と、animate-pulse やメモリリークなど見落としがちな原因への対処法を実体験ベースで解説します。
個人開発でもやるべきセキュリティ監査チェックリスト
2つのプロダクトで計75件の問題を発見したセキュリティ監査の実践方法。RLSポリシー、環境変数、認証フロー、未使用コードなど、個人開発で見落としがちな観点をチェックリスト形式で紹介します。
Supabase で N+1 クエリを防ぐパターン集
マッチングサービスの開発中に遭遇した N+1 クエリ問題と、Supabase の .in() や Promise.all を活用した解決パターンを実例ベースで紹介します。
AI でアイデア分析フレームワーク（SCAMPER）を実装する
SCAMPER やオズボーンのチェックリストなど、アイデア発散フレームワークを AI で自動化。プロンプト設計と JSON 出力の工夫を解説します。
Next.js で Markdown ブログを構築する方法
Next.js App Router と gray-matter を使って、CMS なしで Markdown ブログを構築。SSG、OGP、sitemap まで対応する実装を解説します。
プロフィール完成度インジケーターでユーザーの入力率を上げる
プロフィールの入力率を上げるには、進捗バーが効果的。完成度インジケーターの設計と、項目ごとのウェイト設定の考え方を解説します。
react-force-graph-2d でアイデアの関連性を可視化する
蓄積したアイデアをネットワークグラフで可視化。react-force-graph-2d の使い方と、タグベースの関連度計算（Jaccard 係数）を解説します。
Web プッシュ通知の実装手順（VAPID + Service Worker）
Next.js で Web プッシュ通知を実装する方法を解説。VAPID キーの生成から Service Worker の設定、通知送信 API まで、実装の全体像を紹介します。
モバイルファーストなモーダル設計 — フルスクリーンシートの実装
モバイルでのモーダル表示には、従来の中央配置より「フルスクリーンシート」が適しています。IdeaSpool での実装経験をもとに、設計のポイントを解説します。
Next.js App Router で SEO 最適化する完全ガイド
Next.js App Router でメタデータ、構造化データ、sitemap、robots.txt を設定する方法を、実際のプロダクト開発経験をもとに解説します。
Supabase Realtime でチャット機能を実装する
Supabase Realtime を使ってリアルタイムチャット機能を実装する方法を、BandBridge の開発経験をもとに解説します。接続管理、既読機能、RLS 設計のポイントも紹介。
Vercel AI SDK + Google Gemini で日本語要約 API を作る
Vercel AI SDK と Google Gemini を組み合わせて、日本語テキストを要約する API を実装する方法を解説します。自治会 DX での実装経験をもとに、モデル選定からストリーミング実装まで紹介。
Cloudflare Turnstile で認証なしフォームをボットから守る
認証不要の公開フォームをボットから保護するため、Cloudflare Turnstile を導入した経緯と実装方法を解説します。reCAPTCHA より軽量でユーザー体験を損なわない選択肢です。
1日でMVPを作る — Supabase フル活用の高速開発術
BandBridge と Wakulier を1日でMVPまで作り上げた経験から、個人開発で高速に動くものを作るための技術選定と設計パターンを解説します。
Supabase で pg_trgm を使った日本語全文検索を実装する
PostgreSQL の pg_trgm 拡張を使って、Supabase で日本語の部分一致検索を高速化する方法を解説します。LIKE クエリの遅延問題を解決した実践的なアプローチを共有します。
@dnd-kit/sortable でドラッグ&ドロップ並び替えを実装する
Reactでリスト並び替え機能を実装する際の@dnd-kit/sortableの使い方。ドラッグハンドルの設計、他のインタラクションとの競合回避、汎用コンポーネント化のパターンを解説。
iOS の PWA でハマるポイントまとめ
iOS で PWA を開発する際に遭遇しやすい問題と対処法。favicon キャッシュ、apple-touch-icon、ホーム画面追加時の挙動など、実践で得た知見を整理。
LINE 内ブラウザで OAuth 認証が動かない問題への対処
LINE アプリ内ブラウザでは Google OAuth が正常に動作しないことがある。User-Agent 検出による事前警告と外部ブラウザ誘導で解決した実践記録。
Next.js App Router で Supabase 認証を使う — middleware.ts がカギ
Next.js App Router と Supabase Auth の組み合わせで、middleware.ts を使った認証ガードの実装パターン。ログアウト処理の落とし穴も解説。
Next.js で PWA オフラインキューを実装する
PWAでオフライン時の操作をキューに貯めて、オンライン復帰時に自動同期する仕組みの実装方法。IndexedDB、制限設計（100件・7日・3回リトライ）の実践知見。
Next.js の "use server" 制約と回避策
Server Actions のファイルから定数をエクスポートするとエラーになる問題。型・定数を別ファイルに分離するパターンと、error.tsx / not-found.tsx によるエラーハンドリングを解説。
シニア向け UI で避けるべきパターン
高齢者向け Web アプリを開発する際に避けるべき UI パターン。スワイプ操作、小さいタップターゲット、キーボード入力など、実際の設計判断と代替案を解説。
Vercel（UTC）で JST 日時処理にハマった話
Vercel はサーバーが UTC で動作するため、JavaScript の Date メソッドが想定外の挙動をする。明示的なタイムゾーン指定で解決した実践記録。
AI タグ付けで一貫性を保つプロンプト設計
AIに自由にタグを生成させると「React」「リアクト」「react.js」が混在する問題。既存タグを参照させ、禁止より推奨で指示するプロンプト設計を解説します。
GitHub Actionsで複数リポジトリの開発日記を自動集約する方法
個人開発で複数プロダクトを運用する際、各リポジトリの開発日記を1箇所に自動集約するGitHub Actionsワークフローの実装方法を解説します。
Supabase Auth + Next.js App Router で認証が切れる問題と解決策
Server Component で getUser() を使うとトークンリフレッシュ時に認証が切れる問題。getSession() を使った解決策と、チーム全体で統一するための仕組みを解説します。
Supabase RLS の設計パターン — デフォルト拒否で安全に
2つのプロダクト開発で学んだ Supabase Row Level Security の設計パターン。「デフォルト拒否」の原則と、初期ユーザー問題の解決策を解説します。