Intlayer Visual Editor ドキュメント

www.youtube.com

Open embedded page in fullscreen

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 との統合については、セットアップガイド を参照してください。

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

--with フラグを使用すると、エディターを別のコマンドと並行して開始できます:

{
  "scripts": {
    "start:editor": "npx intlayer-editor start --with 'next dev --turbopack'",
  },
}

設定

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;

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

エディタの使用方法

1. エディタがインストールされたら、次のコマンドを使用してエディタを起動できます:

   bash

   コンテンツをコピー

   コードをコピー

   コードをクリップボードにコピー

   npx intlayer-editor start
   

アプリケーションを並行して実行する必要があることに注意してください。 アプリケーション URL は、エディター設定で設定した URL (applicationURL) と一致する必要があります。

アプリケーションは並行して実行する必要があります。 アプリケーションの URL はエディタ設定の applicationURL と一致している必要があります。

2. 次に、指定された URL を開きます。デフォルトは http://localhost:8000 です。

   コンテンツ上にカーソルをホバーすると、Intlayer によってインデックスされた各フィールドを確認できます。

   

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

環境設定

エディタは特定の環境ファイルを使用するように設定できます。これは、開発環境と本番環境で同じ設定ファイルを使いたい場合に便利です。

特定の環境ファイルを使用するには、エディタ起動時に --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）。エディターのコンソールでエラーがないか確認してください。

よくある質問