9.2. Data Visualizer用ビジュアルパーツの追加

Data Visualizerでは、独自ビジュアルパーツを開発して追加することが可能です。

注釈

ビジュアルパーツの開発方法については Visual Pars SDKによるData Visualizer用ビジュアルパーツの作成 を参照してください。

9.2.1. ビジュアルパーツのデプロイ

開発者から提供されたビジュアルパーツのビルド成果物を環境にデプロイします。

注釈

ビジュアルパーツのビルド成果物は次のようなファイル群です。例：

app.js
c.1263149501256df91cb3.css
img.03113e5235a4e0c9f4b5aff3b51768c5.svg
img.640e2403b1c7131df59412174ed553ce.svg
img.b0745974cb47667e3eca2e18e294dc48.svg
licenses.txt

Docker ComposeRPM/AMIKubernetes

deployment.zip を使用しており、展開後のディレクトリがカレントディレクトリになっている前提で説明します。

1. ビジュアルパーツのビルド成果物を ./visual-parts-sample という名前のディレクトリ内にコピーします。

2. 以下の内容でdocker-compose.override.ymlを作成して、 vm2m-data-viz-plugins サービスにボリュームマウントします。

   version: "3"
   services:
     vm2m-data-viz-plugins:
       volumes:                                                                        <---- ボリューム設定の追加
         - ./visual-parts-sample:/vm2m/data-visualizer/plugins/visual-parts-sample:ro  <---- マウント設定の追加
   

注釈

上書きの方法として、 docker-compose.override.yml を使用しています。(参考 )

vm2m-data-viz-plugin サービスに対して上記ボリュームマウントの設定ができれば他の方法でも問題ありません。したがって、もし docker-compose.override.yml の使用が運用に対して適さない場合は適宜読み替えて設定してください。

3. ./docker/nginx/vm2m/vm2m.d/visual-parts-sample.conf.template を作成します。内容は次の通りです。

location /vm2m/data-visualizer/plugins/visual-parts-sample {
  auth_request  /_api_authn;
  error_page 401 = @redir_oauth2;

  proxy_set_header Host               $host;
  proxy_set_header X-Forwarded-Proto  $http_x_forwarded_proto;
  proxy_set_header X-Forwarded-For    $proxy_add_x_forwarded_for;
  proxy_set_header X-Forwarded-Host   $http_x_forwarded_host;
  proxy_set_header X-Forwarded-Port   $http_x_forwarded_port;
  proxy_set_header X-Forwarded-Server $http_x_forwarded_server;

  proxy_pass ${VM2M_VISUAL_PARTS_PLUGINS_PROXY_PASS};
  proxy_redirect off;
}

注釈

動作しない場合は ./docker/nginx/vm2m/vm2m.d/visual-parts.conf.template と比較し、差が無いか確認してください。

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

   docker compose up -d vm2m vm2m-data-viz-plugins
   

5. ./docker/ui-conf/vm2m-data-viz-backend/config/visual-parts-plugins ディレクトリで、ビジュアルパーツの設定ファイルを以下のように作成します。設定ファイルの詳細については 設定ファイルリファレンスの 「VM2M Data Visualizer（フロントエンド） 」を参照してください。

   例: ./docker/ui-conf/vm2m-data-viz-backend/config/visual-parts-plugins/99.visual-parts-sample.json

   {
     "items": [
       {
         "url": "/vm2m/data-visualizer/plugins/visual-parts-sample/app.js",
         "avoidSendingPartSpecificMetadata": true
       }
     ]
   }
   

6. 以下のコマンドを実行して、Data Visualizerアプリケーションを再起動します。

   docker compose restart vm2m-data-viz-backend
   

これで、Data Visualizerから新しいビジュアルパーツを使用できるようになります。

9.2.2. （参考）ローカルビジュアルパーツを読み込めるようにする

Data Visualizerには、ビジュアルパーツの開発をしやすくするために、ローカル環境にあるビジュアルパーツを読み込む機能があります。 この機能を有効にすると、Data Visualizerに （Visual Parts Plugin Settings）ボタンが表示され、開発者はローカルサーバーでホストされているビジュアルパーツを読み込むことができるようになります。

この機能は、Data Visualizer設定ファイルの showVisualPartsPluginSettings で有効／無効を切り替えます。

1. 構築した環境に応じて設定を行います。

   Docker ComposeRPM/AMIKubernetes

   ※ deployment.zip を使用している前提で説明します。

   1. ./docker/ui-conf/vm2m-data-viz-backend/config/vm2m-2nd-config.production.json を以下のように編集します。

      設定ファイルはJSON形式です。編集する際は末尾カンマの付け忘れや消し忘れに注意してください。

      {
        ...
        "devTools": {
          "showVisualPartsPluginSettings": true  <----
        },
        ...
      }
      

   2. 設定変更を反映するため、以下のコマンドを実行し、Data Visualizerアプリケーションを再起動します。

      docker compose -f docker-compose.vm2m.yml restart vm2m-dataviz-backend
      

   以上でサーバー側の設定は完了です。

2. ローカルPCのウェブブラウザーでData Visualizerを開き（すでに表示されている場合は再読み込みを行い）、画面の左側に （Visual Parts Plugin Settings）ボタンが表示されていることを確認します。

   

   図 21 Visual Parts Plugin Settings

注釈

showVisualPartsPluginSettings の設定は、ビジュアルパーツ開発を行う環境でのみ true にしてください。 必要がなくなったら、上と同じ手順で showVisualPartsPluginSettings を false に戻してください。