ownCloudのWeb UIのブランディングとテーマカラーをカスタマイズする方法

ownCloudのWebインターフェースをカスタマイズする最も確実な方法は、サポートされているテーマJSONファイルを作成し、ownCloud Infinite Scaleにそのテーマを指定することです。ブランド名、ロゴ、ファビコン、ログイン画面の背景、または一般的なインターフェースの色を変更するためだけにWebフロントエンドを再構築する必要はありません。現在のInfinite Scaleのテーマモデルでは、これらの要素はテーマ定義によって提供され、デザイントークンによって色やその他の視覚的な値が制御されます。

このガイドは、ownCloud Infinite Scale (oCIS) とその最新の ownCloud Web フロントエンド向けに書かれています。アプリベースのテーマ構造と異なる設定を使用する古い ownCloud Server 10/11 PHP テーマシステム向けのガイドではありません。ownCloud の安定版 Infinite Scale 8.2 のドキュメントと 9.0 の開発ドキュメントの両方で、同じランタイム アプローチが説明されています。カスタム テーマ ディレクトリを で指定しWEB_ASSET_THEMES_PATH、次にテーマ JSON ファイルを選択しますWEB_UI_THEME_PATH。ownCloud Web の公式カスタム テーマ ドキュメントを参照してください。

ownCloud Webを再構築せずにカスタマイズできるもの

通常の組織テーマは、ほとんどの管理者が実際に必要とする視覚的な変更を網羅できます。テーマのJSONファイルでは、製品名とスローガン、ロゴとファビコンへのパス、ログインページの背景、ブランド、プライマリ、背景、テキスト、境界線、ファイルタイプの色などのWebデザイントークンを定義できます。これは、コンパイル済みのフロントエンドファイルを編集するよりも優れています。なぜなら、テーマは独立したデプロイメント資産として扱われ、サーバー構成と並行して管理できるからです。

ステップ1：テーマディレクトリとアセットフォルダを別々に作成する

まず、カスタムテーマを組み込みのownCloudアセットとは別に保管してください。シンプルなレイアウトは、テーマディレクトリに、ロゴ、ファビコン、ログイン画像用のthemes.jsonフォルダを追加したものですassets。正確なホストパスは任意ですが、重要なのは、ディレクトリがマウントされているか、またはoCIS Webサービスに公開されていることですWEB_ASSET_THEMES_PATH。

ownCloudのカスタムWebテーマのファイルレイアウト例です。テーマ定義ファイルと画像アセットは、専用のディレクトリにまとめて保存されます。

例えば、ホスト側の構造は次のようになります。

/srv/owncloud/themes/
└── acme/
    ├── themes.json
    └── assets/
        ├── logo.svg
        ├── logo-white.svg
        ├── favicon.png
        └── login-background.jpg

画像アセットは、表示されるコンテキストにおいて判読可能なものを使用してください。白いページでは効果的な暗いロゴでも、暗いトップバーでは見えにくくなる可能性があるため、明るいロゴと暗いロゴのバリエーションを別々に用意すると便利な場合が多いです。また、サインインコントロールの背景は比較的シンプルにしてください。ブランディングは、視認性を損なうことなく、認知度を高めるものでなければなりません。

ステップ2：ブランド名、ロゴパス、ファビコン、ログイン背景を定義する

テーマ JSON はカスタマイズの中心です。このcommonセクションには、名前やスローガンなどの共有ブランドテキストが含まれています。 の下で、デフォルトの Web ロゴとログインの背景を定義できます。ownCloud のドキュメント化されたスキーマでは、、、およびにclients.web.defaults個別のロゴ キーを使用します。topbarfaviconlogin

テーマファイルのブランディング部分を示す、エディター形式の図解です。この図解をコピー＆ペースト用のコードとして扱うのではなく、以下の例に示されているドキュメント化されたオブジェクト構造を使用してください。

最低限の出発点としては、以下のサポートされている構造を参考にしてください。Webサービスがテーマアセットを公開するURLパスとパスを一致させてください。

{
  "common": {
    "name": "Acme Cloud",
    "slogan": "Your files. Your workspace.",
    "logo": "themes/acme/assets/logo.svg",
    "urls": {
      "accessDeniedHelp": "",
      "imprint": "",
      "privacy": "",
      "accessibilityStatement": "",
      "universalAccessEasyLanguage": "",
      "universalAccessSignLanguage": ""
    }
  },
  "clients": {
    "android": {},
    "desktop": {},
    "ios": {},
    "web": {
      "defaults": {
        "appBanner": {},
        "logo": {
          "topbar": "themes/acme/assets/logo-white.svg",
          "favicon": "themes/acme/assets/favicon.png",
          "login": "themes/acme/assets/logo-white.svg"
        },
        "loginPage": {
          "backgroundImg": "themes/acme/assets/login-background.jpg"
        },
        "icons": {
          "universalAccess": "",
          "universalAccessEasyLanguage": "",
          "universalAccessSignLanguage": ""
        }
      },
      "themes": []
    }
  }
}

