[ CATEGORY / 🚀 Astro ]

MATCHED_ITEMS: 198
[Astro] #198 VRMA MAKER — VRM のポーズを作って、並べて、VRMA にする（IK・タイムライン・足の固定・VR）
[2026/10/27]

[Astro] #198 VRMA MAKER — VRM のポーズを作って、並べて、VRMA にする（IK・タイムライン・足の固定・VR）

lain-lab.com の VRMA MAKER（three.js + three-vrm）の実装ガイド。正規化ヒューマノイドの回転でポーズを持つ方法、VRM 0.x の x・z の反転、キーフレームと slerp の補間、休めの姿勢が回転なしの VRMA の組み立て、手足の IK、腰を動かすときの足の固定、肘・膝の向きの回転、ポーズ一覧のサムネイル、WebXR（Quest）での球のつかみ方。
[Astro] #197 LEAD — VRM の手を引っ張って歩かせる（2 ボーン IK・追従歩行・VR のコントローラーとハンドトラッキング）
[2026/10/27]

[Astro] #197 LEAD — VRM の手を引っ張って歩かせる（2 ボーン IK・追従歩行・VR のコントローラーとハンドトラッキング）

lain-lab.com の LEAD（three.js + three-vrm）の実装ガイド。腕の解析的 IK、手の届く距離を超えた分で歩かせる追従、歩きモーションの再生速度、指の握り、頭の向き、WebXR のコントローラーのグリップ・レーザー、ハンドトラッキングのつまみ、手のモデルの配信。
[Astro] #196 VRMA EDIT — VRMA をブラウザで編集する（追加、編集、ポーズ/姿勢の変換）
[2026/10/26]

[Astro] #196 VRMA EDIT — VRMA をブラウザで編集する（追加、編集、ポーズ/姿勢の変換）

lain-lab.com の VRMA EDIT（three.js + three-vrm）の実装ガイド。VRMA（glTF）の読み書き、書き出して読み直すプレビュー、VRMA の休めの姿勢を正規化した座標へ直す式、VRM 0.x の x・z 反転、FALLOFF 付きのポーズ編集、別ファイルとのつなぎ、左右の入れ替え、Douglas–Peucker によるキーの間引きを説明。
[Astro] #195 POKE — VRM をクリックすると傾いて戻る（回転ばね・起き上がりこぼし・VRMA の上に重ねる）
[2026/10/26]

[Astro] #195 POKE — VRM をクリックすると傾いて戻る（回転ばね・起き上がりこぼし・VRMA の上に重ねる）

lain-lab.com の POKE（VRM をクリックして反応させるアプリ）の実装ガイド。減衰ばねの式と積分、足元を支点にした体の傾き、骨ごとの力の配り方、クリック判定、表情の重ね方、three-vrm-animation で VRMA を再生して揺れを足す順序、T ポーズの原因と対処、DRACOLoader の設定を解説。
[Astro] #194 RAGDOLL に VR 対応とガラス表現を足す（WebXR・transmission・レーザーで掴む）
[2026/10/26]

[Astro] #194 RAGDOLL に VR 対応とガラス表現を足す（WebXR・transmission・レーザーで掴む）

lain-lab.com の RAGDOLL に、ガラス表示と VR 対応（WebXR）を足した実装ガイド。transmission の設定、暗い背景で黒く見える問題、rig とコントローラー（matrixAutoUpdate が false）、掴むばねの共通化、canvas テクスチャのパネルとレイの当たり判定、VR での VRM 上限を解説。
[Astro] #193 Rapier と three.js で作る物理ラグドール「RAGDOLL」の実装（VRM 対応）
[2026/10/25]

[Astro] #193 Rapier と three.js で作る物理ラグドール「RAGDOLL」の実装（VRM 対応）

lain-lab.com の RAGDOLL（Rapier + three.js の物理ラグドール）の実装ガイド。Rapier 0.21 の球関節にモーターが無い問題と自前の PD トルク、蝶番の setLimits、固定刻み、kinematic body とばね関節で掴む仕組み、VRM のボーンから部品を作って正規化ボーンへ書き込む手順を解説。
[Astro] #192 Ruffle をセルフホストして作るブラウザ版 Flash プレイヤー「SWF Reel」の実装
[2026/10/25]

[Astro] #192 Ruffle をセルフホストして作るブラウザ版 Flash プレイヤー「SWF Reel」の実装

lain-lab.com の SWF Reel（Ruffle を用いたブラウザ版 Flash プレイヤー）の実装ガイド。Ruffle の読み込み設定、プレイヤーの動的生成、metadata の取得タイミング、traceObserver の罠、WebGL canvas のスクリーンショット対策、録画の仕様を解説。
[Astro] #191 VRM が粒子になって溶け、別の VRM が渦から組み上がる — 切り替え演出の実装と実測
[2026/10/25]

[Astro] #191 VRM が粒子になって溶け、別の VRM が渦から組み上がる — 切り替え演出の実装と実測

lain-lab.com の VRM 切り替え演出（VRM MELT）の実装記録。メッシュからの点の取り方、状態を持たないシェーダー、MToon への差し込み、点の大きさの上限、トップページへの組み込み順、Vite で public の JS を読む方法、詰まったこと、PC と Quest 3 の実測まで。
[Astro] #190 トップページの空を「今日の空」の計算に置き換える — 星・太陽・月と、視点の切り替え
[2026/10/24]

[Astro] #190 トップページの空を「今日の空」の計算に置き換える — 星・太陽・月と、視点の切り替え

lain-lab.com のトップページの空を、Sky Today の計算に置き換えた実装記録。skybox の項目として足す、環境光は元の絵に任せる、three.js のシーンを R3F に載せる、地平線の下を隠す、トーンマッピングを外す、視点切り替え（lookAt の落とし穴）、時間帯の色の二重掛けを止める。
[Astro] #189 GPUだけで数十万粒子を動かす NEBULA — マウスとQuest 3の手で払う星雲
[2026/10/23]

[Astro] #189 GPUだけで数十万粒子を動かす NEBULA — マウスとQuest 3の手で払う星雲

lain-lab.com の NEBULA の実装記録。GPUComputationRenderer による粒子の更新、5つの形とアトラクタの問題、力場、WebXR 対応、自動ベンチ、Quest 3 の実測（26万粒子で72Hz）、詰まったこと、確認できたことと未確認のことまで。
[Astro] #188 ブラウザで動くボイスチェンジャー — マイクの声を変え、ギターのエフェクターを並べる
[2026/10/23]

[Astro] #188 ブラウザで動くボイスチェンジャー — マイクの声を変え、ギターのエフェクターを並べる

lain-lab.com の Voice Changer の実装記録。マイクの取り込みとハウリング、ピッチシフトの仕組み、WAV の変換と保存、EQ と 8 種のペダルの作り方、ワウを画面のペダルで操作する方法、詰まったこと、確認できたことと未確認のことまで。
[Astro] #187 トップページの世界に風・雪・夜を足す 02 — ライトを目で見て決め、VR にも雪を降らせる
[2026/10/22]

[Astro] #187 トップページの世界に風・雪・夜を足す 02 — ライトを目で見て決め、VR にも雪を降らせる

lain-lab.com のトップページ（React Three Fiber と VRM）の天候シリーズ 2 回目。調整パネルの値の保存、スポットライトのワイヤーフレームと上面・側面図、床の高さのずれ、設定値を JSON に一本化した理由、VR での雪の量、風と雪の出方のランダム。決めていないことも書きます。
[Astro] #186 今日の空 — 太陽・月・星を計算して、全天 3D と Quest の VR で見る日課アプリ
[2026/10/22]

[Astro] #186 今日の空 — 太陽・月・星を計算して、全天 3D と Quest の VR で見る日課アプリ

lain-lab.com の新しいツール「今日の空」の実装記録。astronomy-engine での日の出・薄明・月齢の計算と検算、約 5000 個の星の投影、1 年の日の出・日の入りの図、three.js の全天 3D（全画面・キー操作）、星の色、天の川、星雲・星団、流れ星、日付アニメ、Quest の VR・MR。
[Astro] #185 トップページの世界に風・雪・夜を足す 01 — 髪・霧・雪を 1 つの風でつなぎ、調整パネルで決める
[2026/10/21]

[Astro] #185 トップページの世界に風・雪・夜を足す 01 — 髪・霧・雪を 1 つの風でつなぎ、調整パネルで決める

lain-lab.com のトップページ（React Three Fiber と VRM）に、風・雪・時間帯・スポットライトを足した実装記録の 1 回目。VRM の揺れ物への風、頂点シェーダーの雪、時刻で変わる明るさと空の色、金属の床にスポットライトが効かない理由、調整パネルを作った経緯と、まだ決まっていないこと。
[Astro] #184 ブラウザだけで動く .git 解析ツール — 重い理由と、中身を、読むだけで調べる
[2026/10/21]

[Astro] #184 ブラウザだけで動く .git 解析ツール — 重い理由と、中身を、読むだけで調べる

lain-lab.com の Git Inspector の実装記録。pack と idx の読み方、到達できるかの 3 区分、コミットごとの増えた容量、中身の推定、13 分 15 秒から 45 秒にした読み方、詰まったこと、確認できたことと未確認のことまで。
[Astro] #183 ブラウザだけで動く動画リサイズツール — 縦横比を保ったまま、大きさと容量を小さくする
[2026/10/20]

[Astro] #183 ブラウザだけで動く動画リサイズツール — 縦横比を保ったまま、大きさと容量を小さくする

lain-lab.com の Video Resize の実装記録。Mediabunny（WebCodecs）による変換、縦横の自動判定、大きさと画質の決め方、容量の上限から逆算する仕組み、詰まったこと、確認できたことと未確認のことまで。
[Astro] #182 ブラウザだけで動く EXE・DLL 解析ツール — 構造を読んで、機械語まで逆アセンブルする
[2026/10/20]

[Astro] #182 ブラウザだけで動く EXE・DLL 解析ツール — 構造を読んで、機械語まで逆アセンブルする

lain-lab.com の PE Inspector の実装記録。PE 形式のパーサー、pefile との突き合わせ、構造と16進ダンプの連動、文字列の抽出、インポートの位置ジャンプ、Capstone WASM による逆アセンブル、詰まったこと、確認できたことと未確認のことまで。
[Astro] #181 ブラウザだけで動く音量そろえツール — 曲の音量を、まとめて同じにする
[2026/10/19]

[Astro] #181 ブラウザだけで動く音量そろえツール — 曲の音量を、まとめて同じにする

lain-lab.com の Audio Gain の実装記録。ラウドネス（LUFS）の測定、True Peak の測り方、先読みリミッター、Mediabunny での書き出し、AAC のビットレートで詰まったこと、低音カットとハム除去、確認できたことと未確認のことまで。
[Astro] #180 ブラウザだけで動く音声カッター — 曲を切ってつないで、MP3・M4A・FLAC で書き出す
[2026/10/19]

[Astro] #180 ブラウザだけで動く音声カッター — 曲を切ってつないで、MP3・M4A・FLAC で書き出す

lain-lab.com の Audio Cutter の実装記録。mp3-editor からの作り直し、Mediabunny（WebCodecs）での読み込みと書き出し、つなぎ目のプチノイズ対策、自前のリサンプラ、無劣化の書き出し、F1 ヘルプ、見つけたバグ、確認できたことと未確認のことまで。
[Astro] #179 ブラウザだけで動くタグエディタ — 歌詞もカバーも、音質を変えずに書き換える
[2026/10/19]

[Astro] #179 ブラウザだけで動くタグエディタ — 歌詞もカバーも、音質を変えずに書き換える

lain-lab.com のタグエディタの実装記録。ffmpeg.wasm で MP3 の歌詞が消える問題、ID3v2 の直接書き換え、FLAC・Ogg・WAV の書き換え、「変更した項目だけ書く」方針、iTunes が書いたファイルで見つかった不具合と直し方、F1 ヘルプ、確認できたことと未確認のことまで。
[Astro] #178 ブラウザだけで動く動画エディタ — 1.4GB・27分の動画を、アップロードなしで切って書き出す
[2026/10/18]

[Astro] #178 ブラウザだけで動く動画エディタ — 1.4GB・27分の動画を、アップロードなしで切って書き出す

lain-lab.com の動画エディタの実装記録。Mediabunny（WebCodecs）を選んだ理由、タイムラインとプレビューの作り、書き出し（再エンコード・無劣化カット・GIF）、1GB 超の動画の扱い、自動保存と復元、実機で出たエラーと直し方、確認できたことと未確認のことまで。
[Astro] #177 監視室のモニタ壁で MSX・動画・SID を動かす — Quest 3 の VR で、壁がそのままメニューになる
[2026/10/17]

[Astro] #177 監視室のモニタ壁で MSX・動画・SID を動かす — Quest 3 の VR で、壁がそのままメニューになる

lain-lab.com のターミナルの monitor コマンドで入る、監視室のモニタ壁の実装記録。GLB のモニタを 28 枚に分けて、MSX・MP4・SID を映す方法、壁を UI にした設計、Quest で重くなった原因（レイキャスト）、BIG モード、既存の SID プレイヤーの流用と波形表示、確認できたことと未確認のことまで。
[Astro] #176 3D Gaussian Splatting Viewer — ブラウザだけで 3DGS を見て、切って、測って、VR でも見る
[2026/10/15]

[Astro] #176 3D Gaussian Splatting Viewer — ブラウザだけで 3DGS を見て、切って、測って、VR でも見る

lain-lab.com の 3D Gaussian Splatting Viewer の実装記録。.splat と 3DGS の .ply の読み込み、EWA 投影と基数ソート、球面調和関数（SH）、クロップ・計測・書き出し、WebXR による Quest 3 対応、独自の参照実装で描画を確かめた方法、確認できたことと未確認のことまで。
[Astro] #175 Draco まわりの不具合をまとめて修正 — 置き場所、VRM が壊れる原因、壊れても戻るアバター
[2026/10/14]

