ロゴや配色を変更する方法

更新日 / 投稿者名

2020.5.28/ アプリチーム
2024.7.29 / アプリチーム
2025.2.25 / 井上
2025.7.9 / 井上
2025.8.4 / 陳

はじめに

本レポートは、Things Cloud の利用例をより知っていただくための実利用レポートとして作成したものです。
Things Cloud は極力後方互換性を持つよう開発されていますが、今後のリリースにより、一部画面やコマンド、手順などが変更となったり、利用できない可能性があることをあらかじめご了承ください。
なお、作成にあたり、以下バージョンを用いています。

2025.4 (Frontend: 1021.22.99)

備考

本レポート内のスクリーンショットおよびコマンド実行例には、過去バージョンを利用して作成されたものが一部含まれます。

難易度 ★

所要時間

この手順に沿って、「ロゴや配色を変更する」を実現するまでの所要時間。

約30分

概要

本レポートでは、Things Cloud のロゴや配色（ブランディング）を変更する方法を紹介します。ロゴや配色を変更することで、自社のロゴやブランドカラーを Things Cloud のUIに反映させることができます。

前提条件

JSON, html, style sheet に関する基本的な理解
zipファイル作成のコマンドが使えること

注意事項

本手順を実行することによる影響範囲について説明します。

本手順においてアップロードしたzipファイルの内容は、アップロードしたテナントおよびそのテナントの配下にあるサブテナントについても、同様の変更内容が反映されます。

例) テナントA - - - サブテナントa という構成において、

1 ) テナントA にzipファイルをアップロードした場合
→ zipファイルで定義した内容は、テナントA およびサブテナントa に反映されます。

2 ) サブテナントa にzipファイルをアップロードした場合
→ zipファイルで定義した内容は、サブテナントa にのみ反映されます。

[補足] ダークモードのロゴや配色の変更

備考

ダークモードのロゴや配色変更で必要になる要素は、全て [補足] ダークモードのロゴや配色の変更に記載しています。

1. 必要なファイルをダウンロード/解凍する

次の2つのzipファイルをダウンロードしてください。

備考

上記で公開している ui-assets.zip と public-options.zip は、配色などの変更を行っていない、デフォルトのファイルです。

本レポートで紹介するパラメータを変更し、ロゴや配色を変更したファイルは、以下の二つに対応します。こちらを利用する場合、3. と 4. の手順はスキップ可能です。

次に、任意の場所に作業フォルダを作成し、その中へダウンロードしたファイルを移動させ、解凍します。

Macの場合

$ mkdir branding  // 作業フォルダを作成
$ cd branding
$ mv {{ui-assets.zipのパス}} .
$ mv {{public-options.zipのパス}} .
$ mkdir ui-assets
$ unzip ui-assets.zip -d ui-assets/
$ mkdir public-options
$ unzip public-options.zip -d public-options/
$ ls
public-options		ui-assets
public-options.zip	ui-assets.zip

Windowsの場合

>mkdir .\branding
>cd branding
>Move C:\Users\Owner\Downloads\ui-assets.zip .
        1 個のファイルを移動しました。
>Move C:\Users\Owner\Downloads\public-options.zip .
        1 個のファイルを移動しました。
>mkdir .\ui-assets
>mkdir .\public-options

// zipファイルと同じ名前のディレクトリ内で、zipを解凍してください
// ※zipの解凍はGUIで実行してください

>dir /B
public-options
public-options.zip
ui-assets
ui-assets.zip

2. contextPath を変更する

まずは、ui-assets/cumulocity.json の contextPath を ui-assets-{tenantId} に変更してください。テナントIDは、 GET/tenant/currentTenant で取得でき、レスポンスボディに含まれる name がテナントIDです。

注意

contextPath はテナント間でユニークである必要があるため、ここではユニークな値であるテナントID を使用する方法を紹介していますが、必ずしもこの形式である必要はありません。ただし、重複チェックが行われないため、気づかないうちに重複し予期せぬ不具合が発生する可能性があり、ui-assets-{tenantId} というフォーマットでテナントIDを使用することを推奨します。

例）cumulocity.json (テナントID が testtenant の場合)

{
    "name": "ui-assets",
    "contextPath": "ui-assets-ntt", // 変更箇所
    "key": "ui-assets-ntt-key", // 任意の値を設定してください
    "noAppSwitcher": true,
    "type": "HOSTED",
    "availability": "MARKET"
}

次に、設定した contextPath を public-options/options.json に反映します。編集箇所は、contextPath が設定されている下記の4項目です。ui-assets-ntt となっている contextPath を上記で設定した ui-assets-{tenantId} に置き換えてください。

brand-logo-img
navigator-platform-logo
extraCssUrls
faviconUrl

3. ロゴ画像を差し替える

ロゴやファビコンを変更したい場合は、解凍した ui-assets に含まれる下記画像が対応しています。変更したい画像があれば、ファイル名を変えずに画像を差し替えてください。

