JP6676122B2 - 高速のローディング速度を有するコンポーネント生成方法 - Google Patents

Description

本発明は高速のローディング速度を有するノード生成方法に関し、より詳細には、コンポーネントの類型によってノード生成方式を異なるようにすることにより、クライアントで画面の初期ローディング時に高速のローディング速度を有するノード生成方法に関する。

一般に、ウェブページはｈｔｍｌ文書方式でウェブページの画面を構成するノードの生成方式として静的な方式を採択する。この際、ノードのスタイル値もウェブブラウザが内部のレンダリングエンジンで指定した後に一度に画面に表現する。

これよりも改善された方式としてジャバスクリプト基盤のフレームワークではノードの生成と関連して動的な方式を採択し、この際にスタイル値をいちいちセットする。

しかし、ジャバスクリプト基盤のフレームワークの場合、全てのノードを動的に生成する方式を採択するため、コンポーネント生成の非効率性を招き、コンポーネントのローディング速度が低下するという限界がある。

ジャバスクリプトフレームワークは一般的にコンポーネントを介して画面を制御するが、コンポーネントは属性（ｐｒｏｐｅｒｔｙ）、方法（ｍｅｔｈｏｄ）及びイベントをもって画面に表現されることをいう。このとき、コンポーネントは１つ以上の抽象化されたエレメントを含む。コンポーネントはエレメント客体を生成し、このエレメントはｈｔｍｌのノードを１つ以上含む。

そこで、本発明は上記事情に鑑みてなされたものであって、その目的は、画面上のコンポーネントの初期ローディング時間が短い高速のローディング速度を有するノード生成方法を提供することにある。

前記課題を解決するための本発明の一態様に係る高速のローディング速度を有するノード生成方法は、ウェブブラウザのローディング時に画面デザイン情報が所定のスクリプトソースに変換されたスクリプトソースに基づいて、コンポーネントを生成するとき、前記コンポーネントが第１類型の場合、コンポーネント生成部が第１方式によりコンポーネントを生成する段階と、前記コンポーネントが第２類型の場合、コンポーネント生成部が第２方式によりコンポーネントを生成する段階とを含み、前記第１方式は動的生成方式であり、第２方式はｉｎｎｅｒ ＨＴＬＭを用いた方式であることを特徴とする。

前記コンポーネントが第１類型の場合、コンポーネント生成部が第１方式によりコンポーネントを生成する段階は、前記コンポーネント生成部が前記スクリプトソースを用いてコンポーネントを生成する段階と、前記コンポーネント生成部が前記生成したコンポーネントの内部で前記コンポーネントに対応するエレメント客体を生成する段階とを含み、前記生成されたエレメント客体の内部でＨＴＭＬノードが生成され、前記ＨＴＭＬノードは、前記生成されたエレメント客体にマッチングされることができる。

前記コンポーネントが第２類型の場合、コンポーネント生成部が第２方式によりコンポーネントを生成する段階は、前記コンポーネント生成部が前記スクリプトソースを用いてコンポーネントを生成する段階と、前記コンポーネント生成部が生成したコンポーネントの内部で前記コンポーネントに対応するエレメント客体を生成する段階と、生成されたエレメント客体の内部でＨＴＭＬに該当するノード情報を含むｉｎｎｅｒ ＨＴＭＬ文字列が生成され、前記コンポーネント生成部が前記コンポーネントに含まれるサブコンポーネントを生成する段階と、前記コンポーネント生成部がｉｎｎｅｒ ＨＴＭＬのノード生成に必要な文字列をセットする段階とを含み、前記ｉｎｎｅｒ ＨＴＭＬに該当する少なくとも１つのノードが生成されると、前記生成されたノードは、生成されたエレメント客体とマッピングされることができる。

前記第２類型はディーアイブイ（ｄｉｖ）、タブ（ｔａｂ）、ポップアップディーアイブイ（ｐｏｐｕｐｄｉｖ）、フォーム（ｆｏｒｍ）、グリッド（ｇｒｉｄ）及びリストビュー（ｌｉｓｔｖｉｅｗ）のうち少なくとも１つを含むことができる。

前記画面デザイン情報は、ｘｍｌデータであり得る。

前記スクリプトソースは、ジャバスクリプトソース（ｊａｖａｓｃｒｉｐｔ ｓｏｕｒｃｅ）であり得る。

前記第１類型及び第２類型は、予め設定されることができる。

