Intlayer コンテンツ管理システム (CMS) ドキュメント

Intlayer CMS は、Intlayer プロジェクトのコンテンツを外部化するアプリケーションです。

そのために、Intlayer は「遠隔辞書」という概念を導入しています。

遠隔辞書の理解

Intlayer は「ローカル辞書」と「遠隔辞書」を区別します。

• 「ローカル辞書」とは、あなたの Intlayer プロジェクトで宣言された辞書のことです。ボタンの宣言ファイルやナビゲーションバーなどが含まれます。この場合、コンテンツを外部化することは意味がありません。なぜなら、このコンテンツは頻繁に変更されるべきではないからです。

• 「遠隔辞書」とは、Intlayer CMS によって管理される辞書です。これにより、チームが直接ウェブサイト上でコンテンツを管理できるようになり、A/B テスト機能や SEO 自動最適化を活用することも目指しています。

ビジュアルエディタ vs CMS

Intlayer Visual エディタは、ローカル辞書用のビジュアルエディタでコンテンツを管理するためのツールです。変更が加えられると、コンテンツはコードベース内で置き換えられます。つまり、アプリケーションは再構築され、ページは新しいコンテンツを表示するために再読み込みされます。

それに対し、Intlayer CMS は、遠隔辞書用のビジュアルエディタでコンテンツを管理するためのツールです。変更が加えられても、コンテンツはコードベースに影響を与えません。そして、ウェブサイトは自動的に変更されたコンテンツを表示します。

統合

パッケージのインストール方法の詳細については、以下の関連セクションを参照してください。

Next.js との統合

Next.js との統合については、セットアップガイドを参照してください。

Create React App との統合

Create React App との統合については、セットアップガイドを参照してください。

Vite + React との統合

Vite + React との統合については、セットアップガイドを参照してください。

設定

1. intlayer.config.ts ファイルでエディタを有効にする

Intlayer 設定ファイルでは、エディタの設定をカスタマイズできます：

import type { IntlayerConfig } from "intlayer";const config: IntlayerConfig = {  // ... 他の設定  editor: {    /**     * クライアント ID とクライアントシークレットは、エディタを有効にするために必要です。     * これにより、コンテンツを編集しているユーザーを識別できます。     * 新しいクライアントを Intlayer ダッシュボード - プロジェクトで作成することで取得できます (/dashboard/projects)。     * clientId: process.env.INTLAYER_CLIENT_ID,     * clientSecret: process.env.INTLAYER_CLIENT_SECRET,     */    clientId: process.env.INTLAYER_CLIENT_ID,    clientSecret: process.env.INTLAYER_CLIENT_SECRET,    /**     * オプション     * デフォルトは `true`です。`false`のとき、エディタは非アクティブでアクセスできません。     * セキュリティ上の理由から、特定の環境（例：本番環境）でエディタを無効にするために使用できます。     */    enabled: process.env.INTLAYER_ENABLED,  },};export default config;

クライアント ID とクライアントシークレットがない場合は、Intlayer ダッシュボード - プロジェクトで新しいクライアントを作成することで取得できます。

すべての利用可能なパラメータを確認するには、設定ドキュメントを参照してください。

CMS の使用

エディタがインストールされると、カーソルを使ってコンテンツにカーソルを合わせることで、Intlayer によってインデックス付けされた各フィールドを表示できます。

コンテンツがアウトラインされている場合は、長押しすることで編集ドロワーを表示できます。