技術 2026年1月10日(土) 約4分 Astroでローカル動画を遅延読み込み:preload="metadata"とrehypeプラグイン 記事にWebM/MP4を埋め込むとページが重くなる。preload="metadata"で最初のフレームだけ読み込み、クリックで再生開始する仕組みをrehypeプラグインで実装した。 Astro パフォーマンス rehype JavaScript
技術 2025年12月29日(月) 約2分 AstroサイトにGoogle Analytics (GA4) をPartytownで導入する Astro公式推奨のPartytownを使ってGA4を導入する方法。Web Workerで実行することでメインスレッドをブロックせず、Core Web Vitalsを維持できる。 Astro Google Analytics Partytown パフォーマンス
技術 2025年12月23日(火) 約5分 Mintlify脆弱性はReact2Shellとは別物:フレームワークの責任と実装者の責任 Mintlifyで発見された脆弱性とReact2Shellの違いを解説。フレームワーク側の問題と実装者側の問題を区別することの重要性について。 セキュリティ Next.js Astro Nuxt
技術 2025年12月23日(火) 約2分 Astro静的サイトにPagefindで全文検索を追加する 静的サイトに検索機能がない問題を、Pagefindを使って解決。ビルド時にインデックス生成、クライアント側でWASM検索という軽量な構成。 Astro Pagefind 静的サイト TypeScript
技術 2025年12月18日(木) 約4分 React2ShellがめんどくさすぎてNext.jsからAstroに移行した CVSS 10.0のReact2Shell、修正したら別の脆弱性、また修正…。もう疲れたのでAstroに移行した。shadcn UIを60個入れて1個しか使ってなかった反省も込めて。 Next.js Astro セキュリティ
技術 2025年12月17日(水) 約2分 【Astro】ドラフト機能を実装する Astroのコンテンツコレクションにドラフト機能を追加。開発時のみ表示、本番では非表示にする。 Astro TypeScript サイト改修 静的サイト
技術 2025年12月7日(日) 約3分 AIはAstroのスコープドCSSがJavaScriptで生成した要素に適用されない事を忘れる Astroの<style>タグはスコープドCSSとしてコンパイルされるが、JavaScriptで動的生成したDOM要素には適用されない。解決策を解説。 Astro CSS AI AI駆動開発
技術 2025年12月7日(日) 約4分 AstroでYouTube埋め込みを軽量化:rehypeプラグインで遅延読み込みを実装 YouTube公式の埋め込みコードは重い。rehypeプラグインを自作して、サムネイル表示→クリックでiframe読み込みする仕組みを実装した。 Astro YouTube パフォーマンス rehype JavaScript