JP6750124B2 - 端末装置、ｕｉ拡張方法及びｕｉ拡張プログラム - Google Patents

Description

本発明は、端末装置、ＵＩ拡張方法及びＵＩ拡張プログラムに関する。

システム開発は要件定義、設計、コーディング、テストといった作業が必要とされ、各作業には多大な開発コストや期間がかかることが多い。このため、従来、特にユーザインタフェース（ＵＩ：User Interface）の拡張に関する作業を容易に行うための技術が知られている。

例えば、ＵＩの表示態様に関する設定及び実装をビジュアルに行うことが可能な統合開発環境（ＩＤＥ：Integrated Development Environment）が知られている。また、例えば、テキストエディタ等を用いて編集可能なJSON形式やJavaScript（登録商標）言語によって拡張ルールを記載する方式が知られている（例えば、非特許文献１を参照）。

西川健一、増田健、足立洋之、土川公雄、井上晃、丸山勉、「Webベースの業務システムのユーザインタフェース拡張方式」 信学技報, vol. 116, no. 124, ICM2016-19, pp. 63-68, 2016年7月 Google Blockly、[online]、[平成２９年７月５日検索]、インターネット（https://developers.google.com/blockly/） John Maloney， Mitchel Resnick， Natalie Rusk， Brian Silverman， and Evelyn Eastmond "The Scratch Programming Language and Environment", ACM Transactions on Computing Education, Vol. 10, No. 4, Article 16, Pub. date: November 2010. 野末晴久、横瀬史拓、増田健、「クライアント自律操作エージェントにおけるGUI操作によるシナリオ生成手法」、 2009年電子情報通信学会通信ソサイエティ大会 B-14-16 堀田健太郎、西川健一、増田健、「クライアント自律操作エージェントの適用事例」、2009年電子情報通信学会通信ソサイエティ大会 B-14-17

しかしながら、従来の技術を用いてＵＩの拡張に関する作業を行う場合、プログラミングに関するスキル及び知識が必要になることがある。このため、従来の技術には、プログラミングに関するスキル及び知識を有しない者にとっては、ＵＩの拡張に関する作業を行うことが困難な場合があるという問題がある。

例えば、従来のＩＤＥでは、ＵＩのイベントに対するアクションの実装をビジュアルに行うことはできないため、このようなアクションの実装を行う場合には通常のプログラミング言語による記述が必要になる。このため、プログラミングスキルを有しない者にとっては、従来のＩＤＥを使ってＵＩのイベントに対するアクションの実装を行うことは困難である。

また、例えば、非特許文献１に記載の技術を用いて拡張ルールの編集を行う場合、少なくともJSON形式やJavaScript言語に関する知識が必要になる。このため、JSON形式やJavaScript言語に関する知識を有しない者にとっては、非特許文献１に記載の技術を用いて拡張ルールの編集を行うことは困難である。

上述した課題を解決し、目的を達成するために、本発明の端末装置は、Ｗｅｂページを構成する部品の表示態様に関する設定内容の指定が可能な第１のＧＵＩ（Graphical User Interface）を端末装置に表示させ、前記第１のＧＵＩを介して前記表示態様に関する設定内容の指定を受け付ける部品指定部と、前記Ｗｅｂページを構成する部品の動作に関する設定内容の指定が可能な第２のＧＵＩを端末装置に表示させ、前記第２のＧＵＩを介して前記動作に関する設定内容の指定を受け付ける動作指定部と、前記部品指定部によって受け付けられた前記表示態様に関する設定内容、及び前記動作指定部によって受け付けられた前記動作に関する設定内容に基づいて、前記Ｗｅｂページを拡張し、当該拡張したＷｅｂページを端末装置に表示させる拡張部と、を有することを特徴とする。

本発明によれば、プログラミングに関するスキル及び知識を有しない者がＵＩの拡張に関する作業を行うことができるようになる。

図１は、第１の実施形態に係る端末装置を含んだＵＩ拡張システムの構成の一例を示す図である。 図２は、第１の実施形態に係るルールＤＢのデータ構成の一例を示す図である。 図３は、第１の実施形態に係る部品指定ＧＵＩの一例を示す図である。 図４は、第１の実施形態に係る動作指定ＧＵＩの一例を示す図である。 図５は、第１の実施形態に係る拡張されたＷｅｂページの一例を示す図である。 図６は、第１の実施形態に係る付加処理の流れを示すフローチャートである。 図７は、第１の実施形態に係る部品指定処理の流れを示すフローチャートである。 図８は、第１の実施形態に係る動作指定処理の流れを示すフローチャートである。 図９は、ＵＩ拡張プログラムを実行するコンピュータの一例を示す図である。

以下に、本願に係る端末装置、ＵＩ拡張方法及びＵＩ拡張プログラムの実施形態を図面に基づいて詳細に説明する。なお、本発明は、以下に説明する実施形態により限定されるものではない。

［第１の実施形態の構成］
まず、図１を用いて、第１の実施形態に係るＵＩ拡張システム及び端末装置の構成について説明する。図１は、第１の実施形態に係る端末装置を含んだＵＩ拡張システムの構成の一例を示す図である。図１に示すように、ＵＩ拡張システム１は、Ｗｅｂサーバ１０及び端末装置２０を有する。

また、端末装置２０は、付加部２１、Ｗｅｂブラウザ２２、ルールＤＢ２３、代理部２４、エディタ部２２１、拡張部２２２、部品指定部２２１１及び動作指定部２２１２を有する。端末装置２０は、Ｗｅｂサーバ１０にＵＲＬ等を含んだリクエストメッセージを送信し、当該リクエストメッセージに対してＷｅｂサーバ１０から送信されたレスポンスメッセージを基に、Ｗｅｂブラウザ２２にＷｅｂページを表示させる。

