Intlayer Visual Editor Documentation

Intlayer Visual Editorは、ビジュアルエディタを使用してコンテンツ宣言ファイルとインタラクションを持つために、Webサイトをラップするツールです。

intlayer-editorパッケージはIntlayerに基づいており、React（Create React App）、Vite + React、Next.jsなどのJavaScriptアプリケーションで利用可能です。

Visual editor vs CMS

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

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

Integrate Intlayer into your application

Intlayerを統合する方法の詳細については、以下の関連セクションを参照してください。

Integrating with Next.js

Next.jsとの統合については、setup guideを参照してください。

Integrating with Create React App

Create React Appとの統合については、setup guideを参照してください。

Integrating with Vite + React

Vite + Reactとの統合については、setup guideを参照してください。

How Intlayer Editor Works

アプリケーション内のビジュアルエディタには、以下の2つの要素が含まれています。

• あなたのウェブサイトをiframe内に表示するフロントエンドアプリケーション。もしあなたのウェブサイトがIntlayerを使用している場合、ビジュアルエディタは自動的にコンテンツを検出し、インタラクションを取ることを可能にします。修正が加えられると、変更をダウンロードできるようになります。

• ダウンロードボタンをクリックすると、ビジュアルエディタはサーバーにリクエストを送り、新しいコンテンツであなたのコンテンツ宣言ファイルを置き換えます（これらのファイルがプロジェクト内のどこに宣言されていても）。

現在、Intlayer Editorはあなたのコンテンツ宣言ファイルをJSONファイルとして書き込みます。

Installation

Intlayerがプロジェクト内で構成されたら、単にintlayer-editorを開発依存関係としてインストールします：

npm install intlayer-editor -D

Configuration

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

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

import type { IntlayerConfig } from "intlayer";const config: IntlayerConfig = {  // ... その他の設定  editor: {    /**     * 必須     * アプリケーションのURL。     * これはビジュアルエディタがターゲットにするURLです。     */    applicationURL: process.env.INTLAYER_APPLICATION_URL,    /**     * オプショナル     * デフォルトは`8000`。     * エディタサーバーのポート。     */    port: process.env.INTLAYER_PORT,    /**     * オプショナル     * デフォルトは"http://localhost:8000"     * エディタサーバーのURL。     */    editorURL: process.env.INTLAYER_EDITOR_URL,    /**     * オプショナル     * デフォルトは`true`。`false`の場合、エディタは非アクティブになりアクセスできません。     * セキュリティ上の理由から、特定の環境（例：本番）でエディタを無効にするために使用できます。     */    enabled: process.env.INTLAYER_ENABLED,  },};export default config;

利用可能なすべてのパラメータを確認するには、configuration documentationを参照してください。

Using the Editor

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

   bash

   npx intlayer-editor start

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

   あなたのコンテンツの上にカーソルを合わせることで、Intlayerによってインデックスされた各フィールドを見ることができます。

   

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