JP7113765B2 - コード管理システムおよびコード管理方法 - Google Patents

Description

本発明は、コード管理システムおよびコード管理方法に関する。

プログラミングツールには、ソースコードを記述することなく、モデル図を記述することによりソフトウェア開発が可能なビジュアルプログラミングツールがある。その一例として、Ｎｏｄｅ－ＲＥＤ（https://nodered.org/）が挙げられる。ビジュアルプログラミングツールを用いたソフトウェア開発では、各種処理が表現されたノードに対して、用途や環境、その他の状況に対応した情報を属性値（プロパティ）として設定し、ノード間を線で繋ぐごとで一連の処理をフローとして記述する。ソフトウェア開発者は、このようなビジュアルプログラミングツールを用いることで、ソフトウェア開発に関する知識が十分になくとも、直感的に意図した処理を行うソフトウェアを開発することができる。

また、ソフトウェア開発の分野では、しばしばコードの再利用を行うことで、開発期間の短縮を図ることがある。このような場合、再利用を行うコードは、ＧｉｔＨｕｂ（https://github.com/）やＧｉｔＬａｂ（https://gitlab.com/）など、コード管理ツールと呼ばれるツールを利用することでコード共有を行う。ソフトウェア開発者は、コード管理ツールから任意のコードを取得することにより、既存コードを再利用したソフトウェア開発を行うことができる。

このように、ソフトウェア開発者は、コード管理ツールなどで共有されたコードを再利用することによって、ゼロからソフトウェアを開発する必要がなくなり、効率よくソフトウェア開発を行うことができるようになる。これは、ビジュアルプログラミングツールを用いた開発においても同じである。

しかし、ビジュアルプログラミングツールで開発したソフトウェアであっても、コード管理ツール上では、ソースコードとして登録、管理される。例えば、Ｎｏｄｅ－ＲＥＤで開発した一連のフローは、ＪＳＯＮ（ＪａｖａＳｃｒｉｐｔ（登録商標） Ｏｂｊｅｃｔ Ｎｏｔａｔｉｏｎ）と呼ばれるＪａｖａＳｃｒｉｐｔ（登録商標）プログラミング言語をベースとした形式のコードで管理される。従って、ビジュアルプログラミングツールを用いた開発であっても、既存のコードを再利用して開発を行う場合には、再利用のために登録されたＪＳＯＮ形式のコードを理解し、自身のソフトウェア開発の効率化を図ることのできるものを探す必要がある。これは、ソフトウェア開発に関する知識が十分にない開発者にとっては困難な作業である。また、ソフトウェア開発を熟知した開発者においても、コードを読み、再利用するコードを探す工程は、ソフトウェア開発における大きなオーバーヘッドとなる。

ここで、特許文献１には、プログラムの論理情報を解析し、フローチャートとして出力することにより、プログラム言語を知らない場合でもプログラムの仕様を容易に把握できる方法について記載されている。

特開平５－１１９９８９号公報

Ｎｏｄｅ－ＲＥＤを始めとしたビジュアルプログラミングツールにおいては、各種処理を表現したノードを配置、ノード間を線で繋ぐごとで一連の処理を記述していくため、見やすさの観点などから、各ノードの配置場所も重要な情報となる。しかしながら、特許文献１に示された方法では、このような情報が欠落してしまい、ビジュアルプログラミングツールで生成したソフトウェアの再利用の利便性を損ねてしまう。

そこで、本発明は、以上の点を考慮してなされたもので、ビジュアルプログラミングツールで生成したソフトウェアの再利用の利便性をより高めることを目的とする。

かかる課題を解決するため本発明においては、例えば、処理を表すノードを結線することで処理フローを作成するビジュアルプログラミングツールを含むコード管理システムにおいて、ユーザ操作に基づいて処理フローを作成し、作成された処理フローに基づくコードを生成するフロー生成部と、前記フロー生成部により生成されたコードを保存するフロー管理部と、前記フロー管理部にコードが保存されたことを契機として該コードを取得するコード取得部と、前記コード取得部により取得されたコードを処理フロー図へ変換するコード変換部と、前記コード変換部により変換された処理フロー図のフロー画像を生成するフロー画像生成部と、前記フロー画像生成部により生成されたフロー画像を、前記コード変換部により該当の処理フロー図に変換される前のコードと対応付けて前記フロー管理部に登録するフロー画像登録部とを有することを特徴とする。

本発明によれば、ビジュアルプログラミングツールで生成したソフトウェアの再利用の利便性をより高めることができる。

上記以外の課題、構成および効果は、以下の実施形態の説明により明らかにされる。

実施例１におけるコード管理システムの構成例を示す図である。 実施例１におけるコード管理システムの構成を具体化した例を示す図である。 実施例１におけるビジュアルプログラミングツールの画面の例を示す図である。 実施例１におけるフロー管理リポジトリに登録されたコード情報を示す画面の例を示す図である。 実施例１におけるフロー管理リポジトリへのコード情報の登録形態の例を示す図である。 実施例１におけるコード管理システムの処理の流れを示すフローチャートの例である。 実施例１における複数のフローが存在する場合のビジュアルプログラミングツールの画面の例を示す図である。 実施例１におけるフロー管理リポジトリに登録されたコードの一部の例を示す図である。 実施例２におけるコード管理システムの処理で、複数のフローが存在する場合に、フロー画像として保存するフローの選定を含んだ処理の流れを示すフローチャートの例である。 実施例３におけるコード管理システムの処理で、フロー管理リポジトリに複数のフロー画像が存在する場合に、コードと共に表示するフロー画像の選定を含んだ処理の流れを示すフローチャートの例を示す図である。 実施例４におけるコード管理システムを実現するコンピュータの例を示す図である。