前記第２類型に該当するコンポーネントは、内部にサブコンポーネントを含むコンテナ機能を有することができる。

前記方法は、コンピュータ読み取り可能な記録媒体に格納されたコンピュータプログラムにより実行されることができる。

本発明の高速のローディング速度を有するノード生成方法によれば、クライアントで複数のコンポーネントを含む画面の初期ローディング時間を画期的に短縮させることができるという効果を奏する。

本発明の実施形態に係る高速のローディング速度を有するノード生成方法を実行するための装置の構成図である。 本発明の実施形態に係る高速のローディング速度を有するノード生成方法の順序図である。 本発明の実施形態に係る高速のローディング速度を有するノード生成方法を説明するコンポーネントを含むフォーム画面の第１例示である。 本発明の実施形態に係る高速のローディング速度を有するノード生成方法を説明するコンポーネントを含むフォーム画面の第２例示である。 本発明の実施形態に係る高速のローディング速度を有するノード生成方法を説明するコンポーネントを含むフォーム画面の第３例示である。

本発明の目的及び効果、そしてそれらを達成するための技術的構成は、添付の図面と共に詳細に後述される実施形態を参照すれば明確になる。本発明を説明する上で公知の機能又は構成に関する具体的な説明が本発明の要旨を不要に曖昧にする恐れがあると判断される場合には、その詳細な説明を省略する。そして、後述される用語は本発明における構造、役割及び機能を考慮して定義された用語であって、これは使用者、運用者の意図又は慣例などによって変わり得る。

しかし、本発明は以下で開示される実施形態に限定されるものではなく、互いに異なる多様な形態で実現されることができる。但し、本実施形態は本発明の開示を完全なものにし、本発明が属する技術分野における通常の知識を有する者に発明の範疇を完全に理解させるために提供されるものであり、本発明は 請求の範囲に記載された請求項の範疇によって定義されるに過ぎない。従って、その定義は、本明細書全般に亘る内容に基づいて行われるべきである。

明細書全体において、ある部分がある構成要素を「含む」とするとき、これは特に反対となる記載がない限り、他の構成要素を除外するものではなく、他の構成要素を更に含むことができることを意味する。

以下、添付の図面を参照し、本発明の好適な実施形態を更に詳細に説明する。

一方、本発明の実施形態において、各構成要素、機能ブロック又は手段は１つ又はそれ以上の下部構成要素で構成されることができ、各構成要素が実行する電気、電子、機械的機能は電子回路、集積回路、ＡＳＩＣ（Ａｐｐｌｉｃａｔｉｏｎ Ｓｐｅｃｉｆｉｃ Ｉｎｔｅｇｒａｔｅｄ Ｃｉｒｃｕｉｔ）など公知となった多様な素子又は機械的要素で実現されることができる。なお、それぞれ別個で実現してもよく、２以上が１つに統合されて実現してもよい。

また、添付のブロック図の各ブロックとフローチャートの各段階の組み合わせは、コンピュータ・プログラム・インストラクションにより実行されることもできる。これらのコンピュータ・プログラム・インストラクションは、汎用コンピュータ、特殊用コンピュータ、携帯用ノートブックコンピュータ、ネットワークコンピュータなどその他プログラム可能なデータプロセッシング装置のプロセッサに搭載されることができるので、コンピュータ装置又はその他プログラム可能なデータプロセッシング装置のプロセッサによって実行されるそのインストラクションが以下で説明するブロック図の各ブロック又はフローチャートの各段階で説明された機能を行う手段を生成するようになる。これらのコンピュータ・プログラム・インストラクションは、特定方式で機能を実現するために、コンピュータ装置又はその他プログラム可能なデータプロセッシング装置を指向できるコンピュータ装置に利用可能なメモリ又はコンピュータ読み取り可能なメモリに格納されることも可能であるので、ブロック図の各ブロック又はフローチャートの各段階で説明された機能を実行するインストラクション手段を内包する製造物を生産することも可能である。コンピュータ・プログラム・インストラクションは、コンピュータ装置又はその他プログラム可能なデータプロセッシング装置上に搭載されることも可能であるので、コンピュータ装置又はその他プログラム可能なデータプロセッシング装置上で一連の動作段階が行われるためのプロセスを生成してブロック図の各ブロック及びフローチャートの各段階で説明された機能を実行するための段階を提供することも可能である。

