🚀 Astro // PROTOCOL.LAIN

[ CATEGORY / 🚀 Astro ]

MATCHED_ITEMS: 148

[2026/9/14]

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

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

[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 エクスポートまでを解説。

[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 バイリニア補間まで実装したが、オンラインサービスと比較した精度差が埋まらず断念。

[2026/9/13]

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

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

[2026/9/13]

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

WebAssembly にコンパイルされた FluidSynth と Web Audio API を組み合わせ、ブラウザ単体で MIDI ファイルと SoundFont を再生する Web アプリケーションの構築手法を解説。自作 SMF パーサー、AudioContext と描画フレームを同期させる Tick 補間処理、大容量 SF2 の IndexedDB キャッシュ管理、およびデバッグ時のハマりポイントをまとめています。

[2026/9/13]

[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 による背景画像合成までをまとめています。

[2026/9/12]

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

ブラウザ単体で動作するレトロサウンドジェネレーター SynthRackGenerator v1.0 の技術構成を解説。AudioNode による合成パイプライン、OfflineAudioContext を用いた即時 WAV レンダリング、Canvas2D オシロスコープ / FFT アナライザー、8ステップシーケンサー、および LocalStorage / URL Hash を利用したパッチデータ共有機構の実装記録。

[2026/9/12]

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

PROTOCOL.LAIN 内のフローティングウィンドウ「LAIN RETRO ARCADE」に、PONG・平安京エイリアン・スペースインベーダーの 3 タイトルを Canvas2D で実装。8×8 ドットスプライトを数値配列で定義し fillRect で 1 ドットずつ描画する手法、グリッドベースの穴掘りメカニクス、BFS を排した直線+視線AI、ビットマップ破壊可能シールドなど、各ゲーム固有の技術課題と解決策を記録。

[2026/9/11]

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

Astro / React で構築した Web ターミナルウィンドウに壁紙設定機能を実装。Dexie.js の db.textures テーブルによる Blob データ保持、URL.createObjectURL による動的展開、iframe/xterm.js 透過時の描画トラブル解決とローカル検証モックの構築について解説。

[2026/9/10]

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

ブラウザ上で動作する Wireshark 風パケットアナライザの開発ログ。Web Worker によるバイナリ解析と Float64Array バッファ転送、Canvas 2D を用いた数万パケットの仮想スクロール描画、インデックスマッピングによるリアルタイムフィルタリングのハマりポイントと実装を徹底解説。

[2026/9/10]

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

Emscripten / WebAssembly と Web Audio API (AudioWorklet) を組み合わせた Sound Blaster (OPL3) / Mega Drive (OPN2) FM音源プレイヤー開発の失敗・ハマりポイントログ。内蔵バンク、スコープ制限、ポインタオフセット、サンプルレート問題など音が出ない4大原因を徹底解剖。

[2026/9/9]

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

ブラウザ完結型バイナリエディタ「Bz-Style Binary Editor」の技術解説。HTML5 Canvasを用いた仮想スクロール描画、HEX/TEXTワイルドカード検索エンジン、Data Inspector、Bitmap View、ショートカット操作・ヘルプモーダルの実装詳細。

[2026/9/9]

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

ブラウザ完結型ファイル解析・検証ツール「File Inspector」の技術解説。マジックバイト判定、拡張子不一致警告、Web Crypto API/SparkMD5ハッシュ計算、ExifReaderメタデータ解析、PNG/JPEGのEOF外隠しデータ検出、ヘキサダンプ表示の実装詳細。

[2026/9/9]

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

FFmpeg WASMによるブラウザ完結型オーディオコンバーターの技術解説。6フォーマット対応、ビットレート/サンプルレート/チャンネル制御、入出力波形比較、バッチ変換、Opusのネイティブエンコード実装詳細。

[2026/9/9]

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

sql.js WASMによるブラウザ完結型SQLiteビューア/エディタの技術解説。テーブルデータ表示、スキーマ解析、SQLエディタ、CSV/JSONエクスポート、DB情報パネル、テーブル検索フィルタの実装詳細。

[2026/9/8]

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

Tesseract.js WASMによる多言語OCRと、Whisper ONNX WASMによる音声テキスト起こしを、タブ切替UIで共存させたブラウザ完結型ツールの技術解説。モデルの遅延ロード、AudioContextによる音声デコード、Astroスコープドスタイルの制約まで。

[2026/9/8]

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

Nuked-OPL3のエミュレーションコアをWASM化し、AudioWorklet経由で.droファイルを再生するWebAudioプレイヤーの開発記録。関数名の難読化や非同期キュー、128サンプル単位の精密同期バグの克服を解説。

[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ファイル対応。デバッグ過程の技術記録。

[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ダウンロード。

[2026/9/7]

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

libraw-wasmによるブラウザ完結型カメラRAWビューア。Canon CR2・Nikon NEF・Sony ARW等500+フォーマット対応。EXIF/GPS/レンズ情報表示、RAW再現像パラメータ調整、バッチ変換、JPEG/PNG/WebP書き出し。

[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多体表示の限界を検証。

[2026/9/5]

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

libarchive.js WASMとJSZipによるブラウザ完結型アーカイブマネージャー。ZIP, 7z, RAR, tar等の閲覧・抽出、Windows特有のShift-JIS文字化け修復、ZIP爆弾・パス・トラバーサル等のセキュリティ診断、ブラウザ内プレビューを搭載。

[2026/9/5]

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

libheif WASMによるHEIC/HEIFからJPEG/PNG/WebPへのブラウザ完結変換ツール。バッチ一括変換、サムネイルグリッド表示、サイズ可変スライダー、Canvas pan/zoomプレビュー、JSZipによるZIP一括ダウンロード。ファイルはサーバーに送信されません。

[2026/9/5]

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

WebGLシェーダーパイプラインによるリアルタイム画像調整ツール。8種類の基本調整、4チャンネルトーンカーブ、3D LUT(.cube)、ビネット/グレイン、フィルムプリセット8種、クロップ/リサイズ、Undo/Redo。サーバー不要・ブラウザ完結。

[2026/9/4]

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

Three.js + occt-import-jsによるSTEP/IGES 3D Viewerのv2アップデート。マルチモード測定（距離・角度・面・パーツ体積）、肉厚/勾配/曲率の各種3D解析ヒートマップ、分解図（Explode View）機能を実装。

[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再投影をサーバー不要で完結。

[2026/9/3]

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

web-ifc WASMモジュールをブラウザに組み込み、IFCファイルのジオメトリをストリーミング処理でThree.jsメッシュに変換。IFCタイプ別の要素ツリー表示、クリックによるプロパティ参照、タイプ別ハイライト、エッジ表示、GLBエクスポート対応。完全ブラウザ完結、広告なし。

[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エクスポートに対応。

[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分離波形ビジュアライザー、チップモデル切替まで実装。

[2026/9/1]

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

OpenJPEGのWASMデコーダーとCanvas API、JSZipを用いて構築したブラウザ完結型のJPEG 2000 (.jp2) 画像コンバーター。DPR対応の高精細プレビュー、toBlobによるメモリ最適化、複数ファイルの一括ZIPダウンロード機能を実装。

[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エクスポートまで実装。

[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出力との連携まで。

[2026/8/27]

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

IndexedDBとOPFS（SyncAccessHandle）のパフォーマンス比較ツールを開発。Web Workerでのバックグラウンド並列処理、FileSystemSyncAccessHandleを用いた同期書き込み、HTML5 Canvasによるブロック単位のレイテンシマップ可視化の実装手法を解説。

[2026/8/27]

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

Astro + React Three Fiber製の点群ビューアのv10。laz-perfにEmscripten圧縮バインディングを自作して250KBのWASMをビルドし、LAZエクスポートを実装。全エクスポートのファイル名をソースファイル名ベースに変更、LAZ圧縮の進捗表示（スピナー+パーセント）も追加。

[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への引き上げなど。

[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転送、キャンセルボタン、処理時間計測など。

[2026/8/24]

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

Astro + React Three Fiber製の点群ビューアに任意直線断面（2点クリック→XZ平面法線による垂直断面→厚さパラメータ→ビン分割プロファイル生成→DXFエクスポート）と、SORノイズ除去の非同期チャンク分割処理（50,000点ごとにUIスレッドへ制御を返し進捗表示）を追加。

[2026/8/23]

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

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

[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で点群編集ツールとして本格化。

[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フォーマットの完全対応。

[2026/8/20]

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

Astro + React Three Fiber製の点群ビューアにLAZ圧縮フォーマット対応を追加。laz-perf WASMのESMパッチ適用、Emscriptenモジュールの静的配信、解凍ループのチャンク分割による進捗表示、XYZ/CSVテキストフォーマットの入出力対応までの全工程を解説。

[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ランダムサンプリングによる大規模点群の描画、測地座標のセンタリング＋正規化の全工程を解説。

[2026/8/19]

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

iPhone LiDARや写真測量で取得した点群データ（PLY）をブラウザ上で閲覧・編集できるWebツールの実装記録。Three.jsのPointsとPLYLoaderによる描画、高さベースヒートマップ、軸別スライス断面、レイキャストによる計測ツール、空間ハッシュグリッドで高速化したSORノイズ除去、PLY/GLBエクスポートまでの全工程。

[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）へ接続するためのネットワーク設定手順を解説します。

[2026/7/21]

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

Three.js (r183) の GLTFExporter を利用して、ボーン構造やモーフターゲット（表情等）を保持したままブラウザ上のみで GLB エクスポートを行う実装手法をまとめました。

[2026/7/19]

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

ブラウザ上で動作するGLB圧縮ツールの実装解説。gltf-transformを活用したDracoジオメトリ圧縮と、Canvas APIを用いたテクスチャのWebP化を組み合わせたファイルサイズ削減手法、およびAstroへの統合手順について詳解します。

[2026/7/15]

[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非推奨警告修正。

[2026/7/7]

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

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

[2026/7/7]

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

Three.jsのオフスクリーンレンダリングでVRMモデルのサムネイルを自動生成し、IndexedDBにBase64で保存。WiredAvatarMenuとWiredVRMenuの両方でサムネ付きモデル選択UIを実装した記録。

[2026/7/6]

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

WebXR格闘ゲーム LAYER FIGHTER のラウンドフローを再設計し、GAME_SETフェーズを新設。2本先取時の演出整理、フレームカウントリセット、リセットロジック共通化、入力バッファ起因の膝蹴り暴発バグを修正。

[2026/7/5]

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

WebXR格闘ゲーム LAYER FIGHTER のメニュー画面にPS4コントローラー対応を実装。Gamepad APIをポーリングする共通React hookを1つ作り、全5画面に適用した記録。

[2026/7/4]

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

LAYER FIGHTERのエンディングクレジットにステージの3Dモデル情報が表示されない問題を修正。Assets.jsonではなくStages.jsonから直接読み込むようimportを追加。

[2026/7/2]

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

WITCreditBoardをCreditBoard.tsxとして汎用化し、ADV/RPG（STAGE_MY_ROOM）とパズルゲーム（木箱GLB付き）にクレジット看板を設置。VR/PC座標分岐、import type問題、外部VRM保存フローの調査、VRMアバターY軸回転機能の実装まで。

[2026/7/2]

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

WebXR格闘ゲーム LAYER FIGHTER にステージセレクト画面を実装し、ジャンプ攻撃を追加しました。VR/デスクトップ両対応のHUD二重表示バグも修正。

[2026/6/30]

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

MR実装2日目。WiredAvatarからMRAvatarへの責務分離、AVATAR_HEIGHTの根本解決、歩行アニメーション、メモリリーク対策、段差検出・座りイベント、VRコントローラーでの設定UIを実装。

[2026/6/30]

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

WebXR plane-detectionを使い、Quest3のパススルーMR空間でVRMアバターが実際の床に着地し、壁に反射して歩き回る仕組みを実装した記録。

[2026/6/29]

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

LAYER FIGHTERのVR完全対応。サウンドテストを3D UIに刷新、確認ダイアログ実装、HUDフラグ管理、そしてQuest単体でゲームが止まる根本原因（requestAnimationFrame問題）をuseFrameへの移行で解決した記録。

[2026/6/27]

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

LAYER FIGHTERの大規模リファクタ。敵ステートマシン化、ファイル分割、Canvas統合によるVR対応土台の構築、ボイス実装、サウンドテスト、頭上HPバー、Canvas外HUD実装まで。

[2026/6/27]

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

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

[2026/6/26]

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

React Three Fiber + VRM で格ゲー「LAYER FIGHTER」を大幅強化。無限スクロールタイトル画面（VRMアバター・猫・ゴールハウス演出・ループ）、敵AIのパンチ攻撃とダメージ判定（EnemyPhysics拡張）、ラウンド推移（KO→YOU WIN→ROUND N→FIGHT）、GLBステージ読み込み、Assets.json駆動のクレジットスライダーまで実装した記録。

[2026/6/25]

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

LAYER FIGHTER開発2日目の記録。Moves.jsonによるヒットエフェクトの外部化、入力バッファによるコマンド技、2キャラ追従カメラ、VRM Posing Desktopによる自作アニメーション制作など、トレーニングモードの完成度を大幅に引き上げました。

[2026/6/24]

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

VRMモデルとReact Three Fiberで格闘ゲームを作る試みの記録。バーチャファイター風の入力サンドボックス、テンキー表記HUD、Moves.json による技パラメーター外部化、ヒットボックスの可視化、PS4コントローラー対応など、トレーニングモード一式を実装しました。

[2026/6/21]

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

エンディング周りの同期的フラグ管理とクレジットの描画バグをお掃除。IndexedDBによる事前キャッシュ機構のパイプラインに、猫使ビィのパワーアップシステムボイスを音量1.2で完璧に配線した全レイヤーのリファクタリングログ。

[2026/6/21]

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

React Three Fiber 横スクロールシューティングの設計負債清算記録。巨大な useFrame の分割、敵パターンのデータ駆動化、座標オフセット問題の根本解決、プロシージャル背景のテーマ化、ステージ遷移ロジックなど、ゲーム完成までの実装過程を詳述。

[2026/6/19]

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

WITコアエンジンのメインループ最深部で発生していた設定データの動的ルックアップを撤廃し、生成時に判定半径やオフセットを固着させる方式へ移行。型キャストを排除し、処理負荷低減と堅牢性を両立したリファクタリングの事実をまとめています。

[2026/6/19]

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

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

[2026/6/18]

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

React Three Fiber（R3F）環境下での3Dシューティングゲーム開発記録。動的データ駆動によるマルチステージ遷移、武器ステートの排他制御、およびSPA遷移時のオーディオ残存バグの解決法を実装ベースで記述します。

[2026/6/17]

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

React Three FiberとViteを組み合わせた3Dシューティングゲーム開発における、物理判定の厳密化、装甲破壊の視覚フィードバック、およびホットリロード時のガベージコレクション不整合対策について解説します。

[2026/6/16]

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

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

[2026/6/15]

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

WebGLシューティングゲームにおける、軽量な地形這行ミサイル（FALL/SLIDE/CLIMB）のステートマシン物理と、グラディウス準拠の2段階パワーアップ（同時連射・上限MAX時のUI非表示および自動スキップ機能）、地形の継ぎ目対策やチャタリングを防ぐ自爆処理の最適化手法をまとめました。

[2026/6/14]

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

Three.jsとReact Three Fiberを用いたSTG開発において、データ駆動型の動的クレジット看板、プロシージャルな千鳥貼りフローリング床、自機と障害物の衝突クランプ物理、および星型・ハート型の高輝度爆散パーティクルシステムを実装したプロセスを技術的に詳述します。

[2026/6/13]

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

Three.js（React Three Fiber）を用いたSTG開発記第77弾。劇場の床の拡張から、SystemAssets.jsonによるライセンス管理インフラの構築、数式（サイン波・モジュロ）を用いた完全シームレスな夜空背景のプロシージャル生成と別ファイルへの外出しリファクタリングまでを徹底解説。

[2026/6/12]

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

React Three Fiber環境下でのSTGエンジン構築。リプルレーザーの描画最適化から始まり、Z字型クランク編隊の数学的実装、Stage1.jsonによるタイムライン制御、Rキーリセットにおける時間軸バグの克服、そしてWebAudioベースのAudioControllerによる遅延ゼロ連射SEの実装までをロジカルに解説します。

[2026/6/11]

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

Three.js / React Three Fiber環境におけるMeshBVH（境界ボリューム階層）の導入によるレイキャスト高速化、ENEMY_BUNYAテストコード混入によるエンディング誤起動バグ、BOSS_HACKLOAD接触イベント欠落、箒モードの移動速度逆転バグの修正内容を解説。

[2026/6/11]

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

Three.jsおよびReact Three Fiber環境下における、ラスボス戦の演出強化ハック。人魂の高速公転収束、AnimationMixerの単発再生制御、高解像度発光文字ビルボード、depthTest無効化による最前面描画、CameraHUDを用いた正面ロック防衛インフラの実装内容を解説。

[2026/6/10]

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

ストーリー進行システムとボス戦・NPCダイアログUIを実装。高ポリゴンモデルのレイキャスター最適化とバトルバグ修正。

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

[2026/6/8]

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

Reactの宣言的UIとデータ駆動設計を融合させ、3D RPGのイベントインフラを構築。さらにR3F環境でのワールド回転軸のねじれバグをapplyAxisAngleでねじ伏せ、AudioControllerに完全マージした開発ドキュメント。

[2026/6/8]

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

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

[2026/6/6]

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

WebGL/Three.jsを用いたデータ駆動型ADV・バトルシステムにおいて、敵の特殊攻撃をストラテジーパターンレジストリへ移行しコンポーネントを疎結合化。また、ロードラグによる地形コライダーの判定漏れを防ぎ床抜けバグを修正する、Y軸着地マージン同期インフラの実装手法を解説します。

[2026/6/6]

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

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

[2026/6/5]

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

VRコントローラーの全ボタン実装、Rising Edge連打防止、吹き出しVR安定化、マジックバーストエフェクトの追加。

[2026/6/4]

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

ADV/RPGにステータス画面、魔法システムのJSON化、箒に乗る高速移動モード、ヒール魔法のパーティクルエフェクトを実装。

[2026/6/3]

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

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

[2026/6/2]

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

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

[2026/6/1]

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

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

[2026/5/31]

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

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

[2026/5/29]

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

React Three Fiberを用いたVRパズルゲーム開発の最終フェーズ。コンポーネント自律型のメモリ解放処理や、JSONデータ駆動による動的クレジットスクロール、VR空間での複数VRM配置における軽量化ハックについて解説します。

[2026/5/28]

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

React + Three.jsでぷよぷよ風パズルゲームを実装。お邪魔ブロック（ノイズ）追加後に発生した描画バグの原因を徹底調査。key props、ジオメトリ再利用、グリッドデータのデバッグ手法まで。

[2026/5/27]

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

React Three Fiberを用いてSTGのエンディング演出を1から設計・実装した記録。800個のパーティクルが中心へ収束し続けるループアニメーション、R3F上のクレジットスクロール、接続切断（発散）演出、感謝テキストのフェードイン/アウトまで、フェーズ管理と頂点カラー制御を組み合わせたプロトコルの全記録。

[2026/5/26]

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

React Three FiberとWebXRを用いた3Dシューティングゲームにおいて、上流のScene、Manager、下流のController間で発生したフラグ競合を解消し、アバター追従型のミニマルHUDと3回制限ボムを完全同期させたリファクタリングの記録。

[2026/5/25]

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

一時的なBlob URLの死活問題を解決するため、外部からロードしたVRMのバイナリをIndexedDBに直接トラップ。静的なJSONリストとDB内の動的レコードをシームレスに結合し、外部アセットを無限に追加・呼び出し可能にするパイプラインハッキングの記録です。

[2026/5/22]

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

Three.js/R3Fを用いたSTG開発において、サンプル環境から本番環境への3D数式弾幕の移植手順を解説。また、新アイテム「CHARGE_SHORTEN」実装時に発生した、エフェクトと内部タイマーの同期不全、およびSTGController側の論理演算子の優先順位に起因するデバッグの盲点について詳述。

[2026/5/21]

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

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

[2026/5/20]

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

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

[2026/5/19]

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

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

[2026/5/17]

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

React Three Fiberを用いて、VRMアバターを箒に乗せてサイバー空間を自動周回させる浮遊アニメーションの実装記録。三角関数による楕円軌道の計算や、Math.atan2を活用した進行方向への自動旋回ロジックまで、3D空間における数学的アプローチをまとめました。

[2026/5/17]

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

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

[2026/5/16]

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

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

[2026/5/15]

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

PROTOCOL.LAINの空間に溶け込む自律型VRMアバターのUI実装。HTML要素に頼らずDreiのEdgesを用いてThree.js空間へ直接吹き出しを描画する手法や、アニメーションステートの罠（Tポーズ問題）の解決策をまとめた技術アーカイブ。

[2026/5/14]

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

WebXRプロジェクトのロード時間を改善するため、Dexie.jsでアセット管理基盤を構築しました。JSONのバージョン情報を「正解リスト」としてDBと比較する堅牢な仕組みと、Reactコンポーネント分割によるメモリ管理の実践手法を解説します。

[2026/5/14]

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

R3F + WebXRでの背景実装の罠と、背景とライティングを分離する手法、UIの拡張性向上について詳しく解説します。

[2026/5/13]

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

WebXR空間でVRMアバターのモーション切り替え時に発生する「Tポーズ問題」を、AnimationMixerを用いた安全なクロスフェード処理で解消する方法を解説。あわせて、three-vrmやUnityエクスポート時の厄介な警告メッセージ根絶プロセスも記録します。

[2026/5/13]

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

Three.jsのAnimationMixerを用いた、WebXRカメラのY座標に基づく姿勢判定ロジック。しゃがみ、立ち上がり、ジャンプの各モーション遷移と、自然な補間のための命令型制御の実装。

[2026/5/11]

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

AstroとReact Three Fiber(R3F)を用いたWebXR開発において、アバターに意志を感じさせる移動ステートマシンとlerpによる滑らかな追従・帰還処理の実装ポイントをまとめました。

[2026/5/11]

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

144枚のビデオアトラス描画、VRコントローラーによるサルベージ、GPUリソースの最適化まで。

[2026/5/10]

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

React Three FiberとWebXRを用いて、VR空間内に3Dターミナルコンソールを構築。座標計算の罠を突破し、Event-Driven Architectureを活用してVR空間から現実のシステム（天気APIやVOICEVOX）を直接制御するフルダイブ環境の実装手法を解説します。

[2026/5/9]

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

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

[2026/5/9]

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

AstroとReact Three Fiberを組み合わせたサイト開発。GLBモデルを用いたステージの配置と自転アニメーション、JSONによる動的切り替え、そしてスマホ対応のメニューUI実装についてまとめました。

[2026/5/8]

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

useProgressフックで発生しがちなState更新衝突エラーの原因を特定し、DefaultLoadingManagerとsetTimeoutを用いた確実な回避策をまとめました。

[2026/5/8]

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

React Three Fiber環境でのVRMアバター開発において、待機モーション（Idle状態）を重み付け抽選で動的に切り替える仕組みを実装。JSONファイルを用いた設定管理や、スムーズなステート移行など、アバターに自然な「生命感」を演出する実装方法を解説します。

[2026/5/3]

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

Astro + React Three Fiber環境でWebXRを実装する際の致命的な落とし穴。ContactShadowsによる画面暗転や、OrbitControlsの強制起動によるWebGLクラッシュの罠と、コンポーネント完全分離によるハイブリッド(PC/VR)対応の解決策をまとめました。

[2026/5/1]

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

Netlifyのビルド制限やメモリ不足(OOM)を突破し、Cloudflare Pagesで高速なミラーサイトを構築する手順。Node.jsのヒープメモリ拡張やアダプター換装、サブドメイン運用の最適解をまとめました。

[2026/5/1]

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

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

[2026/5/1]

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

Three.jsと@pixiv/three-vrmを用いたアバターの動的衣装変更プロセス。Temporal Dead Zone、VRoidのメッシュ統合仕様、ボーン同期時のポリゴン破綻など、直面した課題と原因をまとめる。

[2026/4/28]

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

Vite のビルドプロセスにおける worker.format の不一致エラーを解決。IIFE と ES Modules の境界線、そして astro.config.mjs への介入方法について詳解します。

[2026/4/28]

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

WiredTerminal における時報プロトコルの実装。useRef によるラッチ制御、JSON 駆動のランダム対話エンジン、そして WebXR への拡張を見据えたモーション同期について解説します。

[2026/4/27]

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

前回のAstro Actionsによるアプリケーション層の防衛に続き、Cloudflareを用いたネットワークエッジでの多重防壁を構築。Bot Fight Modeによる自律的なノイズ浄化と、Billingアラートによる経済的防衛線の設定手順を実戦的にまとめた。

[2026/4/27]

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

Astro Actions、MyMemory API、Open-Meteo APIを統合した疑似ターミナルの機能拡張録。バックエンドのAPI通信から、フロントエンドでのコマンド解析、複数話者による音声出力管理まで、実装の全工程を技術的に整理した。

[2026/4/26]

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

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

[2026/4/26]

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

接近フェーズにおける到達判定の修正、ドアップ時の白目防止ロジック、CustomEvent経由のwalkSpeed同期、ターミナル履歴機能の追加について。

[2026/4/25]

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

VRMアバターの動的ロードから、FBX to VRMA変換の自動化、そして音楽やVOICEVOXと連動したモーション・シーケンス制御まで、3D Webにおけるアバター表現の拡張を技術的に解説します。

[2026/4/24]

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

Wired との同期を深めるためのオーディオ・プロトコルの確立と、ターミナル UI の操作性拡張に関する記録。

[2026/4/24]

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

three-vrmを利用し、ブラウザ上でアバターを稼働させる実装。イベントリスナーの正常化や、視線制御における「BoneApplier」の階層ハックなど、実用的なトラブルシューティングを記録します。

[2026/4/24]

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

以前開発したChrome拡張機能のコードをベースに、Web Audio APIを用いた音声再生と、ReactによるWired風ターミナルの構築方法を解説します。

[2026/4/22]

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

500件超の記事から抽出された膨大なタグネットワークを、Three.jsと物理演算を用いて可視化する実装解説。幾何学的な初期配置と摩擦制御による安定化プロセス。

[2026/4/22]

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

バックエンドを持たないAstro製静的サイトに、Netlifyの標準機能であるFormsを使ってコンタクトフォームを実装する手順を解説。data-astro-reloadによるエラー回避や通知設定も網羅。

[2026/4/17]

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

外部サーバーの機嫌に左右されるCI環境を脱却し、Netlify CLIを使用して手元の環境から直接デプロイする方法を解説。確実なビルドとデプロイ速度の向上を実現します。

[2026/4/17]

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

Astroへの移行後、ログに溢れていたビルド警告を一掃。一見「不毛」に見える修正がもたらす静寂なビルド環境と、CI環境での依存関係トラブル（rimraf）の回避策を解説します。

[2026/4/16]

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

Netlify標準ビルド環境のメモリ制限を回避するため、GitHub Actionsのリソースを活用したデプロイフローを構築。発生したENOENTエラーやフラグ名の仕様変更など、実戦的なトラブルシューティングをまとめる。

[2026/4/16]

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

Windows ネイティブ環境でのファイルロックに起因する EPERM エラーを回避するため、WSL2 (Ubuntu) への移行、Git/SSH の再設定、Node.js (fnm) の構築、および VS Code の WSL 連携手順をまとめました。

[2026/4/15]

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

ローカル環境と本番環境（Turso）の同期、Netlifyでの環境変数設定、Google Search Console APIのエラーハンドリングなど、実践的なトラブルシューティングを網羅した開発記録。

[2026/4/12]

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

静的な Astro ブログに Astro DB (Turso) と Actions を組み合わせ、訪問者が足跡を残せる動的な BBS コンポーネントを実装しました。415エラーの解決やレイアウトの最適化も解説。

[2026/4/11]

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

Webサイトを「独立したアプリ」に進化させるPWA化。Astro環境下での vite-plugin-pwa の設定から、手動での Service Worker 登録、エラー解決までの手順と引っかかりやすいポイントを解説します。

[2026/4/11]

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

AstroとNext.jsの混在環境で発生するSPA特有のイベントリスナー重複や、requestAnimationFrameの停止処理など、実戦的なデバッグ手法をまとめました。

[2026/4/11]

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

Astroプロジェクトに、Copland OSライクなSVGカスタムアナログ時計と右クリック（長押し）メニューを追加。filterプロパティの罠や、localStorageを使った状態保存、シーン切り替え時の表示制御について解説します。

[2026/4/9]

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

総当たり攻撃の脅威から個人ダッシュボードを守るため、AstroとResendを組み合わせてパスワードレス認証（マジックリンク）を導入する具体的な実装手順とハマりどころを解説します。

[2026/4/9]

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

毎回手動で動画を追加するのは面倒！npm run dev（またはbuild）のタイミングでYouTube APIを叩き、最新の動画リストをJSON化してAstroで表示する自動化ワークフローの備忘録です。

[2026/4/9]

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

Google Search Console APIをAstroから叩くための準備（GCPプロジェクト作成、サービスアカウント発行、GSC連携）と、googleapisを使った最小構成のテストページ実装方法を初心者向けに解説します。

[2026/4/9]

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

Google Search Console連携によるBing Webmaster Toolsへの一括登録と、Astroでの自動サイトマップ生成（sitemap-index.xml）の手順を解説します。

[2026/4/9]

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

Astro初心者〜中級者向けに、CSSのスコープやグローバル化の手順を解説。実際にプロジェクトで使用しているCSSファイルを元に、実践的なスタイリング手法を紹介します。

[2026/4/8]

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

Astro と React を組み合わせ、MDX 内で動作する Gerstner Wave パラメータ計算機を構築。client:visible ディレクティブによるパフォーマンス最適化と、サイバーパンク風の UI カスタマイズについて詳しく紹介します。

[2026/4/5]

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

HugoからAstro + React + MDX環境への移行記録。旧環境からのリポジトリ軽量化、SSGビルド時のOOMエラー対応、MDXパーサーの仕様対応、および移行後のクローリング状況についてまとめる。

[2026/4/2]

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

R3Fベースの3D動画アーカイブの実装記録。iframeのブラウザプロセス上限対策、MeshReflectorMaterialによる「データの澱み」の表現、およびDOMとWebGLの微小レイヤー構造について解説。

[2026/4/1]

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

Astro移行記第5回。外部CSSの干渉（!important）との戦いと、不完全な「Ver. 0.0.1」で公開に踏み切る開発哲学について。

[2026/3/31]

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

Astroへの移行中に直面した、モバイル環境特有の表示不具合（アドレスバーの影響や要素の重なり）に対する具体的なCSS解決策と構築のポイントをまとめました。

[2026/3/29]

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

HugoからAstroへの移行最終局面。全記事のビルドエラーを解消し、クライアントサイド検索と自動目次生成機能を導入した開発記録。

[2026/3/28]

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

532件の全アーカイブをAstroへ最適化。カテゴリー統合、波括弧のエスケープ、そしてUIのレスポンシブ調整までの全工程。

[2026/3/27]

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

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

[ CATEGORY / 🚀 Astro ]

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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