以下図面に基づき、本発明の実施形態に含まれる実施例を詳述する。以下の実施例を説明するための各図面において、同一参照番号は、同一あるいは類似の構成または処理を示し、後出の説明が省略される。後出の実施例の説明では、前出の実施例の説明との差分のみを説明する。また。各実施例および各変形例は、本発明の技術思想の範囲かつ整合する範囲で一部または全部を組合せることができる。

本実施例では、ビジュアルプログラミングツールで生成したソフトウェアのソースコード（以下、コードと呼ぶ）をコード管理ツールに登録、再利用可能にするシステムにおいて、ビジュアルプログラミングツール上で表示したコードのフロー画像をこのコードに紐付け、共に管理ツールに登録することにより、再利用するコードを選択する際の情報として活用する方法を示す。

＜実施例１のコード管理システムの構成＞
まず、本実施例におけるコード管理システムの構成例について図１を用いて説明する。図１は、実施例１におけるコード管理システムの構成例を示す図である。

図１に示すように、本実施例におけるコード管理システム１Ｓは、ユーザ操作部１００、フロー生成部１０１、フロー管理部１０２、外部ツール実行部１０３、およびフロー画像生成ツール群１０４を含む。また、フロー画像生成ツール群１０４は、コード取得部１０４１、コード変換部１０４２、フロー画像生成部１０４３、およびフロー画像登録部１０４４を含む。

コード管理システム１Ｓのユーザであるソフトウェア開発者は、ユーザ操作部１００を操作し、フロー生成部１０１にアクセスして、ビジュアルプログラミングツールを用いたフロー開発を実施する。ソフトウェア開発者は、フロー生成部１０１を使用して開発したフローを、フロー管理部１０２に登録しておく。

なお、フロー管理部１０２に登録されるのは、ソフトウェア開発者がビジュアルプログラミングツール上で開発したフローをコードに変換したものになる。一般的に、この変換処理は、ビジュアルプログラミングツールの機能として提供される。

ソフトウェア開発者は、ユーザ操作部１００を操作してフロー管理部１０２にアクセスし、フロー管理部１０２に格納されている既存のコードを読み込み、フロー生成部１０１に取り込む。コードは、フロー生成部１０１に取り込まれることで再利用可能になる。

なお、フロー生成部１０１に取り込まれたコードは、ビジュアルプログラミングツールの機能によりフローに変換される。ソフトウェア開発者は、コードから変換された処理フローを編集する形でコード編集が可能になる。

外部ツール実行部１０３は、フロー管理部１０２にコードが登録されたことを検知すると、フロー画像生成ツール群１０４を制御することにより、登録を検知したコードをビジュアルプログラミングツール上で表示したときのフロー画像を取得する。

具体的には、外部ツール実行部１０３は、コード取得部１０４１により、フロー管理部１０２にアクセスし、登録を検知したコードの取得を行う。次に、外部ツール実行部１０３は、コード変換部１０４２により、取得したコードをフローに変換する。次に、外部ツール実行部１０３は、フロー画像生成部１０４３により、変換したフローのフロー画像を生成する。最後に、外部ツール実行部１０３は、フロー画像登録部１０４４により、生成したフロー画像を、該当するコードに紐付けて、フロー管理部１０２に登録する。

これにより、フロー管理部１０２では、コードと、そのコードをビジュアルプログラミングツール上で表示したときのフロー画像を紐付けて管理することができるようになるため、ソフトウェア開発者がフロー画像を参考に再利用するコードを探すことが可能になる。

ここで、コード管理システムの構成を具体化した例について、図２を用いて説明する。図２は、実施例１におけるコード管理システムの構成を具体化した例を示す図である。

ユーザ端末２００は、ユーザ操作部１００に相当し、例えばＰＣ（Ｐｅｒｓｏｎａｌ Ｃｏｍｐｕｔｅｒ）である。

フロー生成ツール２０１は、フロー生成部１０１に相当し、ビジュアルプログラミングツールである。本実施例では、フロー生成ツール２０１をＮｏｄｅ－ＲＥＤ（登録商標、以下同様）として説明を行う。

フロー管理リポジトリ２０２は、フロー管理部１０２に相当し、コード管理ツールである。本実施例では、フロー管理リポジトリ２０２をＧｉｔＬａｂ（登録商標、以下同様）として説明を行う。

ＣＩ（Ｃｏｎｔｉｎｕｏｕｓ Ｉｎｔｅｇｒａｔｉｏｎ）ツール２０３は、外部ツール実行部１０３に相当し、継続的インテグレーションを実現するツールである。一般的に知られたＣＩツールには、ＪｅｎｋｉｎｓやＤｒｏｎｅなどがある。ＣＩツールは、実行したい処理が予めスクリプトとして記述されており、スクリプトで記述された任意の処理の実行を自動化することができるものである。なお、スクリプトの処理実行のタイミングについては、ＣＩツール２０３が特定のイベント通知をフックしたタイミング等に設定することができる。

