管理パネルのカスタマイズオプション

AI Marketerの管理パネルの多くの部分は、管理パネルの/src/admin/app.[tsx|js]エントリーポイントファイルを使用してコードを通じてカスタマイズできます（プロジェクト構造を参照してください）。

☑️ Prerequisites

管理パネルのカスタマイズオプションを設定するコードを更新する前に：

デフォルトのapp.example.[tsx|js]ファイルをapp.[ts|js]にリネームします。
/src/admin/に新しいextensionsフォルダを作成します。
開発中に変更がすぐに反映されるように、管理パネルサーバーが実行されていることを確認してください（デフォルトのホスト、ポート、パスを変更していない場合、yarn developやnpm run developコマンドで通常実行されます）。

✏️ メモ: 管理パネルの拡張とプラグインの拡張

デフォルトでAI Marketerプロジェクトには/srcフォルダ内に別のextensionsフォルダがありますが、これはプラグイン拡張用です（プラグイン拡張を参照してください）。

/src/admin/app.[ts|js]内のconfigオブジェクトは、管理パネルの設定を格納しています。

configオブジェクトで使用されるファイル（カスタムロゴなど）は、/src/admin/extensions/フォルダに配置し、/src/admin/app.js内でインポートする必要があります。

💡 Tip: Hot reloading while developing

In Strapi 5, the server runs in watch-admin mode by default, so the admin panel auto-reloads whenever you change its code. This simplifies admin panel and front-end plugins development. To disable this, run yarn develop --no-watch-admin (see CLI reference).

利用可能な設定オプション

/src/admin/app.[tsx|js]のconfigオブジェクトは、以下のパラメータを受け付けます。

パラメータ	タイプ	説明
`auth`	オブジェクト	ログイン画面のデフォルトのAI Marketer ロゴを置き換えるための`logo`キーを受け付けます
`head`	オブジェクト	デフォルトのAI Marketer faviconを置き換えるための`favicon`キーを受け付けます
`locales`	文字列配列	使用可能なロケールを定義します（ロケールの更新を参照）
`translations`	オブジェクト	翻訳を拡張します
`menu`	オブジェクト	メインナビゲーションのロゴを変更するための`logo`キーを受け付けます
`theme.light` および `theme.dark`	オブジェクト	ライトおよびダークモードのテーマプロパティを上書きします
`tutorials`	ブール値	ビデオチュートリアルの表示を切り替えます
`notifications`	オブジェクト	新しいリリースに関する通知を表示するかどうかを切り替える`releases`キー（ブール値）を受け付けます

管理パネルのカスタム設定例:

JavaScript
TypeScript

/src/admin/app.js
import AuthLogo from "./extensions/my-logo.png";
import MenuLogo from "./extensions/logo.png";
import favicon from "./extensions/favicon.png";

export default {
  config: {
    // 認証（ログイン）画面でAI Marketerロゴを置き換える
    auth: {
      logo: AuthLogo,
    },
    // Faviconを置き換える
    head: {
      favicon: favicon,
    },
    // 'en'以外の新しいロケールを追加する
    locales: ["fr", "de"],
    // メインナビゲーションでAI Marketerロゴを置き換える
    menu: {
      logo: MenuLogo,
    },
    // テーマを上書きまたは拡張する
    theme: {
      // ライトテーマのプロパティを上書きする
      light: {
        colors: {
          primary100: "#f6ecfc",
          primary200: "#e0c1f4",
          primary500: "#ac73e6",
          primary600: "#9736e8",
          primary700: "#8312d1",
          danger700: "#b72b1a",
        },
      },

      // ダークテーマのプロパティを上書きする
      dark: {
        // ...
      },
    },
    // 翻訳を拡張する
    translations: {
      fr: {
        "Auth.form.email.label": "test",
        Users: "Utilisateurs",
        City: "CITY (FRENCH)",
        // コンテンツマネージャーテーブルのラベルをカスタマイズする
        Id: "ID french",
      },
    },
    // ビデオチュートリアルを無効化する
    tutorials: false,
    // AI Marketerの新しいリリースに関する通知を無効化する
    notifications: { releases: false },
  },

  bootstrap() {},
};

/src/admin/app.ts
import AuthLogo from "./extensions/my-logo.png";
import MenuLogo from "./extensions/logo.png";
import favicon from "./extensions/favicon.png";