JSONパーサーがファイルを受け入れるからといって、すべてのキーを安全に省略できるとは限りません。ownCloudは、必須のテーマキーの一部は実行時に挿入されるものの、構文的に有効なテーマでも意味的に間違っている可能性があると指摘しています。本番環境での適切な運用方法としては、実際に使用しているInfinite Scaleのバージョンに同梱されているテーマテンプレートから始め、必要なブランディング変更のみを行い、残りの構造はそのリリースに合わせて維持することです。

ステップ3：デザイントークンを使用してテーマカラーを変更する

色のカスタマイズは、テーマのエントリの にありますclients.web.themes。各テーマは、 でダークモードかどうかを識別しisDark、人間が読みやすい を提供しname、デザイン トークンを上書きできます。 は、colorPalette通常、表示されるブランド カラーを調整する場所です。

ownCloud Webで使用されるカラートークンの例。まずフォーカスされたセットを変更し、次にコントラストとホバー状態を確認してからパレットを拡張します。

軽めの企業テーマにする場合は、利用可能なすべての色を変更するのではなく、少数のトークンから始めると良いでしょう。

{
  "isDark": false,
  "name": "Acme Light",
  "logo": {
    "topbar": "themes/acme/assets/logo-white.svg",
    "favicon": "themes/acme/assets/favicon.png",
    "login": "themes/acme/assets/logo-white.svg"
  },
  "designTokens": {
    "colorPalette": {
      "background-default": "#ffffff",
      "background-sidebar": "#f5f7fa",
      "background-hover": "#eef4fb",
      "border": "#d8e0e8",
      "swatch-brand-default": "#176B87",
      "swatch-brand-hover": "#12556C",
      "swatch-brand-contrast": "#ffffff",
      "swatch-primary-default": "#176B87",
      "swatch-primary-hover": "#12556C",
      "swatch-primary-contrast": "#ffffff",
      "text-default": "#102A33",
      "text-inverse": "#ffffff",
      "text-muted": "#526873",
      "icon-folder": "#176B87"
    }
  }
}

重要なトレードオフは、一貫性と完全性のバランスです。一部の要素だけを変更すればswatch-brand-default、視覚的な結果はすぐに得られるかもしれませんが、ホバー、コントラスト、サイドバー、境界線、テキストなどのトークンは、デフォルトのテーマを反映したままになる可能性があります。一方、テストせずに数十ものトークンを上書きすると、判読不能な組み合わせになってしまう恐れがあります。ほとんどの展開においては、まずブランド、プライマリ、コントラスト、背景、テキスト、境界線の値から始め、デフォルト値がデザインと明らかに矛盾する部分のみを拡張していくのが良いでしょう。

コントラストには特に注意してください。明るいブランドカラーを選択した場合は、白いテキストを無理やり重ねるのではなく、暗いコントラストのトークンと組み合わせるようにしてください。キーボードフォーカス、ホバー状態、無効化されたコントロール、ダークモード（提供している場合）、およびユーザーにとって重要な場合はハイコントラストモードをテストしてください。

ステップ4：カスタムテーマをマウントし、ownCloudにthemes.jsonを指定します。

ディレクトリと JSON ファイルの準備ができたら、Web サービスがそれらを読み取れるように設定してください。関連する環境変数は 2 つでWEB_ASSET_THEMES_PATH、これは ownCloud にカスタムテーマのルートの場所を指示し、WEB_UI_THEME_PATHは読み込むテーマの JSON ファイルを選択します。

Docker Compose の手法を用いて、カスタムテーマディレクトリをマウントし、ownCloud Web のテーマ設定に関する 2 つの環境変数を設定する例を示します。実際のデプロイメントに合わせてパスを調整してください。

Docker Compose のデプロイメントでは、次のようなパターンが使用される場合があります。

services:
  ocis:
    image: owncloud/ocis:<your-tested-version>
    environment:
      WEB_ASSET_THEMES_PATH: /etc/ocis/themes
      WEB_UI_THEME_PATH: /etc/ocis/themes/acme/themes.json
    volumes:
      - ./themes:/etc/ocis/themes:ro

上記のイメージタグは意図的にプレースホルダーとして使用しています。本番環境では、サンプルから浮動タグをコピーするのではなく、テスト済みの正確なoCISバージョンを使用してください。環境やマウントされたファイルを変更した後は、デプロイ方法に応じて影響を受けるoCISサービスを再起動または再作成し、新しい構成が読み込まれるようにしてください。

ownCloudには重要なフォールバック動作が記載されています。カスタムテーマが指定されていない場合、またはテーマの読み込みに失敗した場合は、標準のInfinite Scaleテーマが使用されます。このフォールバックは、パスが見つからない場合でも必ずしもインターフェースが使用不能になるわけではないため便利です。ただし、再起動後にownCloudのデフォルトの外観が表示される場合は、カスタムテーマが読み込まれなかったことを示す診断の手がかりとなる可能性もあります。