[Astro] #175 Draco まわりの不具合をまとめて修正 — 置き場所、VRM が壊れる原因、壊れても戻るアバター

lain-lab.com の不具合修正の記録。相対パスと末尾スラッシュで起きた Draco の 404、public/tool/draco への集約、gltf-transform が VRM 拡張だけが参照するテクスチャを捨てて参照がずれる問題、WiredAvatar のエラーバウンダリとデフォルトモデルへの切り替え、IndexedDB に残る壊れたモデルの自動削除、確認できたことと未確認のことまで。
[Astro] #174 VMD to VRMA — MMD のモーションを、ブラウザで VRM のアニメーションに変換する
[2026/10/14]

[Astro] #174 VMD to VRMA — MMD のモーションを、ブラウザで VRM のアニメーションに変換する

lain-lab.com の VMD to VRMA の制作記録。VMD と VRMA のつくり、ボーンの対応、ベジェ補間、MMD 空間での姿勢の組み立てと Z ミラー、腕の A スタンス補正でつまずいた点、足 IK から FK への焼き込み、VRMA の書き出し、無視するボーンのツリー表示、MMD と VRM を並べる比較ビュー、mmd_to_glb で服が透けていた原因（MMDToonMaterial の alphaTest）、確認できたことと未確認のことまで。
[Astro] #173 Pandoc Converter — Pandoc を WASM でブラウザに載せ、文書を変換する
[2026/10/13]

[Astro] #173 Pandoc Converter — Pandoc を WASM でブラウザに載せ、文書を変換する

lain-lab.com の Pandoc Converter の制作記録。Pandoc の WASM（約 58 MB）を gzip で 15.5 MiB にして配る方法、Worker とキャッシュ、設定を Pandoc に渡す形、公式のコードに手を入れた点、Pandoc の docx が日本語に向かない理由と zip を書き換える仕上げ、HTML のテーマの差し替え、PDF が作れない件、文字コードの判定、プレビューと構造ビュー、重さの測定、ハマりどころ、確認できたことと未確認のことまで。
[Astro] #172 Elevation Profile — 地図に線を引いて、標高の断面図を描く
[2026/10/11]

[Astro] #172 Elevation Profile — 地図に線を引いて、標高の断面図を描く

lain-lab.com の Elevation Profile の制作記録。Terrain Explorer の標高タイルの読み取りを流用した方法、線を刻んで双線形補間で標高を読む仕組み、データなし（海）の扱い、断面図の描画と PNG 書き出し、地図の操作、モックタイルでのテスト、サイトに入れて確認できたことと、未確認のことまで。
[Astro] #171 DOT Graph Visualizer — Graphviz WASM で DOT を描き、つながりを光らせる
[2026/10/11]

[Astro] #171 DOT Graph Visualizer — Graphviz WASM で DOT を描き、つながりを光らせる

lain-lab.com の DOT Graph Visualizer の制作記録。WASM が中に入った viz-global.js を script タグで読む方法、エラー行の表示、パンとズーム、PNG の書き出しと背景の透過、日本語ラベルの幅の問題と余白での逃げ方、ノードのクリックでつながりを強調する仕組み、Astro で踏んだハマりどころ、未確認のことまで。
[Astro] #170 Subtitle Converter — SRT / VTT / ASS / SBV / LRC の変換とズレ補正(SJIS対応)
[2026/10/11]

[Astro] #170 Subtitle Converter — SRT / VTT / ASS / SBV / LRC の変換とズレ補正(SJIS対応)

lain-lab.com の Subtitle Converter の制作記録。5 つの形式を、開始・終了・本文の形にそろえて読む方法、文字コードの判定の順番とスコア、Shift_JIS の書き出し表を TextDecoder から作る方法、2 点指定の線形補正、ビープ音つきのサンプルの作り方、Astro で踏んだ 2 つのハマりどころ、未対応の機能まで。
[Astro] #169 PSD / PSB Viewer — レイヤー一覧ビューアを、自前パーサーで合成・マスク・書き出しまで作り直し、1GB超の PSB を開く
[2026/10/10]

[Astro] #169 PSD / PSB Viewer — レイヤー一覧ビューアを、自前パーサーで合成・マスク・書き出しまで作り直し、1GB超の PSB を開く

lain-lab.com の PSD / PSB Viewer の作り直しの記録。ファイルを 4MB の窓で読む方法、RLE の行オフセット、プレビュー用の間引きデコード、レイヤーツリー、ブレンドとクリッピングとマスクの合成、ベクターマスクのパス演算、元コードで見つけた不具合、公開テストファイルとの比較結果、未対応の機能まで。
[Astro] #168 サイトマップ #04 — 惑星に陰影とホログラムを足し、霧を 2層にして、VR の記事ボードを縦長にして完成
[2026/10/9]

[Astro] #168 サイトマップ #04 — 惑星に陰影とホログラムを足し、霧を 2層にして、VR の記事ボードを縦長にして完成

Astro と three.js のサイトマップ（/sitemap-3d/）の仕上げの記録。InstancedMesh のまま、onBeforeCompile で陰影と縁の光を足す方法、ホログラム風の縞、背景の霧を 2 層にして流す方法、DUST の常時オンと記事数の表示、VR の記事ボードとカードの縦拡張、ハマりどころまで。
[Astro] #167 サイトマップ #03 — VR で星を渡り歩き、パネルと記事ボードで、記事まで読めるところまで
[2026/10/9]

[Astro] #167 サイトマップ #03 — VR で星を渡り歩き、パネルと記事ボードで、記事まで読めるところまで

Astro と three.js のサイトマップ（/sitemap-3d/）の VR 化の実装記録。WebXR のカメラ（dolly）、世界の縮尺と星の距離、角度で取る当たり判定、ワープと演出、パネルの壁、MDX から JSON を作る記事ボード、ハマりどころ（遷移でフリーズ、https、ファイル名の角括弧）まで。
[Astro] #166 サイトマップ #02 — 星に光を足して、霧と粒子と検索を入れ、VR へつなぐところまで作り込み
[2026/10/9]

[Astro] #166 サイトマップ #02 — 星に光を足して、霧と粒子と検索を入れ、VR へつなぐところまで作り込み

Astro と three.js のサイトマップ（/sitemap-3d/）の続編。後光・星雲（ノイズを 1 回だけ焼く天球）・グラデーションの線・流れる光の粒・検索とライトアップ・スマホの MENU・ステージ高さの修正・VR 化の方針と、ハマりどころの記録です。
[Astro] #165 サイトマップ #01 — 3D の星座と、JavaScript なしの一覧で、サイト全体を見渡せるページを作成
[2026/10/9]

[Astro] #165 サイトマップ #01 — 3D の星座と、JavaScript なしの一覧で、サイト全体を見渡せるページを作成

Astro と three.js で作ったサイトマップ（/sitemap-3d/ と /sitemap/）の実装記録。メニューの JSON から星座を配置する方法、ワープ移動、記事 831 本を星屑にして、タイトルからアプリに紐づける仕組み、記事・作品・ショートの一覧、JavaScript なしで切り替える Tree 表示、ClientRouter（ビュー遷移）で 3D ページが動かなくなる問題と対処、ハマりどころまで。
[Astro] #164 Terrain Explorer — 地理院タイルの地形を立体にして、VRで歩くツールを作成
[2026/10/4]

[Astro] #164 Terrain Explorer — 地理院タイルの地形を立体にして、VRで歩くツールを作成

Astro のページ 1 枚と three.js（約 1,300 行）で作った地形ビューアの実装記録。標高タイル（PNG の色 = 標高）の読み方、Web メルカトルの座標、地図の自作、標高の格子から面を作る方法、足元だけ細かい地面を読み足すチャンクの仕組み、遠景との継ぎ目の処理、WebXR での模型と実寸の切り替え、偽のタイルサーバーを使った試験、ハマりどころまで。
[Astro] #163 Office Inspector — Word / Excel / PowerPointの中身を覗くツールを作成
[2026/10/4]

[Astro] #163 Office Inspector — Word / Excel / PowerPointの中身を覗くツールを作成

Astro のページ 1 枚と素の JavaScript（約 7,600 行、外部ライブラリなし）で作った Office ファイルの内部構造ビューアの実装記録。フィールド単位でバイト範囲を持つ ZIP パーサ、目次に無いエントリの検出、バイト列のまま読む XML パーサ（配列の構造体・名前空間の正規化）、パート同士の関係の辿り方、変更履歴・隠し文字・非表示シートの見つけ方、旧形式の入れ物（CFB）と VBA の展開、パスワードの復号、python のライブラリとの突き合わせ、ハマりどころまで。
[Astro] #162 PDF Inspector — PDFの中身を覗くツールを作成
[2026/10/3]

[Astro] #162 PDF Inspector — PDFの中身を覗くツールを作成

Astro のページ 1 枚と素の JavaScript（約 12,900 行、外部ライブラリなし）で作った PDF 内部構造ビューアの実装記録。バイト範囲を持つパーサ、xref の読み取りと全体走査の突き合わせ、自前の Inflate、描画エンジン（行列・状態スタック・レイヤー合成）、ステップ実行とクリックからの逆引き、フォントの輪郭の解読（TrueType / CFF / Type1）、日本語 CMap の CID を計算で求める方法、電子署名の検証、poppler との画素比較、ハマりどころまで。
[Astro] #161 過去作品ギャラリー — Three.jsのカードを扇とリストで並べ、拡大するとサムネが動画になる
[2026/10/3]

[Astro] #161 過去作品ギャラリー — Three.jsのカードを扇とリストで並べ、拡大するとサムネが動画になる

Astro のページ 1 枚と Three.js だけで作った作品ギャラリーの実装記録。canvas テクスチャのカード、扇の角度計算と臨界減衰バネによる回転、扇とリストの切り替え（位置の lerp と回転の slerp）、拡大表示、暗い部屋のピンスポット、拡大カードだけ動画にする仕組み（同じ canvas に動画フレームを描く）、ウィンドウ表示の黒帯対策、サムネ・動画の撮影と ffmpeg の再圧縮、ハマりどころまで。
[Astro] #160 WINAMP X2 — トップページに置いたWINAMP風プレイヤーと、VRMのダンス連動（自作.vrmaにも対応）
[2026/10/2]

[Astro] #160 WINAMP X2 — トップページに置いたWINAMP風プレイヤーと、VRMのダンス連動（自作.vrmaにも対応）

Astro のトップページに WINAMP 風プレイヤーを作った実装記録。ページ内に出すためのネイティブアプリ登録、4 枚の窓のドラッグ・吸着・一体移動・リサイズ、スペクトラムと 10 バンド EQ、DEFAULT / USER のプレイリスト（IndexedDB）、連続再生とリピート・シャッフル、CSS 変数によるスキン切替に加えて、既存の wired-dance-sync で VRM をダンスさせる仕組み、ユーザーの .vrma を IndexedDB に保存して blob URL で踊らせる方法、再生中のダンス切替、play コマンドとの二重再生の防止、ハマりどころまで。
[Astro] #159 WASM Inspector — .wasmの中身をバイト単位で覗く（WAT・hex・DWARFソース行の3方向連動）
[2026/10/1]

[Astro] #159 WASM Inspector — .wasmの中身をバイト単位で覗く（WAT・hex・DWARFソース行の3方向連動）

外部ライブラリなしの自前WASMパーサーと逆アセンブラで作る、ブラウザ完結のWASMバイナリビューアの実装記録。命令ごとにバイトオフセットを持たせる理由、JSでのLEB128（ビット演算を使わない理由）、プレフィックス命令、wabtとの全命令突き合わせ、Canvasの仮想スクロール、バイト→命令の逆引き、オペコードのスキャンによる機能判定、DWARF .debug_lineの状態機械（v4/v5、codeセクション基準のアドレス、墓石アドレス）、llvm-dwarfdumpとの突き合わせ、clang -O1の定数畳み込みとswitchの化け方、540命令の説明をルールで生成する方法、ハッシュリンクが効かない件、AstroでCSSが古いまま残る問題まで。
[Astro] #158 AST Inspector — Tree-sitter WASMで構文木を覗く（Queryとインクリメンタルパースの可視化付き）
[2026/9/30]

[Astro] #158 AST Inspector — Tree-sitter WASMで構文木を覗く（Queryとインクリメンタルパースの可視化付き）

web-tree-sitter 0.27（Tree-sitter WASM）と公式文法パッケージで作るブラウザ完結の構文木ビューアの実装記録。0.25以降の名前付きexport、公式npmパッケージ同梱の.wasm、TreeCursorでの走査、インデックスがUTF-16単位で返る件、ERRORとMISSINGノード、Pythonのインデントエラーが出ない理由、Queryと述語、highlights.scmの優先順位、tree.edit()とgetChangedRanges()、ノードIDで再利用を判定する方法、エラーで再利用率が落ちる様子、AstroでCSSが古いまま残る問題まで。
[Astro] #157 Font Inspector — HarfBuzz WASMでフォントの中身を覗く（TrueTypeヒンティングVMの逆アセンブラ付き）
[2026/9/29]

[Astro] #157 Font Inspector — HarfBuzz WASMでフォントの中身を覗く（TrueTypeヒンティングVMの逆アセンブラ付き）

harfbuzzjs（HarfBuzz 14.5.0 WASM）とDataViewの自前パーサーで作るブラウザ完結のフォント解析ツールの実装記録。sfntのテーブルディレクトリ、TTF/OTF/TTC/WOFFの読み分け、glyphToPathとSVGのY軸反転、ffi合字や縦書きのシェーピング、maxpを「VMのスペック表」として読む方法、fpgm/prep/glyf命令の逆アセンブルとFDEF/CALLの関数番号推定、CID-keyed CFFのcharset、AstroでCSSが古いまま配られる問題の回避まで。
[Astro] #156 SameBoy WASM — Game Boyエミュレーターコアの自前EmscriptenビルドとAstro組み込み
[2026/9/27]

[Astro] #156 SameBoy WASM — Game Boyエミュレーターコアの自前EmscriptenビルドとAstro組み込み

