WEB制作

GA4 Data APIの直近30日PVをContent Collectionsの記事と照合し、上位3件をゆまラボのTOPページへ自動表示した。既存ArticleCardを再利用し、PV数や順位は表示しない構成にした。

GA4 Data APIで取得した記事別PVをCloudflare Pagesのビルドでも使うため、サービスアカウント、組織ポリシー、OAuth本番化、ADC再認証、Cloudflare Secret登録までを確認した。

2026年9月13日の公開中のゆまラボをPCブラウザで開き、ウィンドウを手動で縮められる限界まで狭くした。トップ・記事本文・連載一覧・カテゴリ一覧の折り返しと横方向の破綻を実画面で確認する。

Cloudflare WorkersのビルドでseriesOrder重複を検出した経験から、FrontmatterをAstro build前に検査する処理を追加。category、subcategory、series、seriesOrder、tagsを既存schemaとtaxonomyで確認し、正常時の219ページ生成まで記録します。

Astroの記事データから関連記事を選び、記事末尾へ自動表示する方法を記録します。既存のcategory・tagsを使った候補判定、自記事の除外、候補不足時の処理を確認します。

PCでは問題なく読めたページが、スマホでは画像付近で止まったように見えた経験から、重い画像がモバイル表示へ与える影響を確認します。ゆまラボでAstroの画像最適化、srcset、WebP、遅延読み込みを適用した実測も振り返ります。

AstroはMarkdown見出しへ自動でIDを付けるため、追加プラグインなしでもページ内アンカーを使えます。長い技術記事の目次や特定セクション共有で役立つ一方、見出し変更によるURL切れ、UIの増加、固定ヘッダーやコピー機能の注意点もあります。

記事一覧のアイキャッチとSNS共有時のOGP画像を別々に管理せず、1枚の元画像から用途別に出力する方法を考えます。現在のゆまラボのXリンクカードとAstro画像処理を踏まえ、Frontmatter、getImage()、フォールバックまで実装前に確認します。

Astroで作成しているゆまラボの記事本文に、見出しアンカーとURLコピー用のリンクを追加した作業記録。あわせてトップページへヒーロー、連載カード、カテゴリカードを追加した。

AstroブログのheroImageを記事一覧と記事本文へ表示し、同じ画像から1200×630のOGP画像を生成。画像なしの記事との互換性、summary_large_image、一覧レイアウトまで確認した記録です。

記事本文の画像をAstro標準の画像処理へ移し、WebP、srcset、sizes、width/height、loading="lazy"を追加。278個の画像ファイルと281件の参照を対象に、容量削減とPC・スマホ表示を確認した記録です。

Astroの生成HTMLをビルド後に検査し、存在しない内部URLへのリンクがあればnpm run buildを失敗させる処理を追加。修正前後の実測、URL判定、parse5、意図的なリンク切れテストまで記録します。

404ページの役割は、存在しないURLへ来たユーザーをサイト内へ戻すことです。AstroとCloudflare Workersで正しい404ステータスを返しながら、Homeや記事一覧への導線を残す構成を確認します。

存在しないURLでブラウザ標準の404だけが表示されていたため、Astroの404.astroを追加しました。SiteLayoutを再利用し、トップページ・記事一覧への導線、Cloudflare Workersで404を返す構成、ローカルと公開画面の確認まで記録します。

Astroの記事本文へコードブロックごとのコピー操作を追加した方法を記録します。Clipboard API、textareaフォールバック、複数コードブロック、アクセシビリティ対応を確認します。

技術ブログにアイキャッチ画像は必要なのか。noteの見出し画像やサムネイル表示、Google Discoverの画像要件、現在のゆまラボの記事一覧を見ながら考えます。

Wranglerの初回デプロイでcode 10034が出たときの実際のログと、Cloudflare側で確認した内容を残します。

WindowsのAstroプロジェクトでWrangler追加時に出たnpm warn cleanupとEPERM。実際のログを見ながら、どこまで対応したかを残します。

カテゴリ・サブカテゴリに残っていた汎用説明を実際の記事内容に合わせて変更し、連載にも共通の説明データを追加しました。/series/を説明・記事数・導線を持つカード表示へ変更した内容を記録します。

記事一覧、カテゴリ、サブカテゴリ、連載詳細で、一覧末尾だけにあったページナビを上部にも追加しました。上下のナビを共通コンポーネント化し、同じpage・sort状態を使うようにした内容を記録します。

