[./journal · validation logs]
作って、 動かして、
壊れた所まで残す。
aidev-lab.org で公開した各サービスの実装記録・改善ログ・判断メモ。 ML / メディア処理 / P2P / Python REPL の作り方、 公開直後に踏んだ 公開直後に踏んだ不具合の修正経緯、 そこから決めた自分ルールが どう生まれたかまで、 完成度を担保するために必要な記録を全部残しています。
[ ./lab_pillars ]
初期に作った 13 本の実装記録
音声文字起こし / 動画トリミング / 背景透過 / OCR / PDF / 高解像度化 / 翻訳 / Python 実行 など、 立ち上げ期に作ったサービスについて、 ライブラリ選定 ・ 構造設計 ・ 踏んだ不具合 ・ 決めごとの変遷を残しています。
PyPad ができるまで — Pyodide で Python REPL を作る
Pyodide (CPython を WebAssembly にコンパイルしたランタイム) を CDN side-load して、 入力したコードがブラウザの外に出ない Python REPL を構築した設計記録。
read log →ASCIIBake ができるまで — Canvas だけで画像を文字に焼く軽量ピース
アスキーアート変換ツールの開発ログ。 Canvas API だけで画像の明暗を読み取り、 濃さの順に並べた文字へ割り当てる仕組みと、 機械学習も WASM も使わずに済ませた設計を記録しています。
read log →ExifPeel ができるまで — ブラウザだけで画像のEXIFを確認・剥離する設計
exifr (EXIF パーサ) と piexifjs (JPEG EXIF 操作) と Canvas API をブラウザ内で動かし、 GPS / 撮影機種 / 編集ソフト履歴を覗いて剥がすツールの設計記録。 JPEG ロスレス strip と PNG/WebP の Canvas 再エンコード戦略、 GPS 警告 UI まで解説します。
read log →MindCell ができるまで — ブラウザだけで LLM を動かすチャット設計
@mlc-ai/web-llm を WebGPU 上で動かして、 ローカル推論の AI チャットをブラウザ完結で実装した Webサービスの設計記録。 ストリーミング応答、モデルロード進捗、対応外環境の扱いまで解説します。
read log →TextPluck ができるまで — tesseract で画像から文字を抜く
tesseract.js + WASM SIMD でブラウザ完結のOCRを実装したWebサービスの設計記録。日本語OCRの落とし穴、UI上の工夫、スキャンビーム演出までを解説します。
read log →BGSnap ができるまで — ブラウザ内ONNXで画像の背景を切り抜く設計
背景透過ツールの開発ログ。 @imgly/background-removal をブラウザ内で動かして 画像から人物や物だけを切り抜く仕組みと、 待ち時間の見せ方をどう設計したかを記録しています。
read log →PDFAnvil ができるまで — pdf-lib で結合・分割・圧縮する
pdf-lib を使ってPDFの結合・分割・軽量化をブラウザ完結で実装したWebサービスの設計記録。並べ替え可能ファイルリスト、ページ範囲指定、メモリ上限の扱いまで解説します。
read log →VoiceScribe ができるまで — ブラウザだけで Whisper を動かす
transformers.js でWhisperをブラウザ内推論し、音声をサーバーに送らずに文字起こしするWebサービスの設計記録。モデルキャッシュ、長尺対応、字幕出力、UXの工夫を解説します。
read log →BeamDrop ができるまで — trystero + WebRTC で直送する
trystero (Nostr 公開リレー) と WebRTC DataChannel で、 ファイル本体をサーバー経由せずブラウザ間で直送する P2P 共有ツールの設計記録。 signaling とペイロードの分離、 QRコード / 部屋コードの UX、 NAT越えとリレーの安定性まで解説します。
read log →PicFlip ができるまで — libheif で HEIC を変換する
heic2any (libheif WASM) と Canvas API で HEIC / JPG / PNG / WebP のクロス変換をブラウザ完結で実装したWebサービスの設計記録。バッチ・品質スライダー・暗室セーフライト演出までを解説します。
read log →WordWarp ができるまで — OPUS-MT で翻訳をローカル化する
@xenova/transformers と OPUS-MT (Helsinki-NLP) の量子化版で、 テキストをサーバーに送らずブラウザ内推論で翻訳する Webサービスの設計記録。 言語ペア切替、 段落分割、 IndexedDB キャッシュ、 8ペア対応の UX まで解説します。
read log →ClipCast ができるまで — FFmpeg.wasm で動画をトリミング
FFmpeg.wasm をブラウザ内で動かし、動画を一切アップロードせずにトリミングできるWebサービスの設計記録。シングルスレッド core の選択、UX上の工夫、エンコード設計を解説します。
read log →PixelLift ができるまで — ブラウザ内ESRGANで画像を高解像度化する設計
upscaler.js + ESRGAN slim をTensorFlow.js経由でブラウザ内推論する画像超解像Webサービスの設計記録。前処理・タイル化・メモリ管理・スタジオライト演出までを解説します。
read log →[ ./focus_logs ]
主力サービスの改善ログ
今伸ばしている主力サービスの記録。 検索意図と改善方針の合わせ方が見えます。
コードレビュー依頼を AI プロンプトで具体化するやり方
コードレビュー依頼が雑なままだと AI の返答も浅くなります。PromptStock を使って観点、出力形式、優先度までそろえる流れを整理した記事です。
read log →営業メールの下書きを AI プロンプトで使える形にする方法
営業メールをただ書かせるのではなく、相手、提案軸、文字数、CTA まで含めて整える PromptStock の使い方をまとめた記事です。
read log →CORS エラーの切り分けを訓練するための確認順
CORS エラーが出たときに、ブラウザ側、API 側、設定差分のどこから見るかを incident-sim の訓練導線に沿ってまとめた記事です。
read log →SNS 投稿文のたたきを AI プロンプトで量産しすぎないための型
SNS 投稿文を量産するだけで終わらせず、媒体、トーン、CTA までそろえて使える形に寄せる PromptStock の実例記事です。
read log →環境変数ミスで 500 エラーが出るときに最初に見るポイント
環境変数の typo や未設定で 500 エラーが出るときに、何から確認し、どう切り分けるかを incident-sim の訓練視点で整理したガイドです。
read log →ロールバック失敗時に慌てないための初動整理
デプロイ直後の不具合でロールバックもうまくいかないときに、確認順、関係者共有、影響範囲の見方を 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 ができるまで — 一人暮らしの初期費用を逆算する
一人暮らしの初期費用シミュレーターの開発ログ。 エリア別の家賃をもとに敷金・礼金など 10 項目の初期費用と、 生活費の配分、 初月に必要な準備金を出す計算の組み方を記録しています。
read log →RentCut ができるまで — 家賃の値下げ交渉メールを作る
家賃交渉の文面ジェネレーターの開発ログ。 相場との差から交渉の見込みを 4 段階で判定し、 選んだ状況に応じて 「穏やかに頼む」「数字で示す」「退去も匂わせる」 の 3 トーンで文面を差し替える設計を記録しています。
read log →ZodiStem ができるまで — 生年月日から十干十二支を出す
十干十二支 (六十干支) 占いツールの開発ログ。 立春での年の切り替え、 1984 年の甲子を起点にした 60 サイクルの計算、 十二支と十干を重ねた解釈の作り方と、 60 マスの一覧で自分の位置を見せるまでを記録しています。
read log →GrantBoard ができるまで — 使える補助金を条件で絞る
補助金・給付金の一覧ツールの開発ログ。 約 30 制度それぞれに受給条件を判定する式を持たせ、 入力した条件に合うものだけ残す仕組みと、 掲示板に貼り紙を留めたような画面の作り方を記録しています。
read log →DripTally ができるまで — 無駄遣いを NISA の機会損失に換算
無駄遣い換算ツールの開発ログ。 日・週・月ごとの出費を年額に直し、 同じ額を NISA で積み立てた場合との差を 月複利で出す計算と、 感熱レシート風のレイアウトの作り方を記録しています。
read log →GradFund ができるまで — 教育費と毎月の積立額を逆算する
教育費シミュレーターの開発ログ。 進学コース 4 通り × 大学 5 種別の費用表を組み、 目標額から毎月の積立額を逆算する計算と、 古い学校資料のような見た目に寄せた設計を記録しています。
read log →RaiseDraft ができるまで — 給与交渉メールの草案を作る
昇給交渉メールの下書き生成ツールの開発ログ。 11 業種 × 5 経験年数 × 4 職位 = 220 通りの相場データを用意し、 希望額が相場から見て妥当かを 4 段階で判定して文面を切り替える設計を記録しています。
read log →StorkCast ができるまで — 育休給付金と手取りを試算する
育休給付金シミュレーターの開発ログ。雇用保険の給付率(67%/50%)、賃金日額の上限、社会保険料免除をどう計算に落とし込んだかを設計の経緯とあわせて記録しています。
read log →GlyphForge ができるまで — モノグラムの SVG ロゴを生成する
モノグラム・ロゴ生成ツールの開発ログ。 素の JavaScript で 16 種類のスタイルの SVG パスを動的に組み立て、 6 つの配色から選んで SVG と PNG で書き出せるようにするまでの設計を記録しています。
read log →SorobanRush ができるまで — 暗算とそろばんのドリルを作る
そろばん・フラッシュ暗算ツールの開発ログ。 素の JavaScript で問題を生成し、 五玉と一玉を SVG で描いて珠の動きを見せる仕組みと、 フラッシュ暗算の表示間隔の作り方を記録しています。
read log →CellDrift ができるまで — ライフゲームのルールを変える
ライフゲーム(セルオートマトン)シミュレーターの開発ログ。5つのルールと12の古典パターンを、Canvas 2DとUint8Arrayのping-pong更新で軽量に動かした記録です。
read log →FracCast ができるまで — WebGL2 でマンデルブロ集合を描く
フラクタル描画ツールの開発ログ。 WebGL2 のフラグメントシェーダーで発散判定を GPU のピクセル並列で回し、 深いズームでも滑らかに動かすための実装と、 数学ノート風の見た目の設計を記録しています。
read log →TypeForge ができるまで — Three.js で 3D 文字を作る
3D 文字ジェネレーターの開発ログ。 Three.js を初めて導入し、 TextGeometry で立体文字を起こして 5 種類の質感を切り替え、 マウスで回して PNG に書き出すまでの設計を記録しています。
read log →PilePark ができるまで — matter.js の物理エンジンで積む
2D物理サンドボックスの開発ログ。matter.jsでクリックとドラッグの操作を組み、図形を落として掴んで投げられる玩具箱風のサンドボックスを作った経緯を記録しています。
read log →ToneQuest ができるまで — WebAudio で音感を鍛える
音感トレーニングの開発ログ。Web Audio APIのオシレーターだけで音を合成し、3モード×3レベルの問題を生成するロジックと、コンサートホール風の画面設計を記録。
read log →WikiOrbit ができるまで — Wikipedia を知識グラフで見る
Wikipedia関連語ネットワーク図の開発ログ。d3-forceでブラウザ内に力学的グラフを描き、Wikipedia公式APIへ直接リクエストする構成と古地図風の画面設計を記録。
read log →ArcanaFlip ができるまで — タロット 78 枚を CSS 3D でめくる
タロット占いの開発ログ。78枚分のカードデータと3つのスプレッド、CSS 3D transformによるカードめくりアニメ、中世大聖堂をモチーフにした画面設計を記録しています。
read log →PatchPad ができるまで — WebAudio でモジュラーシンセを組む
ブラウザで動くモジュラーシンセの開発ログ。 WebAudio でオシレーターからローパスフィルター、 ADSR、 LFO までをつなぎ、 14 鍵の仮想鍵盤で鳴らせるようにするまでの実装を記録しています。
read log →AstroCast ができるまで — 太陽系を 3D でブラウザに置く
太陽系3Dシミュレーションの開発ログ。Three.jsで公転と自転、軌道線、時間スピード切替、惑星クリックでの実天体データ表示をどう組み立てたかを記録しています。
read log →SideTax ができるまで — 副業の税金と手取りを試算する
副業税金シミュレーターの開発ログ。 給与と副業所得を合算した累進所得税、 青色申告特別控除 65 万円、 20 万円ルールの判定、 手取りの逆算までを素の JavaScript で実装した過程を記録しています。
read log →AtlasQuest ができるまで — 国旗クイズと世界地図で学ぶ
国旗クイズと世界地図の学習ツールの開発ログ。 d3-geo と world-atlas で地図を描き、 60 か国の国旗を出題する仕組みと、 空港の発着案内板を模した画面をどう組んだかを記録しています。
read log →HueDeck ができるまで — chroma-js で配色パレットを作る
配色パレット生成ツールの開発ログ。 chroma-js で 7 種類の配色を作り、 WCAG のコントラスト比を判定して CSS・Tailwind・SVG の形で書き出せるようにするまでの設計を記録しています。
read log →GiftCap ができるまで — ふるさと納税の限度額を計算する
ふるさと納税シミュレーターの開発ログ。 給与所得控除・累進所得税・住民税・総務省の限度額の式を 素の JavaScript で組み、 実質 2000 円で済む上限額を出すまでを記録しています。
read log →DoodleDrop ができるまで — 描いた線が落ちるお絵描き物理
お絵描き物理サンドボックスの開発ログ。matter.jsとCanvasで、手描きのストロークを凸包アルゴリズムで物理ボディに変換する仕組みと、黒板風の画面設計を記録しています。
read log →MayaCast ができるまで — 誕生日からマヤ暦の KIN を出す
マヤ暦 (ドリームスペル) KIN 占いの開発ログ。 グレゴリオ暦からユリウス日を経てツォルキン 260 日暦へ変換する計算と、 うるう日のずれ補正、 260 マスのグリッド表示までの実装を記録しています。
read log →TypeRush ができるまで — タイピング練習とミスの可視化
タイピング練習ツールの開発ログ。 素の JavaScript で 5 モード × 3 レベルの出題を組み、 WPM の計測と、 キー配列の上にミスの偏りをヒートマップで重ねるまでの実装を記録しています。
read log →PopDrift ができるまで — 人口ピラミッドを 6 か国で比べる
人口ピラミッド可視化ツールの開発ログ。 6 か国 × 5 年代 × 21 階級の人口データから平均年齢・高齢化指数・生産年齢人口比率を 自動算出し、 2 か国を並べて比較できるようにするまでを記録しています。
read log →CoinStack ができるまで — NISA と iDeCo の複利を試算する
NISA・iDeCo シミュレーターの開発ログ。 積立の複利による将来価値と、 運用益非課税・所得控除で戻る額の試算を 素の JavaScript で実装し、 積み上がりを硬貨の山で見せるまでを記録しています。
read log →FateNum ができるまで — 数秘術をブラウザで計算する
数秘術ツールの開発ログ。 生年月日と名前からピタゴラス式で運命数・魂の数などを求める計算を素の JavaScript で実装し、 占いらしい見た目に振り切るまでの設計を記録しています。
read log →RoofFund ができるまで — 住宅ローン シミュレーターを建築立面図で見せる
住宅ローン返済シミュレーターの開発ログ。 元利均等と元金均等、 期間短縮型の繰上げ返済を素の JavaScript で実装し、 残高の推移を建築の立面図に見立てた SVG で描くまでを記録しています。
read log →PitchFlip ができるまで — soundtouchjs で声のピッチを変える
ボイスチェンジャーの開発ログ。soundtouchjsをCDNから読み込み、音声のピッチ(±24半音)とテンポ(0.5〜2.0倍)を独立に変えてWAVで書き出す実装を記録しています。
read log →催促っぽく見せずに確認したいときの返信文の作り方
資料や返信を催促するときは、 急かす言葉より状況の共有と期限の明示のほうが動いてもらえます。 圧を出しすぎない確認文の組み立て方と、 Reply Remix で下書きを整える手順をまとめました。
read log →Reply Remix を作った理由と、一般向けサービスへ寄せた判断
Reply Remix を追加した背景、技術者寄りから一般向けの実用品へ寄せた理由、ローカルテンプレート設計の考え方をまとめた開発ログです。
read log →日程変更をお願いするときの返信文を感じよく整える
予定変更のお願いは、 理由・代案・お詫びの順で短くまとめると角が立ちません。 相手との距離感に応じた言い回しの選び方と、 Reply Remix でトーン違いの下書きを作る手順をまとめました。
read log →やんわり断る返信文をすぐ作りたいときの考え方
断りの返信は、 感謝・理由・代案の 3 点をそろえると冷たく見えません。 角を立てずに断るための文の組み立て方と、 Reply Remix でトーン違いの返信案を作って選ぶ手順をまとめました。
read log →SQL道場 ができるまで — SQLite WASM でバックエンド無しにする
環境構築不要でSQLを練習できるサービス。sql.js（SQLite WASM）のシングルトン設計・実行結果検証による採点ロジック・CmdDojoアーキテクチャの再利用を全公開。
read log →CmdDojo ができるまで — ブラウザで動く Linux コマンド練習
インストール不要のLinuxコマンド練習サービス。不変FSと純粋関数コマンドエンジンの設計、HackSimとの技術的差別化、詰まったバグを全公開。
read log →[ ./tool_logs ]
単発ツール 40 本の実装記録
占い / 生成アート / 音 / 写真加工 / シミュレーター / マネー計算など、 1 本ずつ完結しているツールの開発ログ。 使ったアルゴリズムと、 作ってみて分かったことを残しています。
AkinFind ができるまで — ブラウザ内で完結する embeddings 意味検索
多言語の文章埋め込みモデル (Xenova/multilingual-e5-small) を transformers.js の CDN ESM で side-load し、 各文を正規化ベクトル化。 cosine 類似度で意味検索と似ている文ペア検出を全て端末内で行う設計記録。
read log →ToonCast ができるまで — AnimeGANv2 をブラウザで動かす
AnimeGANv2 の小さな ONNX (約9MB) を onnxruntime-web (単一スレッド WASM=COOP/COEP不要、 color-revive で承認済みライブラリの再利用) で実行。 512x512・[-1,1] 正規化で推論し、 結果を元解像度に戻して表示する設計記録。 写真は端末内処理。
read log →PhotoTwin ができるまで — CLIP画像埋め込みで似た写真を見つける
CLIP (Xenova/clip-vit-base-patch32) の image-feature-extraction を transformers.js の CDN ESM で side-load し、 各写真を正規化ベクトル化。 cosine 類似度で重複・似た写真をブラウザ内で検出する設計記録 (新ライブラリ追加なし=what-cam と同じ CLIP の再利用)。
read log →ColorRevive ができるまで — onnxruntime-web で白黒写真をカラー化
DeOldify の量子化 ONNX を onnxruntime-web (CDN side-load・単一スレッド WASM=COOP/COEP不要) で実行。 256x256 でモデル推論し、 輝度は元写真・色だけ AI を YCbCr で再合成して輪郭を保つ設計記録。 写真は端末内処理。
read log →WhatCam ができるまで — CLIP のゼロショット画像分類をブラウザで動かす
CLIP (Xenova/clip-vit-base-patch32) を transformers.js の CDN ESM で side-load し、 写真と候補ラベルの近さをブラウザ内で計算。 日本語ラベルを英語プロンプトに変換し、 図鑑と自由入力の両モードで「これ何?」を判定する設計記録。
read log →DepthCast ができるまで — 1枚の写真をAIの深度推定で立体にする
Depth Anything (transformers.js) を CDN ESM で side-load し、 1枚の写真から深度マップを推定。 WebGL2 フラグメントシェーダで深度に比例した視差 (iterative backward parallax) を作り、 赤青アナグリフ / WebM 書き出しまで端末内で完結させた設計記録。
read log →FlockDrift ができるまで — Boids の 3 規則で群れを作る
群れのシミュレーターの開発ログ。 分離・整列・結合の 3 規則だけで鳥や魚の群れが生まれる Boids を実装し、 捕食者からの逃避を足して ムクドリ・魚群・蛍・蚊柱 の 5 プリセットに仕上げるまでを記録しています。
read log →FlowWeave ができるまで — サンキーレイアウトを自前実装する
サンキーダイアグラム作成ツールの開発ログ。 「元 [数値] 先」 と書くだけの記法から、 ノードの層分け・流量に比例した高さ・線の交差を減らす並べ替えまで、 レイアウトを自前で実装した記録です。
read log →GambitBoard ができるまで — チェス AI を自前で書く
チェス AI の開発ログ。 合法手や詰みの判定は chess.js に任せ、 対局する側は アルファベータ探索・取る手の並べ替え・静止探索・駒の位置評価・反復深化を自前で書いた記録です。
read log →MetroTune ができるまで — メトロノームとチューナーを作る
メトロノーム+チューナーの開発ログ。Web Audioの先読みスケジューラでテンポをぶれさせない方法と、マイク波形を自己相関で解析して音名とセントを出す実装を記録します。
read log →DotCraft ができるまで — 写真をドット絵に変える減色とディザ
写真をドット絵にするツールの開発ログ。 ボックス平均での縮小、 メディアンカットによる減色、 Bayer と Floyd-Steinberg のディザを組み合わせ、 レトロゲーム機の配色に寄せるまでを記録しています。
read log →RuneCast ができるまで — Elder Futhark 24 文字を引く
北欧ルーン占いの開発ログ。 Elder Futhark 24 文字を 3 つのアエッティルに分け、 対称形のルーンは逆位置を持たないという伝統を実装に落とし込むまでと、 3 種類のスプレッドの作り方を記録しています。
read log →pg-pad ができるまで — PGlite で PostgreSQL をブラウザで動かす
ブラウザだけで本物のPostgreSQLが動くSQLプレイグラウンドの開発ログ。PGlite(WebAssembly版Postgres)をCDNから読み込む方法と、SQL道場との棲み分けを記録。
read log →VecTrace ができるまで — 画像を SVG ベクターに変換する
画像のベクター化ツールの開発ログ。 imagetracerjs で色の量子化から境界追跡・ベジェ近似までを行い、 拡大しても劣化しない SVG パスに変換する実装と、 他の画像ツールとの使い分けを記録しています。
read log →qr-forge ができるまで — デザイン QR を自前描画で作る
デザイン QR コード作成ツールの開発ログ。 qrcode-generator からドットの並びだけを取り出し、 形・色・グラデーション・中央ロゴを自前で描画。 作った QR を jsQR で読み直して壊れていないか検証しています。
read log →RainLull ができるまで — 雨音を 4 レイヤーで合成する
雨音ヒーリングサウンドの開発ログ。ノイズのレイヤー合成、しずく音の先読みスケジューラ、procedural な遠雷、畳み込み残響をWeb Audioで重ねた設計を記録します。
read log →IndiePurse ができるまで — フリーランスの手取りを試算する
フリーランスの手取り計算ツールの開発ログ。自治体別の国民健康保険料(所得割+均等割+平等割)や国民年金、個人事業税を積み上げる計算エンジンの設計を記録しています。
read log →GridNine ができるまで — 唯一解の数独をブラウザで生成する
数独ツールの開発ログ。 MRV 法のバックトラッキングで完成盤を作り、 マスを抜くたびに解が 1 つのままかを数えて穴を掘る手順と、 候補メモ・重複ハイライト・ヒント機能の実装を記録しています。
read log →HeirShare ができるまで — 相続税の早見表ロジックを実装する
相続税シミュレーターの開発ログ。 家族構成から法定相続人と相続分を判定し、 基礎控除・課税遺産総額・速算表・配偶者の税額軽減まで、 早見表と同じ順序を素の JavaScript で実装した過程を記録しています。
read log →ChromaLens ができるまで — 色覚シミュレーションとダルトナイズ補正
色覚シミュレーターの開発ログ。 1型・2型・3型の見え方を 3×3 の色変換行列で再現し、 失われる色差を別のチャンネルへ逃がすダルトナイズで区別しやすく補正するまでの実装を記録しています。
read log →GanttPad ができるまで — 日付軸タイムラインのレイアウト計算
ガントチャート作成ツールの開発ログ。 開始日と終了日から全体期間を求めてバーの位置と長さを算出し、 期間に応じて日・週・月の目盛りを自動で切り替える描画の作り方を記録しています。
read log →BioWave ができるまで — バイオリズムを正弦波で描く
バイオリズム占いの開発ログ。 生年月日からの経過日数をもとに身体 23 日・感情 28 日・知性 33 日の正弦波で調子を出し、 ゼロ交差を要注意日として拾い、 2 人の誕生日差から相性を計算するまでを記録しています。
read log →PlotPad ができるまで — ブラウザで動く関数グラフ電卓
関数グラフ描画ツールの開発ログ。 式の解析と記号微分は mathjs に任せ、 1 ピクセル刻みのサンプリング描画、 発散点での線の切り方、 ドラッグ移動とカーソル基準のズームを自前で実装した記録です。
read log →StarTrail ができるまで — N 体重力を Canvas で動かす
重力シミュレーターの開発ログ。 万有引力を全ペアで直接計算し、 Velocity-Verlet 法で位置を進めて 太陽系・二重星・銀河衝突など 6 プリセットの軌道を描くまでと、 天体どうしが近づいたときに計算が発散しない工夫を記録しています。
read log →NestFund ができるまで — 退職金と年金と iDeCo をまとめる
老後資金シミュレーターの開発ログ。 退職所得控除・累進所得税・老齢基礎年金と厚生年金の計算式・ 繰上げ繰下げ・iDeCo の複利をひとつにまとめ、 退職後から 100 歳までの収支を出すまでを記録しています。
read log →CandleCast ができるまで — ローソク足と 4 指標を自前計算
株価チャートツールの開発ログ。 OHLC の CSV を読み、 移動平均・ボリンジャーバンド・RSI・MACD を 素の JavaScript で自前計算して、 価格と指標を三段の SVG に描くまでを記録しています。
read log →HushLoom ができるまで — 環境音を Web Audio で合成する
環境音ジェネレーターの開発ログ。 録音を一切持たず、 ホワイト / ピンク / ブラウンのノイズにフィルターと ゆらぎをかけて 雨・波・焚火・風・カフェ の 8 種類を合成するまでを記録しています。
read log →HexCast ができるまで — 易経 六十四卦 を三枚銭法で引く
易経のオンライン占いの開発ログ。 三枚銭法を再現して 6 爻を順に出し、 上卦と下卦から六十四卦を特定、 変爻があれば之卦まで計算する流れと、 八卦盤の描き方を記録しています。
read log →AdageQuest ができるまで — ことわざを 5 層で覚えるクイズ
ことわざクイズの開発ログ。 48 件を漢字・読み・意味・中国古典の出典・英訳の 5 層で持たせ、 読み当て / 意味当て / 穴埋め / 故事から当てる の 4 モード × 3 難度で出題する仕組みを記録しています。
read log →MangaSnap ができるまで — 写真をハーフトーンで漫画化する
写真を漫画風にするツールの開発ログ。 ぼかし・エッジ抽出・二値化・線の太らせ・トーンの階調化・ ハーフトーンのドット・速度線 の 7 段階を自前で組み、 少年 / 少女 / 劇画 / アメコミ に振り分けた記録です。
read log →LunaTale ができるまで — 寝かしつけ物語を自動生成する
寝かしつけ物語ジェネレーターの開発ログ。 子供の名前と好きな動物から起承転結の物語を組み立て、 種の値で同じ話を再現できるようにし、 ブラウザの読み上げ機能で朗読させるまでを記録しています。
read log →InkTide ができるまで — Stable Fluids を WebGL2 で動かす
GPU 流体シミュレーターの開発ログ。 Jos Stam の Stable Fluids を WebGL2 のシェーダーで実装し、 速度場と染料場を 2 枚のテクスチャで入れ替えながら 1 フレーム 7 段階で解く構成を記録しています。
read log →ChartPress ができるまで — CSV を投げるだけの統計ダッシュボード
CSV ダッシュボードの開発ログ。 引用符と BOM に対応した自前の CSV パーサ、 8 割ルールで列の型を決める推定、 要約統計・ヒストグラム・Pearson 相関ヒートマップの実装を記録しています。
read log →PendulumTrace ができるまで — 二重振り子を RK4 で解く
二重振り子シミュレーターの開発ログ。 ラグランジュの運動方程式を一階の連立常微分方程式に直し、 4 次ルンゲ・クッタ法で積分して軌跡を描くまでと、 全エネルギーで計算が壊れていないか検算する仕組みを記録しています。
read log →FluxBloom ができるまで — Perlin と Voronoi で絵を生む
ジェネレーティブアートの開発ログ。 Perlin ノイズ・Voronoi 分割・L-System の枝分かれ・リサジュー曲線・曼荼羅など 6 種類のアルゴリズムを素の JavaScript で実装し、 種の値だけで同じ絵を再現できるようにするまでの記録です。
read log →AspectChart ができるまで — Meeus 式で七天体を計算する
ホロスコープ作成ツールの開発ログ。 Meeus の近似式とケプラー方程式のニュートン法反復で七天体の黄経を求め、 12 サインの分割・アスペクトの許容度・円形チャートの SVG 描画までを記録しています。
read log →BrushShift ができるまで — 写真を 6 つの絵画スタイルに変える
写真を絵画風にするツールの開発ログ。 Sobel のエッジ抽出、 色を保ったままぼかす Bilateral、 k-means の減色、 浮世絵専用の配色への割り当て、 筆致の向きをそろえる処理までを素の JavaScript で組んだ記録です。
read log →HumScore ができるまで — 鼻歌を楽譜と MIDI にする
鼻歌を楽譜にするツールの開発ログ。 YIN によるピッチ検出、 Krumhansl-Schmuckler の調推定、 24 トライアドからのコード推定、 MIDI ファイルの書き出しと五線譜の SVG 描画までを記録しています。
read log →SonicStage ができるまで — 音楽を 6 テーマの映像にする
音楽ビジュアライザの開発ログ。 WebAudio の解析ノードから周波数・波形・音量・テンポを取り出し、 Canvas に 6 種類のテーマで描き分ける構成と、 テーマごとに配色を差し替える仕組みを記録しています。
read log →VibeCoder ができるまで — AI とペアプロ中の画面を作る
コーディング風の映像ジェネレーターの開発ログ。 4 ペインのエディタ画面に、 自前のトークナイザによる色分け、 アテンションのヒートマップ、 学習曲線を並べて、 配信の背景や動画素材として使える形にするまでを記録しています。
read log →[ ./archive ]
保留で観察しているログ
すぐに深追いしないサービスも、 判断材料として記録は残しています。
Regex道場 ができるまで — 正規表現をリアルタイムで可視化
「正規表現が分かりにくい」を解決するためにリアルタイムハイライト機能を実装。ブラウザネイティブRegExpのラップ設計・マッチ位置からのセグメント分割ロジック・道場アーキテクチャ3作目の開発記録。
read log →Git道場 ができるまで — TypeScript だけで Git を再現する
isomorphic-gitやmemfsを使わず、純粋TypeScriptだけでGitの状態機械を実装。コミットスナップショット設計・ブランチ切り替え・マージ処理の実装詳細と道場アーキテクチャ4作目の開発記録。
read log →AI言い訳ジェネレーター ができるまで — バイラル狙いのエンタメAIの設計と実装
AI 言い訳ジェネレーターの開発ログ。 遅刻や締切遅れの状況を入れると笑える言い訳が返るサービスについて、 企画の狙い、 AI への指示文の設計、 外しても不快にならないための工夫をまとめました。
read log →[ ./next_step ]
読んだら、 そのまま試すか 連絡する。
開発ログは記録のために残してありますが、 行き先は最終的にサービス本体か相談ページです。 次に動いて確かめてください。