ブログ
作ったものの仕組みや、作りながら調べたことを書いています。
-
録画の音が45ms遅れても直さなかった理由と、ブラウザの音の罠
ノイズの合成、効果音、動画への音の書き出し、録画への取り込みと、つやっとのサービスのうち5つが音を扱っています。試聴と書き出しで同じ関数を通す設計、時間の原点の決め方、AACとMP3の先頭の遅れへの逆向きの判断、iOSでの鳴らし方、耳で聞けないときの測り方をまとめました。
-
ブラウザでMP4を書き出す4通りの実装と、Safariが黙って止まる罠
ショート動画メーカー、チャットシアター、10秒だけ！、Rollshadeの4つは、どれもブラウザの中でMP4を作っています。WebCodecs、mp4-muxer、Mediabunny、MediaRecorderの使い分け、実際に出てくるファイル、ブラウザごとの差、実際に踏んだ罠を、コードと一緒にまとめました。
-
Cloudflare Pagesで9サイトを無料で回して踏んだ罠
つやっと本体とブラウザだけで動くツール群の9サイトを、Cloudflare Pagesの無料枠とtsuyatt.comのサブドメインで公開しています。pages.devの301がFunctionでしか書けない理由、_routes.jsonで無料枠を守る方法、_headersのno-cacheが効かずmax-age=14400になった件、CSPと解析ビーコン、ソフト404まで、実際に踏んだ順にまとめました。
-
画面に映らない文字が録画を壊した、10秒ゲーム集36本の舞台裏
スマホのブラウザで遊ぶと自動でMP4になる「10秒だけ！」を、Claude Codeと1か月半で36本作りました。最初の仕様書から直したところ、45本の企画のうち8本を捨てた理由、録画が途中で壊れた原因、cannon-esの物理や広告タグで踏んだ罠を、実際のコードと一緒に書きます。
-
右クリック中の左クリックはpointerdownに来ない。ブラウザ製エイム練習ゲームの1か月
ブラウザで遊べるエイム練習ゲーム「Aim Training」を、仕様書とClaude Codeで1か月かけて作り、審査に落ちてitch.ioで公開するまでの記録です。Pointer Lockとcm/360による入力、60Hzの固定ステップと当たり判定、ボットで決めたランク、低fpsで震えた銃などのつまずきを、実際のコードと一緒に書きました。
-
「全角コロン対応」の正規表現が半角コロン2つだった。チャット動画を120本作って直したこと
チャットシアターは、メッセージアプリ風の会話が1通ずつ届く様子を縦型のMP4にするツールです。時刻だけで画面が決まるCanvasの描画、静止画の予定だった動画メッセージ、そして自分で120本の動画を量産して初めて直った貼り付けのバグまで、成り立ちと手戻りを実際のコードと一緒に書きました。
-
「ざあざあ」が1秒20粒で頭打ちだった、録音ゼロの雨音ジェネレーター
ノイズダウンロードは、雨や焚き火など14種類の環境音を乱数から合成し、MP3やWAVで保存できます。1枚のHTMLのプロトタイプを1晩で本番にした経緯、雨あしを上げても雨が強くならなかった原因、本番だけ英語版が半分日本語になった原因を、実際のコードと一緒に書きました。
-
10週の見積もりが午後のうちに動いた、PDF入稿チェッカーの作り方と失敗
入稿前チェッカーは、印刷所に出すPDFの塗り足しや画像の解像度、RGBの混入をブラウザの中だけで調べます。仕様書だけのリポジトリから半日で動くものができ、そこから課金をやめ、指摘の打ち切りで誤判定し、英語圏へ向かうまでの経緯と、PDFの描画命令を自分で読むしくみを書きました。
-
ローポリの三角形の半分が、ほかの部品の中に埋まっていた
ボタン1つでリグ付きのローポリキャラを作るRollpolyの開発記です。部品を重ねただけのモデルは、三角形の50.2%が見えない面でした。manifold-3dで1つの立体にまとめた副作用、macOSのプレビューとGodotで崩れたGLB、ChromeとNodeでMath.sinが違った話まで書きます。
-
8回描いて1回しか効いていなかったprewarm。three.jsの技エフェクトがnpmになるまで
Rollshadeは、three.jsのゲームに炎の魔法や斬撃をコード1行で足せるnpmパッケージです。シェーダーのランダム生成サイトとして始まり、2度の方針転換を経て今の形になりました。その経緯と、事前コンパイルの空振り、WebGL2の黒画面、白飛びなど、WebGPUとTSLで踏んだ穴を実際のコードと一緒に書きます。
-
プレビュー用のシークを書き出しに流用したら、3フレームに2回が空振りしていた
ブラウザだけで縦型動画をMP4にするショート動画メーカーの成り立ちと、つまずいたところの記録です。0.08秒のしきい値でシークが空振りしていた書き出し、クリップの外に1本目の動画が映る不具合、読み込み前の画像とフォント、WebMの音の時間原点を、修正前後のコードと一緒にまとめました。