JP2020160746A - Webサイト設計支援装置、Webサイト設計支援方法、及びプログラム - Google Patents

Webサイト設計支援装置、Webサイト設計支援方法、及びプログラム Download PDF

Info

Publication number
JP2020160746A
JP2020160746A JP2019058897A JP2019058897A JP2020160746A JP 2020160746 A JP2020160746 A JP 2020160746A JP 2019058897 A JP2019058897 A JP 2019058897A JP 2019058897 A JP2019058897 A JP 2019058897A JP 2020160746 A JP2020160746 A JP 2020160746A
Authority
JP
Japan
Prior art keywords
transition
screen
website
screens
design support
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Granted
Application number
JP2019058897A
Other languages
English (en)
Other versions
JP7260150B2 (ja
Inventor
将門 清水
Masakado Shimizu
将門 清水
宮原 豊
Yutaka Miyahara
豊 宮原
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
NEC Corp
NEC Solution Innovators Ltd
Original Assignee
NEC Corp
NEC Solution Innovators Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by NEC Corp, NEC Solution Innovators Ltd filed Critical NEC Corp
Priority to JP2019058897A priority Critical patent/JP7260150B2/ja
Publication of JP2020160746A publication Critical patent/JP2020160746A/ja
Application granted granted Critical
Publication of JP7260150B2 publication Critical patent/JP7260150B2/ja
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Images

Abstract

【課題】Webサイトの画面遷移を可視化して、Webサイトの設計の効率化を図り得る、Webサイト設計支援装置、Webサイト設計支援方法、及びプログラムを提供する。【解決手段】Webサイト設計支援装置10は、Webサイトのソースコードを解析して、ソースコードを構成するルーティング定義から、遷移元となる画面の一覧を取得し、取得した遷移元となる画面の一覧に基づいて、Webサイトにおける画面遷移を特定する遷移情報を生成する、画面遷移解析部11と、生成された遷移情報に基づいて、Webサイトにおける画面遷移を示す画面遷移図を生成する、画面遷移図生成部12と、を備えている。【選択図】図1

Description

本発明は、Webサイトの設計を支援するためのツールを提供する、Webサイト設計支援装置、及びWebサイト設計支援方法に関し、更には、これらを実現するためのプログラムに関する。
一般に、動的なWebサイトの構築、リッチインターネットアプリケーションの開発には、「Java Script」(登録商標)と呼ばれるプログラミング言語が用いられている。但し、Java Scriptは、Webページの色を変えたり、文字など動かしたりするために開発された、簡易的なスプリクト言語であり、近年の複雑化したWebサイトの設計には向いていないという問題がある。
このため、近年のWebサイトの設計においては、「Java Scriptフレームワーク」と呼ばれるプログラミング言語の利用が増加している。Java Scriptフレームワークは、予め開発に必要な機能及びひな型を用意しており、設計者は、これらを組み合わせることで、複雑なWebサイトであっても簡単に構築することができる。
また、Java Scriptフレームワークの1つに、「Angular」(登録商標)が知られている。Angularは、数あるJava Scriptフレームワークの中でも最も人気が高く、多数のライブラリを用意している。
更に、このようなJava Scriptフレームワークでは、各種UI(User Interface)ツールも提案されている(例えば、特許文献1参照)。特許文献1に開示されたUIツールによれば、設計者は、設計用の画面上で、設計対象となるWebサイトにおけるボタン及び画面を追加できる。また、設計用の画面上では、追加された各画面が、遷移状態が分かるように、一度に表示されると共に、各画面とUI部品とのリンク状態も表示される。特許文献1に開示されたUIツールを用いれば、Webサイトの設計がいっそう容易になると考えられる。
米国特許出願公開第2015/0149966号明細書
しかしながら、従来からのJava Scriptフレームワークにおいては、設計されたWebサイト(アプリケーションプログラム)の実装時でのふるまいを解析する、ツールは提供されていないという問題がある。このため、設計者は、Webサイトを実際に実装しなければ、設計通りに画面遷移が行われるかどうかを確認することができず、従来においては、Webサイトを効率的に設計することは困難となっている。
本発明の目的の一例は、上記問題を解消し、Webサイトの画面遷移を可視化して、Webサイトの設計の効率化を図り得る、Webサイト設計支援装置、Webサイト設計支援方法、及びプログラムを提供することにある。
上記目的を達成するため、本発明の一側面におけるWebサイト設計支援装置は、
Webサイトのソースコードを解析して、前記ソースコードを構成するルーティング定義から、遷移元となる画面の一覧を取得し、取得した前記遷移元となる画面の一覧に基づいて、前記Webサイトにおける画面遷移を特定する遷移情報を生成する、画面遷移解析部と、
生成された前記遷移情報に基づいて、前記Webサイトにおける画面遷移を示す画面遷移図を生成する、画面遷移図生成部と、
を備えている、ことを特徴とする。
また、上記目的を達成するため、本発明の一側面におけるWebサイト設計支援方法は、
(a)Webサイトのソースコードを解析して、前記ソースコードを構成するルーティング定義から、遷移元となる画面の一覧を取得し、取得した前記遷移元となる画面の一覧に基づいて、前記Webサイトにおける画面遷移を特定する遷移情報を生成する、ステップと、
(b)生成された前記遷移情報に基づいて、前記Webサイトにおける画面遷移を示す画面遷移図を生成する、ステップと、
を有する、ことを特徴とする。
更に、上記目的を達成するため、本発明の一側面におけるプログラムは、
コンピュータに、
(a)Webサイトのソースコードを解析して、前記ソースコードを構成するルーティング定義から、遷移元となる画面の一覧を取得し、取得した前記遷移元となる画面の一覧に基づいて、前記Webサイトにおける画面遷移を特定する遷移情報を生成する、ステップと、
(b)生成された前記遷移情報に基づいて、前記Webサイトにおける画面遷移を示す画面遷移図を生成する、ステップと、
を実行させる、ことを特徴とする。
以上のように、本発明によれば、Webサイトの画面遷移を可視化して、Webサイトの設計の効率化を図ることができる。
図1は、本発明の実施の形態におけるWebサイト設計支援装置の概略構成を示すブロック図である。 図2は、本発明の実施の形態におけるWebサイト設計支援装置の構成をより具体的に示すブロック図である。 図3は、本発明の実施の形態におけるWebサイト設計支援装置の動作を示すフロー図である。 図4は、本発明の実施の形態で対象となるソースコードの一例を示す図である。 図5は、図3に示したステップA3の静的遷移先の抽出処理の一例を示す図である。 図6は、図3に示したステップA4の動的遷移先の抽出処理の一例を示す図である。 図7は、本発明の実施の形態で生成された遷移情報の一例を示す図である。 図8は、図7に示す遷移情報から生成された画面遷移図の一例を示す図である。 図9は、本発明の実施の形態におけるWebサイト設計支援装置を実現するコンピュータの一例を示すブロック図である。
(実施の形態)
以下、本発明の実施の形態における、Webサイト設計支援装置、Webサイト設計支援方法、及びプログラムについて、図1〜図9を参照しながら説明する。
[装置構成]
最初に、本発明の実施の形態におけるWebサイト設計支援装置の概略構成について説明する。図1は、本発明の実施の形態におけるWebサイト設計支援装置の概略構成を示すブロック図である。
図1に示す、本実施の形態におけるWebサイト設計支援装置10は、Webサイトの設計を支援するための装置である。図1に示すように、Webサイト設計支援装置10は、画面遷移解析部11と、画面遷移図生成部12とを備えている。
画面遷移解析部11は、まず、Webサイトのソースコードを解析して、ソースコードを構成するルーティング定義から、遷移元となる画面の一覧を取得する。次いで、画面遷移解析部11は、取得した遷移元となる画面の一覧に基づいて、遷移情報を生成する。遷移情報は、Webサイトにおける画面遷移を特定する情報である。また、画面遷移図生成部12は、画面遷移解析部11によって生成された遷移情報に基づいて、Webサイトにおける画面遷移を示す画面遷移図を生成する。
このように、本実施の形態では、Webサイトのソースコードから、画面遷移を示す画面遷移図が生成される。このため、本実施の形態によれば、Webサイトの画面遷移を可視化して、Webサイトの設計の効率化を図ることができる。
続いて、図2を用いて、本実施の形態におけるWebサイト設計支援装置の構成及び機能についてより具体的に説明する。図2は、本発明の実施の形態におけるWebサイト設計支援装置の構成をより具体的に示すブロック図である。
まず、図2に示すように、Webサイト設計支援装置10は、上述した画面遷移解析部11及び画面遷移図生成部12に加えて、記憶部13と、出力部14とを備えている。このうち、記憶部13は、画面遷移解析部11によって生成された遷移情報を格納する。出力部14は、画面遷移図を画面上に表示するため、画面遷移図生成部12によって生成された画面遷移図の画像データを生成し、これを、外部の表示装置、又は端末装置に出力する。
また、図2に示すように、本実施の形態において、画面遷移解析部11による解析の対象となるWebサイトのソースコード20は、ルーティング定義21と、コンポーネント22とを含んでいる。ルーティング定義21は、URLの移動を伴う画面遷移を定義している(後述の図4参照)。コンポーネント22は、外面に表示される内容、ボタンの押下によって実行されるイベント処理等を定義している(後述の図4参照)。
画面遷移解析部11は、本実施の形態では、ルーティング定義21から、遷移元となる画面の一覧を取得する。具体的には、画面遷移解析部11は、遷移元となる画面の一覧として、遷移元となる画面毎に、その画面のパスと、それに紐付くコンポーネント22とを取得する。
そして、画面遷移解析部11は、取得した画面の一覧に基づいて、ソースコード20を
構成するコンポーネント22から、静的遷移先及び動的遷移先を抽出する。具体的には、画面遷移解析部11は、遷移元となる画面毎のコンポーネント22からHTMLファイルを特定し、特定したHTMLファイルから、静的遷移先を抽出する。また、画面遷移解析部11は、遷移元となる画面毎のコンポーネントから動的遷移処理を行うクラスの変数を特定し、特定したクラスの変数に基づいて、動的遷移先を抽出する。
また、画面遷移解析部11は、抽出した静的遷移先及び動的遷移先を用いて、遷移情報を生成し(後述の図7参照)、生成した遷移情報を、記憶部13に格納する。
画面遷移図生成部12は、本実施の形態では、遷移元、静的遷移先、及び動的遷移先、それぞれに対応するオブジェクトと、オブジェクト間の関係を示すリンクとを用いて、画面遷移図を生成する。
[装置動作]
次に、本実施の形態におけるWebサイト設計支援装置10の動作について図3を用いて説明する。図3は、本発明の実施の形態におけるWebサイト設計支援装置の動作を示すフロー図である。以下の説明においては、適宜図1を参酌する。また、本実施の形態1では、Webサイト設計支援装置10を動作させることによって、Webサイト設計支援方法が実施される。よって、本実施の形態におけるWebサイト設計支援方法の説明は、以下のWebサイト設計支援装置10の動作説明に代える。
図3に示すように、最初に、画面遷移解析部11は、Webサイトのソースコードを取得する(ステップA1)。
次に、画面遷移解析部11は、ステップA1で取得したソースコードのルーティング定義21から、遷移元となる画面の一覧を取得する(ステップA2)。具体的には、画面遷移解析部11は、遷移元となる画面の一覧として、遷移元となる画面毎に、その画面のパスと、それに紐付くコンポーネント22とを取得する。
次に、画面遷移解析部11は、取得した画面の一覧に基づいて、ソースコード20を構成するコンポーネント22から、静的遷移先を抽出する(ステップA3)。具体的には、画面遷移解析部11は、遷移元となる画面毎のコンポーネント22からHTMLファイルを特定し、特定したHTMLファイルから、静的遷移先を抽出する。
次に、画面遷移解析部11は、取得した画面の一覧に基づいて、ソースコード20を構成するコンポーネント22から、動的遷移先を抽出する(ステップA4)。具体的には、画面遷移解析部11は、遷移元となる画面毎のコンポーネントから動的遷移処理を行うクラスの変数を特定し、特定したクラスの変数に基づいて、動的遷移先を抽出する。
次に、画面遷移解析部11は、ステップA3及びA4で抽出した静的遷移先及び動的遷移先を用いて、遷移情報を生成し、生成した遷移情報を、記憶部13に格納する(ステップA5)。
次に、画面遷移図生成部12は、ステップA4で生成された遷移情報に基づいて、Webサイトにおける画面遷移を示す画面遷移図を生成する(ステップA6)。具体的には、画面遷移図生成部12は、遷移元、静的遷移先、及び動的遷移先、それぞれに対応するオブジェクトと、オブジェクト間の関係を示すリンクとを用いて、画面遷移図を生成する。
次に、出力部14は、ステップA4で生成された画面遷移図を画面上に表示するため、画面遷移図の画像データを生成し、これを、外部の表示装置、又は端末装置に出力する(
ステップA7)。
[具体例]
ここで、図4〜図8を用いて、上記ステップA1〜A6について具体例を挙げて説明する。図4は、本発明の実施の形態で対象となるソースコードの一例を示す図である。図5は、図3に示したステップA3の静的遷移先の抽出処理の一例を示す図である。図6は、図3に示したステップA4の動的遷移先の抽出処理の一例を示す図である。図7は、本発明の実施の形態で生成された遷移情報の一例を示す図である。図8は、図7に示す遷移情報から生成された画面遷移図の一例を示す図である。
ステップA1:
ステップA1において、画面遷移解析部11は、図4に示すWebサイトのソースコードを取得する。図4に示すように、ソースコード20は、ルーティング定義21と、コンポーネント22とを含んでいる。
図4の例 では、ルーティング定義21は、page1へのpath(URL)と、それに紐付くコンポーネントとを定義している。また、ルーティング定義21は、page2へのpath(URL)と、それに紐付くコンポーネントも定義している。
また、図4の例では、コンポーネントは、アプリケーションでボタンを表示するためのHTMLによる定義(view(HTML))と、ボタンの押下によって実行されるイベント処理(viewModel(TypeScript))とを含んでいる。
ステップA2:
ステップA2において、画面遷移解析部11は、図4に示したルーティング定義21から、遷移元となる画面の一覧として、path(URL)と、それに紐付くコンポーネントとを取得する。図4の例では、画面遷移解析部11は、「path: 'page1'」、「component: Page1Component」、「path: 'page2'」、「component: Page2Component」を取得する。また、「component: Page1Component」は、図5の上段に示され、「component: Page2Component」は、図6に示される。
ステップA3:
ステップA3においては、画面遷移解析部11は、まず、図5の上段に示すように、HTMLファイルを含むコンポーネントを解析して、HTMLファイルのファイル名「page01.component.html」を取得する。
次に、画面遷移解析部11は、図5の中段に示すように、該当するHTMLファイル(図4に示したView(HTML))を解析し、静的遷移先として、roterLink属性の値「page2」を抽出する。同時に、画面遷移解析部11は、roterLink属性のvalue値から、遷移イベント名として、「toPage2」を取得する。
そして、画面遷移解析部11は、図5の下段に示すように、抽出した静的遷移先「page2」がルーティング定義に存在しているかどうかを判定する。図5の下段では、静的遷移先「page2」がルーティング定義に存在しているので、画面遷移解析部11は、これを静的遷移先に決定する。
ステップA4:
ステップA4においては、画面遷移解析部11は、まず、図6に示すように、動的遷移処理を行うクラスを含むコンポーネントを解析して、動的遷移処理を行うクラスの変数名「router: Router」を取得する(図6中のA参照)。
次に、画面遷移解析部11は、取得した変数名に基づいて、動的遷移処理の実行箇所として、「router.navigate([“/page2”])」と「router.navigate([next])」とを特定し、更に、特定した実行箇所から引数を特定する(図6中のB参照)。図6の例では、画面遷移解析部11は、引数として、「page2」を特定し、これを動的遷移先として抽出する。
また、画面遷移解析部11は、特定した引数の値が可変値かどうかを判断し、可変値の場合は、可変値の定義箇所を探索し、探索によって得られた定義箇所も動的遷移先として抽出する。図6の例では、先に特定した引数「next」の値が可変値であるため、画面遷移解析部11は、探索を行い、可変値の定義箇所として「page3」を特定し、「page3」も動的遷移先として抽出する(図6中のC参照)。
更に、画面遷移解析部11は、特定した「page3」のメソッド名「search」を、遷移イベント名として取得する(図6中のD参照)。
ステップA5:
ステップA5では、画面遷移解析部11は、ステップA2で取得した遷移元の情報、ステップA3で抽出した静的遷移先「page2」の情報と、ステップA4で抽出した動的遷移先「page2」及び「page3」の情報とを用いて、図7に示す遷移情報を生成する。また、図7の例では、遷移情報は、「遷移元画面→遷移先画面:イベント名」の形式で、生成されている。
ステップA6:
ステップA6では、画面遷移解析部11は、図7に示す遷移情報を用いて、図8に示す画面遷移図を生成する。
ステップA7:
ステップA7では、出力部14は、図8に示す画面遷移図を画面上に表示するため、画面遷移図の画像データを生成し、これを、外部の表示装置、又は端末装置に出力する。これにより、Webサイトの設計者は、画面遷移図を画面上で確認することができる。
[実施の形態における効果]
以上のように、本実施の形態では、Webサイトのソースコード20から、画面遷移を示す画面遷移図(図8参照)が生成され、Webサイトの画面遷移が可視化される。このため、Webサイトの設計者は、Webサイトを実際に実装することなく、設計通りに画面遷移が行われるかどうかを確認することができるので、Webサイトの設計の効率化が図られることになる。
[プログラム]
本実施の形態におけるプログラムは、コンピュータに、図3に示すステップA1〜A7を実行させるプログラムであれば良い。このプログラムをコンピュータにインストールし、実行することによって、本実施の形態におけるWebサイト設計支援装置10とWebサイト設計支援方法とを実現することができる。この場合、コンピュータのプロセッサは、画面遷移解析部11、画面遷移図生成部12、及び出力部14として機能し、処理を行なう。
また、本実施の形態におけるプログラムは、複数のコンピュータによって構築されたコンピュータシステムによって実行されても良い。この場合は、例えば、各コンピュータが、それぞれ、画面遷移解析部11、画面遷移図生成部12、及び出力部14のいずれかとして機能しても良い。
ここで、本実施の形態におけるプログラムを実行することによって、Webサイト設計支援装置10を実現するコンピュータについて図9を用いて説明する。図9は、本発明の実施の形態におけるWebサイト設計支援装置を実現するコンピュータの一例を示すブロック図である。
図9に示すように、コンピュータ110は、CPU(Central Processing Unit)111と、メインメモリ112と、記憶装置113と、入力インターフェイス114と、表示コントローラ115と、データリーダ/ライタ116と、通信インターフェイス117とを備える。これらの各部は、バス121を介して、互いにデータ通信可能に接続される。また、コンピュータ110は、CPU111に加えて、又はCPU111に代えて、GPU(Graphics Processing Unit)、又はFPGA(Field-Programmable Gate Array)を備えていても良い。
CPU111は、記憶装置113に格納された、本実施の形態におけるプログラム(コード)をメインメモリ112に展開し、これらを所定順序で実行することにより、各種の演算を実施する。メインメモリ112は、典型的には、DRAM(Dynamic Random Access Memory)等の揮発性の記憶装置である。また、本実施の形態におけるプログラムは、コンピュータ読み取り可能な記録媒体120に格納された状態で提供される。なお、本実施の形態におけるプログラムは、通信インターフェイス117を介して接続されたインターネット上で流通するものであっても良い。
また、記憶装置113の具体例としては、ハードディスクドライブの他、フラッシュメモリ等の半導体記憶装置が挙げられる。入力インターフェイス114は、CPU111と、キーボード及びマウスといった入力機器118との間のデータ伝送を仲介する。表示コントローラ115は、ディスプレイ装置119と接続され、ディスプレイ装置119での表示を制御する。
データリーダ/ライタ116は、CPU111と記録媒体120との間のデータ伝送を仲介し、記録媒体120からのプログラムの読み出し、及びコンピュータ110における処理結果の記録媒体120への書き込みを実行する。通信インターフェイス117は、CPU111と、他のコンピュータとの間のデータ伝送を仲介する。
また、記録媒体120の具体例としては、CF(Compact Flash(登録商標))及びSD(Secure Digital)等の汎用的な半導体記憶デバイス、フレキシブルディスク(Flexible Disk)等の磁気記録媒体、又はCD−ROM(Compact Disk Read Only Memory)などの光学記録媒体が挙げられる。
なお、本実施の形態におけるWebサイト設計支援装置10は、プログラムがインストールされたコンピュータではなく、各部に対応したハードウェアを用いることによっても実現可能である。更に、Webサイト設計支援装置10は、一部がプログラムで実現され、残りの部分がハードウェアで実現されていてもよい。
上述した実施の形態の一部又は全部は、以下に記載する(付記1)〜(付記9)によって表現することができるが、以下の記載に限定されるものではない。
(付記1)
Webサイトのソースコードを解析して、前記ソースコードを構成するルーティング定義から、遷移元となる画面の一覧を取得し、取得した前記遷移元となる画面の一覧に基づいて、前記Webサイトにおける画面遷移を特定する遷移情報を生成する、画面遷移解析
部と、
生成された前記遷移情報に基づいて、前記Webサイトにおける画面遷移を示す画面遷移図を生成する、画面遷移図生成部と、
を備えている、ことを特徴とするWebサイト設計支援装置。
(付記2)
付記1に記載のWebサイト設計支援装置であって、
前記画面遷移解析部が、
取得した前記遷移元となる画面の一覧に基づいて、前記ソースコードを構成するコンポーネントから、静的遷移先及び動的遷移先を抽出し、抽出した前記静的遷移先及び前記動的遷移先を用いて、前記遷移情報を生成する、
ことを特徴とするWebサイト設計支援装置。
(付記3)
付記2に記載のWebサイト設計支援装置であって、
前記画面遷移解析部が、
前記遷移元となる画面の一覧として、前記遷移元となる画面毎に、当該画面のパスと、それに紐付く前記コンポーネントとを取得し、
そして、前記遷移元となる画面毎の前記コンポーネントからHTMLファイルを特定し、特定した前記HTMLファイルから、前記静的遷移先を抽出し、
更に、前記遷移元となる画面毎の前記コンポーネントから動的遷移処理を行うクラスの変数を特定し、特定した前記クラスの変数に基づいて、前記動的遷移先を抽出する、
ことを特徴とするWebサイト設計支援装置。
(付記4)
(a)Webサイトのソースコードを解析して、前記ソースコードを構成するルーティング定義から、遷移元となる画面の一覧を取得し、取得した前記遷移元となる画面の一覧に基づいて、前記Webサイトにおける画面遷移を特定する遷移情報を生成する、ステップと、
(b)生成された前記遷移情報に基づいて、前記Webサイトにおける画面遷移を示す画面遷移図を生成する、ステップと、
を有する、ことを特徴とするWebサイト設計支援方法。
(付記5)
付記4に記載のWebサイト設計支援方法であって、
前記(a)のステップにおいて、
取得した前記遷移元となる画面の一覧に基づいて、前記ソースコードを構成するコンポーネントから、静的遷移先及び動的遷移先を抽出し、抽出した前記静的遷移先及び前記動的遷移先を用いて、前記遷移情報を生成する、
ことを特徴とするWebサイト設計支援方法。
(付記6)
付記5に記載のWebサイト設計支援方法であって、
前記(a)のステップにおいて、
前記遷移元となる画面の一覧として、前記遷移元となる画面毎に、当該画面のパスと、それに紐付く前記コンポーネントとを取得し、
そして、前記遷移元となる画面毎の前記コンポーネントからHTMLファイルを特定し、特定した前記HTMLファイルから、前記静的遷移先を抽出し、
更に、前記遷移元となる画面毎の前記コンポーネントから動的遷移処理を行うクラスの変数を特定し、特定した前記クラスの変数に基づいて、前記動的遷移先を抽出する、
ことを特徴とするWebサイト設計支援方法。
(付記7)
コンピュータに、
(a)Webサイトのソースコードを解析して、前記ソースコードを構成するルーティング定義から、遷移元となる画面の一覧を取得し、取得した前記遷移元となる画面の一覧に基づいて、前記Webサイトにおける画面遷移を特定する遷移情報を生成する、ステップと、
(b)生成された前記遷移情報に基づいて、前記Webサイトにおける画面遷移を示す画面遷移図を生成する、ステップと、
を実行させる、プログラム。
(付記8)
付記7に記載のプログラムであって、
前記(a)のステップにおいて、
取得した前記遷移元となる画面の一覧に基づいて、前記ソースコードを構成するコンポーネントから、静的遷移先及び動的遷移先を抽出し、抽出した前記静的遷移先及び前記動的遷移先を用いて、前記遷移情報を生成する、
ことを特徴とするプログラム。
(付記9)
付記8に記載のプログラムであって、
前記(a)のステップにおいて、
前記遷移元となる画面の一覧として、前記遷移元となる画面毎に、当該画面のパスと、それに紐付く前記コンポーネントとを取得し、
そして、前記遷移元となる画面毎の前記コンポーネントからHTMLファイルを特定し、特定した前記HTMLファイルから、前記静的遷移先を抽出し、
更に、前記遷移元となる画面毎の前記コンポーネントから動的遷移処理を行うクラスの変数を特定し、特定した前記クラスの変数に基づいて、前記動的遷移先を抽出する、
ことを特徴とするプログラム。
以上のように、本発明によれば、Webサイトの画面遷移を可視化して、Webサイトの設計の効率化を図ることができる。
10 Webサイト設計支援装置
11 画面遷移解析部
12 画面遷移図生成部
13 記憶部
14 出力部
20 ソースコード
21 ルーティング定義
22 コンポーネント
110 コンピュータ
111 CPU
112 メインメモリ
113 記憶装置
114 入力インターフェイス
115 表示コントローラ
116 データリーダ/ライタ
117 通信インターフェイス
118 入力機器
119 ディスプレイ装置
120 記録媒体
121 バス

Claims (9)

  1. Webサイトのソースコードを解析して、前記ソースコードを構成するルーティング定義から、遷移元となる画面の一覧を取得し、取得した前記遷移元となる画面の一覧に基づいて、前記Webサイトにおける画面遷移を特定する遷移情報を生成する、画面遷移解析部と、
    生成された前記遷移情報に基づいて、前記Webサイトにおける画面遷移を示す画面遷移図を生成する、画面遷移図生成部と、
    を備えている、ことを特徴とするWebサイト設計支援装置。
  2. 請求項1に記載のWebサイト設計支援装置であって、
    前記画面遷移解析部が、
    取得した前記遷移元となる画面の一覧に基づいて、前記ソースコードを構成するコンポーネントから、静的遷移先及び動的遷移先を抽出し、抽出した前記静的遷移先及び前記動的遷移先を用いて、前記遷移情報を生成する、
    ことを特徴とするWebサイト設計支援装置。
  3. 請求項2に記載のWebサイト設計支援装置であって、
    前記画面遷移解析部が、
    前記遷移元となる画面の一覧として、前記遷移元となる画面毎に、当該画面のパスと、それに紐付く前記コンポーネントとを取得し、
    そして、前記遷移元となる画面毎の前記コンポーネントからHTMLファイルを特定し、特定した前記HTMLファイルから、前記静的遷移先を抽出し、
    更に、前記遷移元となる画面毎の前記コンポーネントから動的遷移処理を行うクラスの変数を特定し、特定した前記クラスの変数に基づいて、前記動的遷移先を抽出する、
    ことを特徴とするWebサイト設計支援装置。
  4. (a)Webサイトのソースコードを解析して、前記ソースコードを構成するルーティング定義から、遷移元となる画面の一覧を取得し、取得した前記遷移元となる画面の一覧に基づいて、前記Webサイトにおける画面遷移を特定する遷移情報を生成する、ステップと、
    (b)生成された前記遷移情報に基づいて、前記Webサイトにおける画面遷移を示す画面遷移図を生成する、ステップと、
    を有する、ことを特徴とするWebサイト設計支援方法。
  5. 請求項4に記載のWebサイト設計支援方法であって、
    前記(a)のステップにおいて、
    取得した前記遷移元となる画面の一覧に基づいて、前記ソースコードを構成するコンポーネントから、静的遷移先及び動的遷移先を抽出し、抽出した前記静的遷移先及び前記動的遷移先を用いて、前記遷移情報を生成する、
    ことを特徴とするWebサイト設計支援方法。
  6. 請求項5に記載のWebサイト設計支援方法であって、
    前記(a)のステップにおいて、
    前記遷移元となる画面の一覧として、前記遷移元となる画面毎に、当該画面のパスと、それに紐付く前記コンポーネントとを取得し、
    そして、前記遷移元となる画面毎の前記コンポーネントからHTMLファイルを特定し、特定した前記HTMLファイルから、前記静的遷移先を抽出し、
    更に、前記遷移元となる画面毎の前記コンポーネントから動的遷移処理を行うクラスの変数を特定し、特定した前記クラスの変数に基づいて、前記動的遷移先を抽出する、
    ことを特徴とするWebサイト設計支援方法。
  7. コンピュータに、
    (a)Webサイトのソースコードを解析して、前記ソースコードを構成するルーティング定義から、遷移元となる画面の一覧を取得し、取得した前記遷移元となる画面の一覧に基づいて、前記Webサイトにおける画面遷移を特定する遷移情報を生成する、ステップと、
    (b)生成された前記遷移情報に基づいて、前記Webサイトにおける画面遷移を示す画面遷移図を生成する、ステップと、
    を実行させる、プログラム。
  8. 請求項7に記載のプログラムであって、
    前記(a)のステップにおいて、
    取得した前記遷移元となる画面の一覧に基づいて、前記ソースコードを構成するコンポーネントから、静的遷移先及び動的遷移先を抽出し、抽出した前記静的遷移先及び前記動的遷移先を用いて、前記遷移情報を生成する、
    ことを特徴とするプログラム。
  9. 請求項8に記載のプログラムであって、
    前記(a)のステップにおいて、
    前記遷移元となる画面の一覧として、前記遷移元となる画面毎に、当該画面のパスと、それに紐付く前記コンポーネントとを取得し、
    そして、前記遷移元となる画面毎の前記コンポーネントからHTMLファイルを特定し、特定した前記HTMLファイルから、前記静的遷移先を抽出し、
    更に、前記遷移元となる画面毎の前記コンポーネントから動的遷移処理を行うクラスの変数を特定し、特定した前記クラスの変数に基づいて、前記動的遷移先を抽出する、
    ことを特徴とするプログラム。
JP2019058897A 2019-03-26 2019-03-26 Webサイト設計支援装置、Webサイト設計支援方法、及びプログラム Active JP7260150B2 (ja)

Priority Applications (1)

Application Number Priority Date Filing Date Title
JP2019058897A JP7260150B2 (ja) 2019-03-26 2019-03-26 Webサイト設計支援装置、Webサイト設計支援方法、及びプログラム

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
JP2019058897A JP7260150B2 (ja) 2019-03-26 2019-03-26 Webサイト設計支援装置、Webサイト設計支援方法、及びプログラム

Publications (2)

Publication Number Publication Date
JP2020160746A true JP2020160746A (ja) 2020-10-01
JP7260150B2 JP7260150B2 (ja) 2023-04-18

Family

ID=72643435

Family Applications (1)

Application Number Title Priority Date Filing Date
JP2019058897A Active JP7260150B2 (ja) 2019-03-26 2019-03-26 Webサイト設計支援装置、Webサイト設計支援方法、及びプログラム

Country Status (1)

Country Link
JP (1) JP7260150B2 (ja)

Cited By (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
JP7378869B2 (ja) 2021-10-21 2023-11-14 データ・サイエンティスト株式会社 体感距離情報生成プログラム、体感距離情報生成方法および体感距離情報生成装置

Citations (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
JP2018106556A (ja) * 2016-12-27 2018-07-05 株式会社日立製作所 画面情報生成装置、画面情報生成方法、及びプログラム
JP2018116496A (ja) * 2017-01-18 2018-07-26 日本電信電話株式会社 差異検出装置及びプログラム

Patent Citations (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
JP2018106556A (ja) * 2016-12-27 2018-07-05 株式会社日立製作所 画面情報生成装置、画面情報生成方法、及びプログラム
JP2018116496A (ja) * 2017-01-18 2018-07-26 日本電信電話株式会社 差異検出装置及びプログラム

Non-Patent Citations (1)

* Cited by examiner, † Cited by third party
Title
末次 章, ANGULARによる モダンWEB開発 基礎編, vol. 第2版, JPN6022047997, 25 February 2019 (2019-02-25), JP, pages 107 - 140, ISSN: 0004920179 *

Cited By (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
JP7378869B2 (ja) 2021-10-21 2023-11-14 データ・サイエンティスト株式会社 体感距離情報生成プログラム、体感距離情報生成方法および体感距離情報生成装置

Also Published As

Publication number Publication date
JP7260150B2 (ja) 2023-04-18

Similar Documents

Publication Publication Date Title
US11194884B2 (en) Method for facilitating identification of navigation regions in a web page based on document object model analysis
CN108255485B (zh) 页面搭建方法、设备及电子设备
US20170091159A1 (en) Programmatic native rendering of structured content
US9817811B2 (en) Web server system, dictionary system, dictionary call method, screen control display method, and demonstration application generation method
US20080155406A1 (en) Gui generation apparatus and method for generating gui
US20180113858A1 (en) Interface layout interference detection
KR101552914B1 (ko) 웹 서버 어플리케이션 프레임워크 장치와 프레임워크를 이용한 웹 어플리케이션 처리 방법 및 이를 구현할 수 있는 컴퓨터로 읽을 수 있는 기록 매체
US11604662B2 (en) System and method for accelerating modernization of user interfaces in a computing environment
Swearngin et al. Genie: Input Retargeting on the Web through Command Reverse Engineering
JP7260150B2 (ja) Webサイト設計支援装置、Webサイト設計支援方法、及びプログラム
US20180181550A1 (en) Screen information generation device and screen information generation method
CN117055987A (zh) 网页显示方法、装置、电子设备及计算机可读存储介质
US10706215B2 (en) Producing formula representations of mathematical text
JP4553246B2 (ja) ウェブ画面作成方法、プログラム及びサーバ
JP6231260B2 (ja) 画面制御システム、画面制御プログラム、画面作成支援プログラム及び画面制御方法
CN104267954A (zh) 一种用户界面中所包含的部件的生成方法和装置
JP6506108B2 (ja) プログラム表示装置、プログラム表示システム、プログラム表示方法、及びプログラム表示プログラム
CN113934959A (zh) 一种程序预览方法、装置、计算机设备和存储介质
JP6113983B2 (ja) 画面コントロール表示システムおよび画面コントロール表示プログラム
JP5702265B2 (ja) プログラム自動生成装置およびプログラム自動生成方法
JP5476867B2 (ja) マッシュアッププログラム、マッシュアップ装置及びマッシュアップ方法
JP2007279795A (ja) プログラムによって表示される画面が仕様を満たすか判断するシステム
JP2007156898A (ja) 情報処理装置及びその制御方法、プログラム、記憶媒体
JP2008191993A (ja) Gui部品表示装置及びgui部品表示方法
CN112068826A (zh) 文本输入的控制方法、系统、电子设备和存储介质

Legal Events

Date Code Title Description
A621 Written request for application examination

Free format text: JAPANESE INTERMEDIATE CODE: A621

Effective date: 20220209

A977 Report on retrieval

Free format text: JAPANESE INTERMEDIATE CODE: A971007

Effective date: 20221109

A131 Notification of reasons for refusal

Free format text: JAPANESE INTERMEDIATE CODE: A131

Effective date: 20221115

A521 Request for written amendment filed

Free format text: JAPANESE INTERMEDIATE CODE: A523

Effective date: 20230112

TRDD Decision of grant or rejection written
A01 Written decision to grant a patent or to grant a registration (utility model)

Free format text: JAPANESE INTERMEDIATE CODE: A01

Effective date: 20230307

A61 First payment of annual fees (during grant procedure)

Free format text: JAPANESE INTERMEDIATE CODE: A61

Effective date: 20230330

R150 Certificate of patent or registration of utility model

Ref document number: 7260150

Country of ref document: JP

Free format text: JAPANESE INTERMEDIATE CODE: R150