ブランドが実際に読み込まれたことを確認する方法

ログインページが変更されただけで作業を止めてはいけません。ユーザーが実際にブランドを目にする場所すべてを網羅した完全なチェックを行う必要があります。キャッシュされたアセットによって現在の状態が隠される可能性を減らすため、サイトを新しいブラウザセッションまたはプライベートウィンドウで開いてください。

• ログインページに期待通りのロゴと背景が使用されていることを確認してください。
• ログイン後、上部のバーに表示されているロゴが正しく、背景上で判読可能であることを確認してください。
• カスタムファビコンについては、ブラウザのタブをご確認ください。
• ファイル領域を開き、主要ボタン、マウスオーバー状態、サイドバーの色、フォルダアイコン、テキストのコントラストを確認します。
• ライトテーマとダークテーマの両方を提供している場合は、それらを切り替えて、それぞれ独立して動作を確認してください。
• 幅の狭いブラウザでも、幅の広いロゴがレスポンシブ対応のトップバーを圧迫しないように、少なくとも1つのブラウザ幅を確認してください。

カスタムテーマが表示されない場合

デフォルトのownCloudテーマがまだ読み込まれます

まず、ホスト上だけでなく、実行中のコンテナまたはサービス内のパスを確認してください。WebWEB_ASSET_THEMES_PATHサービスから見えるテーマのルートパスを参照し、WEB_UI_THEME_PATHその環境内の実際のJSONファイルを参照する必要があります。コンテナにマウントされていないホストパスはownCloudで読み取ることができません。

JSONデータは読み込まれるが、画像が欠落している

アセットパスthemes.json、ファイル名の大文字・小文字、およびカスタムテーマディレクトリ内にファイルが存在するかどうかを確認してください。ブラウザの開発者ツールを使用すると、アセットリクエストの破損とテーマの問題を区別できます。テーマの色は読み込まれるのにロゴが1つだけ表示されない場合は、テーマ自体は有効でもアセットパスが間違っている可能性があります。

ページにはブランドロゴが入っているが、色が統一されていないように見える。

これは通常、パレットの一部のみが上書きされたことを意味します。関連するホバートークンとコントラストトークンを追加し、再度テストしてください。読みにくいボタンが1つあるからといって、無関係なテキストトークンや背景トークンを広範囲に変更して解決しようとしないでください。最小限の一貫性のある変更を加え、インターフェース全体でその変更が反映されていることを確認してください。

あるリリースではテーマが正常に動作するが、アップグレード後に表示がおかしくなる

テーマトークンやフロントエンドの動作は変化する可能性があります。本番環境をアップグレードする前に、カスタムテーマを対象のoCISリリースのテンプレートおよびドキュメントと比較してください。ownCloudのWebカスタム構成に関するドキュメントでは、サポートされている構成/カスタムアセットと、完全にカスタムコンパイルされたWebアセットの提供との違いについても説明しています。

コンパイル済みのWebアセットを編集するべきでしょうか？

通常、一般的なブランディングには適していません。カスタムテーマは、サポートされているWeb UIに近い形で、名前、ロゴ、背景、デザイントークンを変更する場合に最適です。完全にカスタムコンパイルされたアセットは、テーマやサポートされているアセットのオーバーライドでは表現できない、真にカスタマイズされたフロントエンドを開発または配布する場合にのみ意味があります。このアプローチでは、カスタムビルドを将来のownCloud Webの変更と互換性のある状態に保つ責任があるため、メンテナンスコストが高くなります。

実用的な制作チェックリスト

• カスタムテーマファイルは、組み込みアプリケーションのディレクトリとは別の場所に保存してください。
• インストールされているoCISのバージョンに対応したテーマ構造から始めてください。
• 明るい面と暗い面では、それぞれ異なるロゴバリエーションを使用してください。
• まず、ホバー値やコントラスト値など、特定のデザイントークンを優先的にオーバーライドします。
• 可能であれば、テーマディレクトリを読み取り専用でマウントしてください。
• と の両方をWEB_ASSET_THEMES_PATH、WEB_UI_THEME_PATHサービス内で視認可能なパスに設定してください。
• デプロイメントの変更後は、Web/oCISサービスを再起動または再作成してください。
• ログイン画面、トップバー、ファビコン、ファイルエリア、レスポンシブレイアウト、および公開しているダークテーマやハイコントラストテーマを確認してください。
• ownCloud Infinite Scaleのメジャーアップグレードを行う前に、必ずテーマを再テストしてください。

現在のInfinite Scaleデプロイメントでは、このテーマファイル方式により、管理者はアプリケーションコードとビジュアルアイデンティティを明確に分離できます。重要なのは、テーマをバージョン管理されたデプロイメント資産として扱うことです。ownCloudリリースでサポートされているスキーマを使用し、イメージパスを予測可能な状態に保ち、アドホックなフロントエンド編集ではなくデザイントークンを使用して色を変更し、1つの画面だけで成功を判断するのではなく、Webインターフェース全体で結果を確認します。