Lab

Lab

Web制作、サイト運営、広告、PC・ソフトなど、実際に作った・試した・比較した経験から得た知見をまとめます。

Lab

中古Windowsノートを買ったあとに確認したこと――バッテリー・更新・ドライバー・外部ディスプレイまで

中古Latitude 5320の到着後確認をもとに、外観・キーボード、バッテリー容量、WindowsとDellの更新、充電設定、外部ディスプレイや実用途での動作確認を整理します。数字3キーの不調と満充電容量約51.7%の記録も紹介します。

Lab

2016年MacBook Proから3万円台の中古Windowsノートへ――Latitude 5320を選んだ理由

本体31,900円の中古Latitude 5320を、執筆とWeb制作のために購入しました。Core i5-1135G7・16GBでできる作業、実際に確認した開発環境、SSD容量やバッテリーなどの妥協点から、選んだ理由を整理します。

Lab

Astroの静的サイトで記事一覧をページネーションする――getStaticPaths()で2ページ目以降を生成する

Astroの静的サイトで、記事一覧を1ページ目と2ページ目以降に分けて生成する構成を整理します。getStaticPaths()、slice()、共通Pagerを使い、記事追加時にページファイルを手作業で増やさない実装です。

Lab

Astroの静的サイトにログインなしのお気に入り機能を付ける――localStorageで保存する設計

Astro製の静的サイトで、ログインやデータベースを追加せずにお気に入り機能を実装した構成を整理します。localStorageには記事IDだけを保存し、表示用データはビルド時に用意する設計です。

Lab

Astroで記事詳細から「元いた一覧」へ戻す――fromパラメータでページ位置を引き継ぐ

一覧の2ページ目やカテゴリ別一覧から記事詳細を開いたあと、元いた一覧へ戻れるようにする実装を整理します。Astroでfromパラメータを渡し、許可した一覧URLだけを戻り先として採用し、前後ナビにも引き継ぐ方法です。

Lab

AstroでPC/SP別の広告タグを切り替える――発行タグを崩さず扱う実装

Astro製サイトで、広告ネットワークから発行されたPC/SP別のタグをそのまま保持し、必要な端末向けだけ実行する構成を整理します。template、端末判定、開発用プレースホルダーを使った実装例です。

Lab

Cloudflare PagesのAstroサイトを独自ドメインへ移行したときに見直した設定

Cloudflare Pagesで公開していたAstroサイトをpages.devから独自サブドメインへ移行した際、カスタムドメイン追加だけでなくAstroのsite、canonical、sitemap、robots.txt、Search Console、301リダイレクトまで見直した内容を整理します。

Lab

Astro+Markdownで記事追加をコード変更から切り離す構成

Astro+Markdownで運営する『3分英語物語』では、記事追加をMarkdownファイルの追加だけで完結できる構成にしています。Content Collections、動的ルート、Cloudflare Pagesを使った継続運用の仕組みを整理します。

Lab

AstroでJavaScript生成要素にscoped CSSが効かなかった原因と対処

Astroの<style>は既定でscoped CSSとして変換されます。JavaScriptで後から生成したDOMにclassを付けてもスタイルが効かなかった理由を、data-astro-cid-* の仕組みと対処法から整理します。