ユーザ端末２００、フロー生成ツール２０１、フロー管理リポジトリ２０２、およびＣＩツール２０３は、ネットワーク２０５を介して通信可能に接続されている。本実施例では、フロー生成ツール２０１、フロー管理リポジトリ２０２、ＣＩツール２０３が、各々独立したサーバ上で動作しているとするが、これらが動作するサーバは適宜分散または統合されてもよい。例えば、フロー管理リポジトリ２０２およびＣＩツール２０３が、一体のサーバ上で動作してもよい。

フロー画像生成スクリプト２０４は、フロー画像生成ツール群１０４に相当し、ＣＩツール２０３が実行するスクリプト群である。スクリプトとしては、コード取得処理２０４１、コード変換処理２０４２、フロー画像生成処理２０４３、およびフロー画像登録処理２０４４を備えている。

コード取得処理２０４１は、コード取得部１０４１に相当する。コード変換処理２０４２は、コード変換部１０４２に相当する。フロー画像生成処理２０４３は、フロー画像生成部１０４３に相当する。フロー画像登録処理２０４４は、フロー画像登録部１０４４に相当する。

本実施例では、フロー管理リポジトリ２０２へのコード登録（新規作成または更新）を契機に、ＣＩツール２０３がフロー画像生成スクリプト２０４を自動実行することで、フロー管理リポジトリ２０２に登録されたコードをもとに、フロー生成ツール２０１上で表示したときのフロー画像を生成し、フロー管理リポジトリ２０２に登録されているコードと紐付けて共に保存しておく。

続いて、システムを構成する各ツールについて説明する。図３は、実施例１におけるビジュアルプログラミングツールの画面の例を示す図である。図３は、Ｎｏｄｅ－ＲＥＤ（フロー生成ツール２０１）におけるフロー生成画面の例を模式的に示したものである。

ソフトウェア開発者は、ユーザ端末２００で動作するウェブブラウザから、フローエディタＧＵＩ３００にアクセスし、フロー編集画面３００１で処理フローの作成を行う。パレット３００２には、入力や出力、外部サービス等の機能別に、各種処理の実行プログラムがノード３００３として準備されている。

ソフトウェア開発者は、パレット３００２から任意のノード３００３をフロー編集画面３００１にドラッグアンドドロップすることで、ノードを利用することができる。また、ソフトウェア開発者は、ノード３００３同士を、ワイヤー３００４で結線することで、ノードの処理順序を定義することができる。図３の例では、ノード３００３（入力ノード１）の処理が終了すると、ノード３００３（入力ノード１）の右側から出たワイヤー３００４で結線されたノード３００３（呼出しノードＡ）の処理が実行される。

ソフトウェア開発者は、フローエディタＧＵＩ３００において“デプロイ”と表示されるボタンを押下することで、フロー編集画面３００１上に表示されている処理フローからコードが生成される。生成されたコードは、フロー編集画面３００１における所定操作によりフロー管理リポジトリ２０２に保存できる。

＜実施例１のコード情報を示す画面＞
図４は、実施例１におけるフロー管理リポジトリに登録されたコード情報を示す画面の例を示す図である。図４は、ＧｉｔＬａｂ（フロー管理リポジトリ２０２）に登録されているコード情報を示す画面の例を模式的に示したものである。図５は、実施例１におけるフロー管理リポジトリへのコード情報の登録形態の例を示す図である。図５は、ＧｉｔＬａｂ（フロー管理リポジトリ２０２）におけるコード情報の登録形態の例を示したものである。

ソフトウェア開発者は、ユーザ端末２００で動作するウェブブラウザから、コード管理ＧＵＩ４００にアクセスすることで、フロー管理リポジトリ２０２に登録されているコードを確認することができる。フロー管理リポジトリ２０２では、プロジェクトという単位でコード管理を行う。図４は、Ｐｒｏｊｅｃｔ＿１という名前のプロジェクト情報を閲覧した場合の例を示しており、プロジェクトに属するファイル一覧４００１が表示されている。

図４では、プロジェクト情報がＰｒｏｊｅｃｔ＿１のプロジェクトには、ｆｌｏｗ．ｊｓｏｎ、ｆｌｏｗ＿ｉｍａｇｅ．ｊｐｇ、ＲＥＡＤＭＥ．ｍｄの３つのファイルが登録されている例を示す。Ｎｏｄｅ－ＲＥＤ（フロー生成ツール２０１）で生成したフローは、Ｎｏｄｅ－ＲＥＤのプロジェクト機能を用いることにより、ネットワーク２０５で繋がっているＧｉｔＬａｂを始めとしたフロー管理リポジトリ２０２などのコード管理ツールに、ＪＳＯＮ形式のファイルとして登録される。ｆｌｏｗ．ｊｓｏｎはその一例である。また、ｆｌｏｗ＿ｉｍａｇｅ．ｊｐｇは、コード（本実施例ではｆｌｏｗ．ｊｓｏｎ）に紐付けて登録するフロー画像のファイルの一例である。そして、ＲＥＡＤＭＥ．ｍｄは、プロジェクトの説明を記載するファイルであり、マークダウンと呼ばれる形式のものである。

ＧｉｔＬａｂでは、ＲＥＡＤＭＥ．ｍｄに記載した情報が、プレビュー画面４００２として表示されるようになっている。マークダウンファイルでは、テキストおよびテキストの装飾の他、画像ファイルの埋め込みが可能であり、図４は、「フロー図」というタイトル文字、および、ｆｌｏｗ＿ｉｍａｇｅ．ｊｐｇを埋め込むことで、「フロー画像」を、プレビュー画面４００２に表示させた例を示す。