また、付加部２１、ルールＤＢ２３及び代理部２４は、Ｗｅｂサーバ１０等の端末装置２０以外の装置に備えられていてもよい。特に、付加部２１及び代理部２４は、フォワード型、又はリバース型のプロキシサーバに備えられていてもよい。また、付加部２１及び代理部２４は、Ｗｅｂブラウザ２２のアドオン機能として実装されてもよい。

付加部２１は、端末装置２０からＷｅｂサーバ１０へ送信されたリクエストメッセージに対し、Ｗｅｂサーバ１０から端末装置２０へ送信されたレスポンスメッセージを取得し、端末装置２０に部品指定部２２１１及び動作指定部２２１２の機能を実行させるプログラムのコードを、レスポンスメッセージに付加する。

例えば、付加部２１は、取得したレスポンスメッセージのＨＴＭＬのＢＯＤＹ部等に、Ｗｅｂブラウザ２２で解釈実行可能なJavaScript等のスクリプト言語で記述されたコードを付加し、Ｗｅｂブラウザ２２に返す。そして、Ｗｅｂブラウザ２２は、付加されたコードを解釈し、エディタ部２２１の機能を実行する。なお、エディタ部２２１の機能には、部品指定部２２１１及び動作指定部２２１２の機能が含まれる。

ルールＤＢ２３は、エディタ部２２１の各部で受け付けられた設定内容を記憶する。なお、設定内容については後述する。図２は、第１の実施形態に係るルールＤＢのデータ構成の一例を示す図である。

図２に示すように、ルールＤＢ２３は、各設定内容をＵＲＬと関連付けて記憶する。また、ルールＤＢ２３において、設定内容は、部品指定に含まれるものと動作指定に含まれるものに分けられる。部品指定に含まれる設定内容は、例えば、要素、オフセット、ラベル、背景色、前景色及びアノテーションである。また、動作指定に含まれる設定内容は、例えば、スクリプト言語で記述されたプログラムのコードである。ここでは、要素とは、Ｗｅｂページを構成する部品を識別する情報である。

図２の例では、ルールＤＢ２３は、ＵＲＬ「https://example.net/moshikomi」の要素「textbox_02」のオフセット、ラベル、背景色、前景色及びアノテーションとして、それぞれ「（１００，１５０）」、「お客様氏名」、「白」、「黒」、「全角で入力」を記憶する。また、図２の例では、ルールＤＢ２３は、ＵＲＬ「https://example.net/moshikomi」の要素「textbox_02」の動作を表すプログラムのコードとして、「function check_…」を記憶する。

また、図２の例では、ルールＤＢ２３は、ＵＲＬ「https://example.net/moshikomi」の要素「button_01」のオフセット、ラベル、背景色及び前景色として、それぞれ「（２５０，４００）」、「登録」、「白」、「黒」を記憶する。また、図２の例では、ルールＤＢ２３は、ＵＲＬ「https://example.net/moshikomi」の要素「button_01」の動作を表すプログラムのコードとして、「function click_…」を記憶する。

代理部２４は、付加部２１と同様に、端末装置２０からＷｅｂサーバ１０へ送信されたリクエストメッセージに対し、Ｗｅｂサーバ１０から端末装置２０へ送信されたレスポンスメッセージを取得する。そして、代理部２４は、端末装置２０に拡張部２２２の機能を実行させるプログラムのコードを、レスポンスメッセージに付加する。また、代理部２４は、リクエストメッセージに含まれるＵＲＬが、ルールＤＢ２３に保存されたＵＲＬと一致する場合に、コードをレスポンスメッセージに付加するようにしてもよい。

部品指定部２２１１は、Ｗｅｂページを構成する部品の表示態様に関する設定内容の指定が可能な部品指定ＧＵＩ２２１１ａをＷｅｂブラウザ２２に表示させ、部品指定ＧＵＩ２２１１ａを介して表示態様に関する設定内容の指定を受け付ける。なお、部品指定ＧＵＩ２２１１ａは、第１のＧＵＩの一例である。

図３は、第１の実施形態に係る部品指定ＧＵＩの一例を示す図である。図３に示すように、部品指定ＧＵＩ２２１１ａは、各ユーザインタフェース部品の表示態様に関する設定内容を指定可能なＧＵＩである。部品指定部２２１１は、Ｗｅｂページ、又はＷｅｂページのキャプチャ画像を、部品指定ＧＵＩ２２１１ａにおけるユーザの対話的編集操作の配置作業の背景情報を兼ねて表示させる。例えば、部品指定部２２１１は、Ｗｅｂページ、又はＷｅｂページのキャプチャ画像の上に重ねたレイヤに部品指定ＧＵＩ２２１１ａを表示させてもよい。

具体的に、図３の例では、部品指定ＧＵＩ２２１１ａの画面は、参照用パネル２２１１ｂ及び設定用パネル２２１１ｃを有する。参照用パネル２２１１ｂは、設定対象となる既存のシステム画面を基に生成される。また設定用パネル２２１１ｃは、設定操作を行うエディタ独自の設定用パネルである。図３においては、参照用パネル２２１１ｂに「オーダー管理システム」というタイトルラベルが上部に配置されたＷｅｂページが表示されている。