SameBoyのLibretroコアをEmscriptenでWebAssembly（.wasm）へコンパイルし、Astroページ上で動かす手順の記録。Makefile内の`-Wl,--no-undefined`削除、ビルド出力される.bcファイルの正体、EmulatorJSの`EJS_coreUrl`によるコア差し替え、`ja.json`404エラー対策、サーバーにROMを置かないBlob URLでの安全なローカルROMロード実装まで詳しく解説。
[Astro] #155 Power Mac Emulator — DingusPPC WASMでMac OS 8.1をブラウザ起動（おまけ：Copland D11E4ランチャー）
[2026/9/27]

[Astro] #155 Power Mac Emulator — DingusPPC WASMでMac OS 8.1をブラウザ起動（おまけ：Copland D11E4ランチャー）

DingusPPC（mihaip版WASMビルド）を自前のWorkerで動かす実装記録。C++から呼ばれるworkerApiの口、SharedArrayBufferのロックによる入力受け渡し、OPFS SyncAccessHandleでのディスクI/O、素のHFSイメージにドライバ入りパーティションマップを付け足して起動する方法、ログの洪水対策、Copland版（mist64）との設計の違いまで。
[Astro] #154 Tracker Player — libopenmpt WASMでMOD/XM/S3M/ITをブラウザ再生、パターンをリアルタイム表示
[2026/9/26]

[Astro] #154 Tracker Player — libopenmpt WASMでMOD/XM/S3M/ITをブラウザ再生、パターンをリアルタイム表示

libopenmpt（WASM）＋AudioWorkletによるトラッカー音楽プレイヤーの実装記録。パターンの整形表示（format/highlight API）、前後パターンを連結した連続スクロール、Emscriptenが公開していない関数テーブルを拾ってext interactiveインターフェースでチャンネルミュートを実現する方法、Astroのscoped CSSがinnerHTML要素に当たらない問題まで。
[Astro] #153 アナログ時計コンポーネントの高度カスタマイズ化 — JSONアセット管理、IndexedDBスキンギャラリー、SE/時報対応
[2026/9/25]

[Astro] #153 アナログ時計コンポーネントの高度カスタマイズ化 — JSONアセット管理、IndexedDBスキンギャラリー、SE/時報対応

Astro + TypeScript + SVG によるインタラクティブなアナログ時計の開発記録。JSONアセット管理、 IndexedDB を用いた背景画像ギャラリー、文字盤デザインやカラーのリアルタイム変更、時報（正時 chime）・SE再生機能の実装手順を解説。
[Astro] #152 E2E自動テストとリアルタイム開発診断UIの実装 — Playwrightによる非同期3Dアセット404検知とDevモード警告ボタン
[2026/9/20]

[Astro] #152 E2E自動テストとリアルタイム開発診断UIの実装 — Playwrightによる非同期3Dアセット404検知とDevモード警告ボタン

Astro + Three.js プロジェクトにおける E2E 自動テストと開発者体験（DX）向上の記録。Playwright による待機処理と 404 アセット検知、/test-result.json の保存、Dev モードでの動的警告 UI（[ERROR] ボタン・ダイアログ・ターミナルログ連携）の構築手順を解説。
[Astro] #151 ウィンドウマネージャーの大規模リファクタリング — 7ファイルのコピペ地獄から4ファイル統一設計へ
[2026/9/15]

[Astro] #151 ウィンドウマネージャーの大規模リファクタリング — 7ファイルのコピペ地獄から4ファイル統一設計へ

React ウィンドウマネージャーのリファクタリング記録。BaseWindow 共通コンポーネントへのドラッグ/リサイズ/設定パネル統合、Context による全ウィンドウ一元管理、?embed パラメータでの iframe 内レイアウト制御、Astro SSG でのクライアントサイド embed 検出、循環参照の context.ts 分離による解消を解説。
[Astro] #150 CORS Bulk Diagnostics & Inspector — ブラウザ直接実行型CORSチェッカーの実装とフロントエンド完結の設計思想
[2026/9/15]

[Astro] #150 CORS Bulk Diagnostics & Inspector — ブラウザ直接実行型CORSチェッカーの実装とフロントエンド完結の設計思想

Web API開発やフロントエンド構築で頻出するCORSエラーを多角的に診断するブラウザ完結型ツールの開発記録。Proxyを挟まない直接リクエストによる正確なCORS判定、一括バルクテスト、Web Crypto API (SHA-256) を利用したマスターキー機能、Express/Cloudflare Workers/Nginx向けのCORS修正スニペット生成機能、そしてAstroで innerHTML による動的描画を行った際にスコープ付きCSSが効かない問題（data-astro-cid）の解決手法を解説。
[Astro] #149 Copland OS風スタートメニューの実装 — JSON駆動型多段カスケードメニューとカスタムイベント連携
[2026/9/14]

[Astro] #149 Copland OS風スタートメニューの実装 — JSON駆動型多段カスケードメニューとカスタムイベント連携

Astroコンポーネントにおける JSON データ駆動のカスケードメニュー実装記録。多段階のネスト構造表示、画面外はみ出し防止のホバー位置補正、data-action 属性を介したカスタムイベント発火（ターミナル起動やファイルマネージャー連携）、href='#' 指定時のページハッシュ化・リロードループ回避テクニックを解説。
[Astro] #148 インボリュート歯車ジェネレーター — 歯形生成・噛み合わせ・ヘリカル化・DXF出力の実装記録
[2026/9/13]

[Astro] #148 インボリュート歯車ジェネレーター — 歯形生成・噛み合わせ・ヘリカル化・DXF出力の実装記録

Three.js (ESM) による標準インボリュート歯形生成（基礎円・歯先円・歯元円、圧力角対応）、2次ベジェによる歯元フィレット近似、2〜5段の歯車列における軸間距離・角速度比・噛み合い位相の自動計算、Z方向にひねりを加えたはすば歯車の自前ロフト生成（ExtrudeGeometryにはない機能）、LWPOLYLINE/CIRCLEによるDXFエクスポート、vrm-to-mmd.astroのUIパターンを踏襲したAstro移植までを解説。動的生成DOMに対するAstroのスコープ付きCSSの罠についても触れる。
[Astro] #147 DuckDB WASM をブラウザで動かす — CSV / Parquet 高速集計アナライザーの実装記録
[2026/9/13]

[Astro] #147 DuckDB WASM をブラウザで動かす — CSV / Parquet 高速集計アナライザーの実装記録

@duckdb/duckdb-wasm + React による完全ブラウザ内データ解析ツールの実装。DuckDB WASM の初期化（Web Worker + jsDelivr CDN バンドル選択）、registerFileHandle による大容量ファイルのゼロコピー登録、Arrow 形式クエリ結果の JSON 変換、Chart.js 5種グラフ可視化（BAR / LINE / PIE / SCATTER）、複数ファイル同時登録と JOIN テンプレート生成、COPY TO + copyFileToBuffer による Parquet エクスポートまでを解説。
[Astro] #146 ONNX Runtime Web + RMBG-1.4 による Background Remover 実装記録と断念の理由
[2026/9/13]

[Astro] #146 ONNX Runtime Web + RMBG-1.4 による Background Remover 実装記録と断念の理由

React + ONNX Runtime Web (WASM) で RMBG-1.4 モデルを使った背景除去ツールの実装を試みた記録。@imgly/background-removal の npm 依存関係競合と CDN パス不整合、ESM import 制約による詰まりを経て、AiUpscaler と同一アーキテクチャ（ONNX Runtime グローバル + React コンポーネント）に切り替え。前処理の letterbox パディング・ImageNet mean/std 正規化・Canvas drawImage バイリニア補間まで実装したが、オンラインサービスと比較した精度差が埋まらず断念。
[Astro] #144 ONNX Runtime Web と Real-ESRGAN で構築するブラウザ完結型 AI 画像アップスケーラー — 実装記録
[2026/9/12]

[Astro] #144 ONNX Runtime Web と Real-ESRGAN で構築するブラウザ完結型 AI 画像アップスケーラー — 実装記録

WebAssembly にコンパイルされた ONNX Runtime と超解像ニューラルネットワークモデル (Real-ESRGAN) を組み合わせ、ブラウザ上で完全にローカル動作する AI 画像アップスケーラーの構築手法を解説。RGB テンソル前処理、WASM マルチスレッド制御、高精度キャンバス描画、およびコンソールログ統合型の 3 カラム UI 設計をまとめています。
[Astro] #143 FluidSynth WASM と Web Audio API で構築する SoundFont / MIDI プレイヤー — Piano Roll ビジュアライザー実装記録
[2026/9/12]

[Astro] #143 FluidSynth WASM と Web Audio API で構築する SoundFont / MIDI プレイヤー — Piano Roll ビジュアライザー実装記録

WebAssembly にコンパイルされた FluidSynth と Web Audio API を組み合わせ、ブラウザ単体で MIDI ファイルと SoundFont を再生する Web アプリケーションの構築手法を解説。自作 SMF パーサー、AudioContext と描画フレームを同期させる Tick 補間処理、大容量 SF2 の IndexedDB キャッシュ管理、およびデバッグ時のハマりポイントをまとめています。
[Astro] #145 pixi-live2d-display と PixiJS で構築するブラウザ完結型 Live2D Model Viewer — 実装記録
[2026/9/12]

[Astro] #145 pixi-live2d-display と PixiJS で構築するブラウザ完結型 Live2D Model Viewer — 実装記録

Live2D Cubism 2.1 / 3 / 4 対応のモデルビューアをブラウザ上に構築する手法を解説。pixi-live2d-display のモデルロードパイプライン、JSZip による ZIP 内ネスト構造の自動解決、focusController / eyeBlink / breath サブシステムのダミーオブジェクト差し替えによるトグル実装、Cubism 4 の _model.parameters 経由のパラメータスライダー生成、PIXI.Sprite による背景画像合成までをまとめています。
[Astro] #142 Web Audio API で構築するブラウザ完結型レトロシンセサイザー & FXエンジン — SynthRackGenerator v1.0 の実装記録
[2026/9/11]

[Astro] #142 Web Audio API で構築するブラウザ完結型レトロシンセサイザー & FXエンジン — SynthRackGenerator v1.0 の実装記録

ブラウザ単体で動作するレトロサウンドジェネレーター SynthRackGenerator v1.0 の技術構成を解説。AudioNode による合成パイプライン、OfflineAudioContext を用いた即時 WAV レンダリング、Canvas2D オシロスコープ / FFT アナライザー、8ステップシーケンサー、および LocalStorage / URL Hash を利用したパッチデータ共有機構の実装記録。
[Astro] #141 Canvas2D × fillRect ドット絵で構築するブラウザ完結型レトロアーケード — PONG・平安京エイリアン・スペースインベーダーの実装記録
[2026/9/11]

[Astro] #141 Canvas2D × fillRect ドット絵で構築するブラウザ完結型レトロアーケード — PONG・平安京エイリアン・スペースインベーダーの実装記録

PROTOCOL.LAIN 内のフローティングウィンドウ「LAIN RETRO ARCADE」に、PONG・平安京エイリアン・スペースインベーダーの 3 タイトルを Canvas2D で実装。8×8 ドットスプライトを数値配列で定義し fillRect で 1 ドットずつ描画する手法、グリッドベースの穴掘りメカニクス、BFS を排した直線+視線AI、ビットマップ破壊可能シールドなど、各ゲーム固有の技術課題と解決策を記録。
[Astro] #140 IndexedDB × Dexie.js で Web ターミナルに壁紙キャッシュを実装する — Blob 永続化と iframe 透過調整ログ
[2026/9/10]

[Astro] #140 IndexedDB × Dexie.js で Web ターミナルに壁紙キャッシュを実装する — Blob 永続化と iframe 透過調整ログ

Astro / React で構築した Web ターミナルウィンドウに壁紙設定機能を実装。Dexie.js の db.textures テーブルによる Blob データ保持、URL.createObjectURL による動的展開、iframe/xterm.js 透過時の描画トラブル解決とローカル検証モックの構築について解説。
[Astro] #139 Canvas × Web Worker で超高速ブラウザ PCAP アナライザを作る — メモリ効率化とリアルタイムフィルタリング実装記録
[2026/9/9]

[Astro] #139 Canvas × Web Worker で超高速ブラウザ PCAP アナライザを作る — メモリ効率化とリアルタイムフィルタリング実装記録

ブラウザ上で動作する Wireshark 風パケットアナライザの開発ログ。Web Worker によるバイナリ解析と Float64Array バッファ転送、Canvas 2D を用いた数万パケットの仮想スクロール描画、インデックスマッピングによるリアルタイムフィルタリングのハマりポイントと実装を徹底解説。
[Astro] #138 WASM × Web Audio API で FM音源（OPL3/OPN2）を鳴らそうとして地雷を踏み抜いた話 — 音が出ない4大原因と実装全記録
[2026/9/9]

[Astro] #138 WASM × Web Audio API で FM音源（OPL3/OPN2）を鳴らそうとして地雷を踏み抜いた話 — 音が出ない4大原因と実装全記録

Emscripten / WebAssembly と Web Audio API (AudioWorklet) を組み合わせた Sound Blaster (OPL3) / Mega Drive (OPN2) FM音源プレイヤー開発の失敗・ハマりポイントログ。内蔵バンク、スコープ制限、ポインタオフセット、サンプルレート問題など音が出ない4大原因を徹底解剖。
[Astro] #137 Bz-Style Binary Editor — ブラウザ完結型16進数バイナリエディタ & ワイルドカード検索の実装
[2026/9/9]

[Astro] #137 Bz-Style Binary Editor — ブラウザ完結型16進数バイナリエディタ & ワイルドカード検索の実装

ブラウザ完結型バイナリエディタ「Bz-Style Binary Editor」の技術解説。HTML5 Canvasを用いた仮想スクロール描画、HEX/TEXTワイルドカード検索エンジン、Data Inspector、Bitmap View、ショートカット操作・ヘルプモーダルの実装詳細。
[Astro] #136 File Inspector — ブラウザ完結型バイナリ解析・メタデータ抽出・拡張子偽装検知ツール
[2026/9/8]

