ONLYOFFICE Docsを、あなたのロゴとテーマカラーでブランド化しましょう。

ONLYOFFICE Docsに組み込まれたエディタをカスタマイズするには、エディタにブランドカラーテーマを設定し、初期化設定でロゴのURLを渡します。テーマはDocsサーバーにインストールされるJSONファイルです。ロゴはエディタを埋め込むアプリケーションによって設定されます。ドキュメントに記載されているヘッダーロゴオプションはONLYOFFICE Docs Developerでのみ利用可能ですので、アセットを準備する前にエディションを確認してください。

これは、自己ホスト型の Docs 統合に適用され、DocSpace のブランディングや Desktop Editors のローカルテーマピッカーには適用されません。ONLYOFFICE は Docs v7.0 のカスタムテーマを文書化します。これらの設定は、埋め込みエディターのインターフェースに影響し、ドキュメントの内容や Web サイトのナビゲーションには影響しません。

まず最初に何を準備すべきですか？

ロゴ用に2つのファイルを用意してください。明るいヘッダーに対して読みやすいバージョンと、暗いヘッダーやカラーヘッダーに対して反転表示できるバージョンです。Docs APIでは、エディターヘッダーのロゴには300×20ピクセルの画像が指定されています。アートワークに合う場合は透明なPNG画像を使用し、画像は狭い帯状に表示されるため、細かいディテールは少なく、コントラストの高いマークにしてください。両方のファイルを、エディターユーザーのブラウザが読み込める安定したHTTPSアドレスでホストしてください。

サーバーへの書き込み権限、エディタ構成を作成するコード、およびテストドキュメントも必要です。Dockerの場合は、実行中のコンテナ名またはIDを特定してください。変更はまず非本番環境でテストしてください。

エディターヘッダー用に、300×20ピクセルのサイズで、明るいヘッダーロゴと暗いヘッダーバージョンのロゴを準備してください。

1. 色のテーマJSONファイルを作成します

テーマ JSON ファイルは、名前付きインターフェイスカラートークンをカラー値にマッピングする設定ファイルです。はid一意で、で始まる必要がありますtheme-。は、nameユーザーがテーマピッカーで目にするものです。全体的なインターフェイスに合う明るいまたは暗いベースを選択し、ヘッダーの色と選択したアクセントを置き換えます。以下のサンプルでは、エディターの背景を明るいままにし、各エディターヘッダーにインディゴを使用し、ドキュメントエディターのアクセントボタンにコーラルを使用しています。

{
  "name": "Acme Brand Light",
  "id": "theme-acme-brand-light",
  "type": "light",
  "colors": {
    "toolbar-header-document": "#263B67",
    "toolbar-header-spreadsheet": "#263B67",
    "toolbar-header-presentation": "#263B67",
    "toolbar-header-pdf": "#263B67",
    "text-toolbar-header": "#fff",
    "background-accent-button": "#D8613C"
  }
}

として保存してくださいacme-brand-light.json。ヘッダーカラートークンは、ドキュメント、スプレッドシート、プレゼンテーション、および PDF ごとに別々です。ファイルの種類全体で一貫したブランドが必要な場合は、それぞれを設定してください。ここに示されているアクセントトークンは、ドキュメントエディターのアクセントボタンに影響し、Docs のすべての色付き要素には影響しません。ONLYOFFICE は、背景、境界線、ホバー状態、アイコン、テキスト、および編集キャンバスの追加カラートークンを文書化しているため、これらの領域が必要な場合にのみパレットを拡張してください。リリース前に、選択した背景に対してテキストとアイコンのコントラストを確認してください。ブランドカラーだけでは、コントロールの読みやすさが保証されません。

テーマファイルは、ONLYOFFICEという名前のカラートークンを、インターフェースで使用したい色にマッピングします。

サポートされているトークンの全リストと必要な JSON フィールドについては、公式のONLYOFFICE カスタムテーマのリファレンスを参照してください。

2. ドキュメントサーバーにテーマをインストールします。

JSONファイルをサーバーのテーマディレクトリにコピーしてください。公式のLinuxおよびDockerのドキュメントでは、以下のパスが示されています。