ユーザインタフェース部品は、テキストボックス、ボタン、チェックボックス、ラベル等の、Ｗｅｂページを構成するオブジェクトである。また、以降の説明では、ユーザインタフェース部品のことを単に部品と表記する場合がある。

部品指定部２２１１は、例えば、部品指定ＧＵＩ２２１１ａを介して、各部品の位置、色、ラベル、及びアノテーションに関する設定内容の指定を受け付ける。図３に示すように、部品指定ＧＵＩ２２１１ａからは、ボタン、テキスト、チェックボックスといった部品の種類の指定が可能である。また、部品指定ＧＵＩ２２１１ａからは、部品配置の原点、オフセットのＸ及びＹの数値、ラベルに表示するテキスト、背景色、前景色等の指定が可能である。

ここで、例えば、部品指定ＧＵＩ２２１１ａが操作されることで部品が追加される場合を例に、各設定内容について説明する。まず、部品配置モード（部品配置の原点）として「既存部品」が選択された場合、追加される部品の位置のオフセットが、既にＷｅｂページ上に配置された部品の位置を原点としたものとなる。

ここで「既存部品」の選択とは、例えば図３においては、参照用パネル２２１１ｂの「お客様氏名」欄のテキストフィールドがハイライト表示されている状態に相当する。これは、その状態になる直前に、ユーザがＷｅｂページそのもの、又はそのキャプチャ画像の当該位置を直接クリックしたことを契機に、内部的に保持している全ての既存部品の矩形座標と比較するなどの処理方法により実現可能である。

一方、部品配置モードとして「ウィンドウコーナー」が選択された場合、追加される部品の位置のオフセットが、ウィンドウの左上、左下、右上又は右下の隅を原点としたものとなる。また、オフセットは、追加される部品の、原点からのＸ軸方向及びＹ軸方向への位置を、ピクセル数で表したものである。

部品指定部２２１１は、部品配置の原点として、既存部品又はウィンドウ枠の中心点を指定できるようにしてもよい。また、部品指定部２２１１は、部品配置の原点として、既存部品又はウィンドウ枠の境界矩形内におけるＸ方向及びＹ方向の中心点を指定できるようにしてもよい。さらに、中心点だけではなく所定の比率での分割点を指定できるようにしてもよい（例えば、Ｘ方向に２０％：８０％の分割点等）。

また、部品指定部２２１１は、あらかじめライブラリに登録された、ＨＴＭＬで表現可能な部品の一覧を、追加可能な部品の種類として部品指定ＧＵＩ２２１１ａに表示する。そして、表示した追加可能な部品の種類のうち１つが選択されると、選択された種類の部品を部品指定ＧＵＩ２２１１ａに表示する。このとき、部品が表示される位置は、指定された原点及びオフセットに基づく位置である。

さらに、オフセット設定を設定用パネル２２１１ｃにおいて変更すると、即時に参照用パネル２２１１ｂの表示に反映される。また、参照用パネル２２１１ｂにおいて部品を直接マウスドラッグにより移動し配置を調整することで、そのオフセット座標値が設定用パネル２２１１ｃの設定内容に反映される。このように、双方向の編集手段を提供することで、ユーザは直感的・視覚的に配置を変更・確認できる。つまり、ユーザは、部品指定ＧＵＩ２２１１ａに対し対話的編集操作を行うことができる。このとき、部品指定ＧＵＩ２２１１ａの中のＷｅｂページは、配置作業の背景情報として表示されている。

ここで、Ｗｅｂページがキャプチャ画像ではなく、実際に動作する実体を扱う構成をとった場合には、もともとのＷｅｂページ本来の動作も可能である。これにより、動的なＷｅｂページ構成すなわちタブ選択やリンク選択を契機に既存部品の存在有無や位置座標が変化するページでも、ユーザは部品指定ＧＵＩ２２１１ａにおける特別な編集操作を新たに習得する必要はない。特別な編集操作とは、例えばキャプチャのとり直し作業や、複数のキャプチャ情報を保持したときの管理や、そこから編集対象として再利用可能なキャプチャの検索・選択、などの編集操作のことである。一方、これらの特別な編集機能を実現しようとすると、既存Ｗｅｂページの内部構成があらかじめ想定した範囲のものでないと正しく動作しないなど、技術的に実現困難な問題が発生しやすい。実際のＷｅｂページを配置作業の背景情報を兼ねて表示させることで、これら技術的な問題を根本的に回避することができる。

そして、各設定内容が指定されると、部品指定部２２１１は、指定された設定内容をルールＤＢ２３に保存する。このとき、Ｗｅｂページの既存の部品に関する設定内容がルールＤＢ２３に保存されていない場合、部品指定部２２１１は、当該既存の部品に関する設定内容を全てルールＤＢ２３に保存する。また、部品指定ＧＵＩ２２１１ａの操作によりルールＤＢ２３に保存された設定内容が変更された場合、部品指定部２２１１はルールＤＢ２３を更新する。

動作指定部２２１２は、Ｗｅｂページを構成する部品の動作に関する設定内容の指定が可能な動作指定ＧＵＩ２２１２ａをＷｅｂブラウザ２２に表示させ、動作指定ＧＵＩ２２１２ａを介して動作に関する設定内容の指定を受け付ける。なお、動作指定ＧＵＩ２２１２ａは、第２のＧＵＩの一例である。

図４は、第１の実施形態に係る動作指定ＧＵＩの一例を示す図である。図４に示すように、動作指定部２２１２は、所定のロジックに対応したブロックを組み合わせることで動作に関する設定内容の指定が可能なＧＵＩを動作指定ＧＵＩ２２１２ａとして表示させる。なお、動作指定ＧＵＩ２２１２ａは、既存のビジュアルプログラミングライブラリにより実現されてもよい（例えば、非特許文献２を参照）。