更に、各ブロック又は各段階は、特定された論理的な（各）機能を実行するための１つ以上の実行可能なインストラクションを含むモジュール、セグメント又はコードの一部を示すことができる。また、幾つかの代替実施形態ではブロック又は段階で言及された機能が順序から外れて発生することも可能であることに注目しなければならない。例えば、相次いで示されている２つのブロック又は段階は、実際に実質的に同時に行われてもよく、又はそのブロック又は段階が時には該当する機能によって逆順で行われてもよい。

以下、図面を参照し、本発明の実施形態に係る高速のローディング速度を有するコンポーネント生成方法を詳細に説明する。

図１は、本発明の実施形態に係る高速のローディング速度を有するノード生成方法を実行するためのシステムの構成図であり、図２は、本発明の実施形態に係る高速のローディング速度を有するノード生成方法の順序図である。

本発明の実施形態に係る高速のローディング速度を有するノード生成方法を実行するためのシステムは、開発者端末１００とクライアント端末２００とを含む。

前記図１に示すように、開発者端末１００は画面デザイン情報管理部１１０、メモリ部１２０及びソース変換部１３０を含み、クライアント端末２００はコンポーネント生成部２１０を含む。クライアント端末２００はデスクトップＰＣ、ノートブック、スマートフォン及びタブレットのようなコンピュータ・プログラム・インストラクションの実行が可能な全ての装置を含む。クライアント端末２００は他の構成を含むことができるが、説明の便宜上、省略する。

画面をデザインするために、画面開発ツール（画面開発プログラム）を用いて画面をデザインする過程を経るようになるが、開発者が該当ツール上で画面をデザインすると、画面をデザインした画面デザイン情報が生成される。

このとき、前記画面デザイン情報管理部１１０は、前記画面デザイン情報をメモリ部１２０に格納する（Ｓ１００）。前記画面デザイン情報は、ＸＭＬ（ｅｘｔｅｎｓｉｂｌｅ ｍａｒｋｕｐ ｌａｎｇｕａｇｅ）形態で格納されることができる。

その後、前記ソース変換部１３０は、前記格納された画面デザイン情報を所定のスクリプトソースに変換する（Ｓ２００）。前記画面開発ツールはジャバスクリプトフレームワークで実現することができ、前記画面開発ツール上で生成されたＸＭＬデータは前記ソース変換部１３０を介してスクリプトソースに変換される。このとき、前記スクリプトソースは、ジャバスクリプトファイルで生成される。

前記生成されたスクリプトソースは、クライアント端末２００においてウェブブラウザでローディングされて作動を実行する（Ｓ３００）。

このとき、前記スクリプトソースがウェブブラウザでロードされると、コンポーネント生成部２１０はスクリプトソースを用いてコンポーネントを生成するが、本発明の実施形態に係る高速のローディング速度を有するノード生成方法は、コンポーネントの類型によってコンポーネント生成部２１０がノード生成方式を異なるように採択することにより、コンポーネントの生成速度を最適化する。

本発明では、コンポーネントの類型は第１類型と第２類型とに区分するが、コンテナではない単純なコンポーネントは第１類型であり、コンテナが必要な客体は第２類型と定義する。

コンポーネント生成部２１０は、コンポーネントが第１類型の場合、前記スクリプトソースを用いてコンポーネントを生成する（Ｓ４００）。

前記コンポーネント生成部２１０は、ブラウザ別にコンポーネントの内部で実際のノードを生成するために、コンポーネントに対応する内部エレメント客体を生成する（Ｓ４１０）。

生成されたエレメント客体の内部でＨＴＭＬノードを生成し、エレメントとＨＴＭＬノードがマッピングされる（Ｓ４２０）。

その後、前記コンポーネント生成部２１０は、内部エレメント客体を通じて少なくとも１つのＨＴＭＬノードを含むコンポーネントの生成を完了する（Ｓ４３０）。

このとき、前記第１類型のコンポーネントは、ボタン（ｂｕｔｔｏｎ）及びエディット（ｅｄｉｔ）のような一般のコンポーネントに該当し、前記第１類型のコンポーネントの場合、エレメント客体を生成するための関数を用いる動的方式を適用してコンポーネントが生成される。

一方、前記コンポーネントが第２類型の場合、前記コンポーネント生成部２１０は、前記スクリプトソースを用いてコンポーネントを生成する（Ｓ５００）。

前記コンポーネント生成部２１０は、生成されたコンポーネントの内部で前記コンポーネントに対応するエレメント客体を生成する（Ｓ５１０）。

