![[Tauri #06] Tauri v2：Honeyview置き換えの画像ビューア「Lookover」を作り、Windows / Mac / Linuxで公開した](https://assets.lain-lab.com/images/uploads/tauri-06-lookover-image-viewer.webp?0)
[Tauri #06] Tauri v2：Honeyview置き換えの画像ビューア「Lookover」を作り、Windows / Mac / Linuxで公開した
キー割り当て表、非破壊編集、WebKitでWebPが書き出せない問題、MSIを諦めてNSISにした話、タグの打ち直しで踏んだ罠など、作って公開するまでに踏んだポイントのまとめ。
ARCHIVE_INDEX / PAGE_5
TOTAL_ITEMS: 878
![[Astro] #164 Terrain Explorer — 地理院タイルの地形を立体にして、VRで歩くツールを作成](https://assets.lain-lab.com/images/uploads/astro-164-terrain-explorer.webp?0)
[Astro] #164 Terrain Explorer — 地理院タイルの地形を立体にして、VRで歩くツールを作成
Astro のページ 1 枚と three.js（約 1,300 行）で作った地形ビューアの実装記録。標高タイル（PNG の色 = 標高）の読み方、Web メルカトルの座標、地図の自作、標高の格子から面を作る方法、足元だけ細かい地面を読み足すチャンクの仕組み、遠景との継ぎ目の処理、WebXR での模型と実寸の切り替え、偽のタイルサーバーを使った試験、ハマりどころまで。
![[Astro] #163 Office Inspector — Word / Excel / PowerPointの中身を覗くツールを作成](https://assets.lain-lab.com/images/uploads/astro-163-office-inspector.webp?)
[Astro] #163 Office Inspector — Word / Excel / PowerPointの中身を覗くツールを作成
Astro のページ 1 枚と素の JavaScript（約 7,600 行、外部ライブラリなし）で作った Office ファイルの内部構造ビューアの実装記録。フィールド単位でバイト範囲を持つ ZIP パーサ、目次に無いエントリの検出、バイト列のまま読む XML パーサ（配列の構造体・名前空間の正規化）、パート同士の関係の辿り方、変更履歴・隠し文字・非表示シートの見つけ方、旧形式の入れ物（CFB）と VBA の展開、パスワードの復号、python のライブラリとの突き合わせ、ハマりどころまで。
![[Astro] #162 PDF Inspector — PDFの中身を覗くツールを作成](https://assets.lain-lab.com/images/uploads/astro-162-pdf-inspector.webp?)
[Astro] #162 PDF Inspector — PDFの中身を覗くツールを作成
Astro のページ 1 枚と素の JavaScript（約 12,900 行、外部ライブラリなし）で作った PDF 内部構造ビューアの実装記録。バイト範囲を持つパーサ、xref の読み取りと全体走査の突き合わせ、自前の Inflate、描画エンジン（行列・状態スタック・レイヤー合成）、ステップ実行とクリックからの逆引き、フォントの輪郭の解読（TrueType / CFF / Type1）、日本語 CMap の CID を計算で求める方法、電子署名の検証、poppler との画素比較、ハマりどころまで。
![[Electron] #05 Frameshot — 固定サイズの枠でWebページを撮る。静止画・動画・音声をゼロから作って、3 OSで配布するまで](https://assets.lain-lab.com/images/uploads/electron-frameshot.webp?0)
[Electron] #05 Frameshot — 固定サイズの枠でWebページを撮る。静止画・動画・音声をゼロから作って、3 OSで配布するまで
Electron製の撮影ツールFrameshotの実装記録。iframeが拒否される・getDisplayMediaは画面に見えている範囲しか録れないというブラウザ版の限界、WebContentsViewで外部サイトを枠に入れる構成とmascotとのセキュリティ設定の違い、Emulation.setDeviceMetricsOverrideのscaleによる縮小プレビューと撮影時の実寸への切り替え、Page.captureScreenshotとsharpによる静止画、Page.startScreencastの取得方式を比較したスパイク結果、最新フレームを一定間隔でffmpegのstdinに流すrawvideoエンコード、ffmpeg-staticの同梱とasarUnpack、setDisplayMediaRequestHandlerで枠のページの音声だけを返すMediaRecorder録音、echoCancellation・noiseSuppression・autoGainControlを切る理由、-shortestとapadとc:v copyが終わらない問題、Xvfbでの自動検査、electron-builderと署名なし配布、GitHub ActionsでのmacOS/Linuxビルドをコード付きで解説。
![[Astro] #161 過去作品ギャラリー — Three.jsのカードを扇とリストで並べ、拡大するとサムネが動画になる](https://assets.lain-lab.com/images/uploads/astro-161-works-gallery.webp?)
[Astro] #161 過去作品ギャラリー — Three.jsのカードを扇とリストで並べ、拡大するとサムネが動画になる
Astro のページ 1 枚と Three.js だけで作った作品ギャラリーの実装記録。canvas テクスチャのカード、扇の角度計算と臨界減衰バネによる回転、扇とリストの切り替え（位置の lerp と回転の slerp）、拡大表示、暗い部屋のピンスポット、拡大カードだけ動画にする仕組み（同じ canvas に動画フレームを描く）、ウィンドウ表示の黒帯対策、サムネ・動画の撮影と ffmpeg の再圧縮、ハマりどころまで。
![[Astro] #160 WINAMP X2 — トップページに置いたWINAMP風プレイヤーと、VRMのダンス連動（自作.vrmaにも対応）](https://assets.lain-lab.com/images/uploads/astro-160-winamp-x2.webp?0)
[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 コマンドとの二重再生の防止、ハマりどころまで。
![[Electron] #04 Live2Dデスクトップマスコット — キャラごとの声、右クリックでの個別設定、サムネ付きのモデル一覧](https://assets.lain-lab.com/images/uploads/electron-live2d-desktop-mascot-4.webp?1)
[Electron] #04 Live2Dデスクトップマスコット — キャラごとの声、右クリックでの個別設定、サムネ付きのモデル一覧
Electron製デスクトップマスコットのv1.5.0の実装記録。ボイスパックのセリフをVOICEVOXで合成してwavと差し替える処理、メインプロセスでの合成結果のキャッシュ、「(笑)」のような読めないセリフの扱い、voice・ttsEngine・muteを1つの選択に見せる設計、Electron Menuのサブメニューとラジオで作るキャラごとの右クリック設定、右クリックと設定ウィンドウの操作を1つのIPCにまとめる方法、VS Code追従をキャラごとにした理由と旧設定の引き継ぎ、ライブラリの同名上書き、GLBのヘッダとJSONチャンクだけを読んでVRM 0.x / 1.0の埋め込みサムネを取り出す処理、nativeImageでの縮小、CSS Gridのauto-fillとline-clampによるエクスプローラ風の一覧、ドロップで付けるthumb.*をJavaScriptコード付きで解説。
![[Astro] #159 WASM Inspector — .wasmの中身をバイト単位で覗く（WAT・hex・DWARFソース行の3方向連動）](https://assets.lain-lab.com/images/uploads/astro-159-wasm-inspector.webp?0)
[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が古いまま残る問題まで。
![[Electron] #03 Live2Dデスクトップマスコット — VRM対応、VRMAモーション、複数キャラの同時表示まで](https://assets.lain-lab.com/images/uploads/electron-live2d-desktop-mascot-3.webp?0)
[Electron] #03 Live2Dデスクトップマスコット — VRM対応、VRMAモーション、複数キャラの同時表示まで
Electron製デスクトップマスコットのVRM対応と複数キャラ表示の実装記録。Electron 30→44で変わったLinux（Wayland/ozone）・roundedCorners・console-message、ChromiumのSwiftShaderフォールバック廃止とenable-unsafe-swiftshader、formats.jsとアダプタによる形式の分離、正射影カメラでVRMを拡大しない理由、VRM 0.xの正規化ボーンのx・z回転の符号、VRMAを立ち姿に戻してから重ねる理由、ルートモーションの除去、electron-builderがnode_modulesのexamplesを除外する問題、characters.jsonと代表・話す順番のIPC設計をJavaScriptコード付きで解説。
![[Astro] #158 AST Inspector — Tree-sitter WASMで構文木を覗く（Queryとインクリメンタルパースの可視化付き）](https://assets.lain-lab.com/images/uploads/astro-158-ast-inspector-tree-sitter-wasm.webp?0)
[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が古いまま残る問題まで。
![[Electron] #02 Live2Dデスクトップマスコット — VS Code拡張とWebSocketでつなぎ、日本語ZIPとLinux配布まで](https://assets.lain-lab.com/images/uploads/electron-live2d-desktop-mascot-2.webp?1)
[Electron] #02 Live2Dデスクトップマスコット — VS Code拡張とWebSocketでつなぎ、日本語ZIPとLinux配布まで
Electron製Live2Dマスコットと自作VS Code拡張をWebSocket（127.0.0.1・Origin拒否・トークン認証）でつなぐ実装記録。config.jsonとbridge.jsonを分けた理由、Node 22標準WebSocketで依存ゼロの拡張、extensionKind uiによるWSL対応、Shift_JISのZIPとTextDecoderのfatalの罠、pixi-live2d-display 0.4.0のvalidateFilesが日本語ファイル名で必ず失敗するバグ、頂点から描画範囲を測る吹き出し位置の修正、設定ウィンドウの分離、moc3ヘッダーによるCubism 5.3形式の判定、3台同時ビルドでのv1.2.0リリースをJavaScriptコード付きで解説。