図４に示すように、動作指定ＧＵＩ２２１２ａの項目表示パネル２２１２ｂには、「分岐・繰り返し」、「数値」といったロジックの分類を示す項目が表示される。そして、いずれかの項目がクリックされると、動作指定ＧＵＩ２２１２ａには、当該クリックされた項目に含まれるロジックに対応したブロックが表示される。ユーザは、動作指定ＧＵＩ２２１２ａに表示されたブロックから任意のブロックを選択し、ブロック配置パネル２２１２ｃに配置することができる。このとき、ユーザは、マウスのドラッグアンドドロップによってブロックの配置を行うことができる。

ここで、ブロックに対応するロジックとしては、「フレームＸＸＸロード時に処理を開始する」、「もしもＸＸＸ＝ＸＸＸの場合に処理を開始する」、「文字列ＸＸＸと文字列ＸＸＸを結合する」、「数値ＸＸＸに数値ＸＸＸを加える」、「テキストボックスＸＸＸに文字列ＸＸＸを入力する」等がある。なお、ここでは、ＸＸＸは、ブロックを配置する際に任意の値を設定可能であることを示している。

また、動作指定部２２１２は、ユーザによるブロックに対応するロジック及びブロックの配置に基づいてコードを生成し、生成したコードを動作指定ＧＵＩ２２１２ａの右側のコード表示パネル２２１２ｄに表示する。

例えば、動作指定部２２１２は、上側に配置されたブロックに対応するロジックが、下側に配置されたブロックに対応するロジックよりも先に実行されるようにコードを生成する。また、例えば、動作指定部２２１２は、所定の分岐条件判定ロジックに対応するブロックに包含されるように配置されたブロックがある場合、当該包含されるように配置されたブロックに対応するロジックが、分岐条件が満たされた場合に実行されるようにコードを生成する。

動作指定対象のＷｅｂページのＵＲＬが、ルールＤＢ２３に保存されたＵＲＬと一致する場合、動作指定部２２１２は、当該ＵＲＬに対応する動作指定の設定内容、すなわちスクリプト言語で記述されたプログラムのコードをルールＤＢ２３から取得する。そして、取得したプログラムのコードをブロックの組み合わせで表したものを、動作指定ＧＵＩ２２１２ａに表示する。また、新規作成の場合、動作指定部２２１２は、空のコード又はデフォルトとして設定されたプログラムのコードをブロックの組み合わせで表したものを動作指定ＧＵＩ２２１２ａに表示する。

ここで、ユーザによってブロックの組み合わせが行われると、動作指定部２２１２は、ブロックの組み合わせを基に、例えばJavaScriptで記述されたコードを生成する。そして、動作指定部２２１２は、生成したコードをルールＤＢ２３に保存する。

また、このとき、動作指定部２２１２は、コードとともに、ブロックの組み合わせを表す所定の形式のデータをルールＤＢ２３に保存してもよい。ここで、動作指定部２２１２は、ブロックの組み合わせを所定の形式で表す方法として、ＸＭＬ形式やJSON形式など既存の標準にしたがい、ブロックをオブジェクトと見なしたときの関連や属性を情報として保持する一般的な変換手法を用いることができる。

拡張部２２２は、部品指定部２２１１によって受け付けられた表示態様に関する設定内容、及び動作指定部２２１２によって受け付けられた動作に関する設定内容に基づいて、Ｗｅｂページを拡張し、当該拡張したＷｅｂページをＷｅｂブラウザ２２に表示させる。ここで、拡張部２２２は、ルールＤＢ２３から各設定内容を取得できる。このため、本実施形態においては、Ｗｅｂページの提供元であるＷｅｂサーバ１０に変更を加えることなくＵＩの拡張を行うことが可能となる。このため、本実施形態によれば、既存のシステムに変更を加えた際に発生する、変更後のシステムを元に戻せなくなるといった問題が解消される。さらには、既存システムの利用部署ごとの要望に応じたローカライズや、利用ユーザのスキルや直面する作業シーンなどに合わせた改善等により、ＵＩバリエーションが増大した際に発生する、システム改造費用の高騰、及び中長期的な維持管理の負担が軽減される。

図５は、第１の実施形態に係る拡張されたＷｅｂページの一例を示す図である。拡張部２２２は、Ｗｅｂブラウザ２２に、拡張されたＷｅｂページ３００を表示させる。また、拡張部２２２は、拡張されたＷｅｂページ３００上に、ラベル「お客様コード」が付されたテキストボックス３０１、及び自動入力ボタン３０２を表示させる。

テキストボックス３０１及び自動入力ボタン３０２は、部品指定部２２１１によって追加され、動作指定部２２１２によって動作が設定された部品である。つまり、拡張されたＷｅｂページ３００のＨＴＭＬのＢＯＤＹ部には、拡張部２２２によって、テキストボックス３０１を示す要素、自動入力ボタン３０２を示す要素、及び、自動入力ボタン３０２が操作された際に実行されるプログラムのコードが付加されている。

テキストボックス３０１に値が入力された状態で自動入力ボタン３０２がクリックされると、Ｗｅｂブラウザ２２は、付加されたコードに従って自動入力処理を実行する。ここで、お客様コードをキーとした顧客情報が、Ｗｅｂブラウザ２２が参照可能な所定のＤＢに記憶されていることする。また、顧客情報には、漢字氏名、カナ氏名、メールアドレス、電話番号、郵便番号、住所等が含まれることとする。