[Astro] #136 File Inspector — ブラウザ完結型バイナリ解析・メタデータ抽出・拡張子偽装検知ツール

ブラウザ完結型ファイル解析・検証ツール「File Inspector」の技術解説。マジックバイト判定、拡張子不一致警告、Web Crypto API/SparkMD5ハッシュ計算、ExifReaderメタデータ解析、PNG/JPEGのEOF外隠しデータ検出、ヘキサダンプ表示の実装詳細。
[Astro] #135 Audio Converter v1 — FFmpeg WASMによるブラウザ完結型オーディオコンバーター
[2026/9/8]

[Astro] #135 Audio Converter v1 — FFmpeg WASMによるブラウザ完結型オーディオコンバーター

FFmpeg WASMによるブラウザ完結型オーディオコンバーターの技術解説。6フォーマット対応、ビットレート/サンプルレート/チャンネル制御、入出力波形比較、バッチ変換、Opusのネイティブエンコード実装詳細。
[Astro] #134 SQLite Viewer v1 — sql.js WASMによるブラウザ完結型SQLiteデータベースビューア/エディタ
[2026/9/8]

[Astro] #134 SQLite Viewer v1 — sql.js WASMによるブラウザ完結型SQLiteデータベースビューア/エディタ

sql.js WASMによるブラウザ完結型SQLiteビューア/エディタの技術解説。テーブルデータ表示、スキーマ解析、SQLエディタ、CSV/JSONエクスポート、DB情報パネル、テーブル検索フィルタの実装詳細。
[Astro] #133 Text Extractor v1 — Tesseract OCR + Whisper STT デュアルモードのブラウザ完結型テキスト抽出ツール
[2026/9/8]

[Astro] #133 Text Extractor v1 — Tesseract OCR + Whisper STT デュアルモードのブラウザ完結型テキスト抽出ツール

Tesseract.js WASMによる多言語OCRと、Whisper ONNX WASMによる音声テキスト起こしを、タブ切替UIで共存させたブラウザ完結型ツールの技術解説。モデルの遅延ロード、AudioContextによる音声デコード、Astroスコープドスタイルの制約まで。
[Astro ] #132 OPL3 Player v1 - Nuked-OPL3 WASMとAudioWorkletで.dro (OPL3) プレイヤーをゼロから実装した記録
[2026/9/7]

[Astro ] #132 OPL3 Player v1 - Nuked-OPL3 WASMとAudioWorkletで.dro (OPL3) プレイヤーをゼロから実装した記録

Nuked-OPL3のエミュレーションコアをWASM化し、AudioWorklet経由で.droファイルを再生するWebAudioプレイヤーの開発記録。関数名の難読化や非同期キュー、128サンプル単位の精密同期バグの克服を解説。
[Astro] #131 SID Player v3.2 — RSID IRQ駆動再生対応・CIA1/VIC-II エミュレーション追加
[2026/9/7]

[Astro] #131 SID Player v3.2 — RSID IRQ駆動再生対応・CIA1/VIC-II エミュレーション追加

SID PlayerにRSID IRQ駆動再生を追加。C64カーネル環境構築、手動IRQトリガー、CIA1/VIC-IIエミュレーション実装。playAddr=0のRSIDファイル対応。デバッグ過程の技術記録。
[Astro] #130 Bitmap to SVG Tracer — esm-potrace-wasm によるブラウザ完結型ラスタ→ベクタSVG変換ツール
[2026/9/7]

[Astro] #130 Bitmap to SVG Tracer — esm-potrace-wasm によるブラウザ完結型ラスタ→ベクタSVG変換ツール

esm-potrace-wasmによるブラウザ完結型Bitmap→SVG変換ツール。PNG/JPEG/WebP等のラスタ画像をベクタSVGに自動変換。B/Wトレース・カラーポスタライズ対応。パラメータ調整・Before/After比較・カラーパレット抽出・SVGダウンロード。
[Astro] #129 Camera RAW Viewer — libraw-wasm によるブラウザ完結型カメラRAWファイルデコード・プレビュー・書き出しツール
[2026/9/6]

[Astro] #129 Camera RAW Viewer — libraw-wasm によるブラウザ完結型カメラRAWファイルデコード・プレビュー・書き出しツール

libraw-wasmによるブラウザ完結型カメラRAWビューア。Canon CR2・Nikon NEF・Sony ARW等500+フォーマット対応。EXIF/GPS/レンズ情報表示、RAW再現像パラメータ調整、バッチ変換、JPEG/PNG/WebP書き出し。
[Astro] #128 VRM Crowd Benchmark — @webxr-jp/avatar-optimizer によるVRMアバター多体表示の最適化と限界検証
[2026/9/6]

[Astro] #128 VRM Crowd Benchmark — @webxr-jp/avatar-optimizer によるVRMアバター多体表示の最適化と限界検証

@webxr-jp/avatar-optimizerによるVRMアバター最適化のベンチマークツール。30種のVRMを最大57体同時表示し、Draw Calls 65%削減・FPS 70%向上を実測。PC/Meta Quest 3でのWebGL多体表示の限界を検証。
[Astro] #127 Archive Manager — libarchive.js & JSZipによるブラウザ完結型アーカイブ展開・文字化け自動修復ツール
[2026/9/5]

[Astro] #127 Archive Manager — libarchive.js & JSZipによるブラウザ完結型アーカイブ展開・文字化け自動修復ツール

libarchive.js WASMとJSZipによるブラウザ完結型アーカイブマネージャー。ZIP, 7z, RAR, tar等の閲覧・抽出、Windows特有のShift-JIS文字化け修復、ZIP爆弾・パス・トラバーサル等のセキュリティ診断、ブラウザ内プレビューを搭載。
[Astro] #126 HEIC / HEIF Image Converter — libheif WASMによるブラウザ完結型バッチ変換ツール
[2026/9/5]

[Astro] #126 HEIC / HEIF Image Converter — libheif WASMによるブラウザ完結型バッチ変換ツール

libheif WASMによるHEIC/HEIFからJPEG/PNG/WebPへのブラウザ完結変換ツール。バッチ一括変換、サムネイルグリッド表示、サイズ可変スライダー、Canvas pan/zoomプレビュー、JSZipによるZIP一括ダウンロード。ファイルはサーバーに送信されません。
[Astro] #125 Photo Editor — WebGLシェーダーによるブラウザ完結型フォトエディタを実装
[2026/9/5]

[Astro] #125 Photo Editor — WebGLシェーダーによるブラウザ完結型フォトエディタを実装

WebGLシェーダーパイプラインによるリアルタイム画像調整ツール。8種類の基本調整、4チャンネルトーンカーブ、3D LUT(.cube)、ビネット/グレイン、フィルムプリセット8種、クロップ/リサイズ、Undo/Redo。サーバー不要・ブラウザ完結。
[Astro] #124 STEP / IGES / BREP 3D Viewer v2 — 測定機能の拡張・肉厚/勾配/曲率解析・分解図表示を実装
[2026/9/4]

[Astro] #124 STEP / IGES / BREP 3D Viewer v2 — 測定機能の拡張・肉厚/勾配/曲率解析・分解図表示を実装

Three.js + occt-import-jsによるSTEP/IGES 3D Viewerのv2アップデート。マルチモード測定（距離・角度・面・パーツ体積）、肉厚/勾配/曲率の各種3D解析ヒートマップ、分解図（Explode View）機能を実装。
[Astro] #123 GDAL Converter — gdal3.js WASM によるブラウザ完結型 GISデータ変換・可視化ツール
[2026/9/3]

[Astro] #123 GDAL Converter — gdal3.js WASM によるブラウザ完結型 GISデータ変換・可視化ツール

gdal3.js（GDAL C/C++ライブラリのEmscripten WASMビルド）をブラウザに組み込み、ドロップされたGISファイルのメタデータ表示・フォーマット変換・地図プレビューを実現。ogr2ogr/gdal_translate/gdalwarpの各APIをブラウザ内で実行し、ベクタ9形式・ラスタ6形式の相互変換とCRS再投影をサーバー不要で完結。
[Astro] #122 IFC Viewer — web-ifc WASM によるブラウザ完結型 建築BIM IFCファイルビューア
[2026/9/3]

[Astro] #122 IFC Viewer — web-ifc WASM によるブラウザ完結型 建築BIM IFCファイルビューア

web-ifc WASMモジュールをブラウザに組み込み、IFCファイルのジオメトリをストリーミング処理でThree.jsメッシュに変換。IFCタイプ別の要素ツリー表示、クリックによるプロパティ参照、タイプ別ハイライト、エッジ表示、GLBエクスポート対応。完全ブラウザ完結、広告なし。
[Astro] #121 3D Model Viewer — assimpjs WASM による40+フォーマット対応ブラウザ完結型3Dモデルビューア
[2026/9/2]

[Astro] #121 3D Model Viewer — assimpjs WASM による40+フォーマット対応ブラウザ完結型3Dモデルビューア

assimpjs（assimp C++ライブラリのEmscripten WASMビルド）をブラウザに組み込み、ドロップされた3Dモデルファイルをglb2形式に変換、Three.js GLTFLoaderで表示。ZIP内テクスチャ・MTL自動解決、ネイティブThree.jsローダーへのフォールバック、アニメーション再生、GLBエクスポートに対応。
[Astro] #120 SID Player — reSID + fake6502 WASM + AudioWorklet によるブラウザ完結型 Commodore 64 SIDプレイヤー
[2026/9/1]

[Astro] #120 SID Player — reSID + fake6502 WASM + AudioWorklet によるブラウザ完結型 Commodore 64 SIDプレイヤー

reSIDとfake6502をSTANDALONE_WASMビルドし、AudioWorkletスレッド内で直接instantiateしてCommodore 64のSID音源をブラウザでリアルタイム再生。PSIDヘッダー解析、C64メモリマップ配線、50Hz playルーチン、3Voice分離波形ビジュアライザー、チップモデル切替まで実装。
[Astro] #119 JP2 (JPEG 2000) Image Converter — WASM + Canvas + JSZipによるブラウザ完結型画像変換・ZIP一括出力
[2026/8/31]

[Astro] #119 JP2 (JPEG 2000) Image Converter — WASM + Canvas + JSZipによるブラウザ完結型画像変換・ZIP一括出力

OpenJPEGのWASMデコーダーとCanvas API、JSZipを用いて構築したブラウザ完結型のJPEG 2000 (.jp2) 画像コンバーター。DPR対応の高精細プレビュー、toBlobによるメモリ最適化、複数ファイルの一括ZIPダウンロード機能を実装。
[Astro] #118 STEP / IGES / BREP 3D Viewer — occt-import-js(WASM) + Three.jsによるCADファイルビューア
[2026/8/31]

[Astro] #118 STEP / IGES / BREP 3D Viewer — occt-import-js(WASM) + Three.jsによるCADファイルビューア

occt-import-js（OpenCASCADE WASM）とThree.jsによるSTEP/IGES/BREPファイルのブラウザ完結型3Dビューア。階層ツリー表示、per-face color、テッセレーション品質調整、断面表示、2点間距離測定、GLBエクスポートまで実装。
[Astro] #117 DXF 3D Viewer — dxf-parser + Three.jsによるDXFファイルの2D/3Dビューア
[2026/8/30]

[Astro] #117 DXF 3D Viewer — dxf-parser + Three.jsによるDXFファイルの2D/3Dビューア

DXFファイルのブラウザ完結型3Dビューアを構築。dxf-parserでのパース、Three.jsによるエンティティ描画、レイヤー管理、Shift-JIS自動判定、Point Cloud ViewerのDXF出力との連携まで。
[Astro] #116 Storage Benchmark — IndexedDB vs OPFS (SyncAccessHandle) 比較検証ツールの実装
[2026/8/27]

[Astro] #116 Storage Benchmark — IndexedDB vs OPFS (SyncAccessHandle) 比較検証ツールの実装

IndexedDBとOPFS（SyncAccessHandle）のパフォーマンス比較ツールを開発。Web Workerでのバックグラウンド並列処理、FileSystemSyncAccessHandleを用いた同期書き込み、HTML5 Canvasによるブロック単位のレイテンシマップ可視化の実装手法を解説。
[Astro] #115 Point Cloud Viewer #10 — LAZ圧縮エクスポート・ファイル名反映・進捗表示
[2026/8/27]

[Astro] #115 Point Cloud Viewer #10 — LAZ圧縮エクスポート・ファイル名反映・進捗表示

Astro + React Three Fiber製の点群ビューアのv10。laz-perfにEmscripten圧縮バインディングを自作して250KBのWASMをビルドし、LAZエクスポートを実装。全エクスポートのファイル名をソースファイル名ベースに変更、LAZ圧縮の進捗表示（スピナー+パーセント）も追加。
[Astro] #114 Point Cloud Viewer #9 — Octree全点LOD・Worker化・カメラ追従更新
[2026/8/26]

[Astro] #114 Point Cloud Viewer #9 — Octree全点LOD・Worker化・カメラ追従更新

Astro + React Three Fiber製の点群ビューアのv9。従来の200万点サンプリング後Octreeから、パース後の全点（数千万点）でOctree構築＋カメラ距離ベース動的LODに進化。buildOctreeのWeb Worker化、カメラ移動検知ベースのLOD更新（スロットル付き）、LOD表示点数リアルタイム表示、カラーモード・PointSize変更時の即時再描画、20M点以上での確認ダイアログ、非LODモード表示上限5Mへの引き上げなど。
[Astro] #113 Point Cloud Viewer v8 — SOR高速化・Worker化・Delaunayメッシュ生成
[2026/8/25]

[Astro] #113 Point Cloud Viewer v8 — SOR高速化・Worker化・Delaunayメッシュ生成