TOPページで連載をカテゴリより上へ移動し、記事一覧・カテゴリ・連載詳細へ10件表示、新しい順と古い順の切り替え、最初・前へ・次へ・最後のページ移動を追加した内容を記録します。

Google AdSenseのプライバシーポリシー追記、お問い合わせ先の独自ドメインメールへの変更、全記事へのupdatedAt追加、記事H1とfaviconの小さな修正を行った内容を記録します。

WEB制作・AI・開発支援の説明をtaxonomy側で管理するよう変更し、記事一覧・タグ・連載ページに残っていた本文側の重複ナビゲーションを削除した内容を記録します。

準備中のままになっていたお問い合わせページにmailto方式のフォームと直接メールできる連絡先を追加し、プライバシーポリシーにはGoogle AdSenseの広告設定に関する説明を追記した内容を記録します。

AstroとWordPressを、構成・更新方法・表示速度・運用・拡張性・Cloudflareとの相性まで比較。ゆまラボで最終的にAstroを選んだ理由を実際のサイト運用目線で整理します。

一度修正したはずのタグ重複が記事追加後に再発。Frontmatterの個別修正ではなく、タグマスタ、alias、共通のnormalizeTag、旧URL維持、未登録タグ警告まで追加した内容を記録します。

ゆまラボのAboutページへ運営者情報とプロフィール画像を追加し、全記事へパンくずとBreadcrumbListを実装。カテゴリページの重複ナビと記事本文のH1重複も修正した内容を記録します。

ゆまラボのヘッダーへ記事一覧・カテゴリ・連載・タグとサイト内検索を追加。横長の表を表だけ横スクロールできるように修正し、404だったsitemap.xmlも追加した内容を記録します。

Astroで公開しているゆまラボをCloudflare WorkersのFreeで運用し続けられるか、10万リクエスト、静的アセット数、ビルド上限、過去の障害、料金、別サーバーへの移行まで確認します。

ゆまラボでタグ一覧・個別タグページを使い、noindex、サイトマップ除外、表示改善を試したあと、最終的にタグページを廃止した流れを記録します。お問い合わせ、プライバシーポリシー、免責事項への導線も扱います。

AstroのContent Collection schemaに合わないFrontmatterでCloudflare Workersのビルドが失敗。categoryとsubcategoryの修正後に見つかった分類ミス、タグ重複、トップページの余白まで続けて修正した流れを記録します。

ゆまラボのヘッダーへロゴを適用し、新しく追加したサブカテゴリが英語で表示される問題、スマホでナビゲーションが崩れる問題、フッターのRSS導線をまとめて修正した内容を記録します。

第9回のFrontmatter整理をサイト側へ反映し、カテゴリ、細分化カテゴリ、連載、タグから記事を探せる構成へ変更。変更前後の画面を比較しながら確認します。

記事数の増加に備え、第1回から第8回のMarkdownへカテゴリ・細分化カテゴリ・連載情報を追加しました。本文は変更せず、Frontmatterだけを整理した内容をまとめます。

第7回で決めたデザイン方針を実際のAstroサイトへ反映。トップ、記事一覧、About、目次、前後記事リンクを追加し、GitHubへのpush後に発生したCloudflareのデプロイエラーも修正します。

独自ドメインで公開したAstroブログの修正前画面を確認し、noteを参考にトップページ、記事一覧、記事本文、Aboutを見直す方針を整理します。

Cloudflare Registrarで独自ドメインを検索・取得し、Cloudflare Workersで公開中のAstroサイトへ接続するまでの手順をまとめます。

Markdownのテスト記事を追加し、ローカル確認、GitHubへのpush、Cloudflare Workersへの自動反映を確認する手順です。

WranglerによるAstroサイトの公開、Cloudflareのメール認証エラー、workers.devの警告、GitHub自動デプロイ設定をまとめます。

AstroプロジェクトをGitHubへpushする手順と、not a git repository、Repository not found、origin already existsの解決方法です。

Astro公式ブログテンプレートの作成、ローカル表示、ビルド、Wrangler設定と、npmのEPERM警告への対応を紹介します。

個人サイトの構築にAstro、GitHub、Cloudflare Workersを選んだ理由と、最初に準備したアカウントをまとめます。