例えば、自動入力処理において、Ｗｅｂブラウザ２２は、お客様コード「Ｖ００１」をキーとしてＤＢから顧客情報を取得し、取得した顧客情報を各テキストボックスに入力する。例えば、Ｗｅｂブラウザ２２は、ラベル「お客様氏名」が付されたテキストボックスに「電電 太郎」を入力し、ラベル「お客様氏名（フリガナ）」が付されたテキストボックスに「デンデン タロウ」を入力し、ラベル「メールアドレス」が付されたテキストボックスに「ＸＸＸ＠ＸＸＸ」を入力し、ラベル「電話番号」が付されたテキストボックスに「ＸＸ−ＸＸＸＸ−ＸＸＸＸ」を入力し、ラベル「郵便番号」が付されたテキストボックスに「ＸＸＸ―ＸＸＸＸ」を入力し、ラベル「住所」が付されたテキストボックスに「ＸＸ県ＸＸ市ＸＸＸ」を入力する。

ここで、動作指定ＧＵＩ２２１２ａで使用可能なブロックとして、「ボタンＸＸＸがクリックされると処理を開始する」というロジックに対応した第１のブロック、及び「テキストボックスＸＸＸに文字列ＸＸＸを入力する」というロジックに対応した第２のブロックが用意されているものとする。なお、ＸＸＸにはそれぞれ異なる任意の値を設定可能であるものとする。このとき、ユーザは、動作指定ＧＵＩ２２１２ａを介して、自動入力ボタンを指定した１つの第１のブロックと、各テキストボックスを指定した複数の第２のブロックとを組み合わせることで、上述の自動入力処理を指定することができる。

また、動作指定部２２１２により設定可能な処理は、上述の自動入力処理に限られない。例えば、動作指定部２２１２は、「日付を選択可能なプルダウンを呼び出す」というロジック、又は「日付を選択可能なカレンダーを呼び出す」というロジックに対応したブロックを用意しておいてもよい。この場合、ユーザは、動作指定ＧＵＩ２２１２ａを介して、選択した日付をテキストボックスに入力する処理を設定することができる。

［第１の実施形態の処理］
図６を用いて、付加処理について説明する。図６は、第１の実施形態に係る付加処理の流れを示すフローチャートである。図６に示すように、まず、端末装置２０は、ユーザによってＵＲＬが指定されると（ステップＳ１０１）、指定ＵＲＬに対するＧＥＴリクエストをＷｅｂサーバ１０に送信する（ステップＳ１０２）。ここで、付加部２１は、Ｗｅｂサーバ１０からのレスポンスメッセージが端末装置２０に届くまで待機する（ステップＳ１０３、Ｎｏ）。

そして、端末装置２０にＷｅｂサーバ１０からのレスポンスメッセージが届くと（ステップＳ１０３、Ｙｅｓ）、付加部２１は、レスポンスメッセージにエディタ部２２１を付加し（ステップＳ１０４）、ユーザに返却する（ステップＳ１０５）。具体的には、付加部２１は、レスポンスメッセージに、端末装置２０に部品指定部２２１１及び動作指定部２２１２の機能を実行させるプログラムのコードを付加したものをユーザが操作するＷｅｂブラウザ２２に返却する。

次に、図７を用いて、部品指定処理について説明する。図７は、第１の実施形態に係る部品指定処理の流れを示すフローチャートである。図７に示すように、まず、部品指定部２２１１は、部品指定ＧＵＩ２２１１ａを介して、部品配置モードの選択を受け付ける（ステップＳ２０１）。例えば、部品選択モードは、「既存部品」又は「ウィンドウコーナー」である。

次に、部品指定部２２１１は、部品指定ＧＵＩ２２１１ａを介して、原点の指定を受け付ける（ステップＳ２０２）。そして、部品指定部２２１１は、部品指定ＧＵＩ２２１１ａを介して、原点からのオフセットの指定を受け付ける（ステップＳ２０３）。そして、部品指定部２２１１は、部品指定ＧＵＩ２２１１ａを介して、追加する部品の選択を受け付ける（ステップＳ２０４）。さらに、部品指定部２２１１は、部品指定ＧＵＩ２２１１ａを介して、部品のパラメータの指定を受け付ける（ステップＳ２０５）。

ここで、部品指定部２２１１は、追加された部品の各設定内容をルールＤＢ２３に保存する（ステップＳ２０６）。さらに、部品指定部２２１１は、未保存の既存部品の設定内容をルールＤＢ２３に保存する（ステップＳ２０７）。

次に、図８を用いて、動作指定処理について説明する。図８は、第１の実施形態に係る動作指定処理の流れを示すフローチャートである。図８に示すように、まず、動作指定部２２１２は、対象のＷｅｂページのＵＲＬに対する動作指定ルールがルールＤＢ２３に保存されている場合、当該動作指定ルールをルールＤＢ２３からロードする（ステップＳ３０１）。なお、動作指定ルールは、例えば、スクリプト言語で記述されたコード及び動作指定ＧＵＩ２２１２ａにおけるブロックの組み合わせを所定の形式で表したデータである。

ここで、動作指定部２２１２は、動作指定ＧＵＩ２２１２ａを介して、ブロックの組み合わせの指定を受け付ける（ステップＳ３０２）。そして、動作指定部２２１２は、受け付けたブロックの組み合わせを基に、スクリプト言語で記述されたプログラムのコードを生成する（ステップＳ３０３）。そして、生成したコード及びブロックの組み合わせを所定の形式で表したデータを、ＵＲＬをキーとしてルールＤＢ２３に保存する（ステップＳ３０４）。

