(57)【要約】  部品化された要素を再利用することで画面開発を可能とする仕組みにおいて、利用可能な部品の一覧を開発者が視覚的に容易に把握できるようにする。代表的な実施の形態によれば、所定のフォルダに格納され、１つ以上の画面パーツの組み合わせからなり画面表示される際の外観をデバイスの種類毎に規定したテンプレートを有する１つ以上のコンポーネントと、開発者端末を介して利用可能コンポーネントの一覧表示の要求を受け付けるコンポーネント管理コントローラと、フォルダに格納されているコンポーネントから利用可能コンポーネントの一覧情報を取得するコンポーネント管理モデルと、各利用可能コンポーネントにつき、指定されたデバイスの種類に対応したテンプレートによって規定される外観により一覧表示画面を作成して開発者端末に表示させるコンポーネント一覧ビューとを有する。
2016092626.tif 000002
【特許請求の範囲】
【請求項１】
クライアント端末からのリクエストを受けて前記クライアント端末のデバイスの種類に応じた処理結果画面を応答するＷｅｂアプリケーションの画面開発を支援する開発支援システムであって、
所定のフォルダに格納され、１つ以上の画面パーツの組み合わせからなり、前記各画面パーツが画面表示される際の外観を前記デバイスの種類毎に規定したテンプレートを有する１つ以上のコンポーネントと、
開発者端末を介して、開発者が前記Ｗｅｂアプリケーションの画面開発に利用可能な利用可能コンポーネントの一覧表示の要求を受け付けるコンポーネント管理コントローラと、
前記コンポーネント管理コントローラからの指示に基づいて、前記フォルダに格納されている前記コンポーネントから、前記利用可能コンポーネントの一覧情報を取得するコンポーネント管理モデルと、
前記コンポーネント管理コントローラからの指示に基づいて、前記コンポーネント管理モデルが取得した前記各利用可能コンポーネントにつき、前記開発者端末から指定されたデバイスの種類に対応した前記テンプレートによって規定される外観により一覧表示画面を作成して前記開発者端末に表示させるコンポーネント一覧ビューと、を有する、開発支援システム。
【請求項２】
請求項１に記載の開発支援システムにおいて、
前記所定のフォルダには、前記各コンポーネントについてそれぞれＷｅｂアプリケーションにおいて利用する際のサンプルコードが記録されており、
前記コンポーネント一覧ビューは、前記一覧表示画面を作成する際、前記各利用可能コンポーネントについてのそれぞれの外観を、対応する前記サンプルコードを実行することで作成する、開発支援システム。
【請求項３】
請求項２に記載の開発支援システムにおいて、
前記コンポーネント一覧ビューは、前記一覧表示画面に表示された前記各利用可能コンポーネントに対応する前記サンプルコードを前記開発者端末に表示させる、開発支援システム。
【請求項４】
請求項１に記載の開発支援システムにおいて、
前記各コンポーネントのソースコードには、その詳細情報がアノテーションにより記載されており、
前記コンポーネント一覧ビューは、前記一覧表示画面に表示された前記各利用可能コンポーネントに係る詳細情報を、前記利用可能コンポーネントのソースコードの前記アノテーションの記載から取得して前記開発者端末に表示させる、開発支援システム。
【発明の詳細な説明】
【技術分野】
【０００１】
本発明は、Ｗｅｂアプリケーションの開発技術に関し、特に、マルチデバイスに対応した画面表示を行うＷｅｂアプリケーションの開発を支援する開発支援システムに適用して有効な技術に関するものである。
【背景技術】
【０００２】
近年、例えば、タブレット端末やスマートフォンなどのいわゆるスマートデバイスの業務活用が本格化しており、企業の基幹システムと連携するような中・大規模なシステムの開発案件も増える傾向にある。このような状況で、ユーザ企業の要件は複雑となり、ＩＴベンダー等の開発者にとって開発難易度も高くなってきていることから、開発の効率化を図って生産性を向上させることが重要となる。【０００３】
この点につき、例えば、ソースコードなどの開発成果物における共通部分・汎用部分の部品化や、開発時の部品の再利用を推進することが効果的である。さらに、マルチデバイスやマルチプラットフォーム（以下では単に「マルチデバイス」と総称する場合がある）対応を行うことで、デバイスやプラットフォーム毎の個別の開発部分を低減させることも有効である。【０００４】
マルチデバイスに対応した再利用可能な部品化の技術に関連して、例えば、特開２０１３−２３５３８７号公報（特許文献１）には、入出力項目を表示するためのコントロールの外観や属性、制御処理などを含むユーザインタフェースを、デバイスに応じてソースコードを変更することなく動的に変更するＷｅｂサーバシステムが記載されている。当該システムは、例えば、クライアント端末からの要求に基づいて、クライアント端末のデバイスの種類に係る情報を取得するデバイス取得部と、ソースコードに含まれるパーツオブジェクトについて、デバイス取得部により取得したクライアント端末のデバイスの種類に応じた、パーツオブジェクトの承継元の上位クラスに実装された、コントロールを表示する際の調整内容に基づいて、クライアント端末の画面上に対応するコントロールを表示させるＨＴＭＬデータを生成する応答処理部とを有する。
【先行技術文献】
【特許文献】
【０００５】
【特許文献１】特開２０１３−２３５３８７号公報
【発明の概要】
【発明が解決しようとする課題】
【０００６】
例えば、特許文献１に記載されたような技術を用いることで、Ｗｅｂアプリケーションの開発に際して、部品（パーツオブジェクト）を再利用可能とするとともに、１つのソースコードでマルチデバイス対応をすることが可能となる。【０００７】
しかしながら、実際は、１つのソースコードによるマルチデバイス対応といっても、例えば、ソースコード中でｉｆ文などによりデバイス毎に処理を書き分けることが必要となる場合もある。また、新たにデバイスが追加された場合にソースコードに処理を追記しなければならないなど、画面開発者にとって１つのソースコードによって完全なマルチデバイス対応をすることは困難である。【０００８】
また、マルチデバイス対応として、例えば、デバイスの画面サイズに応じてユーザインタフェースを切り替えることができる場合でも、実際は、ある画面において表示されるコントロールやパーツなどの大きさや表示形式、配置などを変更できるのみであり、複数画面の遷移を伴った変更を行うことは困難である。【０００９】
例えば、ＰＣ（Personal Computer）やタブレット端末に比べてスマートフォンの画面サイズは小さく、表示できる情報量に制約がある。そのため、例えば、メニューなどの一覧表示について、ＰＣやタブレット端末では１つの画面に常時全て展開した状態で一覧表示するのに対し、スマートフォンでは、通常時はメニュー表示を指示するアイコン等のみを表示しておき、当該アイコン等を介してメニュー表示が指示された際に別画面としてメニュー一覧を表示する、というようなインタフェースが採用される場合がある。従来技術ではこれらの場合に１つのソースコードで各パターンに対応できるようにすることは困難である。そこで、再利用可能な部品を用いて画面開発を行う場合に、デバイスが異なる場合でも１つのソースコードによってマルチデバイス対応を可能とするような仕組みが望まれる。【００１０】
一方で、再利用可能な部品を用いてＷｅｂアプリケーションの画面開発を行う場合、どのような部品が存在し、そのうちのいずれが利用可能であるのか、また、対象の部品を利用するためにソースコード上でどのように実装すればよいのか、などが把握し難いという課題がある。複数の開発プロジェクトが併存する場合などでは、プロジェクト毎に利用可能な部品が異なり得るし、同一プロジェクト内でも画面デザインの統一性などの観点から、サブシステムやアプリケーション毎に利用可能な部品が異なり得る。特に、ここでの部品が画面の構成要素に係るものであることから、利用可能な部品の外観や操作性などを視覚的に一覧として把握できなければ、部品の選択、決定における効率性は大きく低減する。【００１１】
利用可能な部品の一覧等について、例えば、マニュアルや仕様書などを用意して開発者に提供することが考えられるが、部品の外観や操作性などについてマニュアル等での静的な情報だけでは十分に把握することは難しく、また、部品の検索性も低下する。さらに、部品の修正や新しい部品の追加などが行われる度にマニュアルや仕様書をアップデートする必要があるなど、保守性も低下する。【００１２】
そこで本発明の目的は、部品化された要素を再利用することでマルチデバイス対応のＷｅｂアプリケーションに係る画面開発を可能とする仕組みにおいて、利用可能な部品の一覧を開発者が視覚的に容易に把握できるようにする開発支援システムを提供することにある。【００１３】
本発明の前記ならびにその他の目的と新規な特徴は、本明細書の記述および添付図面から明らかになるであろう。
【課題を解決するための手段】
【００１４】
本願において開示される発明のうち、代表的なものの概要を簡単に説明すれば、以下のとおりである。【００１５】
本発明の代表的な実施の形態による開発支援システムは、クライアント端末からのリクエストを受けて前記クライアント端末のデバイスの種類に応じた処理結果画面を応答するＷｅｂアプリケーションの画面開発を支援する開発支援システムであって、以下の特徴を有するものである。【００１６】
すなわち、開発支援システムは、所定のフォルダに格納され、１つ以上の画面パーツの組み合わせからなり、前記各画面パーツが画面表示される際の外観を前記デバイスの種類毎に規定したテンプレートを有する１つ以上のコンポーネントと、開発者端末を介して、開発者が前記Ｗｅｂアプリケーションの画面開発に利用可能な利用可能コンポーネントの一覧表示の要求を受け付けるコンポーネント管理コントローラと、前記コンポーネント管理コントローラからの指示に基づいて、前記フォルダに格納されている前記コンポーネントから、前記利用可能コンポーネントの一覧情報を取得するコンポーネント管理モデルと、を有する。さらに、前記コンポーネント管理コントローラからの指示に基づいて、前記コンポーネント管理モデルが取得した前記各利用可能コンポーネントにつき、前記開発者端末から指定されたデバイスの種類に対応した前記テンプレートによって規定される外観により一覧表示画面を作成して前記開発者端末に表示させるコンポーネント一覧ビューを有する。
【発明の効果】
【００１７】
本願において開示される発明のうち、代表的なものによって得られる効果を簡単に説明すれば以下のとおりである。【００１８】
すなわち、本発明の代表的な実施の形態によれば、部品化された要素を再利用することでマルチデバイス対応のＷｅｂアプリケーションに係る画面開発を可能とする仕組みにおいて、利用可能な部品の一覧を開発者が視覚的に容易に把握することが可能となる。
【図面の簡単な説明】
【００１９】
【図１】本発明の実施の形態１であるＷｅｂサーバシステムの構成例について概要を示した図である。
【図２】（ａ）、（ｂ）は、本発明の実施の形態１におけるデバイス毎のレイアウトの相違の例について概要を示した図である。
【図３】（ａ）、（ｂ）は、本発明の実施の形態１におけるデバイス毎のレイアウトの相違の他の例について概要を示した図である。
【図４】（ａ）、（ｂ）は、本発明の実施の形態１におけるデバイス毎のコンポーネント表示の相違の例について概要を示した図である。
【図５】（ａ）、（ｂ）は、本発明の実施の形態１におけるデバイス毎のコンポーネント表示の相違の他の例について概要を示した図である。
【図６】本発明の実施の形態１におけるエディットビューでの指定内容と、これに伴う画面表示時の処理の流れの例について概要を示した図である。
【図７】本発明の実施の形態２である開発支援システムの構成例について概要を示した図である。
【図８】本発明の実施の形態２における開発者端末の画面上に表示されるコンポーネントの一覧表示画面の例について概要を示した図である。
【図９】本発明の実施の形態２における開発者端末の画面上に表示されるサンプルコードの例について示した図である。
【発明を実施するための形態】
【００２０】
以下、本発明の実施の形態を図面に基づいて詳細に説明する。なお、実施の形態を説明するための全図において、同一部には原則として同一の符号を付し、その繰り返しの説明は省略する。
【００２１】
（実施の形態１）
＜システム構成＞
図１は、本発明の実施の形態１であるＷｅｂサーバシステムの構成例について概要を示した図である。本発明の実施の形態１であるＷｅｂサーバシステム１００は、画面パーツをコンポーネント化してコンポーネント１９０の一覧として有するとともに、コンポーネント１９０が配置される１つ以上の画面領域からなるレイアウトのパターンとしてレイアウト１８０の一覧を有している。そして、各レイアウト１８０および各コンポーネント１９０は、それぞれ、デバイス毎に最適化された画面出力をするように作成されたテンプレートを有しており、Ｗｅｂサーバシステム１００は、これらに基づいてデバイス毎に最適化された画面出力を自動的に行う。
【００２２】
Ｗｅｂサーバシステム１００は、例えば、サーバ機器やクラウドコンピューティングサービス上に構築された仮想サーバからなるサーバシステムであり、例えば、図示しないＯＳ（Operating System）や、Ｗｅｂサーバプログラム１１０、言語処理系１２０、フレームワーク１３０などのミドルウェアや基盤等の上で稼働する、もしくはこれらを利用するソフトウェアとして、ＭＶＣ（Model View Controller）モデルによって開発、実装されたコントローラ１４０、モデル１５０、エディットビュー１６０、コンポーネントビュー１７０、レイアウト１８０およびコンポーネント１９０などの各部（モジュール）を有する。
【００２３】
Ｗｅｂサーバプログラム１１０としては、例えば、Ａｐａｃｈｅ（登録商標）  ＨＴＴＰ  Ｓｅｒｖｅｒなど、Ｗｅｂサーバにおいて一般的に用いられているものを適宜用いることができる。また、Ｗｅｂサーバプログラム１１０上で稼働するアプリケーションシステムの基盤となる言語処理系１２０およびフレームワーク１３０としては、例えば、動的なＷｅｂページを作成するために用いられるＰＨＰなどのスクリプト言語、およびＰＨＰで実装されたＺｅｎｄ  Ｆｒａｍｅｗｏｒｋなどを適宜用いることができる。
【００２４】
コントローラ１４０は、ＭＶＣモデルにおけるコントローラ（Ｃ）としての機能を有し、クライアント端末２００上の図示しないＷｅｂブラウザ等からのリクエストを受けて、モデル１５０に対してデータの操作要求を行ってデータを取得したり、エディットビュー１６０に対して画面表示を要求したりする。モデル１５０は、ＭＶＣモデルにおけるモデル（Ｍ）としての機能を有し、ビジネスロジックを実行してデータの操作や取得を行う機能を有する。ビジネスロジック（ＢＬ）は、例えば、データベースなどを有する他のＢＬサーバ３００に対して要求を行って実行させるようにしてもよい。
【００２５】
エディットビュー１６０およびコンポーネントビュー１７０は、ＭＶＣモデルにおけるビュー（Ｖ）としての機能を有し、モデル１５０のデータに基づいて画面生成を行って表示する機能を有する。エディットビュー１６０は、画面の構成を行う機能を有し、後述するように、画面において用いるレイアウト１８０を指定するとともに、レイアウト１８０によって表示される領域に配置するコンポーネント１９０をそれぞれ呼び出して設定を行う。コンポーネントビュー１７０は、このレイアウト１８０およびコンポーネント１９０の情報に基づいてレンダリングを行ってＨＴＭＬ（HyperText Markup Language）データを作成し、クライアント端末２００に対して出力する。
【００２６】
このとき、コンポーネントビュー１７０は、後述するように、クライアント端末２００のデバイスに応じてレイアウト１８０およびコンポーネント１９０に対して設定されている画面表示のためのＷｅｂテンプレートをテンプレートエンジン１７１により処理することで、対象のデバイスに最適化された画面出力を行う。
【００２７】
Ｗｅｂテンプレートは、図示するように、クライアント端末２００の種別（ＰＣ、スマートフォン（スマホ）、タブレット端末）毎に、レイアウト１８０に対するものとして、それぞれ、テンプレート（ＰＣ用）１８１ｐ、テンプレート（スマホ用）１８１ｓ、テンプレート（タブレット用）１８１ｔ（これらを総称してテンプレート１８１と記載する場合がある）、およびコンポーネント１９０に対するものとして、それぞれ、テンプレート（ＰＣ用）１９１ｐ、テンプレート（スマホ用）１９１ｓ、テンプレート（タブレット用）１９１ｔ（これらを総称してテンプレート１９１と記載する場合がある）を有する。図１の例では、ＰＣ、スマートフォン、およびタブレット端末の別にテンプレート１８１および１９１を用意しているが、これに限らず、他のデバイスのものや、同じ種類でも画面サイズが異なったり、ＯＳやＷｅｂブラウザが異なるデバイスのものを有していてもよい。
【００２８】
テンプレートエンジン１７１は、テンプレート１８１および１９１などのＷｅｂテンプレートに規定されたデザインや外観の内容に基づいて実際の画面を作成する機能を有する。なお、テンプレートエンジン１７１には、例えば、ＰＨＰにおいて主に用いられているＳｍａｒｔｙなどの一般的なテンプレートエンジンを適宜用いることができる。
【００２９】
コントローラ１４０やコンポーネントビュー１７０は、Ｗｅｂサーバシステム１００として汎用的に提供することができる。また、画面部品としてのレイアウト１８０やコンポーネント１９０（テンプレート１８１および１９１も含む）は、他の開発案件で作成されたものを再利用したり、対象の開発案件において予め作成されたものを用いたりすることができる。また、モデル１５０についても、対象の開発案件等において別途作成されたものを用いることができる。一方、エディットビュー１６０は、画面開発者がソースコードとして作成することになるが、デバイス毎の相違は、テンプレート１８１や１９１（およびテンプレートエンジン１７１）が吸収するため、画面開発者がデバイス毎の相違を意識することは不要である。
【００３０】
＜レイアウトとコンポーネント＞
図２は、本実施の形態におけるデバイス毎のレイアウトの相違の例について概要を示した図である。レイアウトとは、画面全体を１つ以上の領域に区分し、その領域の配置のパターンを指すものであり、図２（ａ）では、タブレット端末でのレイアウト、図２（ｂ）では、スマートフォンでのレイアウトの例をそれぞれ示している。
【００３１】
図２の例では、レイアウト１８０として「一覧、明細型レイアウト」を選択した場合を示しており、ヘッダ領域（ヘッダ領域４０１、４１１）およびフッタ領域（フッタ領域４０４、４１４）の他に、複数の項目を一覧表示する一覧領域（一覧領域４０２、４１２）と、その中から特定の項目を選択した際にその詳細な内容を表示するコンテンツ領域（コンテンツ領域４０３、４１３）とを有するレイアウトについて示している。
【００３２】
図示するように、図２（ａ）のレイアウトでは、１つの画面内に４つの領域が全て配置されている。一方、図２（ｂ）のレイアウトでは、左側の画面において一覧領域４１２が表示されている状態で、一覧領域４１２の中から特定の項目を選択すると、右側の画面に遷移して、一覧領域４１２に代って、選択された項目を表示するためのコンテンツ領域４１３が表示されることを示している。同一のレイアウト１８０におけるこのようなデバイス毎の相違は、上述したように、テンプレート１８１（この場合はテンプレート（タブレット用）１８１ｔおよびテンプレート（スマホ用）１８１ｓ）に規定され、コンポーネントビュー１７０のテンプレートエンジン１７１によって実際の画面に反映される。
【００３３】
このように、画面上に表示される部品やコントロールの単位だけではなく、画面全体のレイアウト（画面遷移を伴うものも含む）の単位でも、レイアウト１８０およびテンプレート１８１によりデバイス毎の相違を吸収・隠蔽する。これにより、デバイスによっては画面遷移を伴うレイアウトを有しているような場合であっても、エディットビュー１６０についてはデバイスを意識することなく開発することができる。
【００３４】
図３は、本実施の形態におけるデバイス毎のレイアウトの相違の他の例について概要を示した図である。図２と同様に、図３（ａ）では、タブレット端末でのレイアウト、図３（ｂ）では、スマートフォンでのレイアウトの例をそれぞれ示している。図３の例では、レイアウト１８０として「検索条件、結果表示型レイアウト」を選択した場合を示しており、ヘッダ領域（ヘッダ領域４０１、４１１）およびフッタ領域（フッタ領域４０４、４１４）の他に、検索の際の条件を入力、指定するパーツ等を表示する検索条件領域（検索条件領域４０５、４１５）と、その検索条件に基づく検索結果を表示する検索結果領域（検索結果領域４０６、４１６）とを有するレイアウトについて示している。
【００３５】
例えば、図３（ａ）と図２（ａ）において各領域の配置が異なるように、エディットビュー１６０において指定するレイアウト１８０を変更することで、コンポーネントビュー１７０のテンプレートエンジン１７１によって各領域のデザイン、外観を自動的に切り替えることができる。
【００３６】
図４は、本実施の形態におけるデバイス毎のコンポーネント表示の相違の例について概要を示した図である。図２と同様に、図４（ａ）では、タブレット端末でのレイアウト、図４（ｂ）では、スマートフォンでのレイアウトの例を示しており、それぞれ、図２の例で示した「一覧、明細型レイアウト」において「メニュー」のコンポーネント１９０をヘッダ領域４０１、４１１に表示させた場合を示している。
【００３７】
図示するように、図４（ａ）のタブレット端末でのレイアウトでは、ヘッダ領域４０１に４つのメニューボタンが横並びに表示されている。一方、図４（ｂ）のスマートフォンのレイアウトでは、左側の画面において、ヘッダ領域４１１にはメニューを表示させるアイコンのみが表示されており、このアイコンをタップすると右側の画面に遷移して、ヘッダ領域４１１が拡張され（ヘッダ領域４１１’）、この領域にメニューボタンが縦並びに表示されることを示している。同一のコンポーネント１９０におけるこのようなデバイス毎の相違は、レイアウト１８０の場合と同様に、テンプレート１９１（この場合はテンプレート（タブレット用）１９１ｔおよびテンプレート（スマホ用）１９１ｓ）に規定され、コンポーネントビュー１７０のテンプレートエンジン１７１によって実際の画面に反映される。
【００３８】
なお、本実施の形態におけるコンポーネント１９０は、１つの画面パーツやコントロールからなるものに限らず、図示するように、複数のパーツやコントロール（図４の例では４つのメニューボタン）の集合や組み合わせによって構成してもよい。
【００３９】
図５は、本実施の形態におけるデバイス毎のコンポーネント表示の相違の他の例について概要を示した図である。図３と同様に、図５（ａ）では、タブレット端末でのレイアウト、図５（ｂ）では、スマートフォンでのレイアウトの例を示しており、それぞれ、図３の例で示した「検索条件、結果表示型レイアウト」において「検索結果一覧」のコンポーネント１９０を検索結果領域４０６、４１６に表示させた場合を示している。図示するように、図５（ａ）のタブレット端末でのレイアウトでは、検索結果領域４０６に検索結果一覧が表形式で表示されている。一方、図５（ｂ）のスマートフォンのレイアウトでは、遷移した右側の画面の検索結果領域４１６に検索結果一覧がリスト形式で縦並びに表示されることを示している。
【００４０】
＜処理の流れ＞
図６は、エディットビュー１６０での指定内容と、これに伴う画面表示時の処理の流れの例について概要を示した図である。上述したように、画面開発者は、ソースコードとして以下の処理を行うようなエディットビュー１６０を作成するが、その中では、デバイス毎の相違を意識することなくレイアウト１８０およびコンポーネント１９０を指定して配置、設定するだけでよい。デバイス毎に最適化された画面表示は、テンプレート１８１や１９１に規定された内容に基づいてコンポーネントビュー１７０（およびテンプレートエンジン１７１）が実行時に動的に行う。
【００４１】
エディットビュー１６０では、まず、予め作成されているレイアウト１８０の一覧の中から、画面表示に用いるレイアウト１８０を取得する（Ｓ０１）。この時点ではレイアウト１８０に設定された各領域にはまだ何も表示すべきコンポーネント１９０は配置されていない。次に、予め作成されているコンポーネント１９０の一覧の中から、ステップＳ０１で取得したレイアウト１８０に配置する１つ以上のコンポーネント１９０を取得する（Ｓ０２）。この時点ではまだコンポーネント１９０には表示すべきデータなどの設定は何もされていない。
【００４２】
その後、ステップＳ１９０で取得した各コンポーネント１９０に対して、表示すべきデータとして、モデル１５０から取得したデータを設定する（Ｓ０３）。なお、モデル１５０によるデータの取得は、コントローラ１４０を介した指示により実行される。次に、データを設定した各コンポーネント１９０を、ステップＳ０１で取得したレイアウト１８０における適当な領域に配置されるよう位置指定する（Ｓ０４）。そして、各コンポーネント１９０の配置位置を指定したレイアウト１８０をコンポーネントビュー１７０に渡して画面描画を指示する（Ｓ０５）。
【００４３】
このとき、クライアント端末２００のデバイスの種類に係る情報も併せてコンポーネントビュー１７０に渡す（もしくはコンポーネントビュー１７０自身がリクエストメッセージの内容から取得する）。デバイスの種類に係る情報は、例えば、クライアント端末２００からのリクエストメッセージのＵｓｅｒ−Ａｇｅｎｔヘッダから取得するなど、公知の技術により取得することができる。なお、ここでのデバイスの種類に係る情報には、機器の種別の他に、例えば、ＯＳ、Ｗｅｂブラウザやそのバージョン等の情報も含まれるものとする。
【００４４】
コンポーネントビュー１７０では、渡されたレイアウト１８０および各コンポーネント１９０について、それぞれ、デバイスの種類に対応したテンプレート１８１および１９１を取得して、テンプレートに規定されているデザインに従ってデータを含めた画面描画を行う。例えば、各コンポーネント１９０については、デバイスの種類（図６の例ではスマートフォン）に対応したテンプレート（スマホ用）１９１ｓを取得して、これに規定されているデザインに基づいてデータを含めてコンポーネント１９０を画面描画する（図６の例では検索結果の一覧表示）。また、レイアウト１８０については、テンプレート１８１ｓを取得して、これに規定されているデザインに基づいて各領域を描画するとともに、指定された領域の位置に画面描画された各コンポーネント１９０を配置する（図６の例では検索結果領域４１６に検索結果の一覧表示を配置する）。
【００４５】
以上に説明したように、本発明の実施の形態１であるＷｅｂサーバシステム１００によれば、画面パーツをコンポーネント化するとともに、コンポーネント１９０が配置される１つ以上の領域からなるレイアウト１８０のパターンを有している。そして、各レイアウト１８０および各コンポーネント１９０は、それぞれ、デバイス毎に最適化された画面出力をするように作成されたテンプレート１８１、１９１を有しており、Ｗｅｂサーバシステム１００は、これらのテンプレートを処理するテンプレートエンジン１７１を有するコンポーネントビュー１７０を備える。
【００４６】
これにより、画面のレイアウトおよびコンポーネントが部品化され、エディットビュー１６０のソースコードにおいてこれらを呼び出すことにより、デバイスに応じて最適化された画面表示を動的に行うことが可能となる。すなわち、画面開発者は、デバイス毎の相違を意識することなくエディットビュー１６０のソースコードを作成することができる。さらに、レイアウト１８０やコンポーネント１９０におけるデータの処理や振る舞いを制御する機能と、テンプレート１８１、１９１によって規定されるデザイン（ＨＴＭＬやＣＳＳ（Cascading Style Sheets）など）とを分離することで、デザイナーによる開発成果物を画面パーツとして容易に取り込むことが可能となる。
【００４７】
（実施の形態２）
上記の実施の形態１において、画面開発者は、エディットビュー１６０のソースコードから部品化されたコンポーネント１９０を呼び出すことで画面開発を行うことができる。しかしながら、そもそもどのようなコンポーネント１９０が存在し、そのうちのいずれが利用可能であるのか、また、対象のコンポーネント１９０を利用するためにソースコード上でどのように実装すればよいのか、などは把握し難い。
【００４８】
そこで、本発明の実施の形態２である開発支援システムは、画面開発者が利用可能なコンポーネント１９０の一覧と、その実際の画面表示例を画面開発者が視覚的に把握することを可能とするコンポーネント管理機能を提供する。また、ソースコード上での実装例（サンプルコード）を併せて提供することにより、ソースコードの開発負荷を低減することを可能とする。具体的には、画面開発者が利用可能なコンポーネント１９０を一覧表示するようなＷｅｂアプリケーションを、上記の実施の形態１におけるＷｅｂサーバシステム１００を利用して、Ｗｅｂサーバシステム１００上で稼働する１つのアプリケーションとして実装することで実現する。
【００４９】
＜システム構成＞
図７は、本発明の実施の形態２である開発支援システムの構成例について概要を示した図である。本実施の形態の開発支援システム１０１は、上述したように、実施の形態１において図１に示したＷｅｂサーバシステム１００をベースとして構成された開発環境であり、画面開発者が使用するＰＣ等の開発者端末２０１に対して、利用可能なコンポーネント１９０の一覧を画面上に実際に表示するコンポーネント管理機能を提供するシステムである。
【００５０】
開発支援システム１０１におけるＷｅｂサーバプログラム１１０、言語処理系１２０、およびフレームワーク１３０については、実施の形態１の図１に示したＷｅｂサーバシステム１００と同様であるため、説明は省略する。
【００５１】
コンポーネント管理コントローラ１４１は、ＭＶＣモデルにおけるコントローラ（Ｃ）としての機能を有し、本実施の形態では、開発者端末２０１上の図示しないＷｅｂブラウザ等からのリクエストを受けて、後述するコンポーネント管理モデル１５１から、開発者端末２０１を使用する開発者が利用可能なコンポーネント１９０のリストの情報を取得する。また、取得したコンポーネント１９０のリストについて、後述するコンポーネント一覧ビュー１６１に対して実際に画面表示するよう要求する。
【００５２】
コンポーネント管理モデル１５１は、ＭＶＣモデルにおけるモデル（Ｍ）としての機能を有し、本実施の形態では、利用可能なコンポーネント１９０のリストの情報を取得してコンポーネント管理コントローラ１４１に応答する。これを実現するため、本実施の形態では、全てのコンポーネント１９０（実際には、当該コンポーネント１９０のソースコードが記録されたファイル）は、所定のフォルダやディレクトリに配置されているものとする。コンポーネント管理モデル１５１は、当該フォルダ等に存在する各コンポーネント１９０のソースコードの内容を参照することで、各コンポーネント１９０に係る各種の情報を把握することができる。例えば、コンポーネント１９０のソースコードにおいて、所定のルールに従ったアノテーションにより、当該コンポーネント１９０に係る詳細情報などをメタ情報として記載しておくことで、当該情報を読み取って把握することができる。
【００５３】
コンポーネント一覧ビュー１６１は、ＭＶＣモデルにおけるビュー（Ｖ）としての機能を有し、コンポーネント管理モデル１５１のデータに基づいて画面生成を行って表示する機能を有する。すなわち、本実施の形態では、コンポーネント管理モデル１５１が取得した利用可能なコンポーネント１９０の情報に基づいて、その一覧を画面上に実際に表示する。
【００５４】
なお、実施の形態１では、コンポーネント１９０を含む画面を表示するクライアント端末２００のデバイスにより、レイアウト１８０を最適化するものとしていたが、本実施の形態では、コンポーネント１９０を一覧表示する際にはデバイス毎のレイアウトの相違を考慮せずに、一律に固定のレイアウトとする。本実施の形態では、ソースコードの開発・作成というフェーズの作業を行うための開発者端末２０１として、タブレット端末やスマホなどの携帯型端末が用いられることはあまりなく、ＰＣが中心として用いられると考えられるからである。
【００５５】
従って、図７の例では、実施の形態１の図１の例におけるレイアウト１８０の一覧を有さない構成となっている。これに対し、開発者端末２０１の画面表示において一律に固定のレイアウトとする手法として、例えば、図１のＷｅｂサーバシステム１００におけるレイアウト１８０を有する構成とした上でテンプレート（ＰＣ用）１８１ｐのみを用いるようにしてもよい。
【００５６】
また、各コンポーネント１９０を実際に表示するために、本実施の形態では、各コンポーネント１９０について、表示に用いるダミーのサンプルデータの設定等を含む、表示用のサンプルコード１９２が用意されている。コンポーネント一覧ビュー１６１は、このサンプルコード１９２を用いることでコンポーネント１９０を呼び出すことができる。
【００５７】
コンポーネント１９０の実際の画面表示は、実施の形態１の場合と同様に、テンプレートエンジン１７１が、デバイス毎に最適化された画面出力を行うよう作成されたテンプレートを呼び出してこれを処理することで表示する。後述するように、開発者端末２０１に表示される画面においてデバイスの種類を指定できるようにすることで、指定されたデバイスに応じたテンプレートを用いてコンポーネント１９０の画面表示を切り替える。これにより、同一の開発者端末２０１上でデバイス毎に画面表示を動的に切り替えてコンポーネント１９０の外観等を確認することができる。
【００５８】
なお、本実施の形態では、Ｗｅｂアプリケーションの開発環境である開発支援システム１０１を、実行環境である実施の形態１の図１に示したＷｅｂサーバシステム１００とは別に独立して実装した場合を例としているが、これらを同一のサーバシステムとして共存させる構成とすることも可能である。
【００５９】
＜画面例＞
図８は、開発支援システム１０１によって開発者端末２０１の画面上に表示されるコンポーネント１９０の一覧表示画面の例について概要を示した図である。画面上部では、各コンポーネント１９０を表示する際の形式として、対象のデバイスを選択することができる（図８の例では「タブレット」が選択されている）。開発者端末２０１の実際のデバイス種別に関わらず、ここで選択したデバイスに最適化された表示形式で各コンポーネント１９０を表示することで、デバイスをエミュレートする。これを実現するため、例えば、開発者端末２０１から開発支援システム１０１に対してコンポーネント１９０の一覧表示のリクエストを送信する際に、リクエストに含まれるデバイスを特定する情報を、ここで選択されたデバイスによって更新する等の対応を行う。
【００６０】
画面左部では、コンポーネント１９０を絞り込むための条件等を指定することができる。例えば、各コンポーネント１９０に対して設定されているカテゴリによって絞り込んだり、各コンポーネント１９０を利用可能な（もしくは利用している）モジュールやアプリケーションによって絞り込んだりすることができる。図８の例では「モジュール」によって絞り込むよう指定されており、チェックマークが付されているモジュールやアプリケーションが利用可能なコンポーネント１９０の一覧が画面右部に表示されている。なお、各モジュールやアプリケーションがどのコンポーネント１９０を利用可能であるかについての情報は、例えば、設定ファイルなどにモジュールやアプリケーション毎に別途設定、登録しておくなどすることができる。
【００６１】
画面右部では、各コンポーネント１９０について、コンポーネント名に加えて、コンポーネント１９０の詳細情報として、機能概要や主要なＡＰＩ（Application Programming Interface）の情報などが表示されている（詳細情報は選択的に非表示とすることもできる）。これらの情報や、コンポーネント１９０のカテゴリなどの他の属性情報などは、例えば、各コンポーネント１９０のソースコードにおいて、開発者が所定のルールに従ったアノテーションによりメタ情報として記載しておく。これにより、コンポーネント管理モデル１５１が各コンポーネント１９０のソースコードを参照することで、これらの情報を動的に取得することができる。
【００６２】
上記の情報に加えて、各コンポーネント１９０について、対象のデバイスでの実際の表示イメージも併せて表示される。表示イメージの右部には、各コンポーネント１９０について個別に表示対象のデバイスを切り替えることができるボタンが設けられている。ここで表示される表示イメージは、上述したように、例えば、表示用のダミーのサンプルデータの設定も含めて、当該コンポーネント１９０を表示するためのサンプルコード１９２によって実装されている。
【００６３】
このように、利用可能なコンポーネント１９０について、その実際の表示イメージも併せて一覧表示することで、画面開発者は、画面に実際に配置するコンポーネント１９０を効率的に決定することが可能となる。
【００６４】
画面に配置するコンポーネント１９０を決定すると、画面開発者は、アプリケーションのソースコードにおいてこれを呼び出すコードを実際に記載しなければならない。これを効率的に行えるようにするため、本実施の形態では、さらに、各コンポーネント１９０のＡＰＩの詳細な仕様情報、およびソースコードの記載に際して直接用いることができるサンプルコード１９２を提供し、参照可能としている。これらはそれぞれ、例えば、図８の例におけるコンポーネント１９０の機能概要を表示する欄に配置された「ＡＰＩ」ボタンおよび「ｓｒｃ」ボタンを開発者が押下することで表示させることができる。
【００６５】
例えば、ＡＰＩの仕様情報を表示する画面では、対象のコンポーネント１９０について、その機能概要や、クラスの階層構造、利用可能なＡＰＩ（メソッド）についてのパラメータ等の仕様情報の一覧などを表示する。これらの詳細情報は、上述したように、コンポーネント１９０のソースコードにアノテーションとして記載しておくことで、コンポーネント管理モデル１５１が動的に取得することができる。
【００６６】
図９は、開発支援システム１０１によって開発者端末２０１の画面上に表示されるサンプルコード１９２の例について示した図である。ここでは、コンポーネント１９０の呼び出しに加えて、コンポーネント１９０に対するダミーのサンプルデータの設定を行っている（９行目〜１５行目）。画面開発者は、これを参照することで対象のコンポーネント１９０のソースコード上での具体的な実装方法、使用方法を把握することができる。さらに、当該サンプルコード１９２を実際のアプリケーションのソースコードに対して直接コピー＆ペーストした上で、表示データ等の設定箇所などの必要箇所を修正することで、ソースコードの開発負荷を大幅に削減することができる。
【００６７】
なお、上述したように、当該サンプルコード１９２は、図８に示したコンポーネント１９０の一覧表示画面において、実際に各コンポーネント１９０を表示するためにも用いられる。
【００６８】
以上に説明したように、本発明の実施の形態２である開発支援システム１０１によれば、画面開発者が利用可能なコンポーネント１９０の一覧と、その実際の画面表示例を画面開発者が視覚的に把握することができるコンポーネント管理機能を実現することが可能となる。また、各コンポーネント１９０の詳細情報やソースコード上での実装例（サンプルコード）を併せて提供することにより、アプリケーションのソースコードの開発負荷を大きく低減させることが可能となる。
【００６９】
以上、本発明者によってなされた発明を実施の形態に基づき具体的に説明したが、本発明は上記の実施の形態に限定されるものではなく、その要旨を逸脱しない範囲で種々変更可能であることはいうまでもない。例えば、上記の実施の形態は本発明を分かりやすく説明するために詳細に説明したものであり、必ずしも説明した全ての構成を備えるものに限定されるものではない。また、ある実施の形態の構成の一部を他の実施の形態の構成に置き換えることが可能であり、また、ある実施の形態の構成に他の実施の形態の構成を加えることも可能である。また、各実施の形態の構成の一部について、他の構成の追加・削除・置換をすることが可能である。
【産業上の利用可能性】
【００７０】
本発明は、マルチデバイスに対応した画面表示を行うＷｅｂアプリケーションの開発を支援する開発支援システムに利用可能である。
【符号の説明】
【００７１】
１００…Ｗｅｂサーバシステム、１０１…開発支援システム、１１０…Ｗｅｂサーバプログラム、１２０…言語処理系、１３０…フレームワーク、１４０…コントローラ、１４１…コンポーネント管理コントローラ、１５０…モデル、１５１…コンポーネント管理モデル、１６０…エディットビュー、１６１…コンポーネント一覧ビュー、１７０…コンポーネントビュー、１７１…テンプレートエンジン、１８０…レイアウト、１８１ｐ…テンプレート（ＰＣ用）、１８１ｓ…テンプレート（スマホ用）、１８１ｔ…テンプレート（タブレット用）、１９０…コンポーネント、１９１ｐ…テンプレート（ＰＣ用）、１９１ｓ…テンプレート（スマホ用）、１９１ｔ…テンプレート（タブレット用）、
２００…クライアント端末、２０１…開発者端末、
３００…ＢＬサーバ、
４０１…ヘッダ領域、４０２…一覧領域、４０３…コンテンツ領域、４０４…フッタ領域、４０５…検索条件領域、４０６…検索結果領域、４１１、４１１’…ヘッダ領域、４１２…一覧領域、４１３…コンテンツ領域、４１４…フッタ領域、４１５…検索条件領域、４１６…検索結果領域
【図１】
2016092626.tif 000003
【図２】
2016092626.tif 000004
【図３】
2016092626.tif 000005
【図４】
2016092626.tif 000006
【図５】
2016092626.tif 000007
【図６】
2016092626.tif 000008
【図７】
2016092626.tif 000009
【図８】
2016092626.tif 000010
【図９】
2016092626.tif 000011
【国際調査報告】
2016092626.tif 000012
2016092626.tif 000013
2016092626.tif 000014
2016092626.tif 000015