その後、生成されたエレメント客体の内部でＨＴＭＬに該当するノード情報を含むｉｎｎｅｒ ＨＴＭＬ文字列を生成する（Ｓ５２０）。

前記コンポーネント生成部２１０は、第２類型のコンポーネントに含まれるサブコンポーネントの生成が完了すると、ｉｎｎｅｒＨＴＭＬのノード生成に必要な文字列をセットする（Ｓ５３０）。このとき、前記サブコンポーネントは、第１類型のコンポーネントに該当する。

ウェブブラウザがｉｎｎｅｒ ＨＴＭＬに該当するノードを生成すると（Ｓ５４０）、生成された少なくとも１つのＨＴＭＬノードは、エレメントとマッピングされる（Ｓ５５０）。

前記第２類型はディーアイブイ（ｄｉｖ）、タブページ（ｔａｂｐａｇｅ）、ポップアップディーアイブイ（ｐｏｐｕｐｄｉｖ）、フォーム（ｆｏｒｍ）、グリッド（ｇｒｉｄ）及びリストビュー（ｌｉｓｔｖｉｅｗ）のうち少なくとも１つを含むことができる。前記第２類型のコンポーネントは、内部にサブコンポーネントを含むコンテナ機能を有するコンポーネントに該当する。

前記第２類型のコンポーネントは、サブコンポーネントを含むコンテナ機能を有するため、前記第１類型のコンポーネントのように動的生成方式による場合、クライアントで初期ローディング時間が長くならざるを得ない。

複数回繰り返して第１類型のコンポーネントを生成すると、画面をドローする過程が存在し、スクリプトで反復的に属性を設定する過程により遅延が発生せざるを得ない。しかし、第２類型のコンポーネントに含まれる第１類型のサブコンポーネントの生成時にｉｎｎｅｒ ＨＴＭＬ方式を用いると、速くコンポーネントが生成されることができる。

即ち、第２類型のコンポーネントはｉｎｎｅｒ ＨＴＭＬ方式を用いてコンポーネントを生成する方が速く、第１類型のコンポーネントは動的方式で生成する方が速い。本発明の実施形態に係る高速のローディング速度を有するコンポーネント生成方法では、前記第２類型のコンポーネントの場合は、ｉｎｎｅｒ ＨＴＭＬ方式を採択してコンポーネントを生成することによって、クライアントでの画面の初期ローディング時間を画期的に短縮させることができる。前記ｉｎｎｅｒ ＨＴＭＬ方式はノードを一度に生成するので、ローディング性能を画期的に向上させることができる。

このように、前記第１類型及び前記第２類型のコンポーネントを予め設定し、前記第１類型及び第２類型によってコンポーネント生成方式を異なるようにすることにより、クライアントでの画面の初期ローディング時間を画期的に短縮させることができる。

図３は、本発明の実施形態に係る高速のローディング速度を有するノード生成方法を説明するコンポーネントを含むフォーム画面の第１例示であり、図４は、本発明の実施形態に係る高速のローディング速度を有するノード生成方法を説明するコンポーネントを含むフォーム画面の第２例示であり、図５は、本発明の実施形態に係る高速のローディング速度を有するノード生成方法を説明するコンポーネントを含むフォーム画面の第３例示である。

前記図３ないし図５に示すように、ディーアイブイ（ｄｉｖ）は、１つの画面に複数個の部分画面を構成する際に用いるコンポーネントに該当する。

一方、ポップアップディーアイブイ（ｐｏｐｕｐｄｉｖ）は、ディーアイブイと同様、１つの画面に複数個の部分画面を構成する際に用いるが、動的にポップアップの位置を決定して立ち上げ、フォーカスを読むと、自動で消える機能を追加で備える。

また、タブ（ｔａｂ）は、複数のタブページを付けて狭い画面に多数のコンポーネントを配置して用いるコンポーネントであり、タブページは、ディーアイブイと類似する役割を果たし、実際の画面を構成する。

グリッド（ｇｒｉｄ）とリストビュー（ｌｉｓｔｖｉｅｗ）は、同一の形態の多くのデータを繰り返して表現するコンポーネントである。