/var/www/onlyoffice/documentserver/web-apps/apps/common/main/resources/themes

Docker環境でデプロイする場合は、コマンドを実行するディレクトリにファイルを配置し、CONTAINER_ID実行中のDocsコンテナの名前またはIDに置き換えてください。

docker cp ./acme-brand-light.json CONTAINER_ID:/var/www/onlyoffice/documentserver/web-apps/apps/common/main/resources/themes/

Linux では、書き込み権限のあるアカウントでファイルをそのパスにコピーしてください。Windows では、テーマディレクトリを使用してください%ProgramFiles%\ONLYOFFICE\DocumentServer。完全なパスについては、インストールガイドを参照してください。カスタムテーマは、バンドルされているアプリケーションファイルを編集するのではなく、追加する JSON ファイルです。

テーマのJSONファイルをサーバー側のテーマディレクトリにコピーしてください。コンテナ識別子は、実行中のDocsサービスと一致している必要があります。

ONLYOFFICEによると、テーマのキャッシュは5分ごとに更新されます。ファイルをコピーした後、エディターを更新してください。それでもファイルが見つからない場合は、DockerまたはLinuxのキャッシュのトラブルシューティング手順に従い、必要に応じてサービスを再起動してください。本番環境のコンテナの場合は、イメージまたはデプロイメント自動化にファイルを含めることで、コンテナを置き換えてもファイルが削除されないようにしてください。

3. テーマを適用し、エディターのロゴを設定します。

テーマが検出されたら、ユーザーは「表示」>「インターフェーステーマ」から選択できます。埋め込みエディタをそのテーマで起動するには、アプリケーションが Docs API に渡す構成オブジェクトにその ID を追加します。同じオブジェクト内にロゴを設定しますeditorConfig.customization。

editorConfig: {
  customization: {
    uiTheme: "theme-acme-brand-light",
    logo: {
      image: "https://assets.example.com/logo-light.png",
      imageDark: "https://assets.example.com/logo-dark.png",
      imageLight: "https://assets.example.com/logo-light.png",
      url: "https://www.example.com"
    }
  }
}

例の URL を実際の公開アセットと宛先 URL に置き換えてください。logo.imageは、一般的なエディターモードの標準ロゴパスです。ダークフィールドとライトフィールドを分けて使用すると、ダークヘッダーまたはライトヘッダーのアートワークを選択できます。 URL は、ロゴをクリックしたときに表示されるページです。 API では、このヘッダーロゴ設定を Docs 開発者向け機能としてリストし、300 × 20 サイズを指定しています。customer.logoエディターの「概要」情報で使用されるより大きな画像であると混同しないでください。

「表示」タブの「インターフェーステーマ」選択画面で、インストール済みのカスタムテーマを選択できるようになります。

統合でエディター構成に JWT を使用して署名する場合は、署名対象フィールドを追加または変更した後、署名を再構築し、署名シークレットをサーバー上に保持してください。公式のONLYOFFICE 統合例では、トークンは構成と一致している必要があり、署名対象パラメーターが変更されると再生成される必要があると説明されています。また、ユーザーが以前に選択したテーマが優先される場合があることに注意してくださいuiTheme。要求したデフォルトが表示されない場合は、新しいブラウザープロファイルでテストするか、そのユーザーの保存済みテーマ設定をリセットしてください。

ロゴのプロパティサイズとエディションの入手可能性については、公式の標準ブランディング構成リファレンスを参照してください。

展開前に結果を確認してください。

ユーザーが必要とするファイルの種類を開きます。ヘッダーの色、読みやすいテキストとアイコン、明るいヘッダーと暗いヘッダーでの正しいロゴ、およびロゴのクリック先を確認します。実際の埋め込みレイアウトで編集モードと表示モードを確認します。

テーマが見つからない場合は、JSONとIDを検証し、アクティブサーバーのテーマディレクトリを確認して、キャッシュの更新を待ちます。ロゴが見つからない場合は、開発者版の要件、ブラウザから画像URLへのアクセス、初期化構成にが含まれているかどうかを確認しますlogo。署名付きフィールドを変更した場合は、バックエンドでJWTを再生成します。