なお、図５に例示すように、フロー管理リポジトリ２０２では、各プロジェクトに対応するＪＳＯＮファイル、１または複数のＪＰＧファイル、マークダウンファイル、その他のファイルを、プロジェクトごとにまとめて格納している。

このように、本実施例では、ソフトウェア開発者がコード管理ＧＵＩ４００にアクセスし、再利用したいフロー（コード）を検索する際、ファイル一覧４００１だけでなく、Ｎｏｄｅ－ＲＥＤ上でフローとして表示したときのフロー画像を合わせてプレビュー画面４００２に表示する。あるいは、コードと、対応するフロー画像とを、対照可能に（あるいは同時に）プレビュー画面４００２に表示する。これにより、ソフトウェア開発者は、再利用するフロー（コード）を探す際の参考情報として、プレビュー画面４００２の表示を活用することができる。

＜実施例１のコード管理システムの処理＞
次に、本実施例におけるコード管理システムの処理の流れの一例について、図６のフローチャートを用いて示す。図６は、実施例１におけるコード管理システムの処理の流れを示すフローチャートの例である。実施例１におけるコード管理システムの処理は、フロー管理リポジトリ２０２へのコード登録（新規作成もしくは更新）を契機として実行される。以下では、ＣＩツール２０３が各ステップの処理を行うとして説明するが、ＣＩツール２０３はスクリプトを実行するＣＰＵで実現されるので、実際には、ＣＰＵもしくはＣＰＵで実現される機能部が各ステップの処理を行うものである。

まず、ステップＳ５０１では、ＣＩツール２０３は、ソフトウェア開発者により作成された処理フローがフロー管理部１０２に保存されたことを検知したか否かを判定する。例えばＧｉｔＬａｂは、ＧｉｔＬａｂにおける各種イベントを通知する機能を有しており、例えば、事前にＷｅｂｈｏｏｋ機能を設定しておくことで、ＧｉｔＬａｂにコードが登録されたことを外部に通知することができる。

ＣＩツール２０３は、処理フローの登録を検知した場合（ステップＳ５０１ＹＥＳ）、ステップＳ５０２に処理を移し、処理フローの登録を検知していない場合（ステップＳ５０１ＮＯ）、ステップＳ５０１の処理を繰り返す。

ステップＳ５０２では、ＣＩツール２０３は、コード登録の通知をフックし、コード取得処理２０４１のスクリプトを実行することで、フロー管理リポジトリ２０２（ＧｉｔＬａｂ）に登録された処理フロー（実態はＪＳＯＮ形式のファイル）を取得する。

次に、ステップＳ５０３では、ＣＩツール２０３は、コード変換処理２０４２のスクリプトを実行することで、フロー管理リポジトリ２０２（ＧｉｔＬａｂ）から取得したコードをフロー生成ツール２０１（Ｎｏｄｅ－ＲＥＤ）で読み込み、処理の流れを表すフロー図の形態に変換を行う。変換されたフロー図は、フロー生成ツール２０１（Ｎｏｄｅ－ＲＥＤ）のフローエディタＧＵＩ３００上に表示される。

ここで、ステップＳ５０３の処理を実現する手段の一例を示す。ＧｉｔＬａｂから取得したコードをＮｏｄｅ－ＲＥＤで読み込むためには、ウェブブラウザからフローエディタＧＵＩ３００にアクセスし、Ｎｏｄｅ－ＲＥＤのプロジェクト機能を利用してコードの取り込みを行う方法が挙げられる。一方で、ＣＩツール２０３による処理は、ソフトウェア開発者の操作とは関係なく、バックグラウンドで実行されるものである。そこで、ＧＵＩのないブラウザであるヘッドレスブラウザを利用する。例えば、Ｇｏｏｇｌｅ Ｃｈｒｏｍｅ（登録商標、以下同様）が提供するヘッドレスモードを利用することで、ＣＬＩ(Ｃｏｍｍａｎｄ Ｌｉｎｅ Ｉｎｔｅｒｆａｃｅ)からＮｏｄｅ－ＲＥＤにアクセスし、Ｎｏｄｅ－ＲＥＤ上にコードを取り込むことで、コードをフロー図の形態に変換することができる。

次に、ステップＳ５０４では、ＣＩツール２０３は、フロー画像生成処理２０４３のスクリプトを実行することで、フロー生成ツール２０１（Ｎｏｄｅ－ＲＥＤ）のフローエディタＧＵＩ３００上に表示された処理フロー図をフロー画像として取得する。ステップＳ５０４の処理についても、Ｇｏｏｇｌｅ Ｃｈｒｏｍｅが提供するヘッドレスモードを利用することで実現できる。具体的には、画面のスクリーンショットを取得するコマンドが用意されているため、これをＣＬＩから実行することでＮｏｄｅ－ＲＥＤ上に表示したフローを画像として取得することが可能になる。

なお、処理フローなどのオブジェクトの画像取得は、Ｎｏｄｅ－ＲＥＤにおけるスクリーンショット取得に限られるものではない。

ここで、Ｎｏｄｅ－ＲＥＤ上でフローを表示した場合に、複数のフローが存在する場合のＮｏｄｅ－ＲＥＤの画面の一例を図７に示す。図７は、実施例１における複数のフローが存在する場合のビジュアルプログラミングツールの画面の例を示す図である。