一方、本発明の実施形態に係る高速のローディング速度を有するノード生成方法は、コンピュータで実行され得るプログラムとして作成可能であり、コンピュータで読み取れる記録媒体を用いて前記プログラムを動作させる汎用デジタルコンピュータで実現することができる。前記コンピュータで読み取れる記録媒体の例としては、ＲＯＭ、ＲＡＭ、ＣＤ−ＲＯＭ、磁気テープ、フロッピーディスク、光データ格納装置などが挙げられ、また搬送波（例えば、インターネットを介した伝送）の形態で実現することを含む。また、コンピュータで読み取れる記録媒体ネットワークで接続されたコンピュータシステムに分散され、分散方式でコンピュータが読み取り可能なコードが格納されて実行されることも可能である。

このように本発明は図面に示した一実施形態を参考にして説明したが、これは例示的なものに過ぎず、当該分野における通常の知識を有する者であれば、これより多様な変形及び実施形態の変形が可能であるという点を理解するはずである。従って、本発明の真の技術的保護範囲は、添付の特許請求の範囲の技術的思想によって定められるべきである。

１００ 開発者端末
１１０ 画面デザイン情報管理部
１２０ メモリ部
１３０ ソース変換部
２００ クライアント端末
２１０ コンポーネント生成部

Claims (7)

1. ウェブブラウザのローディング時に画面デザイン情報が所定のスクリプトソースに変換されたスクリプトソースに基づいて、コンポーネントを生成するとき、前記コンポーネントが第１類型の場合、コンポーネント生成部が第１方式によりコンポーネントを生成する段階と、
   前記コンポーネントが第２類型の場合、コンポーネント生成部が第２方式によりコンポーネントを生成する段階とを含み、
   前記コンポーネントが第１類型の場合、コンポーネント生成部が第１方式によりコンポーネントを生成する段階は、
   前記コンポーネント生成部が前記スクリプトソースを用いてコンポーネントを生成する段階と、
   前記コンポーネント生成部が前記生成されたコンポーネントの内部で前記コンポーネントに対応するエレメント客体を生成する段階とを含み、
   前記生成されたエレメント客体の内部でＨＴＭＬノードが生成され、前記ＨＴＭＬノードは、前記生成されたエレメント客体にマッチングされ、
   前記コンポーネントが第２類型の場合、コンポーネント生成部が第２方式によりコンポーネントを生成する段階は、
   前記コンポーネント生成部が前記スクリプトソースを用いてコンポーネントを生成する段階と、
   前記コンポーネント生成部が生成したコンポーネントの内部で前記コンポーネントに対応するエレメント客体を生成する段階と、
   生成されたエレメント客体の内部でＨＴＭＬに該当するノード情報を含むｉｎｎｅｒ ＨＴＭＬ文字列が生成され、前記コンポーネント生成部が前記コンポーネントに含まれるサブコンポーネントを生成する段階と、
   前記コンポーネント生成部がｉｎｎｅｒ ＨＴＭＬのノード生成に必要な文字列をセットする段階とを含み、
   前記ｉｎｎｅｒ ＨＴＭＬに該当する少なくとも１つのノードが生成されると、前記生成されたノードは、生成されたエレメント客体とマッピングされることを特徴とする高速のローディング速度を有するノード生成方法。
2. 前記第２類型はディーアイブイ（ｄｉｖ）、タブ（ｔａｂ）、ポップアップディーアイブイ（ｐｏｐｕｐｄｉｖ）、フォーム（ｆｏｒｍ）、グリッド（ｇｒｉｄ）及びリストビュー（ｌｉｓｔｖｉｅｗ）のうち少なくとも１つを含むことを特徴とする請求項１に記載の高速のローディング速度を有するノード生成方法。
3. 前記画面デザイン情報は、ｘｍｌデータであることを特徴とする請求項１に記載の高速のローディング速度を有するノード生成方法。
4. 前記スクリプトソースは、ジャバスクリプトソース（ｊａｖａｓｃｒｉｐｔ ｓｏｕｒｃｅ）であることを特徴とする請求項１に記載の高速のローディング速度を有するノード生成方法。
5. 前記第１類型及び第２類型は、予め設定されることを特徴とする請求項１に記載の高速のローディング速度を有するノード生成方法。
6. 前記第２類型に該当するコンポーネントは、内部にサブコンポーネントを含むコンテナ機能を有することを特徴とする請求項１に記載の高速のローディング速度を有するノード生成方法。
7. 請求項１〜６の何れか１項に記載の方法をコンピュータに実行せしめるためにコンピュータ読み取り可能な記録媒体に格納されたコンピュータプログラム。