［第１の実施形態の効果］
部品指定部２２１１は、Ｗｅｂページを構成する部品の表示態様に関する設定内容の指定が可能な部品指定ＧＵＩ２２１１ａをＷｅｂブラウザ２２に表示させ、部品指定ＧＵＩ２２１１ａを介して表示態様に関する設定内容の指定を受け付ける。また、動作指定部２２１２は、Ｗｅｂページを構成する部品の動作に関する設定内容の指定が可能な動作指定ＧＵＩ２２１２ａをＷｅｂブラウザ２２に表示させ、動作指定ＧＵＩ２２１２ａを介して動作に関する設定内容の指定を受け付ける。また、拡張部２２２は、部品指定部２２１１によって受け付けられた表示態様に関する設定内容、及び動作指定部２２１２によって受け付けられた動作に関する設定内容に基づいて、Ｗｅｂページを拡張し、当該拡張したＷｅｂページをＷｅｂブラウザ２２に表示させる。このように、本実施形態では、表示態様及び動作の両方について、ＧＵＩを介したＵＩの拡張を行うことができる。このため、本実施形態によれば、プログラミングに関するスキル及び知識を有しない者であっても、ＵＩの拡張に関する作業を行うことができるようになる。

付加部２１は、端末装置２０からＷｅｂサーバ１０へ送信されたリクエストメッセージに対し、Ｗｅｂサーバ１０から端末装置２０へ送信されたレスポンスメッセージを取得し、端末装置２０に部品指定部２２１１及び動作指定部２２１２の機能を実行させるプログラムのコードを、レスポンスメッセージに付加する。これにより、Ｗｅｂページを提供しているシステムを変更することなく、部品指定部２２１１及び動作指定部２２１２の機能を実現することが可能となる。また、このとき、エディタを利用するための新たなプログラムのインストールを不要にすることが可能になる。

部品指定部２２１１は、Ｗｅｂページ、又はＷｅｂページのキャプチャ画像を、部品指定ＧＵＩ２２１１ａにおけるユーザの対話的編集操作の配置作業の背景情報を兼ねて表示させる。これにより、ユーザは、拡張前のＵＩを参照しながら、部品の表示態様の設定内容を指定していくことが可能となるため、作業が効率化され、また、拡張後のＵＩを違和感なく使用することができるようになる。

部品指定部２２１１は、Ｗｅｂページを構成する部品の位置、色、ラベル、及びアノテーションに関する設定内容の指定を受け付ける。これにより、動作の追加や変更をともなわないＵＩの拡張であれば、ユーザは、動作指定ＧＵＩ２２１２ａを使用せずに、部品指定ＧＵＩ２２１１ａを使用して行うことができるようになるため、ユーザにとってはＵＩの拡張がさらに容易になる。

動作指定部２２１２は、所定のロジックに対応したブロックを組み合わせることで動作に関する設定内容の指定が可能なＧＵＩを動作指定ＧＵＩ２２１２ａとして表示させる。これにより、ユーザはビジュアルな操作で動作の追加や変更を行うことができるようになる。また、品質やセキュリティ等の観点から問題のあるロジックをあらかじめブロックの機能として提供しないようにし、また、仮にそれを含める機能を提供する場合、問題となる使い方を可能とするような設定を入力できないようにチェック機能により除外しておくことできるようになるため、拡張後のＷｅｂページで問題が発生することを防止することができる。

なお、本実施例のようにＵＩ拡張の内容を設定するエディタ機能を、表示態様に関する設定及び部品動作に関する設定の２つの側面にわけることで、それぞれに独立して動作可能なエディタプログラムを提供することができるため、実際の業務運用の観点で以下のメリットがある。

例えば、部品動作の設定を特定のシステムや業務領域に特化させる専用化や個別化を行う場合に、別の動作指定エディタプログラムを提供し必要に応じて部品指定エディタとの組み合せを変えて使い分けることができる。実施例では、JavaScript言語で記述できる内容をそのままブロック化する形式の汎用的なエディタを示しているが、業務領域（例えば、設備管理システム、顧客管理システム、など）のドメインに特化した言語（ＵＩ拡張で提供する専用機能の設定）の記述が可能なエディタを提供することで、ユーザにわかりやすく効率の良い運用が可能となる。既知のドメイン特化言語としては、ロボット制御（参考ＵＲＬ：https://en.wikipedia.org/wiki/RoboBlockly）や３Ｄモデリング（参考ＵＲＬ：https://makerscad.com/index.html#what）等があり、その他の事例も数多く知られている。

また、第１のＧＵＩと第２のＧＵＩは、同じ端末上で使用する必要はなく、異なるユーザが異なる端末の異なるＷｅｂブラウザ上から作業をすることもできる。さらに、同時に２つのＧＵＩ画面を開いて使用する必要もなく、技術スキルの異なるユーザが別々のタイミングや頻度で使用することもできる。例えば、動作指定のロジックのサンプルを作成することに長けた少数の高スキルユーザが、適用対象システムに対応して必要なロジックを１か月程度の頻度で提供し又は公開し、実際の業務画面に応じて適切なＵＩ拡張のＧＵＩ配置や詳細設定を、実際の業務にあたる多数のオペレータユーザが必要性を認識したその場で適宜に行う（サンプルを利用して最終的なルールを定義する）ことができれば現実の運用において大きなメリットが得られる。

