Comments
Description
Transcript
階層化プログラム設計図法に基づくチャート図の効率的作成手法に関する
階層化プログラム設計図法に基づくチャート図の効率的作成手法に関する研究 A Study on an Efficient Program Chart Developing Method Based on Hierarchical and Compact Design Concept 石川 貴浩 ISHIKAWA, Takahiro 概要：プログラム設計図である HCP チャートをコンピュータ上で効率的に作成するためのシステムについて述べる． HCP チャートはソフトウェア開発の設計工程で用いられている． 元来， HCP チャートは手書きにより作成されていたが， 最近では専用のタグからチャートを生成するシステムも提案されている．本稿では，HTML5 と JavaScript による直感 的編集システムを提案する．HCP チャートは，処理や繰返し，分岐といった意味を持った表現要素と変数を表すデー タ要素，変数の参照・代入を示す線で構成される．全ての要素は，GUI 編集画面上で WYSIWYG 的に作成することがで きる．本システムにより，ユーザは簡単にかつ直感的に HCP チャートを作成することができる．また，グループでチ ャートを作成するための機能についても提案する． Summary: In this article, a computer based program chart developing method is proposed. Hierarchical compact description chart (HCP chart) has been proposed for upper process software development. Originally, it was drawn with hand. A script based drawing method has been proposed which translates directives into HCP chart graphics. In this article, GUI based drawing method is proposed based on HTML5 and JavaScript. HCP chart is constructed with symbols and relation lines. Symbols denote each role in a process, such as processing unit, iteration, switch condition, and input/output data elements. Their relations are shown with lines. All components and their relations of HCP chart are put on the graphic window directly. Thus, users design HCP chart easily and can intuitively understand total process. Data sharing functions are also implemented for collaborative software development. キーワード: プログラム設計図・HCP チャート・HTML5・JavaScript・WYSIWYG Keywords: Program Design, HCP Chart, HTML5, JavaScript, WYSIWYG １．はじめに ソフトウェア開発の設計工程ではプロ グラム設計図法が用いられている．一般的に使用されて いる設計図法にはフローチャートがあるが，処理を階層 的に分かりやすく表現する HCP チャート１）・HIPO２）・PAD ３） などの図法も存在する．HCP チャートという NTT 電気 通信研究所で開発されたプログラム設計図法は，処理を 「何をしたいか」と「どのように実現するか」の組にし て階層的に表現するため処理の理解がし易い．設計にお いて HCP チャートを使用することでプログラムの生産 性・保守性に効果が期待できる． HCP チャートをコンピュータ上で作成するための既存 システムとして，PAN/HCP４）や HCP Viewer５）などが提案 されており，手書きに比べて書損じや仕様変更に伴うチ ャートの修正が容易になった．しかし，PAN/HCP は独特 の編集画面で作成するため，初学者が容易に作成するこ とができないことが指摘されている５）．HCP Viewer は， 図１に示すように専用のタグを入力し，入力内容から画 像を生成する仕組みになっており，上記の問題を回避し ているが直感的に編集できず必ずしも使い易くない． 著者らは，効率良く作成するためには直感的編集が必 要と考え，既に GUI ベースの編集システムを提案してい るが６），本稿では，より効率的に HCP チャートを作成す ることを目指し，要素コピーなどの基本的な編集機能や 編集を補助する機能を持ったシステムを実現する． また， グループでの HCP チャート作成を考慮したチャートデー タの管理システムを実現する． ¥data 値 ランダム値の正負を調べる ランダム値を変数に入れる ¥out 値 ¥fork 値の正負を調べる ¥in 値 ¥branch 正 「値は正」と出力する ¥branch 負 「値は負」と出力する 図１ HCP Viewer の記述例 この研究は，映像情報メディア学会メディア工学研究会（2013 年 2 月 16 日）において発表予定である． 1183103 石川 貴浩 1／4 ２．HCP チャート HCP チャートについて簡単に紹介 する．HCP チャートで頻繁に使用される表現要素を図２ に示す．各表現要素は以下のような意味を持つ． ・通常処理：通常の処理を行う ・繰返し処理：下の階層を繰り返す ・振分け処理：条件に応じて分岐する ・モジュール化：モジュールを呼び出す ・例外条件：処理が例外となった場合に分岐する ・上位レベルへの戻り：指定数上位階層へ戻る ・データ要素：変数などを表す ・参照線、代入線：変数の参照・代入を示す 次に， 作成例を図３に示す． 処理は上から順に記述し， より具体的に記述したい場合は，処理の右下に階層を作 り具体的な処理を記述する．図３を例にとると「ユーザ 名を保存する」 という処理を具体的に記述したものが 「ユ ーザ名を取得する」と「ファイルに保存する」の処理と いうことになる． 通常処理 モジュール化 上位レベル への戻り 繰返し 処理 振分け処理 振分け方法 例外条件 データ要素 参照線 代入線 図２ HCP チャートの主要な表現要素 ３―１．チャート編集システム 以前提案したシステ ムは，要素の配置・移動・変更・削除といった最低限の 機能しか持たなかったが．より少ない手数で作成するた め，新たに以下の機能を備えたチャート編集システムを 実現した．図４に本システムの編集画面を示す． 1) 基本的な編集機能 一般的なテキストエディタや画像編集ソフトなどで実 装されているコピー・カット・ペースト機能や Undo/Redo 機能によりユーザの負担を軽減させる．コピー・カット・ ペースト機能は処理要素に対して使った場合，参照線・ 代入線のつながりが保持される． 2) 要素配置可能位置の提示機能 HCP チャートの要素の中には，配置できる場所が制限 された要素がある．例えば， 「振分け方法」は「振分け処 理」 の下位階層に配置されなければならない規則， 「モジ ュール化」の下位階層に要素を配置することはできない といった規則がある．規則が守られていないと，グルー プによるチャート作成時に混乱を招くことになる．問題 回避のため，図５のように配置することができる位置を 提示することにより，チャートの間違いを減少させる機 能を実現した． 3) 「上位レベルへの戻り」戻り先の提示機能 「上位レベルへの戻り」において，戻る階層数を適切 に設定するためには，目的の処理までの階層差を数える 必要がある．不注意による数え間違いや「例外条件」を １階層と見なす誤解により，適切な階層数が設定されな いことが多い．問題回避のため，図６のように階層数と 戻り先を対応付けて表示させることにより，適切な階層 数を選択させる機能を実現した． 4) 見やすい参照線・代入線の描画機能 HCP チャートの中で，参照線・代入線の数が多くなる と，線の交差や密集により処理とデータの対応関係が分 かりづらくなる．対応関係を明確にするため，図７のよ うに参照線・代入線を自動的に着色できるようにし，ま た，参照と代入の場合で太さを変え差別化を図った．着 色はユーザが手動で行うこともできる．UML モデリング ツールとして広く使われている Enterprise Architect７） でも，線の着色によるアプローチがされている． 5) チャートの整合性検査機能 大規模なシステムを設計する場合ではとくに，余分な 混乱や修正作業を省くためにも，チャートの不適切部分 図３ HCP チャートの例 は即座に修正された方が良い．本システムでは，HCP チ ャート作成時にありがちな，終了しない繰返し処理と実 行されない処理，最下層に現れてはいけない要素，説明 ３．システム概要 HCP チャートを編集するシステム とチャートデータを管理するシステムについて紹介する． が抜けている処理・データ要素を自動的に発見する機能 を実現した．終了しない繰返し処理は， 「繰返し処理」要 本システムはブラウザ上での動作を目指し，PHP・ 素の中に「上位レベルへの戻り」要素などの階層を抜け JavaScript などのプログラミング言語により開発した． る要素が存在しない場合に検出する．実行されない処理 1183103 石川 貴浩 2／4 は， 「繰り返し処理」要素や「上位レベルへの戻り」要素 などの役割を考慮した上で処理のシミュレーションを行 い，その結果により検出する．最下層に現れてはいけな い要素は， 「例外条件」や「振分け方法」などを対象に検 出を行う． 「振分け方法」は，隣接する「振分け方法」の 中に１つでも下位階層を持つものが存在すれば，不自然 とはならないため下位階層を持たない場合でも検出は行 われない． 6) ボトムアップ編集の支援機能 PAN/HCP では，チャートの本流とは別の場所に処理を 記述する機能が提案されている．この機能によりボトム アップな編集が可能となり，自由な編集が行えるように なるとされている．一方，HCP Viewer では，本流外に配 置した処理の役割が不明確になり設計の思考が妨げられ るという理由から採用されていない．本システムでは， ボトムアップ編集を効果的に行えるようにするために， 本流外の処理を１つのパートとして作成した上で，処理 の役割を記述しておける機能を実現した． 本機能により， 本流外の処理の役割が不明確になることを回避できる． 図４ チャート編集システムの編集画面 同階層配置 図７ 本システムの参照線・代入線 ３―２．チャート管理システム ソフトウェア開発は 通常多数の要員で分担開発されていることから，グルー プでのチャート管理が効率的に行えることが望ましい． 本研究では，以下の機能を備えたチャート管理システム を実現した．図８に本システムの管理画面を示す． 1) プロジェクト単位の管理機能 一般的な統合開発環境では，プロジェクトという単位が あり，中にソースファイルを登録していく．本システム も同様に，プロジェクトを用意し，中にチャートを登録 していく．チャート自体は別々のファイルとなっている ため，グループワークでメンバがチャートを分担して作 成できる．また，汎用的なチャートを別のプロジェクト で使用することも容易となる． 2) バージョン管理機能 プロジェクトとチャートは複数のバージョンを作成する ことができる．また，複数バージョンの中で実際に採用 するバージョンを主に設定することができる．グループ メンバが１つのチャートについてそれぞれ独自のバージ ョンを作成し，中から１つを選出するような使い方がで きる． 3) チャート同時編集への対策機能 グループで同時に１つのチャートを編集する場合，最 後に保存したメンバの変更しか残らない．一般的なバー ジョン管理システムでは問題を回避するため，ファイル 自体をロックするロック方式や変更した部分のみをリポ ジトリに反映させるコピー・マージ方式がある．ロック 方式は，ロックが解除されるまで待たなくてはならない ため効率的とはいえない．一方，コピー・マージ方式は， １枚に収める書き方を推奨する HCP チャートの情報量で は，変更部分の競合が起こりやすい．本システムでは， コピー・マージ方式と同様に，問題が起こりそうなとき に警告を出す．警告確認後は，変更したチャートを別バ ージョンとして保存させることで問題を回避している． 下位階層 配置 図５ 要素配置位置の提示 図６ 「上位レベルへの戻り」戻り先提示 4) チャートの編集ロック機能 グループが所有する全てのチャートは，協力して作業 できるよう，メンバが自由に編集できる．自分がグルー プ所有のプロジェクトに登録したチャートに関しては， 編集機能をロックし他のメンバが編集できないようにす ることもできる．本機能により，大切なチャートを保護 することができる． 1183103 石川 貴浩 3／4 5) プロジェクト構成表示機能 チャート内で「モジュール化」などの外部参照要素を 配置することによりできるチャート間の関係は，通常の ファイル表示では分からない．例えば，モジュールチャ ートの変更を行ったときに，その呼出元のチャートも変 更しなくてはならない場合がある．しかし，呼出元を１ つずつ探していくのは効率が悪い．本システムでは，チ ャートの参照関係を図９のようなツリー状に表示するこ とで，直感的に目的のファイルを選択できる．また，呼 び出されているが存在しないチャートについても表示す ることで，グループのメンバはプロジェクトの課題を知 ることができ，効率的にプロジェクトを完成させること ができる． b) 参照線・代入線表現の評価 本システムの参照線・代入線表現の見やすさを評価す るために， 参照線・代入線の数が多いチャートを用意し， どの処理要素とどのデータ要素がつながっているのかを 制限時間内に記述してもらった．通常の表現方法のみを 用いたチャートと本システムの表現方法のみを用いたチ ャートの 2 パターンを用意し，それぞれ回答してもらっ た正答数を比べると，本システムの方が約 2 倍正答でき ており，表現の見易さが確認できた． c) 「上位レベルへの戻り」戻り先提示の評価 「上位レベルへの戻り」の戻り先をシステムが自動的 に提示する機能の有効性を評価するために， 「上位レベ ルへの戻り」要素が複数用いられたチャートを用意し， 指定の処理に移るためには何階層抜ける必要があるかを 問う問題を制限時間内に解いてもらった．提示ありの場 合と提示なしの場合の 2 回行ったところ，提示ありの方 が約 2 倍正答できており， 本機能の有効性が確認できた． ５．今後の展望 評価により本システムを用いること で効率的に HCP チャートを作成できることが確認できた． 一方で，参照線・代入線に関しては，使用数が大幅に増 えると見づらくなるという意見も出た．多用しても見や すさを損ないにくい表現を提案することで，よりユーザ の負担を軽減させることができると考える． 図８ チャート管理システムの管理画面 ６．おわりに 本稿では，HCP チャートを効率的に作 成するシステムを提案した．基本編集機能や適切なチャ ートを作成するための機能，自由な編集を実現する機能 などを実現し，ユーザの作成時に掛かる手間を減らすこ とができた．また，チャートデータを管理するためのシ ステムでは，個人だけでなくグループでの設計が効率的 に行える機能を実現した． 参考文献 図９ チャートファイルのツリー表示 ４．チャート管理システム SE として働く社会人 4 名 と学生 2 名を対象に本システムの評価を行った． a) 使用感の評価 簡単な機能を実現するプログラムの HCP チャートを， 手書き・HCP Viewer・本システムの３つの方法で作成し てもらった．作成後に取ったアンケートでは，最も作成 しやすかった方法として全員が本システムを選び，本シ ステムの優位性が示される結果となった．また，要素配 置・移動・コピー・カット・ペースト・Undo/Redo 機能 などを 5 段階で評価するアンケートを行ったところ，概 ね高評価が得られ，各機能の有効性が示された． １） 浅見秀雄，忠海均： “HCP チャート―階層化プログラム設計図法” ， 電気通信協会，1993． ２） HIPO (hierarchy plus input-process-output)：http://www.hit. ac.il/staff/leonidM/information-systems/ch64.html． ３） PAD について：http://www2.ee.knct.ac.jp/el/E2/L210/algoris m/pad1.html． ４） 塩見彰睦，竹田尚彦，河合和久，大岩元： “HCP チャートエディタ PAN/HCP” ，情報処理学会論文誌，Vol．33，No．2，pp．183-194， 1992． ５） 松澤 芳昭，杉浦学，大岩元： “HCP チャート清書ソフトウエア 「HCP Viewer」の開発” ，プログラミングシンポジウム，pp．181 -186，2005． ６） 石川貴浩，奥平雅士： “HCP チャート作成のためのグラフィカル編 集システム” ，映像情報メディア学会技術報告 34(44), pp．5-8, 2010． ７） Enterprise Architect：http://www.sparxsystems.jp/． 1183103 石川 貴浩 4／4