[./journal · validation logs]
作って、 動かして、
壊れた所まで残す。
ai-lab.org で公開した各サービスの実装記録・改善ログ・判断メモ。 ML / メディア処理 / P2P / Python REPL の作り方、 公開直後に踏んだ production バグの修正経緯、 §8.5.x や §7.1 の運用ルールがどう生まれたかまで、 完成度を担保するために必要な記録を全部残しています。
[ ./lab_pillars ]
13本柱の実装記録
ラボの 13本柱 (voice-scribe / clip-cast / bg-snap / text-pluck / pdf-anvil / pixel-lift / pic-flip / mind-cell / beam-drop / word-warp / exif-peel / ascii-bake / py-pad) について、 ライブラリ選定 / 構造設計 / 踏んだバグ / 採択ルールの変遷を残しています。
ASCIIBake ができるまで — Canvas だけで画像を文字に焼く軽量ピース
Canvas API の createImageBitmap → drawImage → getImageData だけで画像の明暗を読み、 文字ランプにマップする アスキーアート生成ツールの設計記録。 ML / WASM / モデル不要、 純 JS で 12本目を埋めた話。
read log →ExifPeel ができるまで — ブラウザだけで画像のEXIFを確認・剥離する設計
exifr (EXIF パーサ) と piexifjs (JPEG EXIF 操作) と Canvas API をブラウザ内で動かし、 GPS / 撮影機種 / 編集ソフト履歴を覗いて剥がすツールの設計記録。 JPEG ロスレス strip と PNG/WebP の Canvas 再エンコード戦略、 GPS 警告 UI まで解説します。
read log →PyPad ができるまで — Pyodide でブラウザ完結の Python REPL を作る
Pyodide (CPython を WebAssembly にコンパイルしたランタイム) を CDN side-load して、 入力したコードがブラウザの外に出ない Python REPL を構築した設計記録。
read log →PixelLift ができるまで — ブラウザ内ESRGANで画像を高解像度化する設計
upscaler.js + ESRGAN slim をTensorFlow.js経由でブラウザ内推論する画像超解像Webサービスの設計記録。前処理・タイル化・メモリ管理・スタジオライト演出までを解説します。
read log →TextPluck ができるまで — ブラウザ内tesseractで画像から文字を抜く設計
tesseract.js + WASM SIMD でブラウザ完結のOCRを実装したWebサービスの設計記録。日本語OCRの落とし穴、UI上の工夫、スキャンビーム演出までを解説します。
read log →WordWarp ができるまで — OPUS-MT をブラウザで動かして翻訳をローカル化する
@xenova/transformers と OPUS-MT (Helsinki-NLP) の量子化版で、 テキストをサーバーに送らずブラウザ内推論で翻訳する Webサービスの設計記録。 言語ペア切替、 段落分割、 IndexedDB キャッシュ、 8ペア対応の UX まで解説します。
read log →PicFlip ができるまで — ブラウザ内 libheif + Canvas で画像形式変換を成立させる設計
heic2any (libheif WASM) と Canvas API で HEIC / JPG / PNG / WebP のクロス変換をブラウザ完結で実装したWebサービスの設計記録。バッチ・品質スライダー・暗室セーフライト演出までを解説します。
read log →BGSnap ができるまで — ブラウザ内ONNXで画像の背景を切り抜く設計
@imgly/background-removal を使って画像の背景透過をクライアント完結で実現するWebサービスの設計記録。WASM推論パイプライン、UX工夫、メディア処理ラボの3本目の位置づけを解説します。
read log →BeamDrop ができるまで — trystero + WebRTC でファイルをサーバー経由せずに直送する
trystero (Nostr 公開リレー) と WebRTC DataChannel で、 ファイル本体をサーバー経由せずブラウザ間で直送する P2P 共有ツールの設計記録。 signaling とペイロードの分離、 QRコード / 部屋コードの UX、 NAT越えとリレーの安定性まで解説します。
read log →PDFAnvil ができるまで — ブラウザ内 pdf-lib で結合・分割・圧縮を成立させる設計
pdf-lib を使ってPDFの結合・分割・軽量化をブラウザ完結で実装したWebサービスの設計記録。並べ替え可能ファイルリスト、ページ範囲指定、メモリ上限の扱いまで解説します。
read log →ClipCast ができるまで — FFmpeg.wasm をブラウザで動かして動画をトリミングするまでの設計
FFmpeg.wasm をブラウザ内で動かし、動画を一切アップロードせずにトリミングできるWebサービスの設計記録。シングルスレッド core の選択、UX上の工夫、エンコード設計を解説します。
read log →VoiceScribe ができるまで — ブラウザだけでWhisperを動かして音声を文字に変える設計
transformers.js でWhisperをブラウザ内推論し、音声をサーバーに送らずに文字起こしするWebサービスの設計記録。モデルキャッシュ、長尺対応、字幕出力、UXの工夫を解説します。
read log →MindCell ができるまで — ブラウザだけで LLM を動かすチャット設計
@mlc-ai/web-llm を WebGPU 上で動かして、 ローカル推論の AI チャットをブラウザ完結で実装した Webサービスの設計記録。 ストリーミング応答、モデルロード進捗、対応外環境の扱いまで解説します。
read log →[ ./focus_logs ]
主力サービスの改善ログ
今伸ばしている主力サービスの記録。 検索意図と改善方針の合わせ方が見えます。
ロールバック失敗時に慌てないための初動整理
デプロイ直後の不具合でロールバックもうまくいかないときに、確認順、関係者共有、影響範囲の見方を incident-sim の文脈で整理した記事です。
read log →SNS 投稿文のたたきを AI プロンプトで量産しすぎないための型
SNS 投稿文を量産するだけで終わらせず、媒体、トーン、CTA までそろえて使える形に寄せる PromptStock の実例記事です。
read log →CORS エラーの切り分けを訓練するための確認順
CORS エラーが出たときに、ブラウザ側、API 側、設定差分のどこから見るかを incident-sim の訓練導線に沿ってまとめた記事です。
read log →営業メールの下書きを AI プロンプトで使える形にする方法
営業メールをただ書かせるのではなく、相手、提案軸、文字数、CTA まで含めて整える PromptStock の使い方をまとめた記事です。
read log →コードレビュー依頼を AI プロンプトで具体化するやり方
コードレビュー依頼が雑なままだと AI の返答も浅くなります。PromptStock を使って観点、出力形式、優先度までそろえる流れを整理した記事です。
read log →環境変数ミスで 500 エラーが出るときに最初に見るポイント
環境変数の typo や未設定で 500 エラーが出るときに、何から確認し、どう切り分けるかを incident-sim の訓練視点で整理したガイドです。
read log →Web本番障害シミュレーター ができるまで — 壊れた疑似本番環境で障害対応を訓練するサービスの設計
環境変数ミス、ポート競合、CORS、キャッシュ不整合、ロールバック副作用をブラウザで復旧する『Web本番障害シミュレーター』の設計記事。状態機械、疑似FS、学習体験の作り方まで解説します。
read log →HackSim ができるまで — ブラウザだけで動くハッキングシミュレーターの設計と実装
仮想FSとコマンドエンジンをTypeScriptだけで構築。CRTエフェクト・マトリックス演出・27コマンド——ゲームUIを本物に近づけた設計と実装の全記録。
read log →PromptStock ができるまで — 企画から公開までの全記録
AIプロンプト辞典「PromptStock」の企画背景・技術選定・デザイン意図を解説する開発記事。
read log →[ ./improvement_logs ]
改善しながら見極めているログ
まだ伸ばし切れていないサービスの試行錯誤。 どこを直せば価値が出るかを見極めています。
SoloRoost ができるまで — 計算ツール 8 本目を 一人暮らし 逆算で開く
計算ツール thesis 8 本目 (coin-stack / roof-fund / gift-cap / side-tax / stork-cast / grad-fund / drip-tally / solo-roost、 マネー計算機 8 本柱)。 4 エリア × 3 プラン 家賃 base + 10 項目初期費用 + 9 項目 黄金比 配分 + 初月準備金 + 段ボール kraft + マステ + 引越しチェックリスト motif (kraft #d5b894 + 段ボール #6a4828 + マステ pastel + emerald ✓) で組んだ設計記録。
read log →DripTally ができるまで — 計算ツール 7本目を 無駄遣い × NISA 機会損失で開く
計算ツール thesis 7本目 (coin-stack / roof-fund / gift-cap / side-tax / stork-cast / grad-fund / drip-tally、 マネー計算機 7 本柱)。 頻度係数 (365/52/12/1) で 年額換算 + 月複利 FV (CoinStack 再利用) + 11 カテゴリ 色分け + 6 等価換算 + 感熱レシート (CSS mask zig-zag) + 朱印 反省 stamp motif で組んだ設計記録。
read log →RaiseDraft ができるまで — ジェネレーター 5本目を 給与交渉メール 草案で開く
ジェネレーター thesis 5本目 (jargon-scope / leap-bio / pitch-edge / stack-tale / raise-draft、 キャリア収入 文面 5 本柱)。 11 業種 × 5 経験 × 4 職位 = 220 セルの相場 DB + 4 トーン メールテンプレ + 4 段階 verdict 判定 + ビジネス便箋 + 万年筆 + 朱印 motif (ivory + slate navy + brass + vermillion) で組んだ設計記録。
read log →GradFund ができるまで — 計算ツール 6本目を 教育費 シミュレーターで開く
計算ツール thesis 6本目 (coin-stack / roof-fund / gift-cap / side-tax / stork-cast / grad-fund、 マネー計算機 6 本柱)。 進学コース 4 × 大学 5 + NISA 月複利 逆算 + ヴィンテージ アカデミア motif (cream parchment + navy + maroon ribbon + gold seal) で組んだ設計記録。
read log →ZodiStem ができるまで — 占い 4 本目を 十干十二支で開く
占い thesis 4 本目 (fate-num 西洋 / arcana-flip 中世 / maya-cast 中米 / zodi-stem 東洋、 4 文化軸完成)。 立春 (2/4) 切替 + 1984 甲子 起点 60 サイクル + 12 干支 アーキタイプ + 10 干 ニュアンス重ね + 60 グリッド可視化 + 書道半紙 + 朱印 motif で組んだ設計記録。
read log →GrantBoard ができるまで — データ可視化 4 本目を 補助金 洗い出しで開く
データ可視化 thesis 4 本目 (wiki-orbit / astro-cast / pop-drift / grant-board)。 約 30 制度 × eligibility 述語マッチング + 11 カテゴリ + 4 色 thumb-tack + 公民館 コルクボード motif (cork tan + 役所 teal + 黄色 受付票 + 蛍光ハイライト + 朱赤 stamp + push-pin 4 色) で組んだ 「もらう側」 唯一のラインの設計記録。
read log →RentCut ができるまで — ジェネレーター 6 本目を 家賃 値下げ 交渉メールで開く
ジェネレーター thesis 6 本目 (jargon-scope / leap-bio / pitch-edge / stack-tale / raise-draft / rent-cut)。 妥当性 verdict 4 段階 + 5 状況 multi-select + 3 トーン (soft / data / leave) まるごと差し替え + 不動産屋カウンター + brass 鍵束 + 朱赤 値下げ stamp motif (cream + muted teal + brass + amber + 朱赤) で組んだ設計記録。
read log →StorkCast ができるまで — 計算ツール 5本目を 育休給付金 シミュレーター で開く
シミュレーター 4本目 (cell-drift) に続く ラボ 37本目で 計算ツール thesis 5本目 (coin-stack / roof-fund / gift-cap / side-tax / stork-cast、 マネー計算機 5 本柱 「投資 / 住宅 / ふるさと / 副業 / 育休」 完成)。 純 JS で 雇用保険 育休給付金 (67% [1-180日] / 50% [181日以降] + 賃金日額上限 16,710円 + 社保免除 14.5%) を 母子手帳 + 育児雑誌 motif (baby pink + mint + warm cream + 朱赤 給付 stamp + brass binder ring) で組んだ設計記録。
read log →CellDrift ができるまで — シミュレーター 4本目を Conway ライフゲーム + ルール バリアント で開く
ジェネレーター 4本目 (glyph-forge) に続く ラボ 36本目で シミュレーター thesis 4本目 (pile-park 物理 / doodle-drop お絵描き物理 / frac-cast 数学イテレーション / cell-drift セルラー進化、 「物理 / 描く / 数 / 細胞」 4 本柱完成)。 純 JS Canvas 2D + Uint8Array ping-pong + 5 ルール + 12 古典パターンを 連続フォーム用紙 + dot-matrix プリンタ motif (緑バー paper + cream + ink + perf 穴 + alert red) で組んだ設計記録。
read log →GlyphForge ができるまで — ジェネレーター 4本目を モノグラム / SVG ロゴ で開く
学習 4本目 (soroban-rush) に続く ラボ 35本目で ジェネレーター thesis 4本目 (hue-deck 色 / type-forge 字 / patch-pad 音 / glyph-forge 紋章、 「色 / 字 / 音 / 紋章」 4 本柱完成)。 純 JS で 16 アートスタイル SVG path 動的生成 + 6 パレット + SVG / PNG ダウンロード を letterpress 活字工房 motif (ink + 朱赤 + 生成り + brass plate + emerald) で組んだ設計記録。
read log →SorobanRush ができるまで — 学習 4本目を 暗算 / そろばん ドリル で開く
データ可視化 3本目 (pop-drift) に続く ラボ 34本目で インタラクティブ学習 thesis 4本目 (tone-quest 耳 / atlas-quest 目 / type-rush 指 / soroban-rush 算、 4 感覚学習完成)。 純 JS 問題生成 + 1-1-4 そろばん SVG 可視化 + フラッシュ暗算 setTimeout 連鎖を 寺子屋 motif (warm brown frame + 玉青藍 + 玉朱 + 和紙 cream + 金箔) で組んだ設計記録。
read log →GiftCap ができるまで — マネー計算機シリーズ 3本目を ふるさと納税 で開く
シミュレーター (pile-park) に続く ラボ 22本目で 計算ツール 3本目 (CoinStack / RoofFund に続くマネー計算機シリーズ)。 給与所得控除 + 累進所得税 + 住民税 + 総務省式の限度額公式 を純 JS で実装、 和風 (墨 + 朱 + 生成り + 金箔) visual を組んだ設計記録。
read log →ToneQuest ができるまで — インタラクティブ学習 thesis 1本目を WebAudio で開く
ジェネレーター (type-forge) に続く ラボ 20本目で インタラクティブ学習 thesis を初投入。 WebAudio API + OscillatorNode の純合成で音感トレーニング、 3 モード × 3 レベルの問題生成ロジック、 wine + ivory + gilt のコンサートホール visual を組んだ設計記録。
read log →ArcanaFlip ができるまで — 占い 2本目を タロット 78 枚 + CSS 3D フリップで開く
計算ツール (gift-cap) に続く ラボ 23本目で 占い・診断 thesis の 2本目 (fate-num に続く)。 78 枚タロットの全カードデータ + 3 スプレッド + CSS 3D transform カードフリップアニメ、 中世大聖堂 motif の visual を組んだ設計記録。
read log →PilePark ができるまで — シミュレーター thesis 1本目を matter.js で開く
インタラクティブ学習 (tone-quest) に続く ラボ 21本目で シミュレーター thesis を初投入。 matter.js でクリック/ドラッグ操作の 2D 物理サンドボックスを実装、 玩具箱 motif の playful sandbox visual を組んだ設計記録。
read log →WikiOrbit ができるまで — データ可視化 thesis 1本目を Wikipedia の網で開く
計算ツール / 占い に続く 18本目で データ可視化 thesis をラボに追加。 d3-force でブラウザ内 force-directed network graph、 Wikipedia 公式 API への CORS 直送、 古地図 light theme の visual を組んだ設計記録。
read log →TypeForge ができるまで — ジェネレーター thesis 1本目を Three.js で開く
データ可視化 (wiki-orbit) に続く ラボ 19本目で ジェネレーター thesis を初投入。 Three.js を npm 新規導入し TextGeometry + 5 種材質 + OrbitControls + PNG export を組んだ設計記録。 §6.1 適用、 鍛冶 / forge motif の warm-dark industrial visual。
read log →AtlasQuest ができるまで — インタラクティブ学習 2本目を 国旗クイズ + 世界地図で
ジェネレーター 2本目 (hue-deck) に続く ラボ 26本目で インタラクティブ学習 thesis 2本目 (tone-quest に続く)。 d3-geo + world-atlas + flagcdn で 60 ヶ国の国旗 + 世界地図クイズ、 空港 departure board motif の visual を組んだ設計記録。
read log →MayaCast ができるまで — 占い・診断 3本目を マヤ暦 KIN で開く
学習 3本目 (type-rush) に続く ラボ 32本目で 占い・診断 thesis 3本目 (fate-num 数秘 / arcana-flip タロット に続く、 「数 / カード / 暦」 3 文化軸完成)。 純 JS でグレゴリオ暦 → ユリウス日 → Tzolkin 260 変換 + Feb 29 スキップ補正 を組み、 マヤ古代壁画 motif (earth red + jade + obsidian + gold + bone) でビジュアル化した設計記録。
read log →PatchPad ができるまで — ジェネレーター 3本目を ブラウザ モジュラー シンセ で開く
シミュレーター 2本目 (doodle-drop) に続く ラボ 29本目で ジェネレーター thesis 3本目 (hue-deck / type-forge に続く)。 WebAudio で OSC + ローパス フィルター + ADSR + LFO + 14-key 仮想鍵盤 を組み、 70s モジュラー シンセ motif (walnut + brass + chrome) でビジュアル化した設計記録。
read log →DoodleDrop ができるまで — シミュレーター 2本目を お絵描き物理 で開く
計算ツール 4本目 (side-tax) に続く ラボ 28本目で シミュレーター thesis 2本目 (pile-park に続く)。 matter.js + Canvas + 凸包 (Andrew's monotone chain) でストロークを polygon body 化、 黒板 motif の visual を組んだ設計記録。
read log →FracCast ができるまで — シミュレーター 3本目を WebGL2 フラクタル で開く
ジェネレーター 3本目 (patch-pad) に続く ラボ 30本目で シミュレーター thesis 3本目 (pile-park / doodle-drop に続く)。 WebGL2 fragment shader で escape-time iteration を GPU per-pixel 並列実行、 17世紀 数学者ノートブック motif (ivory + sepia + brass + crimson) で組んだ設計記録。
read log →SideTax ができるまで — マネー計算機 4本目を 副業税金 で開く
インタラクティブ学習 2本目 (atlas-quest) に続く ラボ 27本目で 計算ツール thesis 4本目 (CoinStack → RoofFund → GiftCap → SideTax のマネー計算機シリーズ)。 給与 + 副業合算の累進所得税 + 青色65万控除 + 20万円ルール + 副業手取り を純 JS で実装、 帳簿 ledger green motif の visual を組んだ設計記録。
read log →AstroCast ができるまで — データ可視化 2本目を 太陽系 3D で開く
占い 2本目 (arcana-flip) に続く ラボ 24本目で データ可視化 thesis 2本目 (wiki-orbit に続く)。 Three.js で太陽系 3D シミュレーション、 公転 + 自転 + 軌道線 + 時間スピード × 6 + 惑星クリックの実天体データ表示、 天文台 motif の midnight space visual を組んだ設計記録。
read log →TypeRush ができるまで — インタラクティブ学習 3本目を タイピング道場 で開く
シミュレーター 3本目 (frac-cast) に続く ラボ 31本目で インタラクティブ学習 thesis 3本目 (tone-quest / atlas-quest に続く)。 純 JS + WebAudio で 5 モード × 3 レベル + WPM + QWERTY ミス ヒートマップ を組み、 古いタイプライター motif (cream paper + carbon ribbon + brass key + ribbon red) でビジュアル化した設計記録。
read log →HueDeck ができるまで — ジェネレーター 2本目を chroma-js で配色パレット
データ可視化 2本目 (astro-cast) に続く ラボ 25本目で ジェネレーター thesis 2本目 (type-forge に続く)。 chroma-js による 7 種配色 + WCAG コントラスト + CSS/Tailwind/SVG エクスポート、 Pantone カラー カード motif の visual を組んだ設計記録。
read log →PopDrift ができるまで — データ可視化 3本目を 人口ピラミッド で開く
占い 3本目 (maya-cast) に続く ラボ 33本目で データ可視化 thesis 3本目 (wiki-orbit 知識グラフ / astro-cast 太陽系 / pop-drift 人口統計)。 6 ヶ国 × 5 年代 × 21 階級 × 2 性別 の stylized data + 平均年齢 / 高齢化指数 / 生産年齢人口比率 自動算出 + 2 国比較を 昭和の統計年鑑 + Risograph 二色刷り motif (cream paper + cobalt blue + warm red) で組んだ設計記録。
read log →RoofFund ができるまで — 住宅ローン シミュレーターを建築立面図で見せる
コインスタックの直後に置く 計算ツール 2本目。 元利均等 / 元金均等 / 繰上げ返済 (期間短縮型) を純 JS で実装し、 残高推移を建築立面図風 SVG で描く設計記録。 §6.1 Visual Audit の最初の適用例。
read log →PitchFlip ができるまで — soundtouchjs でブラウザ完結のボイスチェンジャーを作る
soundtouchjs (SoundTouch / SimpleFilter / WebAudioBufferSource) を CDN side-load して、 音声のピッチ (±24半音) とテンポ (0.5〜2.0倍) を独立に変更し WAV エンコードして書き出すボイスチェンジャーの設計記録。
read log →FateNum ができるまで — 占い・診断 thesis 1本目を 数秘術 で開く
計算ツール 連続 2本 (coin-stack / roof-fund) のあと、 §3.1 Thesis Audit に従って別 thesis 「占い・診断」 へ振り直し。 ピタゴラス式数秘術を純 JS で実装、 zodiac wheel + serif display で過去 16本柱と全く別の visual を組んだ設計記録。
read log →CoinStack ができるまで — NISA / iDeCo シミュレーターで thesis を多様化する
14本柱が on-device ML に偏った反省から、 §3.1 Thesis Audit で別軸を採用。 NISA/iDeCo/つみたて投資 の複利 FV + 節税試算を純 JS で実装した設計記録。
read log →Reply Remix を作った理由と、一般向けサービスへ寄せた判断
Reply Remix を追加した背景、技術者寄りから一般向けの実用品へ寄せた理由、ローカルテンプレート設計の考え方をまとめた開発ログです。
read log →やんわり断る返信文をすぐ作りたいときの考え方
断りの返信を冷たく見せずに整えるコツと、Reply Remix でトーン違いの返信文を作る使い方をまとめました。
read log →日程変更をお願いするときの返信文を感じよく整える
予定変更をお願いするときに感じよく伝える構成と、Reply Remix で相手別の言い回しを作る方法をまとめました。
read log →催促っぽく見せずに確認したいときの返信文の作り方
資料待ちや返信待ちで圧を出しすぎない確認文を作る考え方と、Reply Remix を使った下書きの整え方を解説します。
read log →SQL道場 ができるまで — SQLite WASMでバックエンドなしのSQL練習サービスを3日で作った話
環境構築不要でSQLを練習できるサービス。sql.js（SQLite WASM）のシングルトン設計・実行結果検証による採点ロジック・CmdDojoアーキテクチャの再利用を全公開。
read log →CmdDojo ができるまで — ブラウザだけで動くLinuxコマンド練習サービスの設計と実装
インストール不要のLinuxコマンド練習サービス。不変FSと純粋関数コマンドエンジンの設計、HackSimとの技術的差別化、詰まったバグを全公開。
read log →[ ./archive ]
保留で観察しているログ
すぐに深追いしないサービスも、 判断材料として記録は残しています。
Git道場 ができるまで — 純粋TypeScriptだけで作るGitシミュレーターの設計と実装
isomorphic-gitやmemfsを使わず、純粋TypeScriptだけでGitの状態機械を実装。コミットスナップショット設計・ブランチ切り替え・マージ処理の実装詳細と道場アーキテクチャ4作目の開発記録。
read log →Regex道場 ができるまで — リアルタイムハイライトで正規表現を可視化した学習サービスの設計と実装
「正規表現が分かりにくい」を解決するためにリアルタイムハイライト機能を実装。ブラウザネイティブRegExpのラップ設計・マッチ位置からのセグメント分割ロジック・道場アーキテクチャ3作目の開発記録。
read log →AI言い訳ジェネレーター ができるまで — バイラル狙いのエンタメAIの設計と実装
「遅刻した」「締切破った」をAIが爆笑言い訳に変換するサービスの企画背景・AIプロンプト設計・UX設計を全公開。
read log →[ ./next_step ]
読んだら、 そのまま試すか 連絡する。
開発ログは記録のために残してありますが、 行き先は最終的にサービス本体か相談ページです。 次に動いて確かめてください。