ちなみに、本発明において目的とするユーザへの便益は、ＵＩ拡張システムであるが、実際の業務シーンにおいては、アノテーションシステムとして簡便に使用したいという要望も数多く存在する。このようなユーザニーズに対しては、部品指定部のみを提供し、動作指定部を使わないか、ごく簡単な動作のみをデフォルトで提供する動作指定部を別途実装するなど、運用にあわせた最小限の構成をとることも可能である。部品指定と配置指定を機能的に分離することで、将来、共通的機能（部品配置機能）のソフトウェア品質向上や実現方式の高度化を行った際に、複数のソリューションで同時にそれらのメリットを享受することができる。

［その他の実施形態］
第１の実施形態では、ルールＤＢ２３にはＵＲＬをそのものが保存されることとしたが、例えば、ルールＤＢ２３にはＵＲＬの文字列とマッチする正規表現、又はＧＵＩを介してユーザが任意にＵＲＬと関連付けた情報としてもよい。これにより、端末装置２０は、エディタ部２２１で設定された設定内容を、類似した複数のＷｅｂページの拡張に用いることができる。

［システム構成等］
また、図示した各装置の各構成要素は機能概念的なものであり、必ずしも物理的に図示のように構成されていることを要しない。すなわち、各装置の分散・統合の具体的形態は図示のものに限られず、その全部又は一部を、各種の負荷や使用状況等に応じて、任意の単位で機能的又は物理的に分散・統合して構成することができる。例えば、端末装置は、第１のＧＵＩ及び第２のＧＵＩのいずれか又は両方を、Ｗｅｂブラウザに表示させるのではなく、クライアントアプリケーションに表示させることができる。この場合、エディタを利用するための新たなプログラムのインストールは必要になるが、ユーザとの対話機能におけるＷｅｂブラウザ上での制限がなくなるため、ユーザビリティの向上が可能となる。さらに、各装置にて行われる各処理機能は、その全部又は任意の一部が、ＣＰＵ及び当該ＣＰＵにて解析実行されるプログラムにて実現され、あるいは、ワイヤードロジックによるハードウェアとして実現され得る。

また、本実施形態において説明した各処理のうち、自動的に行われるものとして説明した処理の全部又は一部を手動的に行うこともでき、あるいは、手動的に行われるものとして説明した処理の全部又は一部を公知の方法で自動的に行うこともできる。この他、上記文書中や図面中で示した処理手順、制御手順、具体的名称、各種のデータやパラメータを含む情報については、特記する場合を除いて任意に変更することができる。

［プログラム］
一実施形態として、端末装置２０は、パッケージソフトウェアやオンラインソフトウェアとして上記のＵＩ拡張を実行するＵＩ拡張プログラムを所望のコンピュータにインストールさせることによって実装できる。例えば、上記のＵＩ拡張プログラムを情報処理装置に実行させることにより、情報処理装置を端末装置２０として機能させることができる。ここで言う情報処理装置には、デスクトップ型又はノート型のパーソナルコンピュータが含まれる。また、その他にも、情報処理装置にはスマートフォン、携帯電話機やＰＨＳ（Personal Handyphone System）等の移動体通信端末、さらには、ＰＤＡ（Personal Digital Assistant）等のスレート端末等がその範疇に含まれる。

また、端末装置２０は、ユーザが使用する端末装置をクライアントとし、当該クライアントに上記のＵＩ拡張に関するサービスを提供するＵＩ拡張サーバ装置として実装することもできる。例えば、ＵＩ拡張サーバ装置は、リクエストメッセージを入力とし、エディタ部が付加されたレスポンスメッセージを出力とするＵＩ拡張サービスを提供するサーバ装置として実装される。この場合、ＵＩ拡張サーバ装置は、Ｗｅｂサーバとして実装することとしてもよいし、アウトソーシングによって上記のＵＩ拡張に関するサービスを提供するクラウドとして実装することとしてもかまわない。

図９は、ＵＩ拡張プログラムを実行するコンピュータの一例を示す図である。コンピュータ１０００は、例えば、メモリ１０１０、ＣＰＵ１０２０を有する。また、コンピュータ１０００は、ハードディスクドライブインタフェース１０３０、ディスクドライブインタフェース１０４０、シリアルポートインタフェース１０５０、ビデオアダプタ１０６０、ネットワークインタフェース１０７０を有する。これらの各部は、バス１０８０によって接続される。

メモリ１０１０は、ＲＯＭ（Read Only Memory）１０１１及びＲＡＭ（Random Access Memory）１０１２を含む。ＲＯＭ１０１１は、例えば、ＢＩＯＳ（Basic Input Output System）等のブートプログラムを記憶する。ハードディスクドライブインタフェース１０３０は、ハードディスクドライブ１０９０に接続される。ディスクドライブインタフェース１０４０は、ディスクドライブ１１００に接続される。例えば磁気ディスクや光ディスク等の着脱可能な記憶媒体が、ディスクドライブ１１００に挿入される。シリアルポートインタフェース１０５０は、例えばマウス１１１０、キーボード１１２０に接続される。ビデオアダプタ１０６０は、例えばディスプレイ１１３０に接続される。

ハードディスクドライブ１０９０は、例えば、ＯＳ１０９１、アプリケーションプログラム１０９２、プログラムモジュール１０９３、プログラムデータ１０９４を記憶する。すなわち、端末装置２０の各処理を規定するプログラムは、コンピュータにより実行可能なコードが記述されたプログラムモジュール１０９３として実装される。プログラムモジュール１０９３は、例えばハードディスクドライブ１０９０に記憶される。例えば、端末装置２０における機能構成と同様の処理を実行するためのプログラムモジュール１０９３が、ハードディスクドライブ１０９０に記憶される。なお、ハードディスクドライブ１０９０は、ＳＳＤにより代替されてもよい。

