![[Astro #16] WebサイトをPWA化してデスクトップアプリ（NAVI）として実在させる](https://assets.lain-lab.com/images/uploads/astro-16-pwa-copland-os.webp)
[Astro #16] WebサイトをPWA化してデスクトップアプリ（NAVI）として実在させる
Webサイトを「独立したアプリ」に進化させるPWA化。Astro環境下での vite-plugin-pwa の設定から、手動での Service Worker 登録、エラー解決までの手順と引っかかりやすいポイントを解説します。
ARCHIVE_INDEX / PAGE_4
TOTAL_ITEMS: 606
![[Astro #15] Copland OS： SVG clock 無段階サイズ変更と、SPA特有のバグを攻略](https://assets.lain-lab.com/images/uploads/astro-15-copland-clock-v1-10.webp)
[Astro #15] Copland OS： SVG clock 無段階サイズ変更と、SPA特有のバグを攻略
AstroとNext.jsの混在環境で発生するSPA特有のイベントリスナー重複や、requestAnimationFrameの停止処理など、実戦的なデバッグ手法をまとめました。
![[Astro #14] Copland OS風UIの極北：カスタムアナログ時計とコンテキストメニューの実装](https://assets.lain-lab.com/images/uploads/astro-14-copland-os-ui-analog-clock.webp)
[Astro #14] Copland OS風UIの極北：カスタムアナログ時計とコンテキストメニューの実装
Astroプロジェクトに、Copland OSライクなSVGカスタムアナログ時計と右クリック（長押し）メニューを追加。filterプロパティの罠や、localStorageを使った状態保存、シーン切り替え時の表示制御について解説します。
![[Astro #13] Astro SSR × Resend × JWT で作るDB不要の「マジックリンク認証」](https://assets.lain-lab.com/images/uploads/astro-13-magic-link-auth-resend-jwt.webp)
[Astro #13] Astro SSR × Resend × JWT で作るDB不要の「マジックリンク認証」
総当たり攻撃の脅威から個人ダッシュボードを守るため、AstroとResendを組み合わせてパスワードレス認証（マジックリンク）を導入する具体的な実装手順とハマりどころを解説します。
![[Astro #12] 完全自動化！YouTube Data APIで動画リストを取得し、Astroでギャラリーを自動生成する](https://assets.lain-lab.com/images/uploads/astro-12-youtube-data-api-gallery.webp)
[Astro #12] 完全自動化！YouTube Data APIで動画リストを取得し、Astroでギャラリーを自動生成する
毎回手動で動画を追加するのは面倒！npm run dev（またはbuild）のタイミングでYouTube APIを叩き、最新の動画リストをJSON化してAstroで表示する自動化ワークフローの備忘録です。
![[Astro #11] 自作ダッシュボードへの道：Search Console APIの鍵取得とデータ取得テスト](https://assets.lain-lab.com/images/uploads/astro-11-search-console-api-dashboard.webp)
[Astro #11] 自作ダッシュボードへの道：Search Console APIの鍵取得とデータ取得テスト
Google Search Console APIをAstroから叩くための準備（GCPプロジェクト作成、サービスアカウント発行、GSC連携）と、googleapisを使った最小構成のテストページ実装方法を初心者向けに解説します。
![[Astro #10] 5分でBingにインデックス - Webmaster Tools連携とサイトマップ自動生成](https://assets.lain-lab.com/images/uploads/astro-10-bing-webmaster-tools-sitemap.webp)
[Astro #10] 5分でBingにインデックス - Webmaster Tools連携とサイトマップ自動生成
Google Search Console連携によるBing Webmaster Toolsへの一括登録と、Astroでの自動サイトマップ生成（sitemap-index.xml）の手順を解説します。
![[Astro #09] AstroにおけるCSS設計：グローバルCSSの基本とサイバーパンク・スタイリングの実践](https://assets.lain-lab.com/images/uploads/astro-09-css-architecture.webp)
[Astro #09] AstroにおけるCSS設計：グローバルCSSの基本とサイバーパンク・スタイリングの実践
Astro初心者〜中級者向けに、CSSのスコープやグローバル化の手順を解説。実際にプロジェクトで使用しているCSSファイルを元に、実践的なスタイリング手法を紹介します。
![[Noise 入門 #60] 第6集完結 — 神領域のオーディオ・ビジュアル・アート](https://assets.lain-lab.com/images/uploads/noise-intro-60-audio-visual-art.webp)
[Noise 入門 #60] 第6集完結 — 神領域のオーディオ・ビジュアル・アート
Noise入門シリーズ第60回。Web Audio APIを用いた音の解析データ（低音・高音）をGLSLに流し込み、Domain Warpingやプラズマ表現と連動させる手法を解説。音と数式が完全に同期する「神領域のアート」をThree.js上で実装します。
![[Astro #08] Shader パラメータ計算機：静的なブログに 動き を吹き込む](https://assets.lain-lab.com/images/uploads/astro-08-interactive-shader-calc.webp)
[Astro #08] Shader パラメータ計算機：静的なブログに 動き を吹き込む
Astro と React を組み合わせ、MDX 内で動作する Gerstner Wave パラメータ計算機を構築。client:visible ディレクティブによるパフォーマンス最適化と、サイバーパンク風の UI カスタマイズについて詳しく紹介します。
![[Noise 入門 #59] 次元崩壊グリッチ（Post-Processing Audio Glitch） — 音の衝撃で世界がバグるサイバーパンク・エフェクト](https://assets.lain-lab.com/images/uploads/noise-intro-59-post-processing-audio-glitch.webp)
[Noise 入門 #59] 次元崩壊グリッチ（Post-Processing Audio Glitch） — 音の衝撃で世界がバグるサイバーパンク・エフェクト
Web Audio APIとThree.jsのポストプロセスを連携させ、音の強さに反応してUV座標を引き裂くAudio-Reactiveなグリッチエフェクトの実装手法を直感的にまとめます。
![[Noise 入門 #58] Curl Noise × Audio — 音に乗って舞うパーティクル](https://assets.lain-lab.com/images/uploads/noise-intro-58-curl-noise-audio.webp)
[Noise 入門 #58] Curl Noise × Audio — 音に乗って舞うパーティクル
Noise 入門シリーズ第58回。GPGPUによる100万のパーティクルとCurl Noiseのベクトル場に音楽データを流し込み、音の波形で流体を制御するオーディオ・ビジュアル・アートの錬成方法をGLSLコードと共に直感的に解説します。