図７に示すように、フロー編集画面３００１では、フロー選択タブ６０１により、複数のフローを切り替え表示できるようになっている。なお、フロー選択タブ６０１の情報は、ＧｉｔＬａｂから取得したフローの元ファイル（ＪＳＯＮファイル）を参照することで取得できる。ＪＳＯＮファイルに記述されているコードの一部を一例として図８に示す。図８は、実施例１におけるフロー管理リポジトリに登録されたコードの一部の例を示す図である。

ＪＳＯＮファイルの冒頭には、フロー選択タブ６０１の定義が記載されており、「ｔｙｐｅ」という項目の値が「ｔａｂ」になっているものが、フロー選択タブ６０１に関する定義である。また、「ｌａｂｅｌ」という項目の値が、フロー選択タブ６０１の名前である。従って、ＪＳＯＮファイルの記述を上記キーワードでパースすることにより、フロー選択タブ６０１で切り替え表示可能なフローの存在情報を取得することができる。この情報をもとに、ＣＬＩからフロー選択タブ６０１の名前を指定し、表示するフローの切り替えを行う。このようにして、複数のフローを順に切り替えて表示することで、複数のフローを画像として取得することができる（ステップＳ５０４、Ｓ５０５）。

次に、ステップＳ５０５では、ＣＩツール２０３は、全てのフローのフロー画像を取得済か否かを判定する。ＣＩツール２０３は、全てのフローのフロー画像を取得済の場合（ステップＳ５０５ＹＥＳ）、ステップＳ５０６に処理を移す。一方、ＣＩツール２０３は、フロー画像を取得済でないフローがある場合（ステップＳ５０５ＮＯ）、ステップＳ５０４６に処理を戻す。

ステップＳ５０６では、ＣＩツール２０３は、フロー画像登録処理２０４４のスクリプトを実行し、フロー管理リポジトリ２０２（ＧｉｔＬａｂ）において、登録されているフローの元ファイル（ＪＳＯＮファイル）に紐付けて、取得したフロー画像の登録を行う。さらに、ステップＳ５０６では、ＣＩツール２０３は、コード管理ＧＵＩ４００上でコードと共にフロー画像が表示されるように設定する。

具体的には、ステップＳ５０６の処理におけるフロー画像の登録先は、フローの元ファイル（ＪＳＯＮファイル）が登録されているプロジェクトとし、フロー画像のファイル名は同一プロジェクト内で一意とする。また、同プロジェクト内に存在するＲＥＡＤＭＥ．ｍｄを編集し、登録したフロー画像を埋め込むことにより、プレビュー画面４００２にフロー画像が表示されるようにする。以上の処理を実施した場合のコード管理ＧＵＩ４００におけるコード情報の表示例が先に示した図４である。

＜実施例１の効果＞
本実施例によれば、ビジュアルプログラミングツールで生成したソフトウェアをコード管理ツールに登録、再利用可能にするシステムにおいて、ビジュアルプログラミングツール上で表示したコードのフロー画像をコードに紐付け、共に管理ツールに登録することにより、再利用するコードを選択する際の情報としてフローの画像を活用することができる。よって、ソフトウェア開発者は、フロー画像を確認することで、コードの内容を確認せずとも、再利用したいコードをより容易に識別できるため、効率的にソフトウェア開発を行うことができる。

また、本実施例では、ビジュアルプログラミングツールで生成された処理フローのフロー画像の取得および管理を、フロー生成ツール２０１およびフロー管理リポジトリ２０２を利用し、目的の処理がスクリプトで記述されたＣＩツール２０３を実行することで実現する。よって、目的の機能を、既存構成を用いて、容易に達成することができる。

図４に示すように、コードの付加情報としてフローの画像を表示する際、複数のフローが存在する場合に、代表的なフローだけを表示したい場合もある。例えば、フローが入れ子になっており、最上位のメインフローだけを表示したい場合などがある。以下、最上位のメインフローだけの表示を実現する実施例２について、図９のフローチャートを用いて説明する。図９は、実施例２におけるコード管理システムの処理で、複数のフローが存在する場合に、フロー画像として保存するフローの選定を含んだ処理の流れを示すフローチャートの例である。

＜実施例２のコード管理システムの処理＞
図９に示す実施例２におけるコード管理システムの処理は、実施例１におけるコード管理システムの処理と比較して、ステップＳ５０３とステップＳ５０４の間にステップＳ５０３１およびステップＳ５０３２が実行される点が異なり、その他は同一である。図９の説明において、図６のフローチャートの説明と重複する部分については、説明を省略する。

ステップＳ５０３に続くステップＳ５０３１では、ＣＩツール２０３は、ステップＳ５０３で変換されたフロー図が複数存在するか否かを判定する。ＣＩツール２０３は、複数のフロー図が存在する場合（ステップＳ５０３１ＹＥＳ）、ステップＳ５０３２に処理を移す。一方、ＣＩツール２０３は、フロー図が１つのみ存在する場合（ステップＳ５０３１ＮＯ）、ステップＳ５０４に処理を移す。