また、上述した実施形態の処理で用いられる設定データは、プログラムデータ１０９４として、例えばメモリ１０１０やハードディスクドライブ１０９０に記憶される。そして、ＣＰＵ１０２０が、メモリ１０１０やハードディスクドライブ１０９０に記憶されたプログラムモジュール１０９３やプログラムデータ１０９４を必要に応じてＲＡＭ１０１２に読み出して実行する。

なお、プログラムモジュール１０９３やプログラムデータ１０９４は、ハードディスクドライブ１０９０に記憶される場合に限らず、例えば着脱可能な記憶媒体に記憶され、ディスクドライブ１１００等を介してＣＰＵ１０２０によって読み出されてもよい。あるいは、プログラムモジュール１０９３及びプログラムデータ１０９４は、ネットワーク（ＬＡＮ（Local Area Network）、ＷＡＮ（Wide Area Network）等）を介して接続された他のコンピュータに記憶されてもよい。そして、プログラムモジュール１０９３及びプログラムデータ１０９４は、他のコンピュータから、ネットワークインタフェース１０７０を介してＣＰＵ１０２０によって読み出されてもよい。

１０ Ｗｅｂサーバ
２０ 端末装置
２１ 付加部
２２ Ｗｅｂブラウザ
２３ ルールＤＢ
２４ 代理部
２２１ エディタ部
２２２ 拡張部
２２１１ 部品指定部
２２１１ａ 部品指定ＧＵＩ
２２１２ 動作指定部
２２１２ａ 動作指定ＧＵＩ

Claims (7)

1. Ｗｅｂページを構成する部品の表示態様に関する設定内容の指定が可能な第１のＧＵＩ（Graphical User Interface）を端末装置に表示させ、前記第１のＧＵＩを介して前記表示態様に関する設定内容の指定を受け付ける部品指定部と、
   前記Ｗｅｂページを構成する部品の動作に関する設定内容の指定が可能な第２のＧＵＩを端末装置に表示させ、前記第２のＧＵＩを介して前記動作に関する設定内容の指定を受け付ける動作指定部と、
   前記部品指定部によって受け付けられた前記表示態様に関する設定内容、及び前記動作指定部によって受け付けられた前記動作に関する設定内容に基づいて、前記Ｗｅｂページを拡張し、当該拡張したＷｅｂページを端末装置に表示させる拡張部と、
   前記端末装置からＷｅｂサーバへ送信されたリクエストメッセージに対し、前記Ｗｅｂサーバから前記端末装置へ送信されたレスポンスメッセージを取得し、前記端末装置に前記部品指定部及び前記動作指定部の機能を実行させるプログラムのコードを、前記レスポンスメッセージに付加する付加部と、
   を有することを特徴とする端末装置。
2. 前記部品指定部は、前記第１のＧＵＩをＷｅｂブラウザに表示させ、
   前記動作指定部は、前記第２のＧＵＩをＷｅｂブラウザに表示させ、
   前記拡張部は、前記ＷｅｂページをＷｅｂブラウザに表示させることを特徴とする請求項１に記載の端末装置。
3. 前記部品指定部は、前記Ｗｅｂページ、又は前記Ｗｅｂページのキャプチャ画像を、前記第１のＧＵＩにおけるユーザの対話的編集操作の配置作業の背景情報を兼ねて表示させることを特徴とする請求項１に記載の端末装置。
4. 前記部品指定部は、前記Ｗｅｂページを構成する部品の位置、色、ラベル、及びアノテーションに関する設定内容の指定を受け付けることを特徴とする請求項１に記載の端末装置。
5. 前記動作指定部は、所定のロジックに対応したブロックを組み合わせることで前記動作に関する設定内容の指定が可能なＧＵＩを前記第２のＧＵＩとして表示させることを特徴とする請求項１に記載の端末装置。
6. 端末装置によって実行されるＵＩ拡張方法であって、
   Ｗｅｂページを構成する部品の表示態様に関する設定内容の指定が可能な第１のＧＵＩ（Graphical User Interface）を端末装置に表示させ、前記第１のＧＵＩを介して前記表示態様に関する設定内容の指定を受け付ける部品指定工程と、
   前記Ｗｅｂページを構成する部品の動作に関する設定内容の指定が可能な第２のＧＵＩを端末装置に表示させ、前記第２のＧＵＩを介して前記動作に関する設定内容の指定を受け付ける動作指定工程と、
   前記部品指定工程によって受け付けられた前記表示態様に関する設定内容、及び前記動作指定工程によって受け付けられた前記動作に関する設定内容に基づいて、前記Ｗｅｂページを拡張し、当該拡張したＷｅｂページを端末装置に表示させる拡張工程と、
   前記端末装置からＷｅｂサーバへ送信されたリクエストメッセージに対し、前記Ｗｅｂサーバから前記端末装置へ送信されたレスポンスメッセージを取得し、前記端末装置に前記部品指定工程及び前記動作指定工程の機能を実行させるプログラムのコードを、前記レスポンスメッセージに付加する付加工程と、
   を含んだことを特徴とするＵＩ拡張方法。
7. コンピュータを、請求項１から５のいずれか１項に記載の端末装置として機能させるためのＵＩ拡張プログラム。

Images