Data Visualizer画面左上のロゴ画像を変更したい(インフラ管理者向け)

Data Visualizerでは、サーバー側で設定することで、ダッシュボード画面左上のロゴ画像をお好みのものに差し替えることができます。

ロゴを差し替えるには、用意したロゴ画像をData URI Schemeによる文字列に変換し、サーバー側の設定ファイルに書き込みます。

  1. ロゴ画像を、幅200ピクセル x 高さ56ピクセルの SVG、JPG、PNGのいずれかの形式で用意します。
    なお、ロゴ画像の背景を透明にしておくと、ビジュアルパーツをData Visualizerの背景全面に表示したときにも、不要な背景がない状態でロゴを表示させることができます。

  2. ロゴ画像を Data URI Schemeによる文字列に変換します。
    node.js をご使用の場合は、以下のコマンドで変換してください。

    $ npx image-data-uri encodeFromFile <手順1で準備したロゴ画像のファイルパス>
    
  3. sshを使ってintdashサーバーに接続し、Data Visualizerサーバーの設定ファイル/etc/vm2m-dataviz-backend/vm2m-2nd-config.production.jsonでロゴ画像を設定します。設定項目header.logoImgURLに、手順2で生成した文字列を設定してください。

    {
      ...
      "header": {
        "logoImgURL":
          "data:image/svg+xml;base64,PHN2ZyB4bWx..." <-----
      },
      ...
    }
    

    header.logoImgURLが未設定の場合は、デフォルトのVISUAL M2Mのロゴが表示されます。

  4. 以下のコマンドを実行して、Data Visualizerのサーバーを再起動します。

    # systemctl restart vm2m-dataviz-backend
    
  5. ウェブブラウザーでData Visualizerを開き(または再読み込みを行い)、設定されたロゴ画像が表示されることを確認します。