ステップＳ５０３１ＹＥＳにおけるフロー生成ツール２０１（Ｎｏｄｅ－ＲＥＤ）の画面の例が図７である。この例では、複数のフロー選択タブ６０１で各フローを切り替え表示できるようになっている。ここで、ステップＳ５０３２では、ＣＩツール２０３は、コード管理ＧＵＩ４００上でコードと共に表示するフローを選定する。例えば、最上位のメインフローを記載したフロー編集画面のフロー選択タブ６０１の名称を「Ｍａｉｎ Ｆｌｏｗ」とする、というルールを決めておくことにより、メインフローが記載されたフロー選択タブ６０１が一意に決まる。該当するフロー選択タブ６０１を選択し、画面のスクリーンショットを取得することで、メインフローを画像として取得することができる（ステップＳ５０４）。メインフロー以外にもコード管理ＧＵＩ４００上に表示させたいフロー画像がある場合には（ステップＳ５０５ＮＯ）、該当するフロー画像の取得を行う（ステップＳ５０４）。ＣＩツール２０３は、必要なフロー画像の取得が完了した後（ステップＳ５０５ＹＥＳ）、フロー画像登録処理２０４４のスクリプトを実行し、ＧｉｔＬａｂに登録されているフローの元ファイル（ＪＳＯＮファイル）に紐付けて、取得したフロー画像の登録を行い、コード管理ＧＵＩ４００上でコードと共にフロー画像が表示されるように設定する（ステップＳ５０６）。

＜実施例２の効果＞
本実施例によれば、フロー管理リポジトリ２０２（ＧｉｔＬａｂ）に登録するフロー画像を選定することができるため、コード管理ＧＵＩ４００上に代表的なフロー画像だけをコードの付加情報として表示することが可能になり、処理フローの全体俯瞰の利便性が高まる。例えば、ソフトウェア開発者は、代表的なフロー画像に基づいてソフトウェア全体を俯瞰し、再利用したいコードを適切かつ効率的に選択することができる。

代表的なフロー画像だけをコードの付加情報として表示する手段としては、実施例２の図９のフローチャートで示したように、フロー画像のスクリーンショットを取得するステップＳ５０３の次のステップで対象フローを選定する方法に限られない。以下、対象フローを選定する他の方法を実施例３として、図１０のフローチャートを用いて説明する。図１０は、実施例３におけるコード管理システムの処理で、フロー管理リポジトリに複数のフロー画像が存在する場合に、コードと共に表示するフロー画像の選定を含んだ処理の流れを示すフローチャートの例を示す図である。

＜実施例３のコード管理システムの処理＞
図１０に示す実施例３におけるコード管理システムの処理は、実施例１におけるコード管理システムの処理と比較して、ステップＳ５０５に続いてステップＳ５０５１～Ｓ５０５４が実行され、ステップＳ５０５４の終了に伴いコード管理システムの処理が終了する点が異なり、その他は同一である。図１０の説明において、図６のフローチャートの説明と重複する部分については、説明を省略する。

ステップＳ５０４では、ＣＩツール２０３は、フロー画像生成処理２０４３のスクリプトを実行することで、Ｎｏｄｅ－ＲＥＤ上に表示されたフローを画像として取得する。図７に示すように、Ｎｏｄｅ－ＲＥＤ上でフローを表示した際に複数のフローが存在する場合、フロー選択タブ６０１で複数のフローを順に切り替えて表示させ、全てのフローを画像として取得する（ステップＳ５０４、Ｓ５０５）。全フロー画像を取得済み（ステップＳ５０５ＹＥＳ）の場合に続くステップＳ５０５１では、ＣＩツール２０３は、ステップＳ５０５でフロー画像の取得が完了した後、フロー画像登録処理２０４４のスクリプトを実行し、フロー管理リポジトリ２０２（ＧｉｔＬａｂ）において、登録されているフローの元ファイル（ＪＳＯＮファイル）に紐付けて、取得したフロー画像の登録を行う。

具体的には、ステップＳ５０５１の処理におけるフロー画像の登録先は、フローの元ファイル（ＪＳＯＮファイル）が登録されているプロジェクトとする。また、登録するフロー画像の名前は、フロー画像を取得する際に選択したフロー選択タブ６０１の名前にしておく。例えば、図７に示したＮｏｄｅ－ＲＥＤ画面の場合、フロー選択タブ６０１は「Ｍａｉｎ Ｆｌｏｗ」、「Ｓｕｂ Ｆｌｏｗ１」、「Ｓｕｂ Ｆｌｏｗ２」の３つが存在しており、各々のタブを選択したときに取得したフロー画像の名前を「Ｍａｉｎ Ｆｌｏｗ．ｊｐｇ」、「Ｓｕｂ Ｆｌｏｗ１．ｊｐｇ」、「Ｓｕｂ Ｆｌｏｗ２．ｊｐｇ」のようにしておく。

続いてステップＳ５０５２では、ＣＩツール２０３は、ステップＳ５０５１で複数のフロー画像が登録されたか否かを判定する。ＣＩツール２０３は、ステップＳ５０５１で複数のフロー画像が登録された場合（ステップＳ５０５２ＹＥＳ）、ステップＳ５０５３に処理を移す。一方、ＣＩツール２０３は、ステップＳ５０５１で１つのフロー画像のみが登録された場合（ステップＳ５０５２ＮＯ）、ステップＳ５０５４に処理を移す。

ステップＳ５０５３では、ＣＩツール２０３は、コード管理ＧＵＩ４００上でコードと共に表示するフローを選定する。例えば、最上位のメインフローだけを選定する場合、ＧｉｔＬａｂに登録された複数のフロー画像の中から「Ｍａｉｎ Ｆｌｏｗ」の名前がついた画像を選択すればよい。

ステップＳ５０５４では、ＣＩツール２０３は、コード管理ＧＵＩ４００上でコードと共にフロー画像が表示されるように設定を行う。ステップＳ５０５３が終了すると、ＣＩツール２０３は、実施例３のコード管理システムの処理を終了する。

