このページとあなたの好きなAIアシスタントを使ってドキュメントを要約します
Intlayer MCPサーバーを統合することで、ChatGPT、DeepSeek、Cursor、VSCodeなどから直接ドキュメントを取得できます。
MCPサーバーのドキュメントを表示このページのコンテンツはAIを使用して翻訳されました。
英語の元のコンテンツの最新バージョンを見るこのドキュメントを改善するアイデアがある場合は、GitHubでプルリクエストを送信することで自由に貢献してください。
ドキュメントへのGitHubリンクドキュメントのMarkdownをクリップボードにコピー
Intlayer Visual Editor ドキュメント
Intlayer Visual Editor は、ビジュアルエディターを使用してコンテンツ宣言ファイルと対話するためにウェブサイトをラップするツールです。
intlayer-editor パッケージは Intlayer に基づいており、React (Create React App)、Vite + React、Next.js などの JavaScript アプリケーションで利用可能です。
ビジュアルエディター vs CMS
Intlayer Visual Editor は、ローカル辞書のビジュアルエディタでコンテンツを管理できるツールです。変更が行われると、コンテンツはコードベース内で置き換えられます。つまり、アプリケーションが再構築され、ページがリロードされて新しいコンテンツが表示されます。
対照的に、Intlayer CMS は、遠隔辞書のビジュアルエディタでコンテンツを管理できるツールです。変更が行われても、コードベースには影響を与えません。そして、ウェブサイトは自動的に変更されたコンテンツを表示します。
アプリケーションへの Intlayer の統合
Intlayer の統合方法についての詳細は、以下の関連セクションを参照してください:
Next.js との統合
Next.js との統合
Next.js との統合については、セットアップガイド を参照してください。
Create React App との統合
Create React App との統合については、セットアップガイド を参照してください。
Vite + React との統合
Vite + React との統合については、セットアップガイド を参照してください。
Intlayer Editor の仕組み
アプリケーション内のビジュアルエディタには以下の2つの要素が含まれます:
ウェブサイトを iframe に表示するフロントエンドアプリケーション。ウェブサイトが Intlayer を使用している場合、ビジュアルエディタは自動的にコンテンツを検出し、対話できるようにします。変更が行われると、変更をダウンロードすることができます。
ダウンロードボタンをクリックすると、ビジュアルエディタはサーバーにリクエストを送信し、プロジェクト内で宣言されている場所に新しいコンテンツでコンテンツ宣言ファイルを置き換えます。
現時点では、Intlayer Editor はコンテンツ宣言ファイルを JSON ファイルとして書き込みます。
インストール
プロジェクトで Intlayer が設定されたら、intlayer-editor を開発依存関係としてインストールしてください:
コードをクリップボードにコピー
npm install intlayer-editor --save-dev
設定
Intlayer の設定ファイルで、エディタの設定をカスタマイズできます:
コードをクリップボードにコピー
import type { IntlayerConfig } from "intlayer";const config: IntlayerConfig = { // ... 他の設定 editor: { /** * 必須 * アプリケーションの URL。 * これはビジュアルエディタがターゲットとする URL です。 * 例: 'http://localhost:3000' */ applicationURL: process.env.INTLAYER_APPLICATION_URL, /** * 任意 * デフォルトは `true`。`false` の場合、エディタは無効化されアクセスできません。 * 本番環境などのセキュリティ上の理由で特定の環境でエディタを無効化するために使用できます。 */ enabled: process.env.INTLAYER_ENABLED, /** * 任意 * デフォルトは `8000`。 * エディタサーバーのポート。 */ port: process.env.INTLAYER_PORT, /** * 任意 * デフォルトは "http://localhost:8000" * エディタサーバーの URL。 */ editorURL: process.env.INTLAYER_EDITOR_URL, },};export default config;
利用可能なすべてのパラメータについては、設定ドキュメント を参照してください。
エディタの使用方法
エディタがインストールされたら、次のコマンドを使用してエディタを起動できます:
bashコードをコピーコードをクリップボードにコピー
npx intlayer-editor start
アプリケーションは並行して実行する必要があります。 アプリケーションの URL はエディタ設定の applicationURL と一致している必要があります。
次に、指定された URL を開きます。デフォルトは http://localhost:8000 です。
コンテンツ上にカーソルをホバーすると、Intlayer によってインデックスされた各フィールドを確認できます。
コンテンツがアウトライン表示されている場合、長押しして編集ドロワーを表示できます。
環境設定
エディタは特定の環境ファイルを使用するように設定できます。これは、開発環境と本番環境で同じ設定ファイルを使いたい場合に便利です。
特定の環境ファイルを使用するには、エディタ起動時に --env-file または -f フラグを使用します:
コードをクリップボードにコピー
npx intlayer-editor start -f .env.development
環境ファイルはプロジェクトのルートディレクトリに配置する必要があります。
または、--env または -e フラグを使って環境を指定することもできます:
コードをクリップボードにコピー
npx intlayer-editor start -e development
デバッグ
ビジュアルエディタに問題がある場合は、以下を確認してください:
ビジュアルエディタとアプリケーションが実行中である。
Intlayer 設定ファイルで editor 設定が正しく設定されている。
- 必須フィールド:
- アプリケーション URL はエディタ設定 (applicationURL) に設定したものと一致する必要があります。
- 必須フィールド:
ビジュアルエディターは iframe を使用してウェブサイトを表示します。ウェブサイトのコンテンツセキュリティポリシー(CSP)が CMS の URL を frame-ancestors として許可していることを確認してください(デフォルトは 'http://localhost:8000')。エディターのコンソールでエラーがないか確認してください。
ドキュメント履歴
- 5.5.10 - 2025-06-29: 履歴を初期化