Lab
Lab
Web制作、サイト運営、広告、PC・ソフトなど、実際に作った・試した・比較した経験から得た知見をまとめます。
中古Windowsノートを買ったあとに確認したこと――バッテリー・更新・ドライバー・外部ディスプレイまで
中古Latitude 5320の到着後確認をもとに、外観・キーボード、バッテリー容量、WindowsとDellの更新、充電設定、外部ディスプレイや実用途での動作確認を整理します。数字3キーの不調と満充電容量約51.7%の記録も紹介します。
2016年MacBook Proから3万円台の中古Windowsノートへ――Latitude 5320を選んだ理由
本体31,900円の中古Latitude 5320を、執筆とWeb制作のために購入しました。Core i5-1135G7・16GBでできる作業、実際に確認した開発環境、SSD容量やバッテリーなどの妥協点から、選んだ理由を整理します。
Astroの静的サイトで記事一覧をページネーションする――getStaticPaths()で2ページ目以降を生成する
Astroの静的サイトで、記事一覧を1ページ目と2ページ目以降に分けて生成する構成を整理します。getStaticPaths()、slice()、共通Pagerを使い、記事追加時にページファイルを手作業で増やさない実装です。
Astroの静的サイトにログインなしのお気に入り機能を付ける――localStorageで保存する設計
Astro製の静的サイトで、ログインやデータベースを追加せずにお気に入り機能を実装した構成を整理します。localStorageには記事IDだけを保存し、表示用データはビルド時に用意する設計です。
Astroで記事詳細から「元いた一覧」へ戻す――fromパラメータでページ位置を引き継ぐ
一覧の2ページ目やカテゴリ別一覧から記事詳細を開いたあと、元いた一覧へ戻れるようにする実装を整理します。Astroでfromパラメータを渡し、許可した一覧URLだけを戻り先として採用し、前後ナビにも引き継ぐ方法です。
AstroでPC/SP別の広告タグを切り替える――発行タグを崩さず扱う実装
Astro製サイトで、広告ネットワークから発行されたPC/SP別のタグをそのまま保持し、必要な端末向けだけ実行する構成を整理します。template、端末判定、開発用プレースホルダーを使った実装例です。
Cloudflare PagesのAstroサイトを独自ドメインへ移行したときに見直した設定
Cloudflare Pagesで公開していたAstroサイトをpages.devから独自サブドメインへ移行した際、カスタムドメイン追加だけでなくAstroのsite、canonical、sitemap、robots.txt、Search Console、301リダイレクトまで見直した内容を整理します。
Astro+Markdownで記事追加をコード変更から切り離す構成
Astro+Markdownで運営する『3分英語物語』では、記事追加をMarkdownファイルの追加だけで完結できる構成にしています。Content Collections、動的ルート、Cloudflare Pagesを使った継続運用の仕組みを整理します。
AstroでJavaScript生成要素にscoped CSSが効かなかった原因と対処
Astroの<style>は既定でscoped CSSとして変換されます。JavaScriptで後から生成したDOMにclassを付けてもスタイルが効かなかった理由を、data-astro-cid-* の仕組みと対処法から整理します。