＜実施例３の効果＞
本実施例によれば、フロー管理リポジトリ２０２（ＧｉｔＬａｂ）に登録するフロー画像を選定することができるため、コード管理ＧＵＩ４００上に代表的なフロー画像だけをコードの付加情報として表示することが可能になり、処理フローの全体の俯瞰の利便性が高まる。加えて、取得したフローが複数である場合に、全てのフロー図のフロー画像を取得した上で、コードと同時表示するフロー画像を選択するので、ステップＳ５０５４の表示設定を変更するだけで、コードと同時表示するフロー画像を切り替えることもできる。全てのフロー図のフロー画像が取得されているので、例えば、ユーザがメインの処理フローを確認している際、さらに詳細なサブの処理フローを確認したいときでも、目的のフロー画像を表示させて確認することができる。

上記の実施例１～３の各構成、機能、処理部、処理手段等は、プロセッサがそれぞれの機能を実現するプログラムを解釈して実行することにより、ソフトウェアで実現してもよい。各機能を実現するプログラム、テーブル、ファイル等の情報は、メモリや、ハードディスク、ＳＳＤ（Ｓｏｌｉｄ Ｓｔａｔｅ Ｄｒｉｖｅ）等の記憶部、または、ＩＣカード、ＳＤカード、ＤＶＤ（Ｄｉｇｉｔａｌ Ｖｉｄｅｏ Ｄｉｓｋ）、ＢＤ（Ｂｌｕ-ｒａｙ（登録商標） Ｄｉｓｋ）等の記録媒体に置くことができる。以下、コード管理システムをソフトウェアで実現する実施例４について説明する。

＜実施例４のコード管理システムを実現するコンピュータ＞
図１１は、実施例４におけるコード管理システムを実現するコンピュータの例を示す図である。コンピュータ５０００では、ＣＰＵ（Ｃｅｎｔｒａｌ Ｐｒｏｃｅｓｓｉｎｇ Ｕｎｉｔ）に代表される演算装置５３００、ＲＡＭ（Ｒａｎｄｏｍ Ａｃｃｅｓｓ Ｍｅｍｏｒｙ）等のメモリ５４００、入力装置５６００（例えばキーボード、マウス、タッチパネル等）、および出力装置５７００（例えば外部ディスプレイモニタに接続されたビデオグラフィックカード）が、メモリコントローラ５５００を通して相互接続されている。

コード管理システム１Ｓのユーザ端末２００、フロー生成ツール２０１、フロー管理リポジトリ２０２、ＣＩツール２０３を実現するための各プログラムが、Ｉ／Ｏ（Ｉｎｐｕｔ／Ｏｕｔｐｕｔ）コントローラ５２００を介してＳＳＤやＨＤＤ等の外部記憶装置５８００から読み出されて、ＣＰＵ５３００およびメモリ５４００の協働により実行される。

あるいは、コード管理システム１Ｓのユーザ端末２００、フロー生成ツール２０１、フロー管理リポジトリ２０２、ＣＩツール２０３を実現するための各プログラムは、ネットワークインターフェース５１００を介した通信により、外部のコンピュータから取得されてもよい。

また、上記の実施例１～３における各構成、機能、処理部、処理手段等は、それらの一部または全部を、例えば集積回路で設計する等によりハードウェアで実現されてもよい。

＜その他の実施例＞
なお、既述の通り、フロー生成ツール２０１、フロー管理リポジトリ２０２、ＣＩツール２０３が動作するサーバは、各々独立したサーバであっても、適宜分散または統合されたサーバであっても何れでもよい。

すなわち、上記の実施例１～３では、コード管理システムの構成を具体化した例を図２に示した。その説明において、フロー生成ツール２０１、フロー管理リポジトリ２０２、ＣＩツール２０３は各々独立したサーバ上で動作すると仮定したが、一部あるいは全てを同一サーバで動作させる構成にしてもよい。また、フロー管理リポジトリ２０２（ＧｉｔＬａｂ）とＣＩツール２０３を分ける構成を示したが、ＧｉｔＬａｂでは、ＧｉｔＬａｂ ＣＩというツールを追加インストールすることにより、ＧｉｔＬａｂでのＣＩ実行が可能になるため、ＧｉｔＬａｂがＣＩツールを内包するような構成にしてもよい。

また、フロー画像生成スクリプト２０４は、コード取得処理２０４１、コード変換処理２０４２、フロー画像生成処理２０４３、フロー画像登録処理２０４４から成ることを示したが、これらのスクリプトは分ける必要はなく、一部あるいは全てを１つのスクリプトに纏めて記述してもよい。

また、上記の実施例１～３では、コード管理ツールにコードが保存されたことを契機として該コードを処理フロー図に変換、処理フロー図を生成する例を示したが、処理フロー図を生成するタイミングはこの限りではい。例えば、コード管理ツールにおいて、該コード情報を表示する際に処理フロー図を生成する構成にしてもよい。さらに、処理フロー図の生成については、コード管理ツールが実施する形態であってもよいし、コード管理ツールの情報を利用者に提示するブラウザ等の表示ツールが実施する形態であってもよい。

