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

投稿日 / 更新日 / 投稿者名

2020.5.28 / 2020.6.4 / 正木 菜津美

はじめに

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

難易度 ★

所要時間

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

概要

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

前提条件


注意事項

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

作業の流れ

  1. 必要なファイルをダウンロード/解凍する
  2. contextPath を変更する
  3. ロゴ画像を差し替える
  4. 配色を変更する
  5. zipファイルを作成する
  6. テナントへファイルをアップロードする



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

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

ここで公開している ui-assets.zip , public-options.zip は UIバージョンver.10.5.0.16 でのみ利用可能です。

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

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 の場合)

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

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

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

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

ファイル名 表示場所
logo.svg ログイン前/ログイン中に表示される画像
tenant-logo.svg ログイン後、左上に表示される画像
favicon.ico ファビコン画像

注記:
・ファイルの拡張子は元のファイルと同じにする必要があるため、用意した画像がpngやjpegなどの場合、フリーのツールなどを使い置き換えたい対象のファイルと同じ拡張子に変換してください。
・ファイルサイズ(容量)は、元のファイルと同じか近い値になるようにしてください。
・ロゴやファビコンの画像の大きさについては、元のファイルを参考にしながら、何度かアップロードして調整をおこなってください。

4. 配色を変更する

配色の変更は、public-options/options.json を編集することで可能となります。対応するパラメータを一部紹介します。
その他、詳しい情報は こちら をご参照ください。

brand-primary

brand-primary を #1357ad から #FFB6C1 に変更した場合のイメージ(gif)

変更前 変更後

navigator-bg-color を #1357ad から #FFB6C1 に変更した場合のイメージ

変更前 変更後

navigator-active-bg を #104993 から #FFB6C1 に変更した場合のイメージ

変更前 変更後

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

1 でダウンロードした、変更前の public-options.zipui-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

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

注記: zip形式に圧縮する対象はファイル群です。ディレクトリは含めないでください。
例) ui-assets の場合: ★ = ファイル群

ui-assets/                      // 圧縮対象外
├── cumulocity.json             //★
├── favicon.ico                 //★
├── frutiger-neue-bold.svg      //★
├── frutiger-neue-light.svg     //★
├── frutiger-neue-regular.svg   //★
├── ja_JP.json                  //★
├── logo.svg                    //★
├── style.css                   //★
└── tenant-logo.svg             //★

Macの場合

$ cd ui-assets/
$ jar -cvfM ../ui-assets.zip *json *svg *ico *css
cumulocity.jsonを追加中です(入=159)(出=110)(30%収縮されました)
ja_JP.jsonを追加中です(入=384191)(出=97004)(74%収縮されました)
frutiger-neue-bold.svgを追加中です(入=128575)(出=29499)(77%収縮されました)
frutiger-neue-light.svgを追加中です(入=125804)(出=29468)(76%収縮されました)
frutiger-neue-regular.svgを追加中です(入=125585)(出=29123)(76%収縮されました)
logo.svgを追加中です(入=7823)(出=3080)(60%収縮されました)
tenant-logo.svgを追加中です(入=7747)(出=2963)(61%収縮されました)
favicon.icoを追加中です(入=1078)(出=416)(61%収縮されました)
style.cssを追加中です(入=1504)(出=419)(72%収縮されました)
$ cd ../public-options
$ jar -cvfM ../public-options.zip *json
cumulocity.jsonを追加中です(入=170)(出=113)(33%収縮されました)
options.jsonを追加中です(入=1888)(出=706)(62%収縮されました)
$ cd ..
$ ls -l
total 392
drwxr-xr-x   4 natsumi  staff     136  2 17 15:13 original
drwxr-xr-x   4 natsumi  staff     136  2 12 15:04 public-options
-rw-r--r--   1 natsumi  staff    1087  2 17 15:07 public-options.zip
drwxr-xr-x  11 natsumi  staff     374  2 12 15:03 ui-assets
-rw-r--r--   1 natsumi  staff  193216  2 17 15:06 ui-assets.zip

Windowsの場合

Windowsの場合は、jarコマンドを使用する方法以外に、下記の方法でもzipファイルを作成できることを確認しています(動作確認: Windows 10)。

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

>cd ui-assets
>jar -cvfM ../ui-assets.zip *json *svg *ico *css
cumulocity.jsonを追加中です(入=159)(出=110)(30%収縮されました)
ja_JP.jsonを追加中です(入=384191)(出=97004)(74%収縮されました)
frutiger-neue-bold.svgを追加中です(入=128575)(出=29499)(77%収縮されました)
frutiger-neue-light.svgを追加中です(入=125804)(出=29468)(76%収縮されました)
frutiger-neue-regular.svgを追加中です(入=125585)(出=29123)(76%収縮されました)
logo.svgを追加中です(入=7823)(出=3080)(60%収縮されました)
tenant-logo.svgを追加中です(入=7747)(出=2963)(61%収縮されました)
favicon.icoを追加中です(入=1078)(出=416)(61%収縮されました)
style.cssを追加中です(入=1504)(出=419)(72%収縮されました)

>cd ..\public-options
>jar -cvfM ../public-options.zip *json
cumulocity.jsonを追加中です(入=170)(出=113)(33%収縮されました)
options.jsonを追加中です(入=1888)(出=709)(62%収縮されました)

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

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

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

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

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

ブラウザにキャッシュが残っているため、変更を反映するにはブラウザを2回更新します。ここでは、Chromeの場合の例を紹介します。

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

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