日本ソフトウェア科学会第 31 回大会 (2014 年度) 講演論文集

コード生成を用いたフレームワーク向け Web アプリ
ケーション開発支援ツールの作成
京谷 和明 伊藤 恵
近年，Web アプリケーション開発では，より一層の短納期化，高品質化が求められている．そのため，Web アプ
リケーション開発には様々なフレームワークが用いられていることが多い．しかし，フレームワークを用いる場合，類似したコードを記述することも多く，開発作業が非効率となる．また，効率化のため自動生成ツールを用いる場面も増えてきている．しかし，自動生成ツールを用いる場合は，生成元のモデルについて深く理解し，細部まで記述しなければならないことが多く，その自動生成ツールを扱うための学習期間が長くなってしまうことがある．そこで本
研究では，Web アプリケーションの作成を行う際に，一般的に作成され，理解のしやすいモデルである画面遷移図と ER 図より，CakePHP のアーキテクチャに則ったコードを半自動で生成することで，機敏に開発を行うことができ，フレームワークによる質の良いコードを生成できるツールの作成を行う．

Recent years, web application development is more needed the short delivery time and high quality. Therefore, various frameworks are used in web application development. But if developers use framework, theyoften write similar code, so development working is ineﬃcient. Also, web application development use various auto code generation. But for using code generation tools, developers must deeply understand about
the model for the tools, and they must write details in the model, and learning period about the model isoften lengthy. So this study makes a semi-automatic code generating tool that the conforming CakePHParchitecture. The input models pf this tool are ER model and screen transition that diagrams are typicalcreated in web application development. By this tool, developers rapidly develop web application and thegenerated codes are high quality based on the framework.

は，フレームワークごとに定義や作法が異なり，その1 はじめにフレームワークを扱うのに学習期間が長くなってしま

Web アプリケーションの開発では様々なフレームい，学習したとしても他のフレームワークでは扱うこワークが用いられることが多い．フレームワークととができないこともあるといったことが挙げられる．

はソフトウェアを開発する際の枠組みとなるものでまた，Web アプリケーションの開発には自動生成あり，頻繁に作成される機能やコードをまとめて提供ツールを用いる場面が増えてきている．自動生成の例

することで，システム開発の支援をしている．Webとしては，各クラスの名前や属性や関数などを図で表アプリケーションのフレームワークとして，例えばすクラス図やオブジェクト間の処理の流れを図で表す

Ruby のフレームワークである Ruby on Rails，PHPシーケンス図といった，統一モデリング言語（UML）のフレームワークである CakePHP などが挙げられから自動生成を行う場合がある．或いは独自規格を作る．Web アプリケーションの開発にフレームワーク

成し，それに則って画面レイアウトや機能を決定し，を用いるメリットとしては一般的に開発工数の削減

そこからソースコードを自動で生成する製品も存在と品質の均質化などが挙げられる．デメリットとしてする．自動生成ツールを導入するメリットとしては，開発工数の削減と品質の均質化，設計したドキュメン

Making a Support Tool of Web Application Development for Framework Using Code Generation.
Kazuaki Kyoya, Kei Ito, 公立はこだて未来大学, Future
University of Hakodate.

トや図を最大限に活用できるといったことが挙げられる．同様に，デメリットとしてはモデルから自動生成を行う場合は設計の段階で非常に細かいところまで機能の洗い出しをして設計しなければならなく，自動その他の関連するツールとしては，株式会社ジャス

生成ツールを扱う場合は学習期間が長くなってしまう

ミンソフトが販売している「Wagby」 [4]，オープンことが多いことである．

ソースソフトウェアである「blanco Framework」 [5]

本研究ではこれらのフレームワークと自動生成ツー等が挙げられる．

ルに関する問題点を解決するために，学習期間があまいずれのツールも自動生成率は高く，Web アプリ

り長くならず，設計も簡単に行うことができ，さらにケーションの開発に適用することで機敏にシステム開コメントも充実させた雛形を生成することで機敏に発を進めることができると思われる．しかし，設計段開発を行うことのできるツールの作成を行うことを階で必要となるモデルを細かく作成しなければならな目的とする．

く，学習期間も長くなってしまうツールが多く，これらのツールの導入に手間取ってしまうかもしれない．

2 関連研究
自動生成ツールに関する先行研究として，河村，浅3 アプローチ

見らの「UML を入力とするソースコード自動生成

そこで本研究では，既存のツールと比較して，生成ツールの開発」 [1] が挙げられる．この研究では Webできるソースコードの量は少ないが，必要とするモデアプリケーション開発における自動生成技術の適用にルを簡単にすることで，導入をしやすいツールの作成

対して，クラス図とシーケンス図からフレームワーを目指す．本研究で扱うモデルは画面遷移図と ER 図

ク用のコードを自動生成するツールの作成に取り組である．これらのモデルは UML を中心としたモデリんでいる．この研究で作成されたツールを適用するングを行うことのできるツール astah*を使って作成ことで，9 割以上のソースコードの生成に成功していする．そして作成したファイルを解析し，CakePHPる．しかし，クラス図とシーケンス図はある程度のシのコードを生成する．

ステム開発の経験が無いとどう作成すればよいのかわからないことがある．

3. 1 ツール構成図

また，他の先行研究として，八木，中所らの「モデツールは Java を使って作成する．作成した画面遷

ル変換に基づくエンドユーザ主導の Web アプリケー

移図と ER 図のファイルから文字列を抽出し，抽出しション開発技法」[2] がある．この研究ではエンドユーた文字列からディレクトリやファイルを生成し，そのザが主導して，Web アプリケーションを開発するたファイルにコードを記述する．図 1 に本ツールの構めに 3 つの自動生成ツールを作成している．その 3成図を示す．

つのツールを適用することでシステム開発経験の浅いエンドユーザでも直感的に開発が行えるようにしている．この研究ではこのツールを使って汎用プログラミング言語を用いるよりも，はるかに容易に Webアプリケーションを作成することに成功している．
本研究の関連製品としては，キャノンソフトウェ
ア株式会社が作成した，「Web Performer」 [3] が存在する．この製品は GUI 操作で要件定義情報から業務用の Web アプリケーションを 100 ％自動生成できるツールであるとのことである．しかし，こちらは 1ヶ月弱の学習期間が必要であり，また製品の値段が 300万円以上するとのことなので，小さなシステム開発会社にとっては敷居が高くなってしまう．

図1

ツールの構成図3. 2 使用するモデル

3. 4 生成手順

本研究ではモデルに画面遷移図と ER 図を扱う．

本研究では上記で述べたとおり，画面遷移図と ER

画面遷移図とは画面の設計を行う際に作成される図から CakePHP のソースコードを半自動で生成すものであり，各画面の機能や画面の名前，ボタン押しる．図 2 は ER 図の一部である．

たときや処理を行った際にどの画面に遷移するかが記述されている．
そして ER 図は，和名では実体関連図と呼ばれている．システムのデータを図に表すことで，データベースを抽象的に示したものである．本研究で扱うデータベースは第 3 正規形であり，ER 図は IDEF1X 表記のものを取り扱っていく．また，ER 図は SQL に記述するテーブル名，カラム名と同じ英語表記とする．
画面遷移図と ER 図はいずれも Web アプリケーションを開発する際に作成されることが多く，理解もしやすい．
また，これらのモデリングツールとして，UML を中心としたモデリングを行うことのできる astah*を

図2

ER 図の一部扱う．画面遷移図は astah*のステートマシン図作成ツールを使い，ER 図は astah*の ER 図作成ツール

図 2 では各テーブルの名前とカラム名が記述されを用いる．本研究ではこの astah*で作成した画面遷ており，users テーブルと appointments テーブルが移図と ER 図のファイルを解析することでコードの1 対 0 以上の関係で表されている．図 2 のような ER自動生成を試みる．

図の各テーブル名やリレーションシップを参照する．
バリデーションに関しては，そのカラムが not null

3. 3 フレームワークかどうかを判別する．

本研究では Web アプリケーション開発フレーム

続いては，画面遷移図よりコントローラーとビューワークである，CakePHP 用のソースコードを生成すを生成していく．図 3 に面談予約管理システムの画面る．ソースコードは PHP や HTML，JavaScript 等の遷移図の一部示す．

言語である．CakePHP は MVC アーキテクチャに準拠しており，また多くのリレーショナルデータベース管理システムと連結できる．MVC とは Model-View-Controller の頭文字をとったものであり，Controllerにシステムの機能の処理を記述し，View に画面への出力法を記述し，Model にデータの処理を記述する．

MVC アーキテクチャを利用することで，それぞれの処理を独立させることができ，コードを均質化するこ

図3

画面遷移図の一部とができる．これらのことから本研究では CakePHPのアーキテクチャに則ったコード自動生成を試みる．

図 3 では面談タイトル一覧表示画面で面談タイトル追加ボタンを押すと面談タイトル追加画面へと遷移することが示されている．図 3 で示されているように，このままでは各画面が ER 図のどのテーブルに値するのかが不明確なため，各画面のプロパティを抽出したらどの機能のソースコードを記述するのビューに予めテーブル名を記述しておく．図 4 にプロかを決定していく．

パティビューの例を示しておく．

ソースコードを生成する際に，コメントも記述していく．例えば CakePHP の命名規則を示したり，Formヘルパーの使い方を示したり，モデル，ビュー，コントローラーの対応関係を示したりする．

4 コード生成実験
本研究では本ツールの有用性を示すために面談予
約管理システムの作成を行う．この面談予約管理シス
テムとは，学生が教員に面談を予約するときに利用するものであり，教員は面談候補日の登録，削除，編集，一覧表示機能，面談タイトルの登録，削除，一覧表示機能，面談情報の登録，削除，編集，一覧表示機能といった機能を利用することができる．学生はこの機能の一部を利用することができ，面談情報の登録，図4

プロパティビューの例

削除，編集機能を利用することができる．
この面談予約管理システムの画面遷移図と ER 図

画面遷移図からは，各画面の名前や処理を行った際の画面の遷移先を参照する．

は図 5，6 に示されている．図 5 の画面遷移図には画面数が 17 個存在し，このシステム全体の画面遷移が示されている．また，図 6 の ER 図はテーブル数は3. 5 生成されるもの4 個存在し，各テーブル間の対応関係や．カラム名が上記で述べた生成手順を踏むことで，ER 図から各記述されている．

モデルのファイルが生成され，クラス名やメソッド

本研究では画面遷移図と ER 図を作成し，そこから名，バリデーションやアソシエーション等が記述され本ツールを適用して，CakePHP のソースコードを生る．

成することでこの面談予約管理システムの作成を試み

また，画面遷移図からは各ビュー，コントローラーる．そして，複数の学生たちによって本ツールを使わのファイルが生成され，そのファイルの中に各機能ずに作成された同様の機能を持つ面談予約管理システの処理や画面を表示するためのコードが記述される．

ムのモデルやソースコードと比較することで，本ツー具体的な例としては，画面の名前に「追加」とあっルの有用性を確かめる．具体的には CakePHP の全たらビューに追加画面を表示するため add ファイル

体ファイル数，学生が変更・追加したファイル数，学を生成し，コントローラーにも add メソッドを記述

生が記述したソースコード行数，学生が作成したデーし，対応するテーブルにデータを追加する処理を記述

タベーステーブル数，画面数・遷移数等を比較する．

する．同様に，画面遷移図に「削除」とあった場合，ビューに delete ファイルを生成し，データの削除機

5 生成されるソースコード

能を搭載する．画面の名前に「一覧」と記述してあっ上記で述べたコード生成実験で生成される想定のた場合はテーブルの全てのデータを一覧で表示する，ソースコードの一部を図 7，8 に示す．図 6 の ER 図といったように，画面遷移図から文字列を読み取るこの titles テーブルから CakePHP のモデルである図 7とで，各機能を搭載する．様々なシステム開発で作成の Title.php が生成され，図 5 の画面遷移図の面談タされた画面遷移図を参照していくことで，どの文字列イトル追加画面から CakePHP のコントローラーである図 8 の TitlesController.php が生成される．

どの程度開発を円滑に進めることができるのかを検証していきたい．

6 終わりに
ER 図と画面遷移図からのコード生成ではコード生
成ではすべてのコードを自動生成できない．しかし，

参 考 文 献

コード生成のためだけにモデルに追記する情報はほ[ 1 ] 河 村 美 嗣, 浅 見 可 津 志, UML を 入 力 と す る ソ ースコード自動生成ツールの開発, 全国大会講演論文
集 第 72 回 平 成 22 年 (1), 一 般 社 団 法 人 情 報 処 理学 会, 2010, p1-337-p1-338, http://ci.nii.ac.jp/naid/110008105498#ref, 参照 (2014-7-17)[ 2 ] 八木紀幸, 中所武司, モデル変換に基づくエンド
ユ ー ザ 主 導 の Web ア プ リ ケ ー ション 開 発 技 法, 情報 処 理 学 会 研 究 報 告. ソ フ ト ウェア 工 学 研 究 会 報
告, 一 般 社 団 法 人 情 報 処 理 学 会, 2009, no.31, p81p86, http://ci.nii.ac.jp/naid/110007333794, 参照 (2014-07-17)[ 3 ] キャノ ン ソ フ ト ウェア 株 式 会 社, Web Performer, http://www.canon-soft.co.jp/product/web_performer/, 参照 (2014-07-16)[ 4 ] 株式会社ジャスミンソフト, Wagby, http://wagby.
com/, 参照 (2014-07-16)[ 5 ] 伊 賀 敏 樹, blanco Framework, http://www.
igapyon.jp/blanco/blanco.ja.html, 参 照 (201407-16)

とんどなく，フレームワークを使用する際にありがちな冗長なコーディング作業は大幅に効率化できると考えられる．またコメントも充実した雛形となっている
ので，導入がしやすく機敏に開発を行うことができると思われる．学生たちが作成した同じ面談予約管理システムと比較すると，記述されているコードは宣言の仕方やデータの取得の仕方等に統一性があり，コメントも充実しているので，他者がコードを読んでも理解がしやすいものだと思われる．
今後の展望としては，さらに多くのシステム開発で作成されたモデルとソースコードを参照し，生成できるソースコードを増やしていき，さらに実際のシステム開発にこのツールを適用してもらうことで，

図5

図6

面談予約管理システム用画面遷移図

面談予約管理システム用 ER 図

図7

図8

Title.php の一部

TitlesController.php の一部