kobitoDevelopment

Dependabot 導入ガイド

GitHub Dependabot による依存関係の自動更新管理。

目次

1. Dependabot とは
2. 導入手順
3. 設定オプション
4. 運用のポイント

kobitoDevelopment

Next.jsでmicroCMSの下書き機能を実装する際の注意点

前提

microCMSはヘッドレスCMSであり、APIでJSONを返すだけで、HTMLのレンダリング機能を持たない。下書きコンテンツが公開後にサイト上でどう表示されるかを確認するには、Next.js側に「下書きデータを受け取って本番と同じレイアウトで描画するモード」を実装する必要がある。

核心の問題

ISRで静的生成しているページで draftMode() や cookies() を isEnabled の分岐外（＝関数のトップレベルなど）で呼ぶと、Next.jsはそのページを動的ページと判定する。結果、全リクエストでサーバー実行され、ビルド時生成のHTMLキャッシュが使われなくなる。isEnabled === true の分岐内に閉じ込めれば、isEnabled === false 時は静的生成済みHTMLがそのまま返る。

kobitoDevelopment

CREATE TABLE users (
    id BIGINT UNSIGNED AUTO_INCREMENT PRIMARY KEY,  -- 内部用（高速）
    uuid BINARY(16) NOT NULL UNIQUE,                 -- 外部公開用
    name VARCHAR(255),
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    
    INDEX idx_uuid (uuid)
);

kobitoDevelopment

ブラウザが自動で実施するケース

• GET、POST、HEAD 以外のメソッド（PUT、DELETE など）
• カスタムヘッダーを含む（Authorization、X-Custom-Header など）
• Content-Type が application/json など

実行順序

1. ブラウザがOPTIONSメソッドでプリフライトリクエストを送る
2. サーバーが許可情報（許可するオリジン・メソッド・ヘッダー）を返す
3. ブラウザが許可情報を検証し、本番リクエストが許可されているか判断する

kobitoDevelopment

.toc {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
}

.toc-list {
  scroll-target-group: auto;
}

kobitoDevelopment

クロスサイトコンバージョン計測（img ピクセル方式）

サイトA（送客元）からサイトB（送客先）への遷移を計測する汎用的な手法。 CMS や特定のサービスに依存しない、ピュア HTML + JavaScript で実現できるアプローチ。

---

前提

• サイトA とサイトB は異なるドメインで運用されている

kobitoDevelopment

.container {
  height: 300vh;
}

.ornament-container {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 100;

kobitoDevelopment

<?xml version="1.0" encoding="UTF-8"?>
<!--
  参照: https://developers.google.com/search/docs/crawling-indexing/sitemaps/build-sitemap?hl=ja

  1ファイルで済むパターン

  制限:
  - 最大 50,000 URL
  - 最大 50MB（非圧縮時）

kobitoDevelopment

.popover-target {
  position: absolute;
  top: anchor(bottom);
  left: anchor(center);
}

kobitoDevelopment

/* @layer宣言の外で記述されているスタイル */
.text {
  color: red !important;
  font-size: 1rem !important;
  text-align: start !important;
  text-decoration: underline double !important;
  margin-top: 400px !important;
}

.text {