Astro + React Three Fiber製の点群ビューアのv8。SORをWeb Worker化しpartial sortで15分→数分に高速化、Voxel DownsampleもWorker化、delaunatorによる2.5D Delaunay三角形分割でメッシュ生成機能を追加。ジオメトリ再構築の共通化、Transferable zero-copy転送、キャンセルボタン、処理時間計測など。
[Astro] #112 Point Cloud Viewer v7 — 任意直線断面＋SOR進捗表示
[2026/8/24]

[Astro] #112 Point Cloud Viewer v7 — 任意直線断面＋SOR進捗表示

Astro + React Three Fiber製の点群ビューアに任意直線断面（2点クリック→XZ平面法線による垂直断面→厚さパラメータ→ビン分割プロファイル生成→DXFエクスポート）と、SORノイズ除去の非同期チャンク分割処理（50,000点ごとにUIスレッドへ制御を返し進捗表示）を追加。
[Astro] #111 Point Cloud Viewer v6 — 計測ラベル3D表示・元座標復元・Voxel Downsampling
[2026/8/23]

[Astro] #111 Point Cloud Viewer v6 — 計測ラベル3D表示・元座標復元・Voxel Downsampling

Astro + React Three Fiber製の点群ビューアに計測ラベル3D表示（CanvasTexture Sprite・距離/面積/点番号・スクリーンショット対応）、parseLAS元座標オフセット保持（LASOriginMeta・正規化逆変換・地理座標復元）、Voxel Downsampling（空間グリッド間引き・全属性保持・91%削減実績）を追加。
[Astro] #110 Point Cloud Viewer v5 — ボックス選択・断面ポリライン・Octree LOD・座標系変換
[2026/8/22]

[Astro] #110 Point Cloud Viewer v5 — ボックス選択・断面ポリライン・Octree LOD・座標系変換

Astro + React Three Fiber製の点群ビューアにボックス選択＋削除（NDC投影・マゼンタハイライト）、断面ポリライン（スライス面プロファイル・DXFエクスポート）、Octree LOD（八分木・frustum culling・距離ベースLODサンプル）、座標系選択＋CRS変換（proj4・JGD2011全19系・UTM・WGS84・WebMercator）を追加。v5で点群編集ツールとして本格化。
[Astro] #109 Point Cloud Viewer — Intensity/Classification表示＆LAS/PCDエクスポート
[2026/8/21]

[Astro] #109 Point Cloud Viewer — Intensity/Classification表示＆LAS/PCDエクスポート

Astro + React Three Fiber製の点群ビューアにLASのIntensity/Classification表示、LAS 1.2バイナリエクスポート（ヘッダー構築・座標逆変換・Intensity/Classification保持）、PCD v0.7 Binaryエクスポート（packed RGB float）、Canvasスクリーンショット保存を追加。入力6フォーマット・出力6フォーマットの完全対応。
[Astro] #108 Point Cloud Viewer — LAZ圧縮対応＆XYZ/CSVインポート/エクスポート
[2026/8/20]

[Astro] #108 Point Cloud Viewer — LAZ圧縮対応＆XYZ/CSVインポート/エクスポート

Astro + React Three Fiber製の点群ビューアにLAZ圧縮フォーマット対応を追加。laz-perf WASMのESMパッチ適用、Emscriptenモジュールの静的配信、解凍ループのチャンク分割による進捗表示、XYZ/CSVテキストフォーマットの入出力対応までの全工程を解説。
[Astro] #107 Point Cloud Viewer — LAS/PCD対応＆大規模点群サンプリング
[2026/8/20]

[Astro] #107 Point Cloud Viewer — LAS/PCD対応＆大規模点群サンプリング

Astro + React Three Fiber製の点群ビューアにLAS/PCDフォーマット対応を追加。LASバイナリパーサーの自前実装（LAS 1.0–1.4, Format 0–3, RGB 8/16bit自動判定）、PCDのASCII/binary/binary_compressed(LZF)対応、Fisher-Yatesランダムサンプリングによる大規模点群の描画、測地座標のセンタリング＋正規化の全工程を解説。
[Astro] #106 PLY点群データビューアを自作 — React Three Fiber + SOR高速ノイズ除去
[2026/8/19]

[Astro] #106 PLY点群データビューアを自作 — React Three Fiber + SOR高速ノイズ除去