ファイル名	アイテム名	備考
favicon.ico	ファビコン画像	ブラウザのタブに表示されるアイコン
logo_light.png	ロゴ画像	ログイン前/ログイン中、アプリケーション遷移時に画面中央に表示されるアイコン
tenant_logo_light.png	ロゴ画像	ログイン後、画面左のナビゲータに表示される画像

ロゴ

ロゴファイルtenant_logo_light.pngを置き換えた場合のイメージ

変更前	変更後

備考

ロゴやファビコンの画像の大きさについては、元のファイルを参考にしながら、何度かアップロードして調整をおこなってください。

4. 配色を変更する

配色の変更は、public-options/options.json を編集することで可能となります。対応するパラメータを一部紹介します。
また、本ページでは16進数での記載ですが、他にもrgba値やvar()関数でも変更可能です。
その他、詳しい情報は Web SDKガイドをご参照ください。

備考

ご利用頂いているバージョンによって、本レポートの適用例と実際の画面表記が一部異なる場合があります。

brand-primary

brand-primary を #1357AD に変更した場合のイメージ

変更前	変更後

navigator-bg-color

navigator-bg-color を #A0DFFF に変更した場合のイメージ

変更前	変更後

navigator-active-bg

navigator-active-bg を #FFDABF に変更した場合のイメージ

変更前	変更後

header-text-color

header-text-color を #00F30C に変更した場合のイメージ

変更前	変更後

header-color

header-color を #FFD5E8 に変更した場合のイメージ

変更前	変更後

body-background-color

body-background-color を #FFD5E8 に変更した場合のイメージ

変更前	変更後

action-bar-background-default

action-bar-background-default を #A0DFFF に変更した場合のイメージ

変更前	変更後

right-drawer-background-default

right-drawer-background-default を #FFDABF に変更した場合のイメージ

変更前	変更後

palette-status-warning

palette-status-warning を #00F30C に変更した場合のイメージ

変更前	変更後

5. zipファイルを作成する

5-1. ダウンロードしたオリジナルファイルの退避

1. でダウンロードした、変更前の public-options.zip と ui-assets.zip は別のフォルダを作成し、退避させておきます。

注意

public-options.zip および ui-assets.zip は、このファイル名でなければブランディング定義用のファイルとして認識されません。そのため、変更後のファイルも同名のzipファイルとして作成する必要があります。

Macの場合

$ pwd
{{brandingディレクトリのパス}}
$ mkdir original // 1でダウンロードしたファイルの退避先フォルダを作成
$ ls
original		public-options.zip	ui-assets.zip
public-options		ui-assets
$ mv ui-assets.zip original/
$ mv public-options.zip original/
$ ls
original	public-options	ui-assets
$ ls original/
public-options.zip	ui-assets.zip

Windowsの場合

>cd
{{brandingディレクトリのパス}}
>mkdir .\original
>dir /B
original
public-options
public-options.zip
ui-assets
ui-assets.zip
>Move ui-assets.zip original
        1 個のファイルを移動しました。
>Move public-options.zip original
        1 個のファイルを移動しました。
>dir /B
original
public-options
ui-assets
>dir /B .\original
public-options.zip
ui-assets.zip

5-2. ファイルを変更しZIP形式に圧縮

次に、2., 3., 4.で変更したファイルを使って、public-options.zip と ui-assets.zip を作成します。

注意

zip形式に圧縮する対象はファイル群です。ディレクトリは含めないでください。
ui-assetsの場合、下図の ★ が、圧縮する対象のファイル群です。

注：バージョンによりファイル構成が異なる場合があります。

ui-assets/                      // 圧縮対象外
├── cumulocity.json             //★
├── favicon.ico                 //★
├── logo_light.png              //★
├── logo_dark.png               //★
├── tenant_logo_light.png       //★
├── tenant_logo_dark.png        //★
├── style.css                   //★
└── legalOptions.css            //★

Macの場合

$ cd ui-assets/
$ zip ../ui-assets.zip *
adding: cumulocity.json (deflated 36%)
adding: favicon.ico (deflated 9%)
adding: legalOptions.css (deflated 2%)
adding: logo_dark.png (deflated 12%)
adding: logo_light.png (deflated 9%)
adding: styles.css (deflated 41%)
adding: tenant_logo_dark.png (deflated 12%)
adding: tenant_logo_light.png (deflated 9%)
$ cd ../public-options
$ zip ../public-options.zip *
adding: cumulocity.json (deflated 34%)
adding: options.json (deflated 64%)
$ cd ..
$ ls -l
total 488
drwxr-xr-x   4 {{user-name}}  staff     128 Jul 30 15:01 original
drwxr-xr-x@  4 {{user-name}}  staff     128 Jul 30 15:14 public-options
-rw-r--r--@  1 {{user-name}}  staff    2426 Jul 30 15:15 public-options.zip
drwxr-xr-x@ 11 {{user-name}}  staff     352 Jul 30 15:13 ui-assets
-rw-r--r--@  1 {{user-name}}  staff  242740 Jul 30 15:16 ui-assets.zip

