Intlayer Editor Documentation

Intlayer Editorは、アプリケーションを視覚的なエディターに変換するツールです。Intlayer Editorを使用すると、チームは設定されたすべての言語でサイトのコンテンツを管理できます。

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

Integrating

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

Integrating with Next.js

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

Integrating with Create React App

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

Integrating with Vite + React

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

How Intlayer Editor Works

Intlayer Editorを使用して変更を加えるたびに、サーバーは自動的に変更をIntlayer宣言ファイルに挿入します。ファイルがプロジェクト内で宣言されている場所に関係なく、挿入されます。

このようにして、ファイルがどこで宣言されているのかや辞書コレクション内のキーを見つけることを心配する必要がありません。

Installation

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

npm install intlayer-editor

yarn add intlayer-editor

pnpm add intlayer-editor

Configuration

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

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

const config: IntlayerConfig = {
  // ... 他の設定
  editor: {
    enabled: process.env.INTLAYER_ENABLED === "true", // falseの場合、エディターは非アクティブでアクセスできません。
    // クライアントIDとクライアントシークレットは、エディターを有効にするために必要です。
    // コンテンツを編集しているユーザーを特定するために使用されます。
    // 新しいクライアントをIntlayerダッシュボードのプロジェクトで作成することで取得できます (/ru/dashboard/projects)。
    clientId: process.env.INTLAYER_CLIENT_ID,
    clientSecret: process.env.INTLAYER_CLIENT_SECRET,
  },
};

クライアントIDとクライアントシークレットを持っていない場合は、Intlayer Dashboard - Projectsで新しいクライアントを作成することで取得できます。

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

2. アプリケーションにIntlayer Editor Providerを挿入する

エディターを有効にするためには、Intlayer Editor Providerをアプリケーションに挿入する必要があります。

React JSまたはVite + Reactアプリケーションの例：

import { IntlayerProvider } from "react-intlayer";
import { IntlayerEditorProvider } from "intlayer-editor";

function App() {
  return (
    <IntlayerProvider>
      <IntlayerEditorProvider>
        {/* あなたのアプリケーション */}
      </IntlayerEditorProvider>
    </IntlayerProvider>
  );
}

Next.jsアプリケーションの例：

import { IntlayerClientProvider } from "next-intlayer";
import { IntlayerEditorProvider } from "intlayer-editor";

function Page() {
  return (
    <IntlayerServerProvider locale={locale}>
      <IntlayerClientProvider locale={locale}>
        <IntlayerEditorProvider>
          {/* あなたのアプリケーション */}
        </IntlayerEditorProvider>
      </IntlayerClientProvider>
    </IntlayerServerProvider>
  );
}

3. アプリケーションにスタイルシートを追加する

エディターのスタイルを表示するためには、アプリケーションにスタイルシートを追加する必要があります。

Tailwindを使用している場合は、スタイルシートをtailwind.config.jsファイルに追加できます：

// tailwind.config.js
import tailwindConfig, { tailwindPresetConfig } from "intlayer-editor/tailwind";

module.exports = {
  presets: [tailwindPresetConfig],
  content: [
    ...tailwindConfig.content,
    // ... 残りのコンテンツ
  ],
  // ...
};

そうでない場合は、アプリケーションにスタイルシートをインポートできます：

// app.tsx
import "intlayer-editor/css";

または

/* app.css */
@import "intlayer-editor/css";

Using the Editor

エディターがインストールされ、有効化され、起動されると、コンテンツの上にカーソルを移動させることで、Intlayerによってインデックスされた各フィールドを表示できます。

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