# CatalystストアフロントでFootnoteを使う

> CatalystストアフロントでFootnoteのラベルを設定する方法です。対応バージョン、開発者に残してもらう設定、ラベルが表示されないときの確認方法を説明します。

<https://pouchapps.com/footnote/ja/catalyst/>

最終更新日: 2026-10-20

Footnoteのラベルは、Next.jsで構築されたBigCommerceのストアフロントであるCatalystで、バージョン1.4以降に対応しています。Catalystへの対応はベータ版です。ラベルのスクリプトは標準のCatalyst 1.12でテストしていますが、各ストアが独自にビルドしたCatalystではまだテストしていません。このページの内容と実際の表示が異なる場合は、お知らせください。

Catalystはストア側のチームが管理するコードなので、このページの大部分は管理担当の方に向けた内容です。担当の方にこのリンクを送ってください。

## Catalystのバージョンを確認する

ラベルにはCatalyst core 1.4以降が必要です。Catalystはバージョン1.3からCookie同意マネージャー経由でScript Managerのスクリプトを読み込むようになり、1.4でFootnoteのスクリプトが利用するheadとbodyへの配置が追加されました。バージョンは`core/package.json`の`@bigcommerce/catalyst-core`という名前の項目で確認できます。

BigCommerceが公開したCatalystの更新は、開発者がストアのコードにマージして初めてストアフロントに反映されます。そのため、古いストアフロントは誰かが更新するまで古いバージョンのままです。

## ルートレイアウトの同意マネージャーを残す

CatalystはScript Managerのスクリプトを、`core/app/[locale]/layout.tsx`にある`<ConsentManager>`コンポーネント経由で読み込みます。これを削除したり置き換えたりすると、Footnoteのスクリプトは読み込まれず、ラベルは表示されません。FootnoteはBigCommerce側からこの状態を確認できないため、「設定」ではそのストアフロントが対象として表示されたままになります。

## スクリプトは「Essential」のままにする

FootnoteはScript Managerに「Footnote AI image labels」というスクリプトを1つ追加し、同意カテゴリを「Essential」（必須）に設定します。CatalystのCookieバナーは「Essential」のスクリプトを必須として扱うため、このスクリプトは買い物客が選択する前にも、Cookieを拒否した後にも読み込まれます。Cookieは設定せず、買い物客の情報も収集しません。

カテゴリが「Functional」「Analytics」「Targeting」のいずれかに変更されると、Cookieを拒否した買い物客にはラベルが表示されなくなります。Script Managerで「Essential」に戻してください。

## 商品画像はBigCommerceのCDNに置く

Footnoteは、ラベル付きの画像をBigCommerceのCDN上のアドレスで見つけます。このアドレスには商品番号と画像番号が含まれます。例：`cdn11.bigcommerce.com/s-abc123/images/stencil/384w/products/157/551/`。標準のCatalystは商品画像をこのアドレスから直接表示するため、変更なしで動作します。Next.jsの画像最適化（`/_next/image?url=...`）を通した画像も、Footnoteが内部の元のアドレスを読み取るため動作します。

画像のアドレスにBigCommerceのパスが含まれなくなると、ラベルは表示されません。アドレスを書き換える独自の画像ローダー、CDNの前に置いた画像プロキシや別の画像サービス、Makeswiftで配置した画像などがこれに当たります。

## 独自のコンテンツセキュリティポリシーでFootnoteを許可する

標準のCatalystは、スクリプトの読み込み元を制限していません。開発者が`script-src`や`connect-src`のルールを追加している場合は、両方で`https://footnote.pouchapps.com`を許可してください。ラベルのスクリプトはそこから読み込まれ、ラベルの設定もそこから取得します。

## 変更の反映には最大1時間かかる

CatalystはScript Managerのスクリプト一覧を最大1時間キャッシュします。Footnoteをインストールした後やラベルの設定を変更した後は、ストアフロントに反映されるまでそれだけかかることがあります。Stencilでは、同じ変更が1分ほどで反映されます。

開発者は、次の2つの方法で変更を早く反映できます。

- **ストアフロントを再デプロイする。** 新しくデプロイするとスクリプト一覧が再取得されます。Footnoteのインストール後は、これがもっとも簡単な方法です。
- **`DEFAULT_REVALIDATE_TARGET`を小さくする。** 単位は秒で、初期値は3600です。この設定はスクリプトだけでなく、CatalystがキャッシュするBigCommerceのデータの大半に影響するため、値を小さくするとBigCommerceへのリクエストが増えます。テストのときだけ下げ、そのままにしないでください。

## ラベルが表示されることを確認する

1. Footnoteで「設定」を開き、Catalystストアフロントが対象として表示されていることを確認します。Essentialsの対象はデフォルトのストアフロントだけです。Proはすべてのストアフロントが対象です。
2. 画像を1枚「AI生成」に指定し、「設定」で「ラベルを表示」をオンにします。
3. 最大1時間待つか、開発者に再デプロイを依頼します。
4. その商品ページをブラウザのプライベートウィンドウで開きます。Cookieバナーが表示されたら拒否します。ラベルは「バッジ」タブで選んだ隅に表示されるはずです。Catalystでは、ページがスクリプトを読み込み終えてから少し遅れて表示されます。

ブラウザで確認するには、ストアフロントの任意のページで開発者コンソールを開き、`document.documentElement.dataset.footnote`を実行します。`"1"`が返れば、そのページでFootnoteのスクリプトが動作しています。

## ラベルが表示されないときの対処

**コンソールでの確認結果が`"1"`にならない場合**、そのストアフロントではFootnoteのスクリプトが動作していません。次の順に確認してください。

1. 1時間待つか、再デプロイする。
2. 「設定」でそのストアフロントが対象として表示されている。
3. Catalyst coreがバージョン1.4以降である。
4. `<ConsentManager>`が`core/app/[locale]/layout.tsx`に残っている。
5. Script Managerでスクリプトが「Essential」に設定されている。
6. 独自のコンテンツセキュリティポリシーで`https://footnote.pouchapps.com`が許可されている。

**`"1"`が返るのに画像にラベルが付かない場合**、スクリプトは動作していますが、画像と照合できていません。

- Footnoteで、その画像が「AI生成」または「AI編集」に指定されていることを確認します。
- 画像を右クリックしてアドレスをコピーし、`/products/`の後に2つの数字が続いているか確認します。続いていない場合、その画像はFootnoteが照合できる形でBigCommerceのCDNから配信されていません。
- 「バッジ」タブで「カテゴリと検索結果」がオンになっていることを確認します。Catalystのページには商品ページであることをFootnoteに伝える目印がないため、このスイッチがCatalystの商品ページにも適用されます。

それでも解決しない場合は、ストアフロントのアドレス、ラベルが表示されるはずの商品ページ、Catalystのバージョン、コンソールでの確認結果を添えて、[footnote@pouchapps.com](mailto:footnote@pouchapps.com)までメールでお問い合わせください。どのストアフロントでもラベルが表示されなくなる理由は、[サポートページ](https://pouchapps.com/footnote/ja/support/)にまとめています。

Footnoteは画像へのラベル付けを支援するツールです。法律上どの画像にラベルが必要かを判断するものではなく、法的助言でもありません。