Windowsの場合

Windowsの場合は、下記の方法でzipファイルを作成できることを確認しています（動作確認: Windows 10）。

Windows標準のエクスプローラー操作による zip圧縮
Lhaplus
Compress-archiveコマンド

下記は Compress-archiveコマンドを使用したzip圧縮の手順です。

>cd ui-assets
>powershell compress-archive * ../ui-assets.zip

>cd ../public-options
>powershell compress-archive * ../public-options.zip

>cd ..
>dir /B
original
public-options
public-options.zip
ui-assets
ui-assets.zip

6. テナントへファイルをアップロードする

ブランディングを変更したいテナントの管理アプリにログインし、エコシステム > アプリケーションから、「アプリケーションを追加」を押下します。

「Web アプリケーションをアップロード」を選択します。

4. で作成した2つのzipファイルをそれぞれアップロードします。

アップロードが成功すると、アプリケーション一覧にPublic-optionsとUi-assetsが表示されます。

Public-optionsとUi-assetsに記載されたロゴや配色への変更を反映させるため、ブラウザを2回更新します。この操作でも変更が反映されない場合は、ブラウザにキャッシュが残っていると考えられます。以下では、Chrome使用時の解決策を紹介します。

alt + command + i (Macの場合) で DevTools を表示します。
リロードボタンを長押し、表示された「キャッシュの削除とハード再読み込み」を押下します。
画面が更新されたら、もう一度「キャッシュの削除とハード再読み込み」を押下します。

以上で、Things Cloud のロゴや配色（ブランディング）の変更は完了となります。

[補足] ダークモードのロゴや配色の変更

Things Cloud では、ダークモード表示が可能です。

「ライトモード」と「ダークモード」、デバイスのモード設定に従う「デバイスモード」が存在します。画面右上のアイコンを押下し、表示されたドロワーの「UI設定」より切り替えられます。

備考

自身で修正した public-options.zip と ui-assets.zip をアップロードした場合、ダークモードが適用できない場合があります。

その際は、アップロードしたZIPファイルを削除するか、public-options/options.json 内の darkThemeAvailable を trueに設定し、ZIPファイル再度アップロードすることで、ダークモードが適用可能となります。

ダークモードのロゴと配色は、1.〜6.と同様の手順である、手順1〜手順6 で変更できます。主に darkThemeAvailable を true に設定し、 dark から始まる要素を編集することで、ロゴや配色を変えることができます。

手順1. 必要なファイルをダウンロード/解凍

1. に従い、public-options.zip と ui-assets.zip をダウンロード/解凍してください。
すでにファイルをダウンロードしている場合、ダークモードのために再度ダウンロードする必要はありません。

手順2. contextPath とダークモード適用可否を変更する

2. に従い、ui-assets/cumulocity.json のcontextPathを変更してください。
以下の項目の ui-assets-ntt となっている contextPath を、ui-assets-{tenantId} に置き換えてください。{tenantId}は自身のテナントIDを指しています。
- dark-brand-logo-img
- dark-navigator-platform-logo
public-options/options.json 内の darkThemeAvailable を true に変更してください。
- darkThemeAvailable は、ダークモード適用の可否を示しています。falseに設定すると、ダークモードが適用できなくなります。

{
    ...(省略)...
    "darkThemeAvailable": true,
    ...(省略)...
}

手順3. ロゴ画像を差し替える

ダークモード適応時に表示されるロゴは、ui-assets に含まれる、以下の名前の画像です。
3. と同様に、変更したい画像があれば、ファイル名を変えずに画像を差し替えてください。

ファイル名	アイテム名	備考
logo_dark.png	ロゴ画像	ダークモード適用時のログイン前/ログイン中、アプリケーション遷移時に画面中央に表示されるアイコン
tenant_logo_dark.png	ロゴ画像	ダークモード適用時のログイン後、画面左のナビゲータに表示される画像

手順4. 配色を変更する

4. と同様に、配色の変更は、public-options/options.json を編集することで可能となります。
ダークモードの配色に対応するパラメータは、dark から始まるものです。以下にパラメータを一部紹介します。
- dark-brand-primary を #FFFF00 に変更した場合
変更前変更後
- dark-navigator-bg-color を #00AD00 に変更した場合
変更前変更後

手順5. zipファイルを作成する

5. に従い、public-options.zip と ui-assets.zip を作成してください。

手順6. テナントへファイルをアップロードする

6. に従い、public-options.zip と ui-assets.zip をテナントにアップロードしてください。

以上で、Things Cloud のダークモード適応時のロゴや配色（ブランディング）の変更は完了となります。