iPhone LiDARや写真測量で取得した点群データ（PLY）をブラウザ上で閲覧・編集できるWebツールの実装記録。Three.jsのPointsとPLYLoaderによる描画、高さベースヒートマップ、軸別スライス断面、レイキャストによる計測ツール、空間ハッシュグリッドで高速化したSORノイズ除去、PLY/GLBエクスポートまでの全工程。
[Astro #105] Next.jsからAstro(WSL2)移植時にハマったAPI Routeの404/500エラーとLM Studio（ローカルLLM）連携の全手順
[2026/7/28]

[Astro #105] Next.jsからAstro(WSL2)移植時にハマったAPI Routeの404/500エラーとLM Studio（ローカルLLM）連携の全手順

Astroの動的APIエンドポイント設定（prerender = false）、Astroコンテキストからのrequestオブジェクト抽出、そしてWSL2環境からWindows上のLM Studio（Serve on Local Network）へ接続するためのネットワーク設定手順を解説します。
[Astro #104] Three.js GLTFExporterによるブラウザ完結型GLB/GLTFエクスポートの実装
[2026/7/20]

[Astro #104] Three.js GLTFExporterによるブラウザ完結型GLB/GLTFエクスポートの実装

Three.js (r183) の GLTFExporter を利用して、ボーン構造やモーフターゲット（表情等）を保持したままブラウザ上のみで GLB エクスポートを行う実装手法をまとめました。
[Astro #103] ブラウザ完結型GLBコンプレッサーの実装 — WebPテクスチャ変換とDraco圧縮の統合
[2026/7/18]

[Astro #103] ブラウザ完結型GLBコンプレッサーの実装 — WebPテクスチャ変換とDraco圧縮の統合

ブラウザ上で動作するGLB圧縮ツールの実装解説。gltf-transformを活用したDracoジオメトリ圧縮と、Canvas APIを用いたテクスチャのWebP化を組み合わせたファイルサイズ削減手法、およびAstroへの統合手順について詳解します。
[Astro #102] VRM Thumbnail Generator v2 — 表情・背景・ライティング・25ポーズ対応
[2026/7/14]

[Astro #102] VRM Thumbnail Generator v2 — 表情・背景・ライティング・25ポーズ対応

VRM Thumbnail Generator v2。表情（blendShape）スライダー9種、背景画像/カラーピッカー、ライティング調整、ポーズ25個対応（◀▶ナビ）、W×H独立サイズ指定、アスペクト比プリセット（1:1/4:1/16:9/9:16）、サンプルVRM、THREE.Clock非推奨警告修正。
[Astro #101] VRM Thumbnail Generator 単品ツール化
[2026/7/7]

[Astro #101] VRM Thumbnail Generator 単品ツール化

VRMサムネ自動生成機能を単品WEBアプリとして独立。リアルタイム3Dプレビュー、カメラ調整、.vrmaポーズ適用、ドラッグ&ドロップ対応のツールを1日で実装。
[Astro #100] VRMサムネイル自動生成 & メニュー表示
[2026/7/6]

[Astro #100] VRMサムネイル自動生成 & メニュー表示

Three.jsのオフスクリーンレンダリングでVRMモデルのサムネイルを自動生成し、IndexedDBにBase64で保存。WiredAvatarMenuとWiredVRMenuの両方でサムネ付きモデル選択UIを実装した記録。
[Astro #99] LAYER FIGHTER: ラウンドフロー改善・膝蹴り暴発バグ修正
[2026/7/5]

[Astro #99] LAYER FIGHTER: ラウンドフロー改善・膝蹴り暴発バグ修正

WebXR格闘ゲーム LAYER FIGHTER のラウンドフローを再設計し、GAME_SETフェーズを新設。2本先取時の演出整理、フレームカウントリセット、リセットロジック共通化、入力バッファ起因の膝蹴り暴発バグを修正。
[Astro #98] LAYER FIGHTER: PS4コントローラー対応を全メニュー画面に実装
[2026/7/4]

[Astro #98] LAYER FIGHTER: PS4コントローラー対応を全メニュー画面に実装

WebXR格闘ゲーム LAYER FIGHTER のメニュー画面にPS4コントローラー対応を実装。Gamepad APIをポーリングする共通React hookを1つ作り、全5画面に適用した記録。
[Astro #97] LAYER FIGHTER: クレジットにステージ情報を反映
[2026/7/3]

[Astro #97] LAYER FIGHTER: クレジットにステージ情報を反映

LAYER FIGHTERのエンディングクレジットにステージの3Dモデル情報が表示されない問題を修正。Assets.jsonではなくStages.jsonから直接読み込むようimportを追加。
[Astro #96] CreditBoard汎用化・VRM回転機能追加
[2026/7/2]

[Astro #96] CreditBoard汎用化・VRM回転機能追加

WITCreditBoardをCreditBoard.tsxとして汎用化し、ADV/RPG（STAGE_MY_ROOM）とパズルゲーム（木箱GLB付き）にクレジット看板を設置。VR/PC座標分岐、import type問題、外部VRM保存フローの調査、VRMアバターY軸回転機能の実装まで。
[Astro #95] LAYER FIGHTER: ステージセレクト実装 & ジャンプ攻撃追加
[2026/7/1]

[Astro #95] LAYER FIGHTER: ステージセレクト実装 & ジャンプ攻撃追加

WebXR格闘ゲーム LAYER FIGHTER にステージセレクト画面を実装し、ジャンプ攻撃を追加しました。VR/デスクトップ両対応のHUD二重表示バグも修正。
[Astro #94] Mixed Reality Day2 // 責務分離・歩行アニメーション・段差イベント・設定UI
[2026/6/30]

[Astro #94] Mixed Reality Day2 // 責務分離・歩行アニメーション・段差イベント・設定UI

MR実装2日目。WiredAvatarからMRAvatarへの責務分離、AVATAR_HEIGHTの根本解決、歩行アニメーション、メモリリーク対策、段差検出・座りイベント、VRコントローラーでの設定UIを実装。
[Astro #93] Mixed Reality // VRMアバターをQuest3の現実空間で歩かせる
[2026/6/29]

[Astro #93] Mixed Reality // VRMアバターをQuest3の現実空間で歩かせる

WebXR plane-detectionを使い、Quest3のパススルーMR空間でVRMアバターが実際の床に着地し、壁に反射して歩き回る仕組みを実装した記録。
[Astro #92] LAYER FIGHTER // VR完全対応・サウンドテスト3D化・確認ダイアログ・ゲームループ修正
[2026/6/28]

[Astro #92] LAYER FIGHTER // VR完全対応・サウンドテスト3D化・確認ダイアログ・ゲームループ修正

LAYER FIGHTERのVR完全対応。サウンドテストを3D UIに刷新、確認ダイアログ実装、HUDフラグ管理、そしてQuest単体でゲームが止まる根本原因（requestAnimationFrame問題）をuseFrameへの移行で解決した記録。
[Astro #91] LAYER FIGHTER // リファクタ・Canvas統合・VR対応土台・バトルUI刷新
[2026/6/27]

[Astro #91] LAYER FIGHTER // リファクタ・Canvas統合・VR対応土台・バトルUI刷新

LAYER FIGHTERの大規模リファクタ。敵ステートマシン化、ファイル分割、Canvas統合によるVR対応土台の構築、ボイス実装、サウンドテスト、頭上HPバー、Canvas外HUD実装まで。
[Astro #90] LAYER FIGHTER // バトル強化 - 被弾アニメ・プレイヤーKO・敵攻撃バリエーション・2本先取
[2026/6/26]

[Astro #90] LAYER FIGHTER // バトル強化 - 被弾アニメ・プレイヤーKO・敵攻撃バリエーション・2本先取

React Three Fiber + VRM で格ゲー「LAYER FIGHTER」のバトルシステムを強化。被弾のけぞりアニメ（SYS_HURT）、HITSTUN中の入力キャンセル防止、プレイヤーKO判定とYOU LOSE表示、敵攻撃をAssets.jsonで管理するバリエーション機能、2本先取の勝利条件まで実装した記録。
[Astro #89] LAYER FIGHTER // タイトル・バトル・クレジット実装
[2026/6/25]

[Astro #89] LAYER FIGHTER // タイトル・バトル・クレジット実装

React Three Fiber + VRM で格ゲー「LAYER FIGHTER」を大幅強化。無限スクロールタイトル画面（VRMアバター・猫・ゴールハウス演出・ループ）、敵AIのパンチ攻撃とダメージ判定（EnemyPhysics拡張）、ラウンド推移（KO→YOU WIN→ROUND N→FIGHT）、GLBステージ読み込み、Assets.json駆動のクレジットスライダーまで実装した記録。
[Astro #88] LAYER FIGHTER 開発2日目 ─ ヒットエフェクト・コマンド技・自作アニメーションの追加
[2026/6/24]

[Astro #88] LAYER FIGHTER 開発2日目 ─ ヒットエフェクト・コマンド技・自作アニメーションの追加

LAYER FIGHTER開発2日目の記録。Moves.jsonによるヒットエフェクトの外部化、入力バッファによるコマンド技、2キャラ追従カメラ、VRM Posing Desktopによる自作アニメーション制作など、トレーニングモードの完成度を大幅に引き上げました。
[Astro #87] LAYER FIGHTER 始動 ─ React Three Fiber でVRM格闘ゲームのトレーニングモードを作る
[2026/6/23]

[Astro #87] LAYER FIGHTER 始動 ─ React Three Fiber でVRM格闘ゲームのトレーニングモードを作る

VRMモデルとReact Three Fiberで格闘ゲームを作る試みの記録。バーチャファイター風の入力サンドボックス、テンキー表記HUD、Moves.json による技パラメーター外部化、ヒットボックスの可視化、PS4コントローラー対応など、トレーニングモード一式を実装しました。
[Astro #86] WitchadiusのED無限ループ修正とVOICEVOX（猫使ビィ）によるシステムボイス実装
[2026/6/21]

[Astro #86] WitchadiusのED無限ループ修正とVOICEVOX（猫使ビィ）によるシステムボイス実装

エンディング周りの同期的フラグ管理とクレジットの描画バグをお掃除。IndexedDBによる事前キャッシュ機構のパイプラインに、猫使ビィのパワーアップシステムボイスを音量1.2で完璧に配線した全レイヤーのリファクタリングログ。
[Astro #85] R3F WITManager リファクタリング & ハードコード地雷除去で2面完成
[2026/6/20]

[Astro #85] R3F WITManager リファクタリング & ハードコード地雷除去で2面完成

React Three Fiber 横スクロールシューティングの設計負債清算記録。巨大な useFrame の分割、敵パターンのデータ駆動化、座標オフセット問題の根本解決、プロシージャル背景のテーマ化、ステージ遷移ロジックなど、ゲーム完成までの実装過程を詳述。
[Astro #84] WITコアエンジンにおける二重ループ内探索の全廃とスポーン時パラメータ焼き付けによるランタイムクラッシュの根本解決
[2026/6/19]

[Astro #84] WITコアエンジンにおける二重ループ内探索の全廃とスポーン時パラメータ焼き付けによるランタイムクラッシュの根本解決

WITコアエンジンのメインループ最深部で発生していた設定データの動的ルックアップを撤廃し、生成時に判定半径やオフセットを固着させる方式へ移行。型キャストを排除し、処理負荷低減と堅牢性を両立したリファクタリングの事実をまとめています。
[Astro #83] 3Dエンディングシーケンス実装、連動型観覧車弾幕の最適化、そして自機の床隙間ハマり・すり抜けバグの完全根絶
[2026/6/18]

[Astro #83] 3Dエンディングシーケンス実装、連動型観覧車弾幕の最適化、そして自機の床隙間ハマり・すり抜けバグの完全根絶

React Three Fiber（R3F）によるSTG開発。SkeletonUtils.cloneを活用したVRAM保護型クレジットインフラの構築、キャッシュ汚染のない親子ノード傾転による大観覧車ロールAIの設計、そしてWITController内の床名前検閲仕様を暴き、5重のゴーストコライダーへのID偽装によって床の微小な隙間ハマりを永久根絶した高精度物理ハックを詳解。
[Astro #82] React Three Fiberによるデータ駆動型マルチステージ構築とシステム堅牢化ハック
[2026/6/17]

[Astro #82] React Three Fiberによるデータ駆動型マルチステージ構築とシステム堅牢化ハック

React Three Fiber（R3F）環境下での3Dシューティングゲーム開発記録。動的データ駆動によるマルチステージ遷移、武器ステートの排他制御、およびSPA遷移時のオーディオ残存バグの解決法を実装ベースで記述します。
[Astro #81] 3Dシューティングにおける被弾判定・シールド装甲剥離・ゲームオーバーシーケンスとHMRライフサイクル問題の解決
[2026/6/16]

[Astro #81] 3Dシューティングにおける被弾判定・シールド装甲剥離・ゲームオーバーシーケンスとHMRライフサイクル問題の解決

React Three FiberとViteを組み合わせた3Dシューティングゲーム開発における、物理判定の厳密化、装甲破壊の視覚フィードバック、およびホットリロード時のガベージコレクション不整合対策について解説します。
[Astro #80] Three.jsにおける3Dアセット最適化、地上敵AIの動的地形追従、およびWebXRのAボタン拡張
[2026/6/15]

[Astro #80] Three.jsにおける3Dアセット最適化、地上敵AIの動的地形追従、およびWebXRのAボタン拡張

WebGLおよびWebXRシューティングゲームの描画負荷を削減するため、Blenderによる複数パーツの1オブジェクト結合（ドローコール削減）と10分の1デシメートを実施。さらに、画面両端のマスコットアバターのボーン演算を最初の1フレームで固定するフリーズハックを導入し、毎フレームのスキニング負荷を完全に排除しました。本記事では、ソリッドな地形ブロックをリアルタイムに走査して自動昇降する地上敵ダッカー型AIの実装、ゲーム全体の敵弾速を一元管理するグローバルパラメータの設計、およびWebXR Gamepad APIを使用したAボタンでのパワーアップ発動とチャタリング防衛Refの配線について解説します。
[Astro #79] Three.jsで実装する軽量な地形這行ミサイル物理と多段階パワーアップインフラ
[2026/6/14]

[Astro #79] Three.jsで実装する軽量な地形這行ミサイル物理と多段階パワーアップインフラ

WebGLシューティングゲームにおける、軽量な地形這行ミサイル（FALL/SLIDE/CLIMB）のステートマシン物理と、グラディウス準拠の2段階パワーアップ（同時連射・上限MAX時のUI非表示および自動スキップ機能）、地形の継ぎ目対策やチャタリングを防ぐ自爆処理の最適化手法をまとめました。
[Astro #78] Three.jsで創る電脳魔女STG：動的クレジット案内板・プロシージャル床・星ハート爆散物理の実装
[2026/6/13]

[Astro #78] Three.jsで創る電脳魔女STG：動的クレジット案内板・プロシージャル床・星ハート爆散物理の実装

Three.jsとReact Three Fiberを用いたSTG開発において、データ駆動型の動的クレジット看板、プロシージャルな千鳥貼りフローリング床、自機と障害物の衝突クランプ物理、および星型・ハート型の高輝度爆散パーティクルシステムを実装したプロセスを技術的に詳述します。
[Astro #77] Three.jsで創る電脳魔女STG：プロシージャル夜空背景のコンポーネント化とマスコットのライティング制御
[2026/6/12]

[Astro #77] Three.jsで創る電脳魔女STG：プロシージャル夜空背景のコンポーネント化とマスコットのライティング制御

Three.js（React Three Fiber）を用いたSTG開発記第77弾。劇場の床の拡張から、SystemAssets.jsonによるライセンス管理インフラの構築、数式（サイン波・モジュロ）を用いた完全シームレスな夜空背景のプロシージャル生成と別ファイルへの外出しリファクタリングまでを徹底解説。
[Astro #76] Three.jsで作るサイバー魔女STG：データ駆動型タイムラインと音響インフラの完全移行
[2026/6/11]

[Astro #76] Three.jsで作るサイバー魔女STG：データ駆動型タイムラインと音響インフラの完全移行

React Three Fiber環境下でのSTGエンジン構築。リプルレーザーの描画最適化から始まり、Z字型クランク編隊の数学的実装、Stage1.jsonによるタイムライン制御、Rキーリセットにおける時間軸バグの克服、そしてWebAudioベースのAudioControllerによる遅延ゼロ連射SEの実装までをロジカルに解説します。
[Astro #75] three-mesh-bvhでハイポリ地形のレイキャスト問題を根絶。テストコード混入バグとボスイベント欠落の修正
[2026/6/11]

[Astro #75] three-mesh-bvhでハイポリ地形のレイキャスト問題を根絶。テストコード混入バグとボスイベント欠落の修正

Three.js / React Three Fiber環境におけるMeshBVH（境界ボリューム階層）の導入によるレイキャスト高速化、ENEMY_BUNYAテストコード混入によるエンディング誤起動バグ、BOSS_HACKLOAD接触イベント欠落、箒モードの移動速度逆転バグの修正内容を解説。
[Astro #74] RPG完成。ラスボス暗黒魔法エフェクトとネオングローダメージポップアップの実装
[2026/6/10]

[Astro #74] RPG完成。ラスボス暗黒魔法エフェクトとネオングローダメージポップアップの実装

Three.jsおよびReact Three Fiber環境下における、ラスボス戦の演出強化ハック。人魂の高速公転収束、AnimationMixerの単発再生制御、高解像度発光文字ビルボード、depthTest無効化による最前面描画、CameraHUDを用いた正面ロック防衛インフラの実装内容を解説。
[Astro #73] ストーリー進行・ボス戦実装・ハイポリモデルのレイキャスター問題解決
[2026/6/9]

[Astro #73] ストーリー進行・ボス戦実装・ハイポリモデルのレイキャスター問題解決

ストーリー進行システムとボス戦・NPCダイアログUIを実装。高ポリゴンモデルのレイキャスター最適化とバトルバグ修正。
[Astro #72] 3D RPG開発：データ駆動型シナリオ・ワープインフラ構築と3D数学回転バグの完全打破
[2026/6/8]

[Astro #72] 3D RPG開発：データ駆動型シナリオ・ワープインフラ構築と3D数学回転バグの完全打破

Reactの宣言的UIとデータ駆動設計を融合させ、3D RPGのイベントインフラを構築。さらにR3F環境でのワールド回転軸のねじれバグをapplyAxisAngleでねじ伏せ、AudioControllerに完全マージした開発ドキュメント。
[Astro #71] WebGL 3Dエフェクトの軌道修正、オーディオ同期、およびモバイル用バーチャルコントローラーの実装
[2026/6/7]

[Astro #71] WebGL 3Dエフェクトの軌道修正、オーディオ同期、およびモバイル用バーチャルコントローラーの実装

Three.jsおよびReact Three Fiberを使用したWeb3Dゲーム開発において、グローバル座標系でのステージ回転角適用による魔法エフェクトの軌道修正、発射・着弾SEのフレーム単位の同期、CSSメディアクエリと仮想入力によるスマホ対応ゲームパッドの動的実装について技術的な詳細をまとめました。
[Astro #70] WebGLデータ駆動型ADVにおけるストラテジーパターンの統合と床抜けバグの修正
[2026/6/6]

[Astro #70] WebGLデータ駆動型ADVにおけるストラテジーパターンの統合と床抜けバグの修正

WebGL/Three.jsを用いたデータ駆動型ADV・バトルシステムにおいて、敵の特殊攻撃をストラテジーパターンレジストリへ移行しコンポーネントを疎結合化。また、ロードラグによる地形コライダーの判定漏れを防ぎ床抜けバグを修正する、Y軸着地マージン同期インフラの実装手法を解説します。
[Astro #69] WebXRにおける全方位暗転制御と法線スロープフィルタによるホバリング物理の実装
[2026/6/5]

[Astro #69] WebXRにおける全方位暗転制御と法線スロープフィルタによるホバリング物理の実装

WebXR環境におけるNearプレーンカリングとリグ移動に伴う暗転漏れの不具合を内側描画の真球オブジェクトへの置換で解決。さらに移動速度向上に伴う地形起伏でのスタック問題をポリゴン法線を利用したスロープフィルタで解消し、バトルUIの動的拡張と敵の特殊攻撃パラメータの実装を行いました。
[Astro #68] VRコントローラー全ボタン実装・連打防止・マジックバーストエフェクト
[2026/6/4]

[Astro #68] VRコントローラー全ボタン実装・連打防止・マジックバーストエフェクト

VRコントローラーの全ボタン実装、Rising Edge連打防止、吹き出しVR安定化、マジックバーストエフェクトの追加。
[Astro #67] ステータス画面・Magic.json化・箒モード・ヒールエフェクト一気に実装
[2026/6/3]

[Astro #67] ステータス画面・Magic.json化・箒モード・ヒールエフェクト一気に実装

ADV/RPGにステータス画面、魔法システムのJSON化、箒に乗る高速移動モード、ヒール魔法のパーティクルエフェクトを実装。
[Astro #66] ADVManager大規模リファクタリング & IndexedDB全アセットキャッシュ化
[2026/6/2]

[Astro #66] ADVManager大規模リファクタリング & IndexedDB全アセットキャッシュ化

Three.js + WebXR + VRMでADV/RPGを開発する4日目。ADVManager.tsxの責務分離（バトル/セーブを独立コンポーネント化）、ベッドや坂道などのコリジョン関連の積み残しバグを一気に解決、IndexedDBを活用した全アセットキャッシュ化で初回起動以降は無通信動作を実現。AIとのバイブコーディングで30件超の改修を完遂した1日。
[Astro #65] セーブ・回復システムの完全隔離とVRMアセットのVRAM解放プロトコル
[2026/6/1]

[Astro #65] セーブ・回復システムの完全隔離とVRMアセットのVRAM解放プロトコル

React Three FiberおよびWebXR環境において、探索フェーズへのセーブ・回復システムの統合プロセスを解説。useFrame内の進入ガードによるカメラ位置崩壊の防衛、DOMに依存しないRef直結型の決定処理、そしてVRMアセットのdeepDisposeによるキャッシュクリアとHMD位置に同期するY軸ビルボードの実装について記述しています。
[Astro #64] WebXR Gamepad APIによるVR入力の最適化とJRPGタイムラインにおけるステート・デトックス
[2026/5/31]

[Astro #64] WebXR Gamepad APIによるVR入力の最適化とJRPGタイムラインにおけるステート・デトックス

R3F環境下のJRPGバトルシステムにおいて、非同期タイムラインの隙間に生じるステートバグをフラグ制御で一掃。WebXRによるVRコントローラー入力のチャタリング除去ロジックや、マテリアルの加算ブレンディングを用いた画像駆動魔法陣インジェクションなど、コンソールゲーム基準のUI/UX最適化プロトコルを解説します。
React Three Fiberとデータ駆動による3D-ADVシステムの設計と実装仕様
[2026/5/31]

React Three Fiberとデータ駆動による3D-ADVシステムの設計と実装仕様

React Three Fiber（R3F）およびThree.jsを用いた3Dアドベンチャー（ADV）探索システムの設計仕様書。ステージ構成、プレイヤー能力値、アバター設定をすべて独立したJSONデータで定義する「データ駆動型設計」を軸に、コンポーネントの責務分離、チラつき（Zファイティング）対策、ピュア3Dによる画面フェード、2次元距離計算に基づく近接吹き出し制御、VRMアニメーション初期化ガード句の実装詳細まで網羅します。
[Astro #62] Three.js/R3Fで作るVR対応3Dパズルゲームの完成と極限の最適化ハック
[2026/5/28]

[Astro #62] Three.js/R3Fで作るVR対応3Dパズルゲームの完成と極限の最適化ハック

React Three Fiberを用いたVRパズルゲーム開発の最終フェーズ。コンポーネント自律型のメモリ解放処理や、JSONデータ駆動による動的クレジットスクロール、VR空間での複数VRM配置における軽量化ハックについて解説します。
[Astro #61] Three.js ぷよぷよ風パズルゲームの実装とReact key地獄
[2026/5/27]

[Astro #61] Three.js ぷよぷよ風パズルゲームの実装とReact key地獄

React + Three.jsでぷよぷよ風パズルゲームを実装。お邪魔ブロック（ノイズ）追加後に発生した描画バグの原因を徹底調査。key props、ジオメトリ再利用、グリッドデータのデバッグ手法まで。
[Astro #60] R3FによるSTGエンディングプロトコルの構築 〜パーティクル収束・クレジットスクロール・接続切断演出の全実装〜
[2026/5/26]

[Astro #60] R3FによるSTGエンディングプロトコルの構築 〜パーティクル収束・クレジットスクロール・接続切断演出の全実装〜

React Three Fiberを用いてSTGのエンディング演出を1から設計・実装した記録。800個のパーティクルが中心へ収束し続けるループアニメーション、R3F上のクレジットスクロール、接続切断（発散）演出、感謝テキストのフェードイン/アウトまで、フェーズ管理と頂点カラー制御を組み合わせたプロトコルの全記録。
[Astro #59] WebXRにおける入力同期プロトコルのクレンジング 〜量子爆発ボムの実装と多重トランスフォーム競合の完全遮断〜
[2026/5/25]

[Astro #59] WebXRにおける入力同期プロトコルのクレンジング 〜量子爆発ボムの実装と多重トランスフォーム競合の完全遮断〜

React Three FiberとWebXRを用いた3Dシューティングゲームにおいて、上流のScene、Manager、下流のController間で発生したフラグ競合を解消し、アバター追従型のミニマルHUDと3回制限ボムを完全同期させたリファクタリングの記録。
[Astro #58] IndexedDBを活用した外部VRMモデルの永続キャッシュと無限クローゼット化の構築
[2026/5/24]

[Astro #58] IndexedDBを活用した外部VRMモデルの永続キャッシュと無限クローゼット化の構築

一時的なBlob URLの死活問題を解決するため、外部からロードしたVRMのバイナリをIndexedDBに直接トラップ。静的なJSONリストとDB内の動的レコードをシームレスに結合し、外部アセットを無限に追加・呼び出し可能にするパイプラインハッキングの記録です。
[Astro #57] 3D数式弾幕の本格移植とチャージ短縮アイテム実装における論理演算子の罠
[2026/5/21]

[Astro #57] 3D数式弾幕の本格移植とチャージ短縮アイテム実装における論理演算子の罠

Three.js/R3Fを用いたSTG開発において、サンプル環境から本番環境への3D数式弾幕の移植手順を解説。また、新アイテム「CHARGE_SHORTEN」実装時に発生した、エフェクトと内部タイマーの同期不全、およびSTGController側の論理演算子の優先順位に起因するデバッグの盲点について詳述。
[Astro #56] データ駆動型シューティングへの進化 〜アイテムシステム・ライフ制・AIがもたらした殺意のステージ〜
[2026/5/20]

[Astro #56] データ駆動型シューティングへの進化 〜アイテムシステム・ライフ制・AIがもたらした殺意のステージ〜

WebXR対応の3Dシューティングゲームに、アイテムシステム、ライフゲージ、動的ステージ遷移を実装。AI（Claude）が作成した鬼畜難易度のタイムラインJSONを、電脳シールドと魔方陣チャージショットのパターン攻略でねじ伏せるゲームデザインの進化を解説します。
[Astro #55] WebXR対応フルダイブSTGの実装：VRコントローラーとJSONタイムライン管理
[2026/5/19]

[Astro #55] WebXR対応フルダイブSTGの実装：VRコントローラーとJSONタイムライン管理

WebXRでの3Dゲーム開発実践。JSONベースのステージ進行管理や、VRコントローラーのアナログスティック入力、モード移行時のボーン（関節）リセット処理など、フルダイブSTG構築の技術的詳細を解説します。
[Astro #54] LAYER_STG_PROTOCOL —— R3Fによる3Dゲームループの構築
[2026/5/18]

[Astro #54] LAYER_STG_PROTOCOL —— R3Fによる3Dゲームループの構築

React Three FiberとThree.jsを用い、ブラウザネイティブで動作する軽量かつ堅牢な3D奥スクロールシューティング（STG）の構築プロセスを記録。ガベージコレクションを完全に防止するアセット一括解決型のオブジェクトプール設計、計算負荷を極限まで下げる平方根排除の距離和（dx*dx + dy*dy）衝突判定、スペースハリアー風の無敵ワイヤーフレームピラー、斜め対空軌道で降り注ぐ破壊可能なローポリ電脳隕石（メテオ）システムの追加と難易度リバランス。さらに、既存モデルを8倍にスケール合成した巨大ボスインベーダー戦のフェーズ遷移、e.repeatおよび破損フラグによるキーボード・チャタリング（オーバーヒート時のバタつき）の完全ブロックなど、商業アーケードゲームの文法をCopland OSのUIレイヤーへ美しく統合したアーキテクチャを網羅。
[Astro #53] React Three Fiberで魔女のVRMを箒に乗せて自動周回・浮遊アニメーションを実装
[2026/5/17]

[Astro #53] React Three Fiberで魔女のVRMを箒に乗せて自動周回・浮遊アニメーションを実装

React Three Fiberを用いて、VRMアバターを箒に乗せてサイバー空間を自動周回させる浮遊アニメーションの実装記録。三角関数による楕円軌道の計算や、Math.atan2を活用した進行方向への自動旋回ロジックまで、3D空間における数学的アプローチをまとめました。
[Astro #52] VRMアバターの魔法詠唱・収束エフェクトと音声キャッシュプロトコルの実装
[2026/5/16]

[Astro #52] VRMアバターの魔法詠唱・収束エフェクトと音声キャッシュプロトコルの実装

Webブラウザ上で動作するVRMアバターに、アニメのような魔法詠唱・放出システムを実装。Three.jsの基本機能で作るダイナミックな集中線エフェクトと、ミリ秒単位の多重再生を支えるIndexedDB音声キャッシュプロトコルを構築しました。
[Astro #51] VRMアバターの武装具現化と発砲シークエンスの完全同期
[2026/5/15]

[Astro #51] VRMアバターの武装具現化と発砲シークエンスの完全同期

React Three Fiberを用いたVRMアバターへのアクセサリ着脱と、setTimeoutによる泥臭い発砲アニメーション同期、マズルフラッシュの座標調整など、XR空間での実存感を高めるための実装プロセスを解説します。
[Astro #50] VRMアバターの自律インタラクションと空間UI（WiredSpeechBubble）の実装
[2026/5/14]

[Astro #50] VRMアバターの自律インタラクションと空間UI（WiredSpeechBubble）の実装

PROTOCOL.LAINの空間に溶け込む自律型VRMアバターのUI実装。HTML要素に頼らずDreiのEdgesを用いてThree.js空間へ直接吹き出しを描画する手法や、アニメーションステートの罠（Tポーズ問題）の解決策をまとめた技術アーカイブ。
[Astro #49] IndexedDBを活用した3Dアセットの完全キャッシュ化とバージョニング管理
[2026/5/14]

[Astro #49] IndexedDBを活用した3Dアセットの完全キャッシュ化とバージョニング管理

WebXRプロジェクトのロード時間を改善するため、Dexie.jsでアセット管理基盤を構築しました。JSONのバージョン情報を「正解リスト」としてDBと比較する堅牢な仕組みと、Reactコンポーネント分割によるメモリ管理の実践手法を解説します。
[Astro #48] WebXRスカイボックス実装 - 巨大球体アプローチとUIのタブ拡張
[2026/5/13]

[Astro #48] WebXRスカイボックス実装 - 巨大球体アプローチとUIのタブ拡張

R3F + WebXRでの背景実装の罠と、背景とライティングを分離する手法、UIの拡張性向上について詳しく解説します。
[Astro/WebXR #47] VRMアバターのTポーズ問題を解消する 〜AnimationMixerの安全なクロスフェードと警告との戦い〜
[2026/5/13]

[Astro/WebXR #47] VRMアバターのTポーズ問題を解消する 〜AnimationMixerの安全なクロスフェードと警告との戦い〜

WebXR空間でVRMアバターのモーション切り替え時に発生する「Tポーズ問題」を、AnimationMixerを用いた安全なクロスフェード処理で解消する方法を解説。あわせて、three-vrmやUnityエクスポート時の厄介な警告メッセージ根絶プロセスも記録します。
[Astro #46] WebXRでのVRMアバター姿勢制御 - しゃがみ・ジャンプと自作アニメーションの適用
[2026/5/12]

[Astro #46] WebXRでのVRMアバター姿勢制御 - しゃがみ・ジャンプと自作アニメーションの適用

Three.jsのAnimationMixerを用いた、WebXRカメラのY座標に基づく姿勢判定ロジック。しゃがみ、立ち上がり、ジャンプの各モーション遷移と、自然な補間のための命令型制御の実装。
[Astro #45] VR空間におけるアバターの自律的随伴ロジック 〜移動制御による実在感の構築〜
[2026/5/11]

[Astro #45] VR空間におけるアバターの自律的随伴ロジック 〜移動制御による実在感の構築〜

AstroとReact Three Fiber(R3F)を用いたWebXR開発において、アバターに意志を感じさせる移動ステートマシンとlerpによる滑らかな追従・帰還処理の実装ポイントをまとめました。
[Astro #44] Protocol Atlas: 144枚の情報の海をサルベージするVRアーカイブ
[2026/5/10]

[Astro #44] Protocol Atlas: 144枚の情報の海をサルベージするVRアーカイブ

144枚のビデオアトラス描画、VRコントローラーによるサルベージ、GPUリソースの最適化まで。
[Astro #43] @react-three/uikitによるWebXR用3Dメニューの実装と仮想・現実のコマンド同期
[2026/5/9]

[Astro #43] @react-three/uikitによるWebXR用3Dメニューの実装と仮想・現実のコマンド同期

React Three FiberとWebXRを用いて、VR空間内に3Dターミナルコンソールを構築。座標計算の罠を突破し、Event-Driven Architectureを活用してVR空間から現実のシステム（天気APIやVOICEVOX）を直接制御するフルダイブ環境の実装手法を解説します。
[Astro #42] R3FでWebXR環境構築：VRMの激重カクつき問題をHitboxで解決
[2026/5/9]

[Astro #42] R3FでWebXR環境構築：VRMの激重カクつき問題をHitboxで解決

AstroとReact Three Fiberを使用したWebXR開発で直面する、VRMモデルのパフォーマンス問題を解決。数万ポリゴンのRaycast計算を回避し、透明なカプセル（Hitbox）を使って快適なVR空間とインタラクションを両立させる実装手順をまとめました。
[Astro #41] React Three FiberでGLBモデルのステージ配置と動的切り替えを実装
[2026/5/8]

[Astro #41] React Three FiberでGLBモデルのステージ配置と動的切り替えを実装

AstroとReact Three Fiberを組み合わせたサイト開発。GLBモデルを用いたステージの配置と自転アニメーション、JSONによる動的切り替え、そしてスマホ対応のメニューUI実装についてまとめました。
[Astro #40] 3Dモデルロード時のプログレスダイアログ実装とレンダリングの落とし穴
[2026/5/8]

[Astro #40] 3Dモデルロード時のプログレスダイアログ実装とレンダリングの落とし穴

useProgressフックで発生しがちなState更新衝突エラーの原因を特定し、DefaultLoadingManagerとsetTimeoutを用いた確実な回避策をまとめました。
[Astro #39] VRMアバターの待機アニメーションをJSONで動的＆ランダムに制御
[2026/5/7]

[Astro #39] VRMアバターの待機アニメーションをJSONで動的＆ランダムに制御

React Three Fiber環境でのVRMアバター開発において、待機モーション（Idle状態）を重み付け抽選で動的に切り替える仕組みを実装。JSONファイルを用いた設定管理や、スムーズなステート移行など、アバターに自然な「生命感」を演出する実装方法を解説します。
[Astro #38] R3F製ルービックキューブのAstro移植とWebXR(v6)対応の死闘
[2026/5/3]

[Astro #38] R3F製ルービックキューブのAstro移植とWebXR(v6)対応の死闘

Astro + React Three Fiber環境でWebXRを実装する際の致命的な落とし穴。ContactShadowsによる画面暗転や、OrbitControlsの強制起動によるWebGLクラッシュの罠と、コンポーネント完全分離によるハイブリッド(PC/VR)対応の解決策をまとめました。
[Astro #37] Cloudflare Pagesによるミラーサイト構築記録：Netlifyの限界を超えた4,000アセットの同期
[2026/5/1]

[Astro #37] Cloudflare Pagesによるミラーサイト構築記録：Netlifyの限界を超えた4,000アセットの同期

Netlifyのビルド制限やメモリ不足(OOM)を突破し、Cloudflare Pagesで高速なミラーサイトを構築する手順。Node.jsのヒープメモリ拡張やアダプター換装、サブドメイン運用の最適解をまとめました。
[Astro #36] Webターミナルへのモデム通信プロトコル（ATコマンド）エミュレーションの実装
[2026/4/30]

[Astro #36] Webターミナルへのモデム通信プロトコル（ATコマンド）エミュレーションの実装

WebターミナルにおけるATコマンド通信プロトコルの実装記録。Audio APIのonendedイベントを利用してハンドシェイク音によるネゴシエーション状態を管理し、接続確立後に3D描画側（VRM）のアニメーションを非同期でキックする状態遷移アーキテクチャについてまとめました。
[Astro #35] VRMアバターの動的着せ替え実装におけるトラブルと仕様の壁
[2026/4/30]

[Astro #35] VRMアバターの動的着せ替え実装におけるトラブルと仕様の壁

Three.jsと@pixiv/three-vrmを用いたアバターの動的衣装変更プロセス。Temporal Dead Zone、VRoidのメッシュ統合仕様、ボーン同期時のポリゴン破綻など、直面した課題と原因をまとめる。
[Astro #34] Works on my machine の罠 — Vite Worker フォーマットの怪
[2026/4/27]

[Astro #34] Works on my machine の罠 — Vite Worker フォーマットの怪

Vite のビルドプロセスにおける worker.format の不一致エラーを解決。IIFE と ES Modules の境界線、そして astro.config.mjs への介入方法について詳解します。
[Astro #33] Temporal Synchronization — 自律型時報プロトコルの構築
[2026/4/27]

[Astro #33] Temporal Synchronization — 自律型時報プロトコルの構築

WiredTerminal における時報プロトコルの実装。useRef によるラッチ制御、JSON 駆動のランダム対話エンジン、そして WebXR への拡張を見据えたモーション同期について解説します。
[Astro #32] Edge Defense Protocol — ネットワークの「門番」と警報装置
[2026/4/27]

[Astro #32] Edge Defense Protocol — ネットワークの「門番」と警報装置

前回のAstro Actionsによるアプリケーション層の防衛に続き、Cloudflareを用いたネットワークエッジでの多重防壁を構築。Bot Fight Modeによる自律的なノイズ浄化と、Billingアラートによる経済的防衛線の設定手順を実戦的にまとめた。
[Astro #31] 疑似ターミナルにおける翻訳・気象観測プロトコルの実装
[2026/4/26]

[Astro #31] 疑似ターミナルにおける翻訳・気象観測プロトコルの実装

Astro Actions、MyMemory API、Open-Meteo APIを統合した疑似ターミナルの機能拡張録。バックエンドのAPI通信から、フロントエンドでのコマンド解析、複数話者による音声出力管理まで、実装の全工程を技術的に整理した。
[Astro/R3F #30] PROTOCOL.LAIN — 自律的な「瞬き」と滑らかな「表情のゆらぎ」をVRMに実装する
[2026/4/26]

[Astro/R3F #30] PROTOCOL.LAIN — 自律的な「瞬き」と滑らかな「表情のゆらぎ」をVRMに実装する

Three.js/R3F環境下で、VRMアバターの表情を滑らかに遷移させる手法と、プロシージャルな瞬きロジックの解説。到着フェーズに応じた演出の制御について。
[Astro #29] VRM Proximity Control & Eye-Contact Optimization
[2026/4/25]

[Astro #29] VRM Proximity Control & Eye-Contact Optimization

接近フェーズにおける到達判定の修正、ドアップ時の白目防止ロジック、CustomEvent経由のwalkSpeed同期、ターミナル履歴機能の追加について。
[Astro #28] VRM Animation Protocol — MixamoからWiredな同期演奏まで
[2026/4/24]

[Astro #28] VRM Animation Protocol — MixamoからWiredな同期演奏まで

VRMアバターの動的ロードから、FBX to VRMA変換の自動化、そして音楽やVOICEVOXと連動したモーション・シーケンス制御まで、3D Webにおけるアバター表現の拡張を技術的に解説します。
[Astro #27] Terminal Evolution — 音声同期プロトコルと UI の弾力性
[2026/4/24]

[Astro #27] Terminal Evolution — 音声同期プロトコルと UI の弾力性

Wired との同期を深めるためのオーディオ・プロトコルの確立と、ターミナル UI の操作性拡張に関する記録。
[Astro #26] React Three Fiberとthree-vrmを用いた自律アバターの実装と視線制御
[2026/4/23]

[Astro #26] React Three Fiberとthree-vrmを用いた自律アバターの実装と視線制御

three-vrmを利用し、ブラウザ上でアバターを稼働させる実装。イベントリスナーの正常化や、視線制御における「BoneApplier」の階層ハックなど、実用的なトラブルシューティングを記録します。
[Astro #25] ReactとVOICEVOXを利用したWired風ターミナルと音声UIの実装
[2026/4/23]

[Astro #25] ReactとVOICEVOXを利用したWired風ターミナルと音声UIの実装

以前開発したChrome拡張機能のコードをベースに、Web Audio APIを用いた音声再生と、ReactによるWired風ターミナルの構築方法を解説します。
[Astro #24] 1,600ノードの情報を幾何学的秩序で制圧 — 3D Force-Directed Graphの再構築
[2026/4/22]

[Astro #24] 1,600ノードの情報を幾何学的秩序で制圧 — 3D Force-Directed Graphの再構築

500件超の記事から抽出された膨大なタグネットワークを、Three.jsと物理演算を用いて可視化する実装解説。幾何学的な初期配置と摩擦制御による安定化プロセス。
[Astro #23] Netlify Formsでサーバーレスなコンタクトフォームをゼロから構築する
[2026/4/21]

[Astro #23] Netlify Formsでサーバーレスなコンタクトフォームをゼロから構築する

バックエンドを持たないAstro製静的サイトに、Netlifyの標準機能であるFormsを使ってコンタクトフォームを実装する手順を解説。data-astro-reloadによるエラー回避や通知設定も網羅。
[Astro #22] CIを捨ててローカルデプロイへ：Netlify CLIで手に入れる確実性とスピード
[2026/4/17]

[Astro #22] CIを捨ててローカルデプロイへ：Netlify CLIで手に入れる確実性とスピード

外部サーバーの機嫌に左右されるCI環境を脱却し、Netlify CLIを使用して手元の環境から直接デプロイする方法を解説。確実なビルドとデプロイ速度の向上を実現します。
[Astro #21] Warnings 0への執念：500記事のMDX浄化とGitHub Actionsでのrimraf罠
[2026/4/17]

[Astro #21] Warnings 0への執念：500記事のMDX浄化とGitHub Actionsでのrimraf罠

Astroへの移行後、ログに溢れていたビルド警告を一掃。一見「不毛」に見える修正がもたらす静寂なビルド環境と、CI環境での依存関係トラブル（rimraf）の回避策を解説します。
[Astro #20] GitHub ActionsによるNetlifyデプロイの自動化とメモリ不足・二重ビルドの回避策
[2026/4/16]

[Astro #20] GitHub ActionsによるNetlifyデプロイの自動化とメモリ不足・二重ビルドの回避策

Netlify標準ビルド環境のメモリ制限を回避するため、GitHub Actionsのリソースを活用したデプロイフローを構築。発生したENOENTエラーやフラグ名の仕様変更など、実戦的なトラブルシューティングをまとめる。
[Astro #19] Windows の EPERM エラー対策と WSL2 への開発環境移行
[2026/4/16]

[Astro #19] Windows の EPERM エラー対策と WSL2 への開発環境移行

Windows ネイティブ環境でのファイルロックに起因する EPERM エラーを回避するため、WSL2 (Ubuntu) への移行、Git/SSH の再設定、Node.js (fnm) の構築、および VS Code の WSL 連携手順をまとめました。
[Astro #18] DB × Turso × Netlify：静的サイトに『命』を吹き込む対話システムの構築と、環境同期の完全攻略
[2026/4/15]

[Astro #18] DB × Turso × Netlify：静的サイトに『命』を吹き込む対話システムの構築と、環境同期の完全攻略

ローカル環境と本番環境（Turso）の同期、Netlifyでの環境変数設定、Google Search Console APIのエラーハンドリングなど、実践的なトラブルシューティングを網羅した開発記録。
[Astro #17] Astro DB と Actions でサイバーな動的コメント欄を構築
[2026/4/11]

[Astro #17] Astro DB と Actions でサイバーな動的コメント欄を構築

静的な Astro ブログに Astro DB (Turso) と Actions を組み合わせ、訪問者が足跡を残せる動的な BBS コンポーネントを実装しました。415エラーの解決やレイアウトの最適化も解説。
[Astro #16] WebサイトをPWA化してデスクトップアプリ（NAVI）として実在させる
[2026/4/11]

[Astro #16] WebサイトをPWA化してデスクトップアプリ（NAVI）として実在させる

Webサイトを「独立したアプリ」に進化させるPWA化。Astro環境下での vite-plugin-pwa の設定から、手動での Service Worker 登録、エラー解決までの手順と引っかかりやすいポイントを解説します。
[Astro #15] Copland OS： SVG clock 無段階サイズ変更と、SPA特有のバグを攻略
[2026/4/11]

[Astro #15] Copland OS： SVG clock 無段階サイズ変更と、SPA特有のバグを攻略

AstroとNext.jsの混在環境で発生するSPA特有のイベントリスナー重複や、requestAnimationFrameの停止処理など、実戦的なデバッグ手法をまとめました。
[Astro #14] Copland OS風UIの極北：カスタムアナログ時計とコンテキストメニューの実装
[2026/4/10]

[Astro #14] Copland OS風UIの極北：カスタムアナログ時計とコンテキストメニューの実装

Astroプロジェクトに、Copland OSライクなSVGカスタムアナログ時計と右クリック（長押し）メニューを追加。filterプロパティの罠や、localStorageを使った状態保存、シーン切り替え時の表示制御について解説します。
[Astro #13] Astro SSR × Resend × JWT で作るDB不要の「マジックリンク認証」
[2026/4/9]

[Astro #13] Astro SSR × Resend × JWT で作るDB不要の「マジックリンク認証」

総当たり攻撃の脅威から個人ダッシュボードを守るため、AstroとResendを組み合わせてパスワードレス認証（マジックリンク）を導入する具体的な実装手順とハマりどころを解説します。
[Astro #12] 完全自動化！YouTube Data APIで動画リストを取得し、Astroでギャラリーを自動生成する
[2026/4/9]

[Astro #12] 完全自動化！YouTube Data APIで動画リストを取得し、Astroでギャラリーを自動生成する

毎回手動で動画を追加するのは面倒！npm run dev（またはbuild）のタイミングでYouTube APIを叩き、最新の動画リストをJSON化してAstroで表示する自動化ワークフローの備忘録です。
[Astro #11] 自作ダッシュボードへの道：Search Console APIの鍵取得とデータ取得テスト
[2026/4/9]

[Astro #11] 自作ダッシュボードへの道：Search Console APIの鍵取得とデータ取得テスト

Google Search Console APIをAstroから叩くための準備（GCPプロジェクト作成、サービスアカウント発行、GSC連携）と、googleapisを使った最小構成のテストページ実装方法を初心者向けに解説します。
[Astro #10] 5分でBingにインデックス - Webmaster Tools連携とサイトマップ自動生成
[2026/4/9]

[Astro #10] 5分でBingにインデックス - Webmaster Tools連携とサイトマップ自動生成

Google Search Console連携によるBing Webmaster Toolsへの一括登録と、Astroでの自動サイトマップ生成（sitemap-index.xml）の手順を解説します。
[Astro #09] AstroにおけるCSS設計：グローバルCSSの基本とサイバーパンク・スタイリングの実践
[2026/4/9]

[Astro #09] AstroにおけるCSS設計：グローバルCSSの基本とサイバーパンク・スタイリングの実践

Astro初心者〜中級者向けに、CSSのスコープやグローバル化の手順を解説。実際にプロジェクトで使用しているCSSファイルを元に、実践的なスタイリング手法を紹介します。
[Astro #08] Shader パラメータ計算機：静的なブログに 動き を吹き込む
[2026/4/7]

[Astro #08] Shader パラメータ計算機：静的なブログに 動き を吹き込む

Astro と React を組み合わせ、MDX 内で動作する Gerstner Wave パラメータ計算機を構築。client:visible ディレクティブによるパフォーマンス最適化と、サイバーパンク風の UI カスタマイズについて詳しく紹介します。
[Astro #07] HugoからAstroへの移行とビルド最適化・クローリング検証
[2026/4/5]

[Astro #07] HugoからAstroへの移行とビルド最適化・クローリング検証

HugoからAstro + React + MDX環境への移行記録。旧環境からのリポジトリ軽量化、SSGビルド時のOOMエラー対応、MDXパーサーの仕様対応、および移行後のクローリング状況についてまとめる。
[Astro #06] R3Fで構築する3Dサイバーアーカイブの実装録と最適化
[2026/4/1]

[Astro #06] R3Fで構築する3Dサイバーアーカイブの実装録と最適化

R3Fベースの3D動画アーカイブの実装記録。iframeのブラウザプロセス上限対策、MeshReflectorMaterialによる「データの澱み」の表現、およびDOMとWebGLの微小レイヤー構造について解説。
[Astro #05] 一子相伝の「120px」—極限のレスポンシブで最後に笑うのは固定値だった
[2026/3/31]

[Astro #05] 一子相伝の「120px」—極限のレスポンシブで最後に笑うのは固定値だった

Astro移行記第5回。外部CSSの干渉（!important）との戦いと、不完全な「Ver. 0.0.1」で公開に踏み切る開発哲学について。
[Astro #04] レスポンシブの深淵と dvh による画面固定
[2026/3/30]

[Astro #04] レスポンシブの深淵と dvh による画面固定

Astroへの移行中に直面した、モバイル環境特有の表示不具合（アドレスバーの影響や要素の重なり）に対する具体的なCSS解決策と構築のポイントをまとめました。
[Astro #03] Pagefind検索と動的目次（TOC）の実装
[2026/3/28]

[Astro #03] Pagefind検索と動的目次（TOC）の実装

HugoからAstroへの移行最終局面。全記事のビルドエラーを解消し、クライアントサイド検索と自動目次生成機能を導入した開発記録。
[Astro #02] 530件の記事移行とトラブル対処：カテゴリー統合とMDXエラー
[2026/3/27]

[Astro #02] 530件の記事移行とトラブル対処：カテゴリー統合とMDXエラー

532件の全アーカイブをAstroへ最適化。カテゴリー統合、波括弧のエスケープ、そしてUIのレスポンシブ調整までの全工程。
[Astro #01] 環境構築・トラブルシューティングのメモ
[2026/3/26]

[Astro #01] 環境構築・トラブルシューティングのメモ

Windows 環境での Astro 導入時に直面したパス解決エラーや、Hugo 資産移行時に発生した Shiki のパースエラー、ファイル名問題への対処法をまとめました。