また、上記の実施例１～３では、ＧｉｔＬａｂの画面上でコードの付加情報としてフロー画像を表示する例を示したが、ＧｉｔＨｕｂ等、別のコード管理ツール上で表示する構成にしてもよい。また、コード管理ツールに限らず、管理されているコード情報を提示する機能を有するツール画面上に表示する構成にしてもよい。さらに、上記の実施例で示したフロー画像は、Ｎｏｄｅ－ＲＥＤ上に表示される処理フロー図のスクリーンショット画像であるが、コードからＵＭＬ（Ｕｎｉｆｉｅｄ Ｍｏｄｅｌｉｎｇ Ｌａｎｇｕａｇｅ）を生成可能なＰｌａｎｔＵＭＬを利用して生成したＵＭＬダイアグラムなどを画像として保存し、コードを共に管理する構成にしてもよい。

本発明は上記した実施例に限定されるものではなく、様々な変形例が含まれる。例えば、上記した実施例は本発明を分かりやすく説明するために詳細に説明したものであり、必ずしも説明した全ての構成を備えるものに限定されるものではない。また、ある実施例の構成の一部を他の実施例の構成に置き換えることが可能であり、また、ある実施例の構成に他の実施例の構成を加えることも可能である。また、各実施例の構成の一部について、他の構成の追加・削除・置換をすることが可能である。

また、上記した実施例において、制御線や情報線は説明上必要と考えられるものを示しており、製品上必ずしも全ての制御線や情報線を示しているとは限らない。実際には殆ど全ての構成が相互に接続されていると考えてもよい。

１Ｓ：コード管理システム、１００：ユーザ操作部、１０１：フロー生成部、１０２：フロー管理部、１０３：外部ツール実行部、１０４：フロー画像生成ツール群、２００：ユーザ端末、２０１：フロー生成ツール、２０１：フロー生成ツール、２０２：フロー管理リポジトリ、２０３：ＣＩツール、２０４：フロー画像生成スクリプト、３００：フローエディタＧＵＩ、４００：コード管理ＧＵＩ６０１：フロー選択タブ、１０４１：コード取得部、１０４２：コード変換部、１０４３：フロー画像生成部、１０４４：フロー画像登録部、２０４１：コード取得処理、２０４２：コード変換処理、２０４３：フロー画像生成処理、２０４４：フロー画像登録処理、３００１：フロー編集画面、３００２：パレット、３００３：ノード、３００４：ワイヤー、４００１：ファイル一覧、４００２：プレビュー画面、５０００：コンピュータ、５１００：ネットワークインターフェース、５２００：コントローラ、５３００：演算装置、５４００：メモリ、５５００：メモリコントローラ、５６００：入力装置、５７００：出力装置、５８００：外部記憶装置

Claims (6)

1. 処理を表すノードを結線することで処理フローを作成するビジュアルプログラミングツールを含むコード管理システムにおいて、
   ユーザ操作に基づいて処理フローを作成し、作成された処理フローに基づくコードを生成するフロー生成部と、
   前記フロー生成部により生成されたコードを保存するフロー管理部と、
   前記フロー管理部にコードが保存されたことを契機として該コードを取得するコード取得部と、
   前記コード取得部により取得されたコードを処理フロー図へ変換するコード変換部と、
   前記コード変換部により変換された処理フロー図のフロー画像を生成するフロー画像生成部と、
   前記フロー画像生成部により生成されたフロー画像を、前記コード変換部により該当の処理フロー図に変換される前のコードと対応付けて前記フロー管理部に登録するフロー画像登録部と
   を有することを特徴とするコード管理システム。
2. スクリプトを実行する実行部をさらに有し、
   前記コード取得部、前記コード変換部、前記フロー画像生成部、および前記フロー画像登録部は、各処理内容がスクリプトで記述され、
   前記実行部は、前記フロー管理部にコードが保存されたことを検知すると、前記コード取得部、前記コード変換部、前記フロー画像生成部、および前記フロー画像登録部の各スクリプトを実行する
   ことを特徴とする請求項１に記載のコード管理システム。
3. 前記コード変換部によりコードを処理フロー図に変換する処理が行われた結果、複数の処理フロー図が存在する場合には、該コードに対応付けて前記フロー管理部にフロー画像を登録する処理フロー図を、該コードに記載されている情報に基づいて選択する
   ことを特徴とする請求項１に記載のコード管理システム。
4. 前記コードに対応付けられて前記フロー管理部にて管理されているフロー画像が複数存在する場合には、該コードと共に表示する処理フロー画像を、前記コードに記載されている情報に基づいて選択する
   ことを特徴とする請求項１に記載のコード管理システム。
5. 前記コードと、該コードに対応付けられて前記フロー管理部にて管理されているフロー画像と、を表示装置に対照可能に表示する
   ことを特徴とする請求項３または４に記載のコード管理システム。
6. 処理を表すノードを結線することで処理フローを作成するビジュアルプログラミングツールを含むコード管理システムにおけるコード管理方法であって、
   前記コード管理システムのフロー生成部が、ユーザ操作に基づいて処理フローを作成し、作成された処理フローに基づくコードを生成し、
   前記コード管理システムのフロー管理部が、前記フロー生成部により生成されたコードを保存し、
   前記コード管理システムのコード取得部が、前記フロー管理部にコードが保存されたことを契機として該コードを取得し、
   前記コード管理システムのコード変換部が、前記コード取得部により取得されたコードを処理フロー図へ変換し、
   前記コード管理システムのフロー画像生成部が、前記コード変換部により変換された処理フロー図のフロー画像を生成し、
   前記コード管理システムのフロー画像登録部が、前記フロー画像生成部により生成されたフロー画像を、前記コード変換部により該当の処理フロー図に変換される前のコードと対応付けて前記フロー管理部に登録する
   各処理を含んだことを特徴とするコード管理方法。

Images