export default {
  config: {
    // 認証（ログイン）画面でAI Marketerロゴを置き換える
    auth: {
      logo: AuthLogo,
    },
    // Faviconを置き換える
    head: {
      favicon: favicon,
    },
    // 'en'以外の新しいロケールを追加する
    locales: ["fr", "de"],
    // メインナビゲーションでAI Marketerロゴを置き換える
    menu: {
      logo: MenuLogo,
    },
    // テーマを上書きまたは拡張する
    theme: {
      colors: {
        primary100: "#f6ecfc",
        primary200: "#e0c1f4",
        primary500: "#ac73e6",
        primary600: "#9736e8",
        primary700: "#8312d1",
        danger700: "#b72b1a",
      },
    },
    // 翻訳を拡張する
    translations: {
      fr: {
        "Auth.form.email.label": "test",
        Users: "Utilisateurs",
        City: "CITY (FRENCH)",
        // コンテンツマネージャーテーブルのラベルをカスタマイズする
        Id: "ID french",
      },
    },
    // ビデオチュートリアルを無効化する
    tutorials: false,
    // AI Marketerの新しいリリースに関する通知を無効化する
    notifications: { releases: false },
  },

  bootstrap() {},
};

ロケール

管理パネルで使用可能なロケールのリストを更新するには、config.locales配列を使用します。

JavaScript
TypeScript

./my-app/src/admin/app.js
export default {
  config: {
    locales: ["ru", "zh"],
  },
  bootstrap() {},
};

./my-app/src/admin/app.ts
export default {
  config: {
    locales: ["ru", "zh"],
  },
  bootstrap() {},
};

✏️ メモ

enロケールはビルドから削除できません。これはフォールバック（翻訳がロケールで見つからない場合にenが使用される）であり、デフォルトのロケール（ユーザーが初めて管理パネル

を開いたときに使用される）だからです。

