OSSをVRで可視化してみよう

こんにちは。株式会社 日立製作所 研究開発グループの堀 旭宏です。
この記事は、日立グループ [OSS Advent Calendar 2020](https://qiita.com/advent-calendar/2020/hitachi-oss) の10日目の記事になります。

# はじめに
この記事は、OSS（Open Source Software、オープンソースソフトウェア）の使い方の記事ではなく、**OSSをVRで可視化する**という記事です。「いきなり何を言っているんだ」という感じですが、私は日立製作所の研究開発グループで、ソフトウェア開発を効率よく進めるために、VRを用いてソフトウェア構造を可視化するという研究をしています。この記事ではその研究を紹介しながら、実際にOSSをVRで可視化してみます。

![001.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/888338/a8205a76-4fa7-24d9-383d-8cb4ba2a446f.jpeg)

# どうしてVRで可視化するのか
近年、ソフトウェアが大規模・複雑化しており、既存ソフトウェアの改造による派生開発が主流となっています。派生開発では既存ソフトウェアの理解が不可欠で、そのためにソフトウェア構造の可視化が行われます。しかし、従来の可視化では表示できる情報量に限界があるため、巨大ソフトウェアから意味のある画像が取り出しにくく、理解が困難です。そこで、ソフトウェア構造をVR空間上に表示することで、情報量の限界の問題をクリアできるのではないかと考えました。

# ソフトウェアVR可視化のコンセプト
ソフトウェアを理解するためには「マクロな観点でのソフトウェア構造」と「ミクロな観点でのソフトウェア特性」の両方の視点での理解が必要です。これを実現するために、ソフトウェア構造を建築物に例えてVRで可視化することにしました。ちょうどショッピングモールの噴水広場のような、吹き抜けの円筒形の建物になっています。

まず、「マクロな観点でのソフトウェア構造」の理解を支援するために、円筒の側面上に、モジュールを表す部屋を配置するようにしました。

![002.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/888338/a50d725f-0ce9-1e89-b4ef-cfeaccfa4495.png)

上図のように、円筒の側面上に複数の部屋を配置しています。それぞれの部屋はソフトウェアを構成するモジュールを表します。 円筒の中心に立ち、周囲を見渡すと、ソフトウェア全体を俯瞰することができます。

一方、「ミクロな観点でのソフトウェア特性」の理解を支援するために、それぞれの部屋の中に、関数を表すオブジェクトを配置するようにしました。
 
![003.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/888338/215c3924-4673-7969-8c3e-10aeff89d77e.png)

上図のように、部屋の中には、球面の側面上に関数を表す複数のオブジェクトを配置しています。オブジェクト間の線は関数の呼び出し関係を表します。また、関数のさまざまな特性によってオブジェクトの形・色・大きさを設定することができます。

# 実際に可視化してみた
[実際にソフトウェア構造をVRで可視化した様子を動画にしました。](https://youtu.be/rVhOaGrC_ac)こちらの動画では、OSSの1つであるApache Tomcat[^1]を可視化した様子をお見せしながら、ソフトウェア構造のVR可視化の解説をしています。ぜひ、ご覧いただければ幸いです。

[動画を見る](https://youtu.be/rVhOaGrC_ac)

以下、動画に沿って解説をしていきます。ここからはVRゴーグル(ヘッドマウントディスプレイ)をかぶったときに表示される世界です。

## ソフトウェア全体の俯瞰 ([0:40-](https://youtu.be/rVhOaGrC_ac?t=40))

![004.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/888338/3ee175d4-44a2-c978-8ff7-10a3c82bfc20.png)

最初は円筒形の建物の中心にいます。自分を360°囲むように、部屋が配置されています。部屋はモジュールを表します。

![005.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/888338/52fa3537-2ced-c328-2b6c-cb63c4d9dc4c.png)

部屋の並びには意味があります。モジュールの所属する階層の概念によって、モジュールを何階に配置するかが決まります。

![006.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/888338/af7c01d0-1806-c6b9-5051-7acb83554737.png)

また、モジュールの所属するサブシステムの概念によって、横方向の位置が決まります。

![007.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/888338/f06ec9af-d799-6bbf-0517-37ecfb821d7f.png)

ちなみに、部屋の中には関数を表すオブジェクト(粒のように見えるもの)があって、関数呼び出し関係が線で表されています。これを部屋の外から見ると、モジュール間の呼び出し関係が分かります。

## ソフトウェアの細部への着目 ([1:25-](https://youtu.be/rVhOaGrC_ac?t=85))

![008.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/888338/f7687299-9b21-0409-8ff4-93e998b3fb88.png)

部屋の中に入ることができます。部屋の中には、関数を表すオブジェクトが数多く配置されています。(Apache TomcatはJava[^2]で書かれているので、本来は「関数」ではなく「メソッド」と呼ぶべきですが、便宜上「関数」と呼ばせてください。)コントローラで関数を指し示すと、その関数についての呼び出し関係線が協調表示されます。

![009.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/888338/38d1e2ac-0c1b-b77e-8788-7afd0dd61ea1.png)

また、関数を指し示すと、その関数のソースコードや、最終コミット日時・コミッタなどの詳細情報も表示されます。

## 部屋の移動 ([2:02-](https://youtu.be/rVhOaGrC_ac?t=122))

![010.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/888338/67db4013-6240-93c2-d02f-7952cb6194fd.png)

他の部屋に移動することもできます。ソフトウェアの中をどんどん探検するイメージです。

## デバッグモード ([2:14-](https://youtu.be/rVhOaGrC_ac?t=134))

![011.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/888338/796e70d2-d692-26d5-0c13-ca2899374da3.png)

VRの中で、プログラムのデバッガ実行をすることができます。コントローラでデバッグ用の操作「RUN」「IN」「OUT」「OVER」を選択します。

![012.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/888338/56ad0d80-f367-f052-8593-01cb797243f4.png)

IN (ステップイン) を選択すると、1行ずつ実行していきます。実行中の関数を追従するように、視点が自動で移動します。

![013.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/888338/089765fb-da0c-1e29-5e5d-1d21f9bc5653.png)

デバッグパネルには、コンソール、変数情報、実行中のソースコードが表示されています。

![014.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/888338/32541547-0dfa-97f2-fce6-b07c67dd16a9.png)

実行の途中でエラーが発生すると、その箇所が炎で燃えるようになっています。炎上です。また、エラーに至るまでの経路(スタックトレース)が赤い線で表示されます。

![015.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/888338/fb2e0968-542e-171d-16a1-cde3e50d8555.png)

エラー内容が表示されています。スタックトレースに沿って視点を移動させることもできます。ソフトウェアの中を飛び回りながら、バグの原因を特定することが可能です。

## 複数人モード ([3:57-](https://youtu.be/rVhOaGrC_ac?t=237))

![016.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/888338/313f6256-b05b-5c7b-343d-3f8918c40229.png)

ひとつのVR空間に複数人が同時に入ることができます。それぞれがアバターを用いて相互にやりとりすることが可能です。

# どう実現したか
さて、ソフトウェア構造のVR可視化をどう実現したかについても簡単に書いておきます。
構成は下図のようになっています。

![017.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/888338/bc937b76-4b37-2031-d6a4-0d0aeb742812.png)

## システムへの入力

システムへの入力は次の6つです。
### Commit Log
このシステムでは、関数を指し示すと、その関数の最終コミット日時・コミッタなどの詳細情報が表示されます。そのため、ソースコードリポジトリから各関数の最終コミット日時・最終コミッタを取得しておく必要があります。例えば、Git[^3]の場合はgit blameをそれぞれの関数の該当行に適用することで取得可能です。
### Function Metrics
このシステムでは、関数のさまざまな特性によってオブジェクトの形・色・大きさを設定することができます。そのため、関数の特性を表すデータが必要になります。例えば、各関数の行数や複雑度などの情報などがこれにあたります。これらは、静的解析ツールを利用することで取得可能です。今回はUnderstand[^4]と呼ばれる商用ツールを利用しています。
### Function Relations
このシステムでは、オブジェクト間の線は関数の呼び出し関係を表します。そのため、各関数間の呼び出し関係を入力に含める必要があります。こちらもUnderstandから取得しています。
### Function/Module List
このシステムでは、関数をオブジェクトとして表し、モジュールを部屋として表しています。「どのような関数・モジュールがあるのか」「それぞれの関数はどのモジュールに所属するのか」を入力する必要があります。これらはUnderstandから取得しています。モジュールは特定のパッケージやフォルダ階層に基づいて定義します。
### Source Code
このシステムでは、関数を指し示すと、その関数のソースコードが表示されます。そのため、あらかじめソースコードを入力しておく必要があります。
### Configuration
Configurationでは、次の2点をあらかじめ定義しておきます。

- オブジェクトの形・色・大きさを、関数のどの特性に基づいて決定するか
- 各モジュールが、どの階層・サブシステムに所属しているか。(これらは部屋の配置に影響します。)

## VR System
VR SystemはUnity3D[^5]で記述しています。また、VR機器にはHTC Vive ProまたはHTC Vive Cosmos[^6]を利用しています。

## Debugger
  デバッグモードを実現するために、デバッガを裏で走らせて置き、VR SystemとデバッガをSocket.IOでつないでいます。VR内でユーザがデバッグモードの操作を行うと、その操作内容がSocket.IO経由でデバッガに伝えられ、結果がVR Systemに返されます。

# おわりに
今回、ソフトウェア構造をVRで可視化する仕組みを作りました。「OSSをVRで可視化してみよう」というタイトルですが、もちろん、OSSに限らず多くのソフトウェアの構造を可視化することができます。実際に可視化してみると、それぞれのモジュールが他のモジュールとどのような関係にあるのかが分かりやすいです。ソフトウェアの理解支援に役立ちそうです。

以上、「ソフトウェア構造をVRで可視化してみたら面白いね」というお話でした。

# 参考情報
本技術について他の媒体でも紹介しています。

1. [大規模で複雑なソフトウェアの構造をVR空間で可視化する技術を開発](https://www.hitachi.co.jp/rd/news/topics/2019/1015a.html)
1. [もっと奥へ、深く進んで視る！ソフトウェア構造をVRで可視化](https://www.hitachi.co.jp/rd/sc/story/vr/index.html)
1. [CodeHouse: VR Code Visualization Tool](https://doi.org/10.1109/VISSOFT.2019.00018)

[^1]: Apache Tomcatは、Apache Software Foundationの登録商標または商標です。
[^2]: JavaはOracle Corporationおよびその関連企業の登録商標です。
[^3]: Git は、Software Freedom Conservancy, Inc. の米国およびその他の国における登録商標もしくは商標です。
[^4]: Understandは米Scientific Toolworks社の登録商標です。
[^5]: Unityは米国およびその他の地域でのユニティ・テクノロジーズまたはその関連会社の商標または登録商標です。
[^6]: HTC Vive Pro、HTC Vive Cosmosは、HTC Corporationの商標または登録商標です