![[Astro] #151 ウィンドウマネージャーの大規模リファクタリング — 7ファイルのコピペ地獄から4ファイル統一設計へ](https://assets.lain-lab.com/images/uploads/astro-151-window-manager-refactoring.webp?0)
[Astro] #151 ウィンドウマネージャーの大規模リファクタリング — 7ファイルのコピペ地獄から4ファイル統一設計へ
React ウィンドウマネージャーのリファクタリング記録。BaseWindow 共通コンポーネントへのドラッグ/リサイズ/設定パネル統合、Context による全ウィンドウ一元管理、?embed パラメータでの iframe 内レイアウト制御、Astro SSG でのクライアントサイド embed 検出、循環参照の context.ts 分離による解消を解説。
ARCHIVE_INDEX / PAGE_9
TOTAL_ITEMS: 878
![[Astro] #150 CORS Bulk Diagnostics & Inspector — ブラウザ直接実行型CORSチェッカーの実装とフロントエンド完結の設計思想](https://assets.lain-lab.com/images/uploads/astro-149-cors-checker.webp?0)
[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）の解決手法を解説。
![[JavaScript] MSXエミュレーターを完成させる。MegaROMマッパー・PSG/SCC音源・AudioWorkletでのサウンド合成](https://assets.lain-lab.com/images/uploads/z80-emulator-msx-megarom-scc.webp)
[JavaScript] MSXエミュレーターを完成させる。MegaROMマッパー・PSG/SCC音源・AudioWorkletでのサウンド合成
No description available.
![[Astro] #149 Copland OS風スタートメニューの実装 — JSON駆動型多段カスケードメニューとカスタムイベント連携](https://assets.lain-lab.com/images/uploads/astro-149-copland-start-menu.webp?0)
[Astro] #149 Copland OS風スタートメニューの実装 — JSON駆動型多段カスケードメニューとカスタムイベント連携
Astroコンポーネントにおける JSON データ駆動のカスケードメニュー実装記録。多段階のネスト構造表示、画面外はみ出し防止のホバー位置補正、data-action 属性を介したカスタムイベント発火（ターミナル起動やファイルマネージャー連携）、href='#' 指定時のページハッシュ化・リロードループ回避テクニックを解説。
![[JavaScript] Z80エミュレーターにMSXを載せる。割り込み・ブロックI/O・VDP・スプライトで実機起動まで](https://assets.lain-lab.com/images/uploads/z80-emulator-msx-boot.webp?0)
[JavaScript] Z80エミュレーターにMSXを載せる。割り込み・ブロックI/O・VDP・スプライトで実機起動まで
Z80 CPUエミュレーター（JavaScript ESM）にMSXシステムを実装した記録。INT Mode 0/1/2 割り込み処理、NMI（0x0066ジャンプ）、EI遅延制御（eiPending）、ブロックI/O命令（INI/IND/INIR/INDR/OUTI/OUTD/OTIR/OTDR）のCPUコア拡張。TMS9918 VDPエミュレーション（16KB VRAM、2バイトコントロールラッチ、SCREEN 1/2タイル描画、スプライト8x8/16x16・拡大・Early Clock対応）。MSXスロット機構（ページ単位バンク切り替え、PPI Port A8）、PPIキーボードマトリクス（11行×8bit、PSG R#14経由のスキャン）、カートリッジROM（16KB/32KB、ABヘッダ自動検出）、C-BIOS 0.29による起動検証、Volguard・Chambers of Thyreaでの動作確認までを具体的なコードとともに解説する。
![[JavaScript] Z80エミュレーターをゼロから実装。レジスタ・フラグ・プレフィックスの完全制覇への道](https://assets.lain-lab.com/images/uploads/z80-emulator-javascript-implementation.webp)
[JavaScript] Z80エミュレーターをゼロから実装。レジスタ・フラグ・プレフィックスの完全制覇への道
Z80 CPUエミュレーターのJavaScript (ESM) による完全実装記録。レジスタファイル設計（個別変数方式、get/setプロパティによる16ビットペアアクセス）、SZPルックアップテーブル（256エントリ、パリティ＋非公式フラグF3/F5込み）、8ビット/16ビットALU（add8/sub8/adc8/sbc8/and8/xor8/or8/cp8/inc8/dec8/addHL/adc16/sbc16）のフラグ計算、x/y/z/p/qパターン分解によるオペコードデコーダー、CBプレフィックス（シフト/ローテート/BIT/SET/RES）、EDプレフィックス（ブロック転送LDIR/LDDR/CPIR/CPDR、16ビットADC/SBC、RRD/RLD、割り込みモード）、DD/FDプレフィックスのHL→IX/IY読み替え機構（IXH/IXL非公式レジスタ、(IX+d)と通常H/Lの競合、DDCBの結果レジスタコピー副作用）、DAA命令の補正ロジック、WZ(MEMPTR)レジスタのエミュレーション、CP/M BDOSトラップ（関数2/関数9）によるzexdoc実行環境の構築、zexdoc全67テストパスまでのデバッグ過程を解説する。
Z80エミュレーター開発記 第4回：ハードウェアバスとエミュレーションの勘所
Z80エミュレーター開発記の最終回。M1サイクルの4 T-state構成（T1-T2でオペコードフェッチ、T3-T4でデコード＋DRAMリフレッシュ）、メモリリード/ライトの3 T-state構成、I/Oサイクルの自動ウェイト挿入、WAIT信号の半クロック位相ズレ問題、命令単位エミュレーション vs サイクル単位エミュレーションの精度と性能のトレードオフ、テーブルデコーダーの現実的な性能優位性、コールバック方式によるCPUコアとシステムの分離設計、zexdoc/zexallによる検証戦略、そしてJS/WASMでのZ80コア全体設計を解説する。
Z80エミュレーター開発記 第3回：命令セットとプレフィックスデコードのカラクリ
Z80エミュレーター開発記の第3回。8080互換の1バイトオペコードの8ビットパターン分解（x/y/z/p/qフィールド）、CBプレフィックスによるビット操作・シフト命令の拡張、EDプレフィックスによるブロック転送・I/O命令の追加、DD/FDプレフィックスの『HL→IX/IY読み替え』メカニズム、DDCB/FDCBの4バイト命令と非公式な『結果のレジスタコピー』副作用、SLL・IXH/IXLなど非公式命令の発生原因、エミュレーターのデコーダー設計（ステートマシン方式 vs テーブル方式）までを解説する。
Z80エミュレーター開発記 第2回：レジスタ構造と「裏レジスタ」の美学
Z80エミュレーター開発記の第2回。8080互換のAF/BC/DE/HLレジスタペア、Z80固有のIX/IYインデックスレジスタ、裏レジスタ（AF'/BC'/DE'/HL'）のEX/EXX命令による切り替え機構、フラグレジスタFの全8ビット（S/Z/Y/H/X/P|V/N/Cと非公式フラグF3/F5）の命令ごとの挙動、特殊レジスタI/R/SP/PC/WZ、そしてこれらをJavaScriptのTypedArrayでどう表現するかの設計判断を、Ken Shirrifのダイ写真解析を交えながら詳述する。
Z80エミュレーター開発記 第1回：インテルからの独立とZ80誕生の歴史
Z80エミュレーター開発に向けた連載第1回。Intel 8080の開発者フェデリコ・ファジンがZilogを創業し、嶋正利とともにZ80を設計するまでの経緯を、Intelの組織的背景、Exxon Enterprisesによる出資の裏事情、8080の電源設計上の制約（+5V/-5V/+12Vの3系統電源と2相クロック）に対するZ80の回答（単一5V電源・単相クロック・内蔵DRAMリフレッシュ）、命令セットの拡張思想、CP/Mとの共生によるソフトウェアエコシステムの形成、そしてパソコン・アーケード・ゲーム機・ポケコンへの採用拡大までを技術的視点から詳述する。
![[Astro] #148 インボリュート歯車ジェネレーター — 歯形生成・噛み合わせ・ヘリカル化・DXF出力の実装記録](https://assets.lain-lab.com/images/uploads/astro-148-gear-generator.webp?0)
[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 高速集計アナライザーの実装記録](https://assets.lain-lab.com/images/uploads/astro-147-duckdb-analyzer.webp?0)
[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 エクスポートまでを解説。