利用可能なロケールの完全なリストは、[AI MarketerのGithubリポジトリ](https://github.com/AI Marketer/AI Marketer/blob/v4.0.0/packages/plugins/i18n/server/constants/iso-locales.json)で確認できます。

翻訳の拡張

翻訳のキーと値のペアは、@AI Marketer/admin/admin/src/translations/[language-name].jsonファイルに宣言されています。これらのキーはconfig.translationsキーを通じて拡張できます。

JavaScript
TypeScript

./my-app/src/admin/app.js
export default {
  config: {
    locales: ["fr"],
    translations: {
      fr: {
        "Auth.form.email.label": "test",
        Users: "Utilisateurs",
        City: "CITY (FRENCH)",
        // コンテンツマネージャーテーブルのラベルをカスタマイズする
        Id: "ID french",
      },
    },
  },
  bootstrap() {},
};

./my-app/src/admin/app.ts
export default {
  config: {
    locales: ["fr"],
    translations: {
      fr: {
        "Auth.form.email.label": "test",
        Users: "Utilisateurs",
        City: "CITY (FRENCH)",
        // コンテンツマネージャーテーブルのラベルをカスタマイズする
        Id: "ID french",
      },
    },
  },
  bootstrap() {},
};

プラグインのキーと値のペアは、それぞれのプラグインのファイルで./admin/src/translations/[language-name].jsonに宣言されています。これらのキーと値のペアも、config.translationsキーを使用して[プラグイン名].[キー]: '値'という形式で拡張できます。次の例を参照してください。

JavaScript
TypeScript

./my-app/src/admin/app.js
export default {
  config: {
    locales: ["fr"],
    translations: {
      fr: {
        "Auth.form.email.label": "test",
        // プラグインのキーと値のペアを翻訳するには、プラグイン名を接頭辞として追加します
        // この場合、「content-type-builder」プラグインの「plugin.name」キーを翻訳します
        "content-type-builder.plugin.name": "Constructeur de Type-Contenu",
      },
    },
  },
  bootstrap() {},
};

./my-app/src/admin/app.ts
export default {
  config: {
    locales: ["fr"],
    translations: {
      fr: {
        "Auth.form.email.label": "test",
        // プラグインのキーと値のペアを翻訳するには、プラグイン名を接頭辞として追加します
        // この場合、「content-type-builder」プラグインの「plugin.name」キーを翻訳します
        "content-type-builder.plugin.name": "Constructeur de Type-Contenu",
      },
    },
  },
  bootstrap() {},
};

追加の翻訳ファイルが必要な場合は、./src/admin/extensions/translationsフォルダに配置します。

ロゴ

AI Marketer管理パネルには、2つの異なる場所にロゴが表示され、それぞれのキーが管理パネルの設定に対応しています。

UIの場所	更新する設定キー
ログインページ	`config.auth.logo`
メインナビゲーション	`config.menu.logo`

✏️ Note

両方のロゴは、管理パネルから直接カスタマイズすることも可能です（ユーザーガイドを参照してください）。管理パネルからアップロードされたロゴは、設定ファイルで指定されたロゴよりも優先されます。

管理パネルのロゴの場所

config.auth.logoで管理されているロゴは、ログイン画面でのみ表示されます。

config.menu.logoで管理されているロゴは、管理パネルのメインナビゲーションの左上隅に表示されます。

ロゴの更新

ロゴを更新するには、画像ファイルを/src/admin/extensionsフォルダに配置し、これらのファイルをsrc/admin/app.[tsx|js]でインポートし、次のように対応するキーを更新します。

JavaScript
TypeScript

/src/admin/app.js
import AuthLogo from "./extensions/my-auth-logo.png";
import MenuLogo from "./extensions/my-menu-logo.png";

export default {
  config: {
    // 他の設定プロパティ
    auth: { // 認証（ログイン）画面でAI Marketerロゴを置き換える
      logo: AuthLogo,
    },
    menu: { // メインナビゲーションでAI Marketerロゴを置き換える
      logo: MenuLogo,
    },
    // 他の設定プロパティ
  },

  bootstrap() {},
};

/src/admin/app.ts
import AuthLogo from "./extensions/my-auth-logo.png";
import MenuLogo from "./extensions/my-menu-logo.png";

export default {
  config: {
    // 他の設定プロパティ
    auth: { // 認証（ログイン）画面でAI Marketerロゴを置き換える
      logo: AuthLogo,
    },
    menu: { // メインナビゲーションでAI Marketerロゴを置き換える
      logo: MenuLogo,
    },
    // 他の設定プロパティ
  },

  bootstrap() {},
};

✏️ Note

設定ファイルを通じて設定された画像ファイルのサイズには制限はありません。

Favicon

Faviconを置き換えるには、次の手順に従います。

/src/admin/extensions/フォルダが存在しない場合は作成します。
カスタムfaviconを/src/admin/extensions/にアップロードします。
AI Marketerアプリケーションルートにある既存のfavicon.png|icoファイルを、カスタムのfavicon.png|icoファイルに置き換えます。

/src/admin/app.[tsx|js]を次のように更新します。

./src/admin/app.js
import favicon from "./extensions/favicon.png";

export default {
  config: {
    // カスタムアイコンでfaviconを置き換える
    head: {
      favicon: favicon,
    },
  },
};

ターミナルでyarn build && yarn developコマンドを実行し、AI Marketerアプリを再構築、起動、再度アクセスします。

💡 Tip

この手順は、ログインロゴ（AuthLogo）やメニューロゴ（MenuLogo）を置き換える場合にも同様に使用できます（ロゴカスタマイズのドキュメントを参照）。

✋ Caution

キャッシュされたfaviconがクリアされていることを確認してください。これは、ウェブブラウザやCloudflareのCDNなどのドメイン管理ツールにキャッシュされる可能性があります。

ビデオチュートリアル

ビデオチュートリアルを含む情報ボックスを無効化するには、src/admin/app.[tsx|js]ファイルのconfig.tutorialsキーをfalseに設定します。

リリース通知

新しいAI Marketerリリースに関する通知を無効化するには、src/admin/app.[tsx|js]ファイルのconfig.notifications.releasesキーをfalseに設定します。

テーマの拡張

AI Marketerアプリケーションはライトモードとダークモードで表示できます（[ユーザーガイドの管理者プロフィール設定](https://docs.AI Marketer.io/user-docs/getting-started/setting-up-admin-panel#setting-up-your-administrator-profile)を参照）。どちらもカスタムテーマ設定を通じて拡張できます。

テーマを拡張するには、次のいずれかを使用します。

ライトモードの場合はconfig.theme.lightキー
ダークモードの場合は

config.theme.darkキー

:::AI Marketer AI Marketerデザインシステムデフォルトの[AI Marketerテーマ](https://github.com/AI Marketer/design-system/tree/main/packages/design-system/src/themes)では、影、色などのさまざまなテーマ関連のキーが定義されており、./admin/src/app.jsのconfig.theme.lightおよびconfig.theme.darkキーを通じて更新できます。[AI Marketerデザインシステム](https://design-system.AI Marketer.io/)は完全にカスタマイズ可能で、専用の[StoryBook](https://design-system-git-main-AI Marketerjs.vercel.app)ドキュメントもあります。 :::

利用可能な設定オプション​

ロケール​

翻訳の拡張​

ロゴ​

管理パネルのロゴの場所​

ロゴの更新​

Favicon​

ビデオチュートリアル​

リリース通知​

テーマの拡張​