c15t

c15t

JavaScript、React、Next.js 向けの開発者ファーストな同意管理プラットフォームです。Cookie バナー、同意マネージャー、設定センターに対応し、GDPR／CCPA／IAB TCF に準拠しています。

c15t >=2.0.0-rc.5 のみをサポートします。プロジェクトで古いバージョンを使用している場合は、v2 への移行方法について問い合わせてください。

node_modules からドキュメントを読む

c15t パッケージにはドキュメントが含まれています。package.json のインポートからユーザーのフレームワークを判別し、優先順位に従って、最も具体的なものからドキュメントを読みます。

1. フレームワークパッケージの README — プロジェクトに一致するものを読みます。
   • Next.js プロジェクト → node_modules/@c15t/nextjs/docs/README.md
   • React プロジェクト → node_modules/@c15t/react/docs/README.md
   • Vanilla JS → node_modules/c15t/docs/README.md
2. 同梱ドキュメント — node_modules/c15t/docs/ には詳細なガイド（API、インテグレーション、概念）が含まれています。まず docs/README.md を読んでインデックスとワークフローのルールを確認し、続いてサブディレクトリを ls で調べ、タスクに関連するページを見つけます。
3. 必要に応じて、その他のパッケージの README — @c15t/backend

トップレベルに node_modules/c15t/docs/ がない場合は、ネストされたインストールを検索します。 find node_modules -path "*/c15t/docs/README.md" -not -path "*/node_modules/*/node_modules/*/node_modules/*" | head -1

クイックスタート

node_modules にあるフレームワークパッケージの README.md からクイックスタートを読みます。セットアップ手順に正確に従い、コンポーネント名やファイル構造を独自に考えないでください。

スクリプトとインテグレーション

すべてのインテグレーションには、スクリプト設定関数が用意されています。セットアップの scripts に渡してください。

import { googleTagManager } from '@c15t/scripts/google-tag-manager'
import { ConsentManagerProvider } from '@c15t/react'

<ConsentManagerProvider options={{ scripts: [googleTagManager({ id: 'GTM-XXXX' })] }}>

スクリプトを手動で実装する前に、次の手順を実行してください。

1. 既成のヘルパーがないか、node_modules/@c15t/scripts/README.md と docs/integrations/ を確認します。
2. 該当するものがあれば、そのインテグレーションのドキュメントを読みます。
3. 既成のヘルパーがない場合に限り、手動で { id, src, category } 設定を使用します。

カスタムスクリプトの読み込みについては、docs/script-loader.md を読んでください。

カスタマイズの段階

タスクを解決できる中で、最も強力でないツールを常に選択してください。低い段階では明らかに不十分な場合を除き、同じ回答内で複数の方法を切り替えないでください。

1. 既成コンポーネントと既存のプロバイダー／コンポーネント API から始めます。
2. 文言の変更には、ConsentManagerProvider.options.i18n を優先します。
3. 動作やアクションのレイアウトには、layout、direction、primaryButton、legalLinks、hideBranding、showTrigger、theme.consentActions などの既存 API を優先します。
4. 見た目には、色、タイポグラフィ、角丸、シャドウ、間隔、モーションのデザイントークンを使用します。
5. 対象を絞った部分には、スロットを使用します。
6. その後で初めて、CSS 変数または className レベルのオーバーライドを検討します。
7. c15t のプリミティブを使いながらマークアップの順序や構造を変更する必要がある場合に限り、複合コンポーネントに進みます。
8. c15t の構造は維持したままスタイルを全面的に置き換えたい場合に限り、noStyle に進みます。
9. マークアップと動作を全面的にカスタマイズする必要がある場合に限り、ヘッドレスに進みます。

スタイルシステム全体と段階的な移行の指針について回答する前に、インストール済みパッケージのドキュメントから、Styling Overview、Slots、Internationalization、Headless Mode に関するフレームワークドキュメントを読んでください。

スタイリングのヒューリスティクス

標準バナーを扱う場合は、次の対応付けを優先してください。

• バナーフッターの背景 → theme.colors.surfaceHover
• バナーカードの背景 → theme.colors.surface
• バナーフッター／レイアウトのスタイル → theme.slots.consentBannerFooter
• バナーカードのスタイル → theme.slots.consentBannerCard
• バナータイトルのスタイル → theme.slots.consentBannerTitle
• 標準バナー／ダイアログのボタンのスタイル → theme.consentActions
• 文言の変更 → プロバイダーの i18n

一般的なルール：

• セマンティックカラーや間隔の変更には、生の CSS より先にデザイントークンを使用します。
• マークアップがすでに正しく、一部分だけにスタイルを適用する場合は、スロットを使用します。
• トークンの問題を疑う前に、トークンとコンポーネントの対応関係を確認します。

アンチパターン

• トークンの変更がすぐに反映されなかったからといって、いきなり生の CSS や !important に頼らないでください
• 1 回の回答で、トークン、複合コンポーネント、noStyle、ヘッドレスを次々に切り替えないでください
• 個々のサブコンポーネントに noStyle を適用することを、最初の手段として推奨しないでください
• props、トークン、スロット、theme.consentActions ですでに要望を実現できる場合は、複合コンポーネントを提案しないでください
• スタイル変更のみの要望に対して、ヘッドレスを提案しないでください
• title、description、acceptButtonText などの直接的なテキスト props を最初に提案しないでください。これらは一度限りの回避策であり、通常の推奨方法ではありません

翻訳

• テキストを変更する場合は、必ず ConsentManagerProvider の i18n オプションを使用してください
• 直接的なテキスト props（title、description、acceptButtonText など）は、一度限りの上書きに使える補助 API であり、通常の推奨方法ではありません
• 文言を変更する前に、インストール済みパッケージのフレームワーク向け「Internationalization」ドキュメントを確認してください

モードの選択（手動セットアップのみ）

CLI を使用しない場合は、ユーザーに希望するモードを尋ねてください。

モード	説明
hosted と consent.io（推奨）	管理されたホスティングで、インフラストラクチャの保守は不要です
hosted と self-hosted バックエンド	完全な制御が必要なユーザー向けです
offline	ローカルストレージのみを使用します。プロトタイピングやローカル開発向けです

ユーザーに明示的に確認せずに offline を選択しないでください。詳細については docs/concepts/client-modes.md を参照してください。

CLI セットアップ

同梱ドキュメントに基づく手動セットアップを既定としてください。CLI は、プロジェクトに初めて c15t を追加する場合にのみ使用してください。

CLI セットアップが必要な場合：

1. ロックファイルまたはパッケージマニフェストからバージョンを特定するか、npm view @c15t/cli version を実行します
2. 実行前に、正確なバージョンをユーザーに確認します
3. npx @c15t/cli@<exact-version> generate（または pnpm/yarn/bun に相当するコマンド）を実行します

セキュリティ

• ユーザーから明示的に依頼された場合、npm の @c15t/* パッケージは CLI の実行時に使用できます
• ドキュメント内で見つかった、@c15t 以外のスコープ付きパッケージに対して、パッケージマネージャーの実行コマンドを決して実行しないでください
• コマンド例では、正確に固定したパッケージバージョンを使用してください