(57)【要約】【課題】JavaScriptフレームワークを用いてWebアプリケーションのソースコードを容易に生成できるソースコード生成装置を提供する。【解決手段】ソースコード生成装置２０は、アプリケーションの構成要素を識別する識別情報と構成要素のソースコードとを含む構成要素定義情報を記憶する記憶部２１と、記憶されている構成要素定義情報のうち入力された識別情報を含む構成要素定義情報に含まれるソースコードを用いてアプリケーションのソースコードを生成する生成部２２とを備える。【選択図】図１６
2018109891.tif 000002
【特許請求の範囲】
【請求項１】
アプリケーションの構成要素を識別する識別情報と前記構成要素のソースコードとを含む構成要素定義情報を記憶する記憶部と、
記憶されている構成要素定義情報のうち入力された識別情報を含む構成要素定義情報に含まれるソースコードを用いてアプリケーションのソースコードを生成する生成部とを備える
ことを特徴とするソースコード生成装置。
【請求項２】
生成部は、アプリケーションのソースコードのテンプレートの所定の領域に構成要素定義情報に含まれるソースコードを追加することによって前記アプリケーションのソースコードを生成する
請求項１記載のソースコード生成装置。
【請求項３】
記憶部は、アプリケーションのソースコードのテンプレートを含む定義情報を記憶し、
生成部は、前記定義情報に含まれるソースコードのテンプレートを用いてアプリケーションのソースコードを生成する
請求項２記載のソースコード生成装置。
【請求項４】
生成されたアプリケーションのソースコードを出力する出力部を備える
請求項１から請求項３のうちのいずれか１項に記載のソースコード生成装置。
【請求項５】
アプリケーションの生成に関する情報である生成情報が入力される入力部を備え、
前記入力部は、入力された生成情報を生成部に入力する
請求項１から請求項４のうちのいずれか１項に記載のソースコード生成装置。
【請求項６】
生成情報には、構成要素を識別する識別情報が含まれる
請求項５記載のソースコード生成装置。
【請求項７】
アプリケーションの構成要素を識別する識別情報と前記構成要素のソースコードとを含む構成要素定義情報を記憶し、
記憶されている構成要素定義情報のうち入力された識別情報を含む構成要素定義情報に含まれるソースコードを用いてアプリケーションのソースコードを生成する
ことを特徴とするソースコード生成方法。
【請求項８】
アプリケーションのソースコードのテンプレートの所定の領域に構成要素定義情報に含まれるソースコードを追加することによって前記アプリケーションのソースコードを生成する
請求項７記載のソースコード生成方法。
【請求項９】
コンピュータに、
アプリケーションの構成要素を識別する識別情報と前記構成要素のソースコードとを含む構成要素定義情報を記憶する記憶処理、および
記憶されている構成要素定義情報のうち入力された識別情報を含む構成要素定義情報に含まれるソースコードを用いてアプリケーションのソースコードを生成する生成処理
を実行させるためのソースコード生成プログラム。
【請求項１０】
コンピュータに、
アプリケーションのソースコードのテンプレートの所定の領域に構成要素定義情報に含まれるソースコードを追加することによって前記アプリケーションのソースコードを生成する生成処理を実行させる
請求項９記載のソースコード生成プログラム。
【発明の詳細な説明】
【技術分野】
【０００１】
本発明は、ソースコード生成装置、ソースコード生成方法およびソースコード生成プログラムに関し、特にクライアント側Webアプリケーションのソースコードを生成するソースコード生成装置、ソースコード生成方法およびソースコード生成プログラムに関する。
【背景技術】
【０００２】
Webブラウザ等で動作するWebアプリケーションのソースコードは、HTML(HyperText Markup Language)、CSS(Cascading Style Sheets)、JavaScript（登録商標）等で記述されている。Webアプリケーションには、利用者（クライアント）側で動作するクライアント側Webアプリケーションがある。
【０００３】
クライアント側Webアプリケーションのソースコードには、例えばJavaScriptコードが記述されている。JavaScriptコードは、例えば、jQuery等のJavaScriptライブラリが提供する関数を呼び出すコードと、DOM(Document Object Model)を操作するコードと、アプリケーションの動作全体を制御するコードとで構成されている。
【０００４】
JavaScriptを用いて大規模で複雑なWebアプリケーションを開発するためには、膨大な量のJavaScriptコードを記述することが求められる。また、Webアプリケーションの開発者には、JavaScriptライブラリ自体やサーバと通信するための技術等に関する広範な知識も求められる。
【０００５】
よって、Webアプリケーション開発を支援する様々な技術が提供されている。例えば、特許文献１には、サーバサイドJava（登録商標）の技術が利用されたWebアプリケーションシステムにおけるサーブレット、JSP(JavaServer Pages)、およびBeanの設計および開発を支援するWebアプリケーション開発方法が記載されている。
【０００６】
また、特許文献２には、データベースに対するCRUD(Create,Read,Update,Delete)型のアプリケーションプログラム等に関するソースコードを自動生成するアプリケーション開発支援システムが記載されている。
【０００７】
また、膨大な量のJavaScriptコードの記述の負担を低減できる、JavaScriptが用いられるWebアプリケーションのソースコードの枠組みを実装するJavaScriptフレームワークが提供されている。JavaScriptフレームワークには、例えばOSS(Open Source Software)であるAngularJSやBackbone.jsが存在する。
【０００８】
JavaScriptフレームワークが使用されると、JavaScriptコードの手動での記述量が削減される。クライアント側Webアプリケーションの開発者は、JavaScriptフレームワークで規定されているルールに従ってJavaScriptコードを記述することによって、JavaScriptフレームワークを使用しない場合よりもJavaScriptコードの手動での記述量を減らした上でWebアプリケーションを開発できる。
【先行技術文献】
【特許文献】
【０００９】
【特許文献１】特開２００６−２３６３７５号公報
【特許文献２】特許第５７２７４１３号公報
【発明の概要】
【発明が解決しようとする課題】
【００１０】
しかし、JavaScriptフレームワークを使用してクライアント側WebアプリケーションのソースコードにJavaScriptコードを記述する場合であっても、依然として定型的なJavaScriptコードを冗長に記述することは求められる。
【００１１】
さらに、使用されるJavaScriptフレームワーク自体に関する技術知識も開発者には求められる。例えば、モーダルダイアログが表示されるように実装する場合、モーダルダイアログを実装するJavaScriptサービスの名称、JavaScriptサービスが含まれるJavaScriptモジュールの名称、およびJavaScriptモジュールが定義されているJavaScriptファイルの名称を理解および習得していることが開発者には求められる。
【００１２】
また、JavaScriptに関する技術知識だけでなく、HTMLファイルでJavaScriptサービスが使用されるために必須のHTMLコード等も理解および習得していることが開発者には求められる。
【００１３】
［発明の目的］
そこで、本発明は、上述した課題を解決する、JavaScriptフレームワークを用いてWebアプリケーションのソースコードを容易に生成できるソースコード生成装置、ソースコード生成方法およびソースコード生成プログラムを提供することを目的とする。
【課題を解決するための手段】
【００１４】
本発明によるソースコード生成装置は、アプリケーションの構成要素を識別する識別情報と構成要素のソースコードとを含む構成要素定義情報を記憶する記憶部と、記憶されている構成要素定義情報のうち入力された識別情報を含む構成要素定義情報に含まれるソースコードを用いてアプリケーションのソースコードを生成する生成部とを備えることを特徴とする。
【００１５】
本発明によるソースコード生成方法は、アプリケーションの構成要素を識別する識別情報と構成要素のソースコードとを含む構成要素定義情報を記憶し、記憶されている構成要素定義情報のうち入力された識別情報を含む構成要素定義情報に含まれるソースコードを用いてアプリケーションのソースコードを生成することを特徴とする。
【００１６】
本発明によるソースコード生成プログラムは、コンピュータに、アプリケーションの構成要素を識別する識別情報と構成要素のソースコードとを含む構成要素定義情報を記憶する記憶処理、および記憶されている構成要素定義情報のうち入力された識別情報を含む構成要素定義情報に含まれるソースコードを用いてアプリケーションのソースコードを生成する生成処理を実行させることを特徴とする。
【発明の効果】
【００１７】
本発明によれば、JavaScriptフレームワークを用いてWebアプリケーションのソースコードを容易に生成できる。
【図面の簡単な説明】
【００１８】
【図１】本発明によるソースコード生成システム１０の第１の実施形態の構成例を示すブロック図である。
【図２】入力装置１００を介したクライアント側Webアプリケーションの構成要素の指定処理の例を示す説明図である。
【図３】構成要素変換定義記憶部３３０に記憶されている構成要素変換定義の例を示す説明図である。
【図４】第１の実施形態のソースコード生成システム１０によるソースコード生成処理の動作を示すフローチャートである。
【図５】構成要素変換定義記憶部３３０に記憶されている構成要素変換定義の他の例を示す説明図である。
【図６】JavaScriptコード表示部４１０が表示するJavaScriptコードの例を示す説明図である。
【図７】HTMLコード表示部４２０が表示するHTMLコードの例を示す説明図である。
【図８】構成要素変換定義記憶部３３０に記憶されている構成要素変換定義の他の例を示す説明図である。
【図９】JavaScriptコード表示部４１０が表示するJavaScriptコードの他の例を示す説明図である。
【図１０】HTMLコード表示部４２０が表示するHTMLコードの他の例を示す説明図である。
【図１１】構成要素変換定義記憶部３３０に記憶されている構成要素変換定義の他の例を示す説明図である。
【図１２】JavaScriptコード表示部４１０が表示するJavaScriptコードの他の例を示す説明図である。
【図１３】構成要素変換定義記憶部３３０に記憶されている構成要素変換定義の他の例を示す説明図である。
【図１４】JavaScriptコード表示部４１０が表示するJavaScriptコードの他の例を示す説明図である。
【図１５】HTMLコード表示部４２０が表示するHTMLコードの他の例を示す説明図である。
【図１６】本発明によるソースコード生成装置の概要を示すブロック図である。
【発明を実施するための形態】
【００１９】
実施形態１．
［構成の説明］
以下、本発明の実施形態を、図面を参照して説明する。図１は、本発明によるソースコード生成システム１０の第１の実施形態の構成例を示すブロック図である。なお、本実施形態では、JavaScriptフレームワークとしてAngularJSが使用されている。
【００２０】
本実施形態のソースコード生成システム１０は、クライアント側Webアプリケーションのソースコードを生成するシステムである。図１に示すように、本実施形態のソースコード生成システム１０は、入力装置１００と、ソースコード生成処理装置２００と、記憶装置３００と、出力装置４００とを含む。
【００２１】
入力装置１００は、モジュール生成指示部１１０と、構成要素生成指示部１２０とを有する。入力装置１００は、ソースコード生成処理装置２００と通信可能に接続されている。
【００２２】
開発者は、クライアント側Webアプリケーションの生成に要する情報を、入力装置１００に入力する。具体的には、開発者は、入力装置１００のモジュール生成指示部１１０と構成要素生成指示部１２０とを介して、生成目的のWebアプリケーションの構成要素と、構成要素の生成に要する追加情報とを指定する。すなわち、入力装置１００は、開発者がクライアント側Webアプリケーションの構成要素を指定可能な手段を有する。
【００２３】
モジュール生成指示部１１０は、開発者からの入力に応じて、クライアント側Webアプリケーションの生成の開始を指示する機能を有する。モジュール生成指示部１１０は、例えばGUI(Graphical User Interface)やCUI(Character User Interface)等のユーザインタフェースで実現される。
【００２４】
開発者は、対話型画面やコマンドパラメータ等を介して、クライアント側Webアプリケーションであるモジュールの生成の開始に要する情報をモジュール生成指示部１１０に入力する。
【００２５】
構成要素生成指示部１２０は、開発者からの入力に応じて、クライアント側Webアプリケーションの構成要素の生成の開始を指示する機能を有する。構成要素生成指示部１２０は、例えばGUIやCUI等のユーザインタフェースで実現される。
【００２６】
なお、本実施形態の構成要素は、Webアプリケーションが提供するサービスやWebアプリケーションで表示される画面等の、Webアプリケーションに実装される要素全般を意味する。構成要素は、ソースコードを基に実現される要素であれば、Webアプリケーションのどのような要素でもよい。
【００２７】
開発者は、対話型画面やコマンドパラメータ等を介して、クライアント側Webアプリケーションの構成要素の生成の開始に要する情報を構成要素生成指示部１２０に入力する。
【００２８】
図２は、入力装置１００を介したクライアント側Webアプリケーションの構成要素の指定処理の例を示す説明図である。図２に示す例では、モジュール生成指示部１１０がGUIで実現されている。なお、図２に示す二重線の矩形は、入力領域を表す。
【００２９】
例えば、図２に示す「モジュール作成」ボタンは、モジュール生成指示部１１０を実現するGUIの一例である。「モジュール作成」ボタンがクリックされると、ダイアログＵ４１が表示される。開発者は、ダイアログＵ４１を介してモジュール名とコントローラ名を入力する。なお、コントローラは、MVC(Model View Controller)モデルにおけるコントローラに相当する。
【００３０】
また、図２に示す、構成要素生成指示の領域に存在する「モーダルダイアログ」ボタン、「RESTful通信」ボタン、「表形式」ボタン等は、構成要素生成指示部１２０を実現するGUIの一例である。
【００３１】
GUIのボタンやアイコンは、例えばWebアプリケーションの構成要素の種別数だけ表示される。開発者は、生成するWebアプリケーションの構成要素の種別に対応するボタンを、例えばWebアプリケーションの生成に要する数だけクリックする。
【００３２】
ソースコード生成処理装置２００は、JavaScriptコード生成部２１０と、HTMLコード生成部２２０とを有する。ソースコード生成処理装置２００は、記憶装置３００および出力装置４００と通信可能に接続されている。
【００３３】
JavaScriptコード生成部２１０は、構成要素変換定義記憶部３３０に記憶されている構成要素変換定義を用いて、指定されたWebアプリケーションの構成要素に対応するJavaScriptコードを生成する。
【００３４】
また、HTMLコード生成部２２０は、構成要素変換定義記憶部３３０に記憶されている構成要素変換定義を用いて、指定されたWebアプリケーションの構成要素に対応するHTMLコードを生成する。すなわち、ソースコード生成処理装置２００は、指定されたクライアント側Webアプリケーションの構成要素に対応するJavaScriptコードおよびHTMLコードを生成する手段を有する。
【００３５】
JavaScriptコード生成部２１０は、WebアプリケーションであるモジュールのソースコードであるJavaScriptコードを生成する機能を有する。JavaScriptコード生成部２１０は、モジュール生成指示部１１０から入力された入力情報、および構成要素生成指示部１２０から入力された入力情報を基に、構成要素変換定義記憶部３３０に記憶されている構成要素変換定義を用いてJavaScriptコードを生成する。
【００３６】
HTMLコード生成部２２０は、Webアプリケーションが表示されるHTMLページのソースコードであるHTMLコードを生成する機能を有する。HTMLコード生成部２２０は、モジュール生成指示部１１０から入力された入力情報、および構成要素生成指示部１２０から入力された入力情報を基に、構成要素変換定義記憶部３３０に記憶されている構成要素変換定義を用いてHTMLコードを生成する。
【００３７】
記憶装置３００は、JavaScriptコード記憶部３１０と、HTMLコード記憶部３２０と、構成要素変換定義記憶部３３０とを有する。記憶装置３００は、出力装置４００と通信可能に接続されている。
【００３８】
JavaScriptコード記憶部３１０は、JavaScriptコード生成部２１０が生成したJavaScriptコードを記憶する機能を有する。
【００３９】
HTMLコード記憶部３２０は、HTMLコード生成部２２０が生成したHTMLコードを記憶する機能を有する。
【００４０】
構成要素変換定義記憶部３３０は、構成要素変換定義を記憶する機能を有する。構成要素変換定義には、JavaScriptコードおよびHTMLコードの生成に要する定義が記載されている。構成要素変換定義記憶部３３０には、Webアプリケーションの各構成要素に関する構成要素変換定義が記憶されている。
【００４１】
図３は、構成要素変換定義記憶部３３０に記憶されている構成要素変換定義の例を示す説明図である。図３に示すように、構成要素変換定義は、「構成要素名」と、「JavaScript・HTMLコード」と、「サービス名」と、「定義モジュール名」と、「JavaScriptファイルパス名」と、「CSSファイルパス名」とで構成されている。
【００４２】
「構成要素名」は、Webアプリケーションの構成要素の名称である。また、「JavaScript・HTMLコード」は、構成要素名が示す構成要素の生成が指示された時に使用されるソースコードである。
【００４３】
また、「サービス名」は、「JavaScript・HTMLコード」に記載されているJavaScriptコードで使用されるJavaScriptサービスの名称である。また、「定義モジュール名」は、「サービス名」に記載されているJavaScriptサービスの名称が定義されているJavaScriptサービス定義モジュールの名称である。
【００４４】
また、「JavaScriptファイルパス名」は、「定義モジュール名」が示すJavaScriptサービス定義モジュールが含まれているJavaScriptファイルが存在するパスの名称である。また、「CSSファイルパス名」は、「JavaScriptファイルパス名」が示すパスに存在するJavaScriptファイルに関連するCSSファイルが存在するパスの名称である。
【００４５】
出力装置４００は、JavaScriptコード表示部４１０と、HTMLコード表示部４２０とを有する。
【００４６】
JavaScriptコード表示部４１０は、JavaScriptコードを表示する機能を有する。JavaScriptコード表示部４１０は、JavaScriptコード記憶部３１０に記憶されているJavaScriptコードをJavaScriptコード記憶部３１０から取り出し、取り出されたJavaScriptコードを表示する。また、JavaScriptコード表示部４１０は、JavaScriptコード生成部２１０から入力されたJavaScriptコードを表示する。
【００４７】
HTMLコード表示部４２０は、HTMLコードを表示する機能を有する。HTMLコード表示部４２０は、HTMLコード記憶部３２０に記憶されているHTMLコードをHTMLコード記憶部３２０から取り出し、取り出されたHTMLコードを表示する。また、HTMLコード表示部４２０は、HTMLコード生成部２２０から入力されたHTMLコードを表示する。
【００４８】
本実施形態のソースコード生成システム１０を使用する開発者は、入力装置１００に単純な指示を与えるだけで、クライアント側Webアプリケーションの生成に要する殆どのJavaScriptコードおよびHTMLコードを生成できる。
【００４９】
例えば、JavaScriptコード生成部２１０は、モジュール生成指示部１１０、または構成要素生成指示部１２０から受け取ったWebアプリケーションの構成要素名を基に、構成要素変換定義記憶部３３０に記憶されている対象の構成要素変換定義を検索する。
【００５０】
構成要素名が含まれる構成要素変換定義が示す情報を基に、JavaScriptコード生成部２１０は、JavaScriptコードを生成する。生成されたJavaScriptコードは、JavaScriptコード記憶部３１０に記憶される。
【００５１】
同様の方法で、HTMLコード生成部２２０は、HTMLコードを生成する。生成されたHTMLコードは、HTMLコード記憶部３２０に記憶される。よって、開発者は、手動でのコード記述量をJavaScriptフレームワークが使用される場合よりもさらに削減すると共に、使用されるJavaScriptフレームワークに関する技術知識を習得する作業を減らすことができる。
【００５２】
［動作の説明］
以下、本実施形態のソースコード生成システム１０のソースコードを生成する動作を図４を参照して説明する。図４は、第１の実施形態のソースコード生成システム１０によるソースコード生成処理の動作を示すフローチャートである。
【００５３】
開発者は、最初にモジュール生成指示部１１０にモジュール生成の開始を示す情報を入力する（ステップS101）。図２に示す例であれば、開発者は、入力装置１００における「モジュール生成」ボタンをクリックする。
【００５４】
「モジュール生成」ボタンがクリックされると、図２に示すダイアログＵ４１が表示される。開発者は、ダイアログＵ４１における「モジュール名」入力領域にモジュール名を、「コントローラ名」入力領域にコントローラ名をそれぞれ入力する。入力した後、開発者は、ダイアログＵ４１における「実行」ボタンをクリックする。
【００５５】
ステップS101でモジュール生成指示部１１０にモジュール生成の開始を示す情報が入力されると、JavaScriptコード生成部２１０と、HTMLコード生成部２２０がそれぞれ呼び出される。例えば、ダイアログＵ４１における「実行」ボタンがクリックされると、JavaScriptコード生成部２１０と、HTMLコード生成部２２０がそれぞれ呼び出される。
【００５６】
呼び出されたJavaScriptコード生成部２１０には、図２に示すダイアログＵ４１に開発者が入力した「モジュール名」と「コントローラ名」とが入力される。JavaScriptコード生成部２１０は、構成要素変換定義記憶部３３０に記憶されている構成要素変換定義のうち対象の構成要素変換定義を検索する。
【００５７】
ステップS102でJavaScriptコード生成部２１０は、図５に示すような構成要素名が「モジュール生成」である構成要素変換定義を検索する。図５は、構成要素変換定義記憶部３３０に記憶されている構成要素変換定義の他の例を示す説明図である。図５には、構成要素名が「モジュール生成」である構成要素変換定義のみが示されている。
【００５８】
JavaScriptコード生成部２１０は、検索された構成要素変換定義の「JavaScript・HTMLコード」に記載されている、[ControllerCode]の下に定義されているJavaScriptの断片コードをJavaScriptコード記憶部３１０に格納する（ステップS102）。また、JavaScriptコード生成部２１０は、格納されたJavaScriptの断片コードを出力装置４００のJavaScriptコード表示部４１０にも出力する。
【００５９】
JavaScriptコード表示部４１０は、図６に示すJavaScriptコードＪＳ１を表示する。図６は、JavaScriptコード表示部４１０が表示するJavaScriptコードの例を示す説明図である。
【００６０】
同様に、呼び出されたHTMLコード生成部２２０には、図２に示すダイアログＵ４１に開発者が入力した「モジュール名」と「コントローラ名」とが入力される。HTMLコード生成部２２０は、構成要素変換定義記憶部３３０に記憶されている構成要素変換定義のうち対象の構成要素変換定義を検索する。
【００６１】
ステップS102でHTMLコード生成部２２０は、図５に示すような構成要素名が「モジュール生成」である構成要素変換定義を検索する。HTMLコード生成部２２０は、検索された構成要素変換定義の「JavaScript・HTMLコード」に記載されている、[HTMLCode]の下に定義されているHTMLの断片コードをHTMLコード記憶部３２０に格納する（ステップS102）。また、HTMLコード生成部２２０は、格納されたHTMLの断片コードを出力装置４００のHTMLコード表示部４２０にも出力する。
【００６２】
HTMLコード表示部４２０は、図７に示すHTMLコードＨＴ１を表示する。図７は、HTMLコード表示部４２０が表示するHTMLコードの例を示す説明図である。すなわち、開発者は、生成されたソースコードを出力装置４００で確認できる。
【００６３】
なお、図６および図７に示す<モジュール名>の箇所には、開発者が図２に示すダイアログＵ４１に入力した「モジュール名」が入る。また、図６および図７に示す<コントローラ名>の箇所には、開発者が図２に示すダイアログＵ４１に入力した「コントローラ名」が入る。
【００６４】
次いで、開発者は、構成要素生成指示部１２０にクライアント側Webアプリケーションの構成要素の生成の開始を示す情報を入力する（ステップS103）。図２に示す例であれば、開発者は、入力装置１００の構成要素生成指示の領域における構成要素生成指示部１２０を実現したGUIのボタンのうちのいずれかのボタンをクリックする。
【００６５】
開発者は、最初に構成要素生成指示の領域における「モーダルダイアログ」ボタンをクリックする。「モーダルダイアログ」ボタンがクリックされると、JavaScriptコード生成部２１０は、構成要素変換定義記憶部３３０に記憶されている構成要素変換定義のうち、構成要素名が開発者が指定した「モーダルダイアログ」である構成要素変換定義を検索する。
【００６６】
図８は、構成要素変換定義記憶部３３０に記憶されている構成要素変換定義の他の例を示す説明図である。図８には、構成要素名が「モーダルダイアログ」である構成要素変換定義のみが示されている。すなわち、JavaScriptコード生成部２１０は、図８に示すような構成要素変換定義を検索する。
【００６７】
JavaScriptコード生成部２１０は、構成要素名が「モーダルダイアログ」である構成要素変換定義の「JavaScript・HTMLコード」に[ControllerCode]が記載されているか否かを確認する。
【００６８】
図８に示す「JavaScript・HTMLコード」には[ControllerCode]が記載されているため、JavaScriptコード生成部２１０は、[ControllerCode]の下に定義されているJavaScriptの断片コードを抽出する。JavaScriptコード生成部２１０は、抽出されたJavaScriptの断片コードを、JavaScriptコード記憶部３１０に記憶されているJavaScriptコードのmyapp.controllerの定義に追加する。
【００６９】
図９は、JavaScriptコード表示部４１０が表示するJavaScriptコードの他の例を示す説明図である。図９に示すJavaScriptコードＪＳ２が、JavaScriptコード記憶部３１０に記憶されているJavaScriptコードである。また、図９に示すJavaScriptの断片コードＡＣ１が、myapp.controllerの定義に追加されたJavaScriptコードである。
【００７０】
次いで、JavaScriptコード生成部２１０は、構成要素名が「モーダルダイアログ」である構成要素変換定義の「JavaScript・HTMLコード」に[ModuleCode]が記載されているか否かを確認する。図８に示す「JavaScript・HTMLコード」には[ModuleCode]が記載されているため、JavaScriptコード生成部２１０は、[ModuleCode]の下に定義されているJavaScriptの断片コードを抽出する。
【００７１】
JavaScriptコード生成部２１０は、抽出されたJavaScriptの断片コードを、JavaScriptコード記憶部３１０に記憶されているJavaScriptコードの末尾に追加する。図９に示すJavaScriptの断片コードＡＣ２が、JavaScriptコードＪＳ２の末尾に追加されたJavaScriptコードである。
【００７２】
次いで、JavaScriptコード生成部２１０は、構成要素名が「モーダルダイアログ」である構成要素変換定義の「サービス名」に文字列が記載されているか否かを確認する。図８に示す「サービス名」には文字列が記載されているため、JavaScriptコード生成部２１０は、記載されている文字列を抽出する。
【００７３】
JavaScriptコード生成部２１０は、抽出された文字列を、JavaScriptコード記憶部３１０に記憶されているJavaScriptコードのmyapp.controllerの定義の引数に追加する。図９に示すJavaScriptコードＪＳ２のmyapp.controllerの定義の引数ＡＣ３内の下線が付された引数が、追加された文字列である。
【００７４】
次いで、JavaScriptコード生成部２１０は、構成要素名が「モーダルダイアログ」である構成要素変換定義の「定義モジュール名」に文字列が記載されているか否かを確認する。図８に示す「定義モジュール名」には文字列が記載されているため、JavaScriptコード生成部２１０は、記載されている文字列を抽出する。
【００７５】
JavaScriptコード生成部２１０は、抽出された文字列を、JavaScriptコード記憶部３１０に記憶されているJavaScriptコードのangular.moduleメソッドの引数に追加する。図９に示すJavaScriptコードＪＳ２のangular.moduleメソッドの引数ＡＣ４が、追加された文字列である。
【００７６】
次いで、JavaScriptコード生成部２１０は、出力装置４００のJavaScriptコード表示部４１０に、JavaScriptコード記憶部３１０に記憶されているJavaScriptコードを出力する（ステップS104）。結果的に、JavaScriptコード表示部４１０は、図９に示すJavaScriptコードＪＳ２を表示する。
【００７７】
次いで、HTMLコード生成部２２０は、構成要素変換定義記憶部３３０に記憶されている構成要素変換定義のうち、構成要素名が開発者が指定した「モーダルダイアログ」である構成要素変換定義を検索する。すなわち、HTMLコード生成部２２０も、図８に示すような構成要素変換定義を検索する。
【００７８】
HTMLコード生成部２２０は、構成要素名が「モーダルダイアログ」である構成要素変換定義の「JavaScript・HTMLコード」に[HTMLCode]が記載されているか否かを確認する。図８に示す「JavaScript・HTMLコード」には[HTMLCode]が記載されていないため、HTMLコード生成部２２０は、次の処理を行う。
【００７９】
次いで、HTMLコード生成部２２０は、構成要素名が「モーダルダイアログ」である構成要素変換定義の「JavaScriptファイルパス名」に文字列が記載されているか否かを確認する。
【００８０】
図８に示す「JavaScriptファイルパス名」には文字列が記載されているため、HTMLコード生成部２２０は、記載されている文字列を抽出する。HTMLコード生成部２２０は、抽出された文字列を、HTMLコード記憶部３２０に記憶されているHTMLコードのhead要素の子要素の末尾に追加する。
【００８１】
図１０は、HTMLコード表示部４２０が表示するHTMLコードの他の例を示す説明図である。図１０に示すHTMLコードＨＴ２が、HTMLコード記憶部３２０に記憶されているHTMLコードである。また、図１０に示すHTMLコードのhead要素の子要素ＡＣ６が、追加された文字列である。
【００８２】
次いで、HTMLコード生成部２２０は、構成要素名が「モーダルダイアログ」である構成要素変換定義の「CSSファイルパス名」に文字列が記載されているか否かを確認する。図８に示す「CSSファイルパス名」には文字列が記載されているため、HTMLコード生成部２２０は、記載されている文字列を抽出する。
【００８３】
HTMLコード生成部２２０は、抽出された文字列を、HTMLコード記憶部３２０に記憶されているHTMLコードのhead要素の子要素としてtitle要素の下に追加する。図１０に示すHTMLコードのhead要素の子要素ＡＣ５が、追加された文字列である。
【００８４】
次いで、HTMLコード生成部２２０は、出力装置４００のHTMLコード表示部４２０に、HTMLコード記憶部３２０に記憶されているHTMLコードを出力する（ステップS105）。結果的に、HTMLコード表示部４２０は、図１０に示すHTMLコードＨＴ２を表示する。
【００８５】
追加で生成されるクライアント側Webアプリケーションの構成要素がある場合（ステップS106におけるYes）、ソースコード生成システム１０は、再度ステップS103の処理を行う。次に、開発者は、構成要素として「RESTful通信」を追加で生成する。
【００８６】
開発者は、図２に示す構成要素生成指示の領域における「RESTful通信」ボタンをクリックする（ステップS103）。「RESTful通信」ボタンがクリックされると、JavaScriptコード生成部２１０は、構成要素変換定義記憶部３３０に記憶されている構成要素変換定義のうち、構成要素名が開発者が指定した「RESTful通信」である構成要素変換定義を検索する。
【００８７】
図１１は、構成要素変換定義記憶部３３０に記憶されている構成要素変換定義の他の例を示す説明図である。図１１には、構成要素名が「RESTful通信」である構成要素変換定義のみが示されている。すなわち、JavaScriptコード生成部２１０は、図１１に示すような構成要素変換定義を検索する。
【００８８】
JavaScriptコード生成部２１０は、構成要素名が「RESTful通信」である構成要素変換定義の「JavaScript・HTMLコード」に[ControllerCode]が記載されているか否かを確認する。図１１に示す「JavaScript・HTMLコード」には[ControllerCode]が記載されていないため、JavaScriptコード生成部２１０は、次の処理を行う。
【００８９】
次いで、JavaScriptコード生成部２１０は、構成要素名が「RESTful通信」である構成要素変換定義の「JavaScript・HTMLコード」に[ModuleCode]が記載されているか否かを確認する。
【００９０】
図１１に示す「JavaScript・HTMLコード」には[ModuleCode]が記載されているため、JavaScriptコード生成部２１０は、[ModuleCode]の下に定義されているJavaScriptの断片コードを抽出する。JavaScriptコード生成部２１０は、抽出されたJavaScriptの断片コードを、JavaScriptコード記憶部３１０に記憶されているJavaScriptコードの末尾に追加する。
【００９１】
図１２は、JavaScriptコード表示部４１０が表示するJavaScriptコードの他の例を示す説明図である。図１２に示すJavaScriptコードＪＳ３が、JavaScriptコード記憶部３１０に記憶されているJavaScriptコードである。また、図１２に示すJavaScriptの断片コードＡＣ７が、JavaScriptコードＪＳ３の末尾に追加されたJavaScriptコードである。
【００９２】
次いで、JavaScriptコード生成部２１０は、構成要素名が「RESTful通信」である構成要素変換定義の「サービス名」に文字列が記載されているか否かを確認する。図１１に示す「サービス名」には文字列が記載されているため、JavaScriptコード生成部２１０は、記載されている文字列を抽出する。
【００９３】
JavaScriptコード生成部２１０は、抽出された文字列を、JavaScriptコード記憶部３１０に記憶されているJavaScriptコードのmyapp.controllerの定義の引数に追加する。図１２に示すJavaScriptコードＪＳ３のmyapp.controllerの定義の引数ＡＣ８が、追加された文字列である。
【００９４】
次いで、JavaScriptコード生成部２１０は、構成要素名が「RESTful通信」である構成要素変換定義の「定義モジュール名」に文字列が記載されているか否かを確認する。図１１に示す「定義モジュール名」には文字列が記載されていないため、JavaScriptコード生成部２１０は、次の処理を行う。
【００９５】
次いで、JavaScriptコード生成部２１０は、出力装置４００のJavaScriptコード表示部４１０に、JavaScriptコード記憶部３１０に記憶されているJavaScriptコードを出力する（ステップS104）。結果的に、JavaScriptコード表示部４１０は、図１２に示すJavaScriptコードＪＳ３を表示する。
【００９６】
次いで、HTMLコード生成部２２０は、構成要素変換定義記憶部３３０に記憶されている構成要素変換定義のうち、構成要素名が開発者が指定した「RESTful通信」である構成要素変換定義を検索する。すなわち、HTMLコード生成部２２０も、図１１に示すような構成要素変換定義を検索する。
【００９７】
HTMLコード生成部２２０は、構成要素名が「RESTful通信」である構成要素変換定義の「JavaScript・HTMLコード」に[HTMLCode]が記載されているか否かを確認する。図１１に示す「JavaScript・HTMLコード」には[HTMLCode]が記載されていないため、HTMLコード生成部２２０は、次の処理を行う。
【００９８】
次いで、HTMLコード生成部２２０は、構成要素名が「RESTful通信」である構成要素変換定義の「JavaScriptファイルパス名」に文字列が記載されているか否かを確認する。図１１に示す「JavaScriptファイルパス名」には文字列が記載されていないため、HTMLコード生成部２２０は、次の処理を行う。
【００９９】
次いで、HTMLコード生成部２２０は、構成要素名が「RESTful通信」である構成要素変換定義の「CSSファイルパス名」に文字列が記載されているか否かを確認する。図１１に示す「CSSファイルパス名」には文字列が記載されていないため、HTMLコード生成部２２０は、次の処理を行う。
【０１００】
次いで、HTMLコード生成部２２０は、出力装置４００のHTMLコード表示部４２０に、HTMLコード記憶部３２０に記憶されているHTMLコードを出力する（ステップS105）。本処理では結果的に、HTMLコード生成部２２０は、HTMLコード記憶部３２０に記憶されているHTMLコードの内容を書き換えない。
【０１０１】
追加で生成されるクライアント側Webアプリケーションの構成要素がある場合（ステップS106におけるYes）、ソースコード生成システム１０は、再度ステップS103の処理を行う。次に、開発者は、構成要素として「表形式」を追加で生成する。
【０１０２】
開発者は、図２に示す構成要素生成指示の領域における構成要素生成指示部１２０を実現したGUIの１つである「表形式」ボタンをクリックする（ステップS103）。図２に示すように、「表形式」ボタンがクリックされると、ダイアログＵ４２が表示される。
【０１０３】
ダイアログＵ４２が表示された後、開発者は、「列数」入力領域に生成する表の列数を入力し、「決定」ボタンをクリックする。「決定」ボタンがクリックされると、「列数」入力領域に入力された列数だけ「列名」入力領域が表示される。開発者は、各「列名」入力領域に列名をそれぞれ入力し、「実行」ボタンをクリックする。
【０１０４】
「実行」ボタンがクリックされると、JavaScriptコード生成部２１０は、構成要素変換定義記憶部３３０に記憶されている構成要素変換定義のうち、構成要素名が開発者が指定した「表形式」である構成要素変換定義を検索する。
【０１０５】
図１３は、構成要素変換定義記憶部３３０に記憶されている構成要素変換定義の他の例を示す説明図である。図１３には、構成要素名が「表形式」である構成要素変換定義のみが示されている。すなわち、JavaScriptコード生成部２１０は、図１３に示すような構成要素変換定義を検索する。
【０１０６】
JavaScriptコード生成部２１０は、構成要素名が「表形式」である構成要素変換定義の「JavaScript・HTMLコード」に[ControllerCode]が記載されているか否かを確認する。
【０１０７】
図１３に示す「JavaScript・HTMLコード」には[ControllerCode]が記載されているため、JavaScriptコード生成部２１０は、[ControllerCode]の下に定義されているJavaScriptの断片コードを抽出する。JavaScriptコード生成部２１０は、抽出されたJavaScriptの断片コードを、JavaScriptコード記憶部３１０に記憶されているJavaScriptコードのmyapp.controllerの定義に追加する。
【０１０８】
なお、図１３に示すように、[ControllerCode]の下の定義文字列には、「%ColLoopStart%」と「%ColLoopEnd%」が含まれている。JavaScriptコード生成部２１０は、「%ColLoopStart%」から「%ColLoopEnd%」までの定義文字列を、ダイアログＵ４２で開発者が指定した列数だけ繰り返し生成する。
【０１０９】
また、「%ColLoopStart%」から「%ColLoopEnd%」までの定義文字列に含まれる<n>には、１以上の整数であるループカウンタが入る。また、定義文字列に含まれる<列名>には、ダイアログＵ４２で開発者が指定した列名が順に入る。
【０１１０】
図１４は、JavaScriptコード表示部４１０が表示するJavaScriptコードの他の例を示す説明図である。図１４に示すJavaScriptコードＪＳ４が、JavaScriptコード記憶部３１０に記憶されているJavaScriptコードである。また、図１４に示すJavaScriptの断片コードＡＣ９が、myapp.controllerの定義に追加されたJavaScriptコードである。
【０１１１】
次いで、JavaScriptコード生成部２１０は、構成要素名が「表形式」である構成要素変換定義の「JavaScript・HTMLコード」に[ModuleCode]が記載されているか否かを確認する。図１３に示す「JavaScript・HTMLコード」には[ModuleCode]が記載されていないため、JavaScriptコード生成部２１０は、次の処理を行う。
【０１１２】
次いで、JavaScriptコード生成部２１０は、構成要素名が「表形式」である構成要素変換定義の「サービス名」に文字列が記載されているか否かを確認する。図１３に示す「サービス名」には文字列が記載されていないため、JavaScriptコード生成部２１０は、次の処理を行う。
【０１１３】
次いで、JavaScriptコード生成部２１０は、構成要素名が「表形式」である構成要素変換定義の「定義モジュール名」に文字列が記載されているか否かを確認する。図１３に示す「定義モジュール名」には文字列が記載されているため、JavaScriptコード生成部２１０は、記載されている文字列を抽出する。
【０１１４】
JavaScriptコード生成部２１０は、抽出された文字列を、JavaScriptコード記憶部３１０に記憶されているJavaScriptコードのangular.moduleメソッドの引数に追加する。図１４に示すJavaScriptコードＪＳ４のangular.moduleメソッドの引数ＡＣ１０が、追加された文字列である。
【０１１５】
次いで、JavaScriptコード生成部２１０は、出力装置４００のJavaScriptコード表示部４１０に、JavaScriptコード記憶部３１０に記憶されているJavaScriptコードを出力する（ステップS104）。結果的に、JavaScriptコード表示部４１０は、図１４に示すJavaScriptコードＪＳ４を表示する。
【０１１６】
次いで、HTMLコード生成部２２０は、構成要素変換定義記憶部３３０に記憶されている構成要素変換定義のうち、構成要素名が開発者が指定した「表形式」である構成要素変換定義を検索する。すなわち、HTMLコード生成部２２０も、図１３に示すような構成要素変換定義を検索する。
【０１１７】
HTMLコード生成部２２０は、構成要素名が「表形式」である構成要素変換定義の「JavaScript・HTMLコード」に[HTMLCode]が記載されているか否かを確認する。
【０１１８】
図１３に示す「JavaScript・HTMLコード」には[HTMLCode]が記載されているため、HTMLコード生成部２２０は、[HTMLCode]の下に定義されているHTMLの断片コードを抽出する。HTMLコード生成部２２０は、抽出されたHTMLの断片コードを、HTMLコード記憶部３２０に記憶されているHTMLコードのbody要素の子要素として追加する。
【０１１９】
図１５は、HTMLコード表示部４２０が表示するHTMLコードの他の例を示す説明図である。図１５に示すHTMLコードＨＴ４が、HTMLコード記憶部３２０に記憶されているHTMLコードである。また、図１５に示すHTMLコードのbody要素の子要素ＡＣ１１が、追加されたHTMLの断片コードである。
【０１２０】
次いで、HTMLコード生成部２２０は、構成要素名が「表形式」である構成要素変換定義の「JavaScriptファイルパス名」に文字列が記載されているか否かを確認する。図１３に示す「JavaScriptファイルパス名」には文字列が記載されているため、HTMLコード生成部２２０は、記載されている文字列を抽出する。
【０１２１】
HTMLコード生成部２２０は、抽出された文字列を、HTMLコード記憶部３２０に記憶されているHTMLコードのhead要素の子要素の末尾に追加する。図１５に示すHTMLコードのhead要素の子要素ＡＣ１２が、追加された文字列である。
【０１２２】
次いで、HTMLコード生成部２２０は、構成要素名が「表形式」である構成要素変換定義の「CSSファイルパス名」に文字列が記載されているか否かを確認する。図１３に示す「CSSファイルパス名」には文字列が記載されているため、HTMLコード生成部２２０は、記載されている文字列を抽出する。
【０１２３】
HTMLコード生成部２２０は、抽出された文字列を、HTMLコード記憶部３２０に記憶されているHTMLコードのhead要素の子要素としてtitle要素の下に追加する。図１５に示すHTMLコードのhead要素の子要素ＡＣ１３が、追加された文字列である。
【０１２４】
次いで、HTMLコード生成部２２０は、出力装置４００のHTMLコード表示部４２０に、HTMLコード記憶部３２０に記憶されているHTMLコードを出力する（ステップS105）。結果的に、HTMLコード表示部４２０は、図１５に示すHTMLコードＨＴ４を表示する。
【０１２５】
以上でクライアント側Webアプリケーションの構成要素が全て生成されたため、追加で生成される構成要素は存在しない（ステップS106におけるNo）。構成要素を全て生成した後、ソースコード生成システム１０は、ソースコード生成処理を終了する。
【０１２６】
［効果の説明］
本実施形態のソースコード生成システム１０を使用する開発者は、大規模なWebアプリケーションを比較的少ない作業時間で開発できる。その理由は、ソースコード生成処理装置２００が指定された内容に従ってソースコードを生成するので、開発者が手動でJavaScriptコード等を記述する量が削減されるためである。
【０１２７】
また、本実施形態のソースコード生成システム１０を使用する開発者は、JavaScriptコードの記載誤りを削減できる。その理由は、ソースコード生成処理装置２００が生成するJavaScriptコードには典型的な設定値が予め記述されており、開発者のキータイプミスや思い違いによりJavaScriptライブラリの関数等に対してエラーが発生する値の入力が防止されるためである。
【０１２８】
また、使用するJavaScriptフレームワークの技術知識が比較的少ない開発者も、本実施形態のソースコード生成システム１０を使用すれば、大規模なクライアント側Webアプリケーションを開発できる。一般的にJavaScriptフレームワークの提供されているマニュアルは、API(Application Programming Interface)マニュアルのみである。
【０１２９】
APIマニュアルは、Webアプリケーションの構成要素を実現するJavaScriptサービスを既に把握している開発者にとって有用なマニュアルである。しかし、Webアプリケーションの構成要素を実現するJavaScriptサービスが分からないような知識の乏しい開発者にとって、APIマニュアルは、扱いづらいマニュアルである。
【０１３０】
知識の乏しい開発者がAPIマニュアルを使いこなすためには、JavaScriptフレームワークに関する書籍や、インターネット上に公開されているチュートリアルを多く読み込み、相応の知識を習得することが求められる。しかし、例えば開発プロジェクトの工期は限られているため、上記の作業を各開発者が行う時間まで開発プロジェクトに無い場合も多い。
【０１３１】
本実施形態のソースコード生成システム１０は、殆どのソースコードを生成できる。また、生成されるソースコードには、Webアプリケーションの構成要素を実現するJavaScriptサービスの名称が記載されている。
【０１３２】
よって、開発者は、記載されているJavaScriptサービスの内容を調べる時に、JavaScriptフレームワークのAPIマニュアルを有効に活用できる。すなわち、本実施形態のソースコード生成システム１０は、クライアント側Webアプリケーションの開発プロジェクトで活用されることが期待される。
【０１３３】
なお、本実施形態のソースコード生成システム１０の入力装置１００、ソースコード生成処理装置２００、および出力装置４００は、例えば、記憶媒体に格納されているプログラムに従って処理を実行するCPU(Central Processing Unit)によって実現される。すなわちモジュール生成指示部１１０、構成要素生成指示部１２０、JavaScriptコード生成部２１０、HTMLコード生成部２２０、JavaScriptコード表示部４１０、およびHTMLコード表示部４２０は、例えば、プログラム制御に従って処理を実行するCPUによって実現される。
【０１３４】
また、JavaScriptコード記憶部３１０、HTMLコード記憶部３２０、および構成要素変換定義記憶部３３０は、例えばRAM(Random Access Memory)で実現される。
【０１３５】
また、本実施形態のソースコード生成システム１０における各部は、ハードウェア回路によって実現されてもよい。一例として、モジュール生成指示部１１０、構成要素生成指示部１２０、JavaScriptコード生成部２１０、HTMLコード生成部２２０、JavaScriptコード記憶部３１０、HTMLコード記憶部３２０、構成要素変換定義記憶部３３０、JavaScriptコード表示部４１０、およびHTMLコード表示部４２０が、それぞれLSI(Large Scale Integration)で実現される。また、それらが１つのLSIで実現されていてもよい。
【０１３６】
次に、本発明の概要を説明する。図１６は、本発明によるソースコード生成装置の概要を示すブロック図である。本発明によるソースコード生成装置２０は、アプリケーションの構成要素を識別する識別情報と構成要素のソースコードとを含む構成要素定義情報を記憶する記憶部２１（例えば、記憶装置３００）と、記憶されている構成要素定義情報のうち入力された識別情報を含む構成要素定義情報に含まれるソースコードを用いてアプリケーションのソースコードを生成する生成部２２（例えば、ソースコード生成処理装置２００）とを備える。
【０１３７】
そのような構成により、ソースコード生成装置は、JavaScriptフレームワークを用いてWebアプリケーションのソースコードを容易に生成できる。
【０１３８】
また、生成部２２は、アプリケーションのソースコードのテンプレートの所定の領域に構成要素定義情報に含まれるソースコードを追加することによってアプリケーションのソースコードを生成してもよい。
【０１３９】
そのような構成により、ソースコード生成装置は、ソースコードのテンプレートを用いてアプリケーションのソースコードを生成できる。
【０１４０】
また、記憶部２１は、アプリケーションのソースコードのテンプレートを含む定義情報を記憶し、生成部２２は、定義情報に含まれるソースコードのテンプレートを用いてアプリケーションのソースコードを生成してもよい。
【０１４１】
そのような構成により、ソースコード生成装置は、より高速にアプリケーションのソースコードを生成できる。
【０１４２】
また、ソースコード生成装置２０は、生成されたアプリケーションのソースコードを出力する出力部（例えば、出力装置４００）を備えてもよい。
【０１４３】
そのような構成により、ソースコード生成装置は、生成されたソースコードを開発者に向けて表示できる。
【０１４４】
また、ソースコード生成装置２０は、アプリケーションの生成に関する情報である生成情報が入力される入力部（例えば、入力装置１００）を備え、入力部は、入力された生成情報を生成部２２に入力してもよい。
【０１４５】
また、生成情報には、構成要素を識別する識別情報が含まれてもよい。
【０１４６】
また、生成情報には、アプリケーションの生成の指示が含まれてもよい。
【０１４７】
また、生成情報には、記憶部２１に記憶されているソースコードに反映される所定の情報が含まれ、生成部２２は、入力された所定の情報をソースコードに反映してもよい。
【０１４８】
そのような構成により、ソースコード生成装置は、開発者が入力した情報をソースコードの生成処理に反映できる。
【符号の説明】
【０１４９】
１０  ソースコード生成システム
２０  ソースコード生成装置
２１  記憶部
２２  生成部
１００  入力装置
１１０  モジュール生成指示部
１２０  構成要素生成指示部
２００  ソースコード生成処理装置
２１０  JavaScriptコード生成部
２２０  HTMLコード生成部
３００  記憶装置
３１０  JavaScriptコード記憶部
３２０  HTMLコード記憶部
３３０  構成要素変換定義記憶部
４００  出力装置
４１０  JavaScriptコード表示部
４２０  HTMLコード表示部
【図１】
2018109891.tif 000003
【図２】
2018109891.tif 000004
【図３】
2018109891.tif 000005
【図４】
2018109891.tif 000006
【図５】
2018109891.tif 000007
【図６】
2018109891.tif 000008
【図７】
2018109891.tif 000009
【図８】
2018109891.tif 000010
【図９】
2018109891.tif 000011
【図１０】
2018109891.tif 000012
【図１１】
2018109891.tif 000013
【図１２】
2018109891.tif 000014
【図１３】
2018109891.tif 000015
【図１４】
2018109891.tif 000016
【図１５】
2018109891.tif 000017
【図１６】
2018109891.tif 000018