JP2017220221A - 情報処理装置、情報処理方法、及びプログラム - Google Patents

Abstract

【課題】シングルページアプリケーションにおける画面開発を容易にする。【解決手段】ＳＰＡを提供するサーバ装置と接続され、ブラウザが搭載された情報処理装置であって、前記ＳＰＡにおけるページを表示するためのＷｅｂコンテンツであって、前記ページのページ識別情報毎にコンテンツ要素が定義された画面定義情報と、前記ページ識別情報間の構成が定義された構成情報とが含まれるＷｅｂコンテンツを前記Ｗｅｂブラウザが取得する取得手段と、前記構成情報に基づいて、前記ブラウザが表示するページのページ識別情報毎に、該ページのページ部品を含む部品情報を前記Ｗｅｂブラウザが作成する作成手段と、ページの遷移操作がなされた場合、遷移先のページのページ識別情報に対応する前記コンテンツ要素と、前記遷移先のページのページ部品とに基づいて、前記遷移先のページを前記Ｗｅｂブラウザが表示する表示手段と、を有する。【選択図】図２

Description

本発明は、情報処理装置、情報処理方法、及びプログラムに関する。

シングルページアプリケーションと呼ばれるＷｅｂアプリケーションのアーキテクチャが知られている。シングルページアプリケーションでは、Ｗｅｂページ全体のリソースを最初にサーバから取得する。このため、例えば、処理能力が比較的低い機器において、Ｗｅｂアプリケーション使用中におけるユーザの応答速度を向上させるためにシングルページアプリケーションが用いられている。

また、Ｗｅｂアプリケーションを画像形成装置に提供する技術が知られている（例えば特許文献１参照）。

ここで、シングルページアプリケーションでは、Ｗｅｂアプリケーションを使用するための各種画面の管理をクライアント側で行う必要がある。このため、例えば、Ｗｅｂアプリケーションを使用するための各種画面間の遷移関係等が複雑な場合には、シングルページアプリケーションの開発が困難になることがあった。

本発明の一実施形態は、上記の点に鑑みてなされたもので、シングルページアプリケーションにおける画面開発を容易にすることを目的とする。

上記目的を達成するため、本発明の一実施形態は、シングルページアプリケーションを提供するサーバ装置とネットワークを介して接続され、Ｗｅｂブラウザが搭載された情報処理装置であって、前記シングルページアプリケーションにおけるページを表示するためのＷｅｂコンテンツであって、前記ページを識別するページ識別情報毎にコンテンツ要素が定義された画面定義情報と、前記ページ識別情報間の構成が定義された構成情報とが含まれるＷｅｂコンテンツを、前記サーバ装置から前記Ｗｅｂブラウザが取得する取得手段と、前記取得手段により取得された前記Ｗｅｂコンテンツに含まれる前記構成情報に基づいて、前記Ｗｅｂブラウザが表示するページのページ識別情報毎に、該ページを表示するページ部品を含む部品情報を前記Ｗｅｂブラウザが作成する作成手段と、ユーザによりページの遷移操作がなされた場合、前記画面定義情報に定義されているコンテンツ要素のうち、遷移先のページのページ識別情報に対応する前記コンテンツ要素と、前記遷移先のページのページ識別情報に対応する前記ページ部品とに基づいて、前記遷移先のページを前記Ｗｅｂブラウザが表示する表示手段と、を有する。

本発明の一実施形態によれば、シングルページアプリケーションにおける画面開発を容易にすることができる。

第一の実施形態に係るＷｅｂシステムのシステム構成の一例を示す図である。 第一の実施形態に係る画面遷移の一例を説明する図である。 第一の実施形態に係るサーバ装置のハードウェア構成の一例を示す図である。 第一の実施形態に係る機器のハードウェア構成の一例を示す図である。 第一の実施形態に係るＷｅｂシステムの機能構成の一例を示す図である。 第一の実施形態に係る画面遷移の全体処理の一例を示すシーケンス図である。 第一の実施形態に係る画面定義情報の一例を示す図である。 第一の実施形態に係る構成情報の一例を示す図である。 第一の実施形態に係る初期画面の表示処理の一例を示すシーケンス図である。 第一の実施形態に係る状態情報の一例を示す図である。 第一の実施形態に係る部品情報の一例を示す図である。 第一の実施形態に係る画面遷移処理の一例を示すフローチャートである。 第二の実施形態に係る画面遷移の一例を説明する図である。 第二の実施形態に係る画面遷移の全体処理の一例を示すシーケンス図である。 第二の実施形態に係る画面定義情報の一例を示す図である。 第二の実施形態に係る構成情報の一例の示す図である。 第二の実施形態に係る初期画面の表示処理の一例を示すシーケンス図である。 第二の実施形態に係る状態情報の一例を示す図である。 第二の実施形態に係る部品情報の一例を示す図である。 第二の実施形態に係る画面遷移処理の一例を示すフローチャートである。

以下、本発明の実施形態について、図面を参照しながら詳細に説明する。

［第一の実施形態］
＜システム構成＞
まず、第一の実施形態に係るＷｅｂシステム１のシステム構成について、図１を参照しながら説明する。図１は、第一の実施形態に係るＷｅｂシステム１のシステム構成の一例を示す図である。

図１に示すＷｅｂシステム１は、サーバ装置１０と、機器２０とを有し、インターネット等の広域的なネットワークＮを介して通信可能に接続されている。なお、ネットワークＮは、例えば、社内ＬＡＮ（Local Area Network）等であっても良い。また、サーバ装置１０及び機器２０は、有線接続に限られず、無線接続により通信可能に接続されていても良い。

サーバ装置１０は、Ｗｅｂサーバやアプリケーションサーバとして機能する情報処理装置である。サーバ装置１０には、Ｗｅｂサーバやアプリケーションサーバとして機能させるためのサーバプログラム３０がインストールされている。

サーバ装置１０は、サーバプログラム３０により、機器２０に対してシングルページアプリケーション（ＳＰＡ：Ｓｉｎｇｌｅ Ｐａｇｅ Ａｐｐｌｉｃａｔｉｏｎ）を提供する。なお、サーバプログラム３０は、複数のプログラム又はモジュールにより構成されていても良い。また、サーバ装置１０は、一台以上の情報処理装置により実現されていても良い。

機器２０は、Ｗｅｂクライアントとして機能するＭＦＰ（MultiFunction Peripheral）等の画像形成装置である。機器２０には、Ｗｅｂブラウザ４０がインストールされている。機器２０のユーザは、Ｗｅｂブラウザ４０を用いて、サーバ装置１０から提供されるシングルページアプリケーションを利用することができる。

なお、以降では、機器２０は、画像形成装置であるものとして説明するが、これに限られない。機器２０は、例えば、ノート型ＰＣ（パーソナルコンピュータ）、デスクトップ型ＰＣ、スマートフォン、タブレット端末、プロジェクタ、テレビ会議システム、デジタルカメラ、ゲーム機器等であっても良い。換言すれば、機器２０は、Ｗｅｂブラウザ４０がインストールされ、電子データの入力又は出力を行うことができる各種の電子機器であれば良い。

ここで、機器２０のＷｅｂブラウザ４０により表示されたシングルページアプリケーションにおける画面遷移について、図２を参照しながら説明する。図２は、第一の実施形態に係る画面遷移の一例を説明する図である。なお、機器２０のユーザは、Ｗｅｂブラウザ４０を用いて、ＨＴＭＬ（HyperText Markup Language）やＪａｖａＳｃｒｉｐｔ（登録商標）等の各種情報をサーバ装置１０から取得することで、シングルページアプリケーションを利用することができる。

図２に示すように、サーバ装置１０により提供されるシングルページアプリケーションは、ＰａｇｅＩＤ「ｐａｇｅ１」のページ１と、ＰａｇｅＩＤ「ｐａｇｅ２」のページ２と、ＰａｇｅＩＤ「ｐａｇｅ３」のページ３とを表示するものとする。また、ＰａｇｅＩＤ「ｐａｇｅ１」のページ１には、ＴａｂＩＤ「ｐａｇｅ１／ｔａｂ１」のタブ１と、ＴａｂＩＤ「ｐａｇｅ１／ｔａｂ２」のタブ２とが含まれるものとする。

ここで、ページ１におけるタブ１が表示された画面Ｇ１１０において、ユーザにより、タブ切替ボタンＧ１１１が押下されたものとする。この場合、Ｗｅｂブラウザ４０は、当該タブ切替ボタンＧ１１１に対応付けられたＴａｂＩＤ「ｐａｇｅ１／ｔａｂ２」に基づいて、ページ１におけるタブ２が表示された画面Ｇ１２０を表示する。

同様に、画面Ｇ１２０において、ユーザにより、タブ切替ボタンＧ１２１が押下されたものとする。この場合、Ｗｅｂブラウザ４０は、当該タブ切替ボタンＧ１２１に対応付けられたＴａｂＩＤ「ｐａｇｅ１／ｔａｂ１」に基づいて、画面Ｇ１１０を表示する。

このように、本実施形態に係る機器２０のＷｅｂブラウザ４０は、各タブを識別するＴａｂＩＤに基づいて、ページ内において各タブの表示を切り替えることができる。

また、画面Ｇ１１０において、ユーザにより、遷移ボタンＧ１１２が押下されたものとする。この場合、Ｗｅｂブラウザ４０は、当該遷移ボタンＧ１１２に対応付けられたＰａｇｅＩＤ「ｐａｇｅ２」に基づいて、ページ２が表示された画面Ｇ２００を表示する。同様に、画面Ｇ１２０において、ユーザにより、遷移ボタンＧ１２２が押下された場合、Ｗｅｂブラウザ４０は、当該遷移ボタンＧ１２２に対応付けられたＰａｇｅＩＤ「ｐａｇｅ２」に基づいて、画面Ｇ２００を表示する。

このように、本実施形態に係る機器２０のＷｅｂブラウザ４０は、各ページを識別するＰａｇｅＩＤに基づいて、各ページを表示することができる。このことは、画面Ｇ１１０における遷移ボタンＧ１１３が押下された場合や画面Ｇ１２０における遷移ボタンＧ１２３が押下された場合、画面Ｇ２００における遷移ボタンＧ２０１が押下された場合等も同様である。

また、画面Ｇ２００において、ユーザにより、遷移ボタンＧ２０２が押下されたものとする。この場合、Ｗｅｂブラウザ４０は、当該遷移ボタンＧ２０２に対応付けられたＰａｇｅＩＤ「ｐａｇｅ１」に基づいて、画面Ｇ１１０及び画面Ｇ１２０のうち、最後に表示されていた画面（すなわち、最も直近に表示されていた画面）を表示する。

このように、本実施形態に係る機器２０のＷｅｂブラウザ４０は、遷移先のページにタブが含まれる場合には、各ページを識別するＰａｇｅＩＤに基づいて、最も直近に表示されていたタブが表示された画面を表示する。

さらに、画面Ｇ３００において、ユーザにより、遷移ボタンＧ３０１又は遷移ボタンＧ３０２が押下されたものとする。この場合、Ｗｅｂブラウザ４０は、当該遷移ボタンＧ３０１又は遷移ボタンＧ３０２に対応付けられた指定（遷移元の画面を表示することを示す指定）に基づいて、当該遷移元の画面（すなわち、画面Ｇ３００の直前に表示されていた画面）を表示する。

このように、本実施形態に係る機器２０のＷｅｂブラウザ４０は、遷移元の画面を表示することを示す指定に基づいて、直前に表示されていた画面を表示する。

以上のように、本実施形態に係る機器２０のＷｅｂブラウザ４０は、各画面におけるボタン等の表示部品に対応付けられたＰａｇｅＩＤやＴａｂＩＤ等に基づいて、シングルページアプリケーションにおける各画面を遷移させることができる。したがって、シングルページアプリケーションの開発者等は、各画面における表示部品に対して、遷移させたいページのＰａｇｅＩＤやタブのＴａｂＩＤ等を定義することで、容易に画面の遷移関係を作成することができるようになる。

＜ハードウェア構成＞
次に、本実施形態に係るサーバ装置１０及び機器２０のハードウェア構成について説明する。

まず、本実施形態に係るサーバ装置１０のハードウェア構成について、図３を参照しながら説明する。図３は、第一の実施形態に係るサーバ装置１０のハードウェア構成の一例を示す図である。

図３に示すサーバ装置１０は、入力装置１０１と、表示装置１０２と、外部Ｉ／Ｆ１０３と、ＲＡＭ（Random Access Memory）１０４とを有する。また、サーバ装置１０は、ＲＯＭ（Read Only Memory）１０５と、ＣＰＵ（Central Processing Unit）１０６と、通信Ｉ／Ｆ１０７と、ＨＤＤ（Hard Disk Drive）１０８とを有する。これらの各ハードウェアは、それぞれがバスＢで接続されている。

入力装置１０１は、キーボードやマウス、タッチパネル等であり、各種の操作を入力するのに用いられる。表示装置１０２は、ディスプレイ等であり、サーバ装置１０による処理結果を表示する。なお、入力装置１０１及び表示装置１０２の少なくとも一方は、必要なときにサーバ装置１０に接続して利用する形態であっても良い。

通信Ｉ／Ｆ１０７は、サーバ装置１０をネットワークＮに接続するインタフェースである。これにより、サーバ装置１０は、通信Ｉ／Ｆ１０７を介して通信を行うことができる。

ＨＤＤ１０８は、プログラムやデータを格納している不揮発性の記憶装置である。ＨＤＤ１０８に格納されるプログラムやデータには、サーバ装置１０全体を制御する基本ソフトウェアであるＯＳ（Operating System）、サーバプログラム３０、ＯＳ上において各種機能を提供する各種のプログラム等がある。

なお、サーバ装置１０は、ＨＤＤ１０８に代え、記憶媒体としてフラッシュメモリを用いるドライブ装置（例えば、ＳＳＤ：ソリッドステートドライブ）を利用するものであっても良い。また、ＨＤＤ１０８は、格納しているプログラムやデータを所定のファイルシステムやＤＢ（データベース）により管理している。

外部Ｉ／Ｆ１０３は、外部装置とのインタフェースである。外部装置には、記録媒体１０３ａ等がある。これにより、サーバ装置１０は、外部Ｉ／Ｆ１０３を介して記録媒体１０３ａの読み取りや書き込みを行うことができる。記録媒体１０３ａには、フレキシブルディスク、ＣＤ、ＤＶＤ、ＳＤメモリカード、ＵＳＢメモリ等がある。

ＲＯＭ１０５は、電源を切ってもプログラムやデータを保持することができる不揮発性の半導体メモリである。ＲＯＭ１０５には、サーバ装置１０の起動時に実行されるＢＩＯＳ（Basic Input/Output System）、ＯＳ設定、及びネットワーク設定等のプログラムやデータが格納されている。ＲＡＭ１０４は、プログラムやデータを一時保持する揮発性の半導体メモリである。

ＣＰＵ１０６は、ＲＯＭ１０５やＨＤＤ１０８等の記憶装置からプログラムやデータをＲＡＭ１４上に読み出し、処理を実行することで、サーバ装置１０全体の制御や機能を実現する演算装置である。

本実施形態に係るサーバ装置１０は、図２に示すハードウェア構成を有することにより、後述するような各種処理を実現できる。

次に、本実施形態に係る機器２０のハードウェア構成について、図４を参照しながら説明する。図４は、第一の実施形態に係る機器２０のハードウェア構成の一例を示す図である。

図４に示す機器２０は、コントローラ２０１と、操作パネル２０２と、外部Ｉ／Ｆ２０３と、通信Ｉ／Ｆ２０４と、画像処理エンジン２０５とを有する。また、コントローラ２０１は、ＣＰＵ２１１と、ＲＡＭ２１２と、ＲＯＭ２１３と、ＮＶＲＡＭ２１４と、ＨＤＤ２１５とを有する。

ＲＯＭ２１３は、各種のプログラムやデータを格納している不揮発性の半導体メモリである。ＲＡＭ２１２は、プログラムやデータを一時保持する揮発性の半導体メモリである。ＮＶＲＡＭ２１４は、例えば設定情報等を格納している不揮発性の半導体メモリである。また、ＨＤＤ２１５は、各種のプログラムやデータを格納している不揮発性の記憶装置である。ＨＤＤ２１５に格納されるプログラムには、Ｗｅｂブラウザ４０等がある。

ＣＰＵ２１１は、ＲＯＭ２１３やＮＶＲＡＭ２１４、ＨＤＤ２１５等からプログラムやデータ、設定情報等をＲＡＭ２１２上に読み出し、処理を実行することで、機器２０全体の制御や機能を実現する演算装置である。

操作パネル２０２は、ユーザからの入力を受け付ける入力装置と、表示を行う表示装置とを備えている。外部Ｉ／Ｆ２０１３は、外部装置とのインタフェースである。外部装置には、記録媒体２０３ａ等がある。これにより、機器２０は、外部Ｉ／Ｆ２０３を介して記録媒体２０３ａの読み取りや書き込みを行うことができる。

なお、記録媒体２０３ａには、例えば、ＩＣカード、フレキシブルディスク、ＣＤ、ＤＶＤ、ＳＤメモリカード、ＵＳＢメモリ等がある。

通信Ｉ／Ｆ２０４は、機器２０をネットワークＮに接続するインタフェースである。これにより、機器２０は、通信Ｉ／Ｆ２０４を介して通信を行うことができる。

画像処理エンジン２０５は、例えば、原稿を光学的に読み取って画像データを生成するスキャナ装置、用紙等のシート材への印刷を行うプロッタ装置、及びＦＡＸ通信を行うＦＡＸ通信装置等が含まれる。また、画像処理エンジン２０５には、例えば、印刷済みのシート材を仕分けるフィニッシャ、原稿を自動給送するＡＤＦ（自動原稿給送装置）等が含まれていても良い。

本実施形態に係る機器２０は、図４に示すハードウェア構成を有することにより、後述するような各種処理を実現できる。

＜機能構成＞
次に、本実施形態に係るＷｅｂシステム１の機能構成について、図５を参照しながら説明する。図５は、第一の実施形態に係るＷｅｂシステム１の機能構成の一例を示す図である。

図５に示すサーバ装置１０は、画面応答部３０１を有する。当該機能部は、サーバ装置１０にインストールされたサーバプログラム３０が、ＣＰＵ１０６に実行させる処理により実現される。

また、サーバ装置１０は、画面情報記憶部３０２を有する。当該記憶部は、例えば、ＨＤＤ１０８を用いて実現可能である。なお、当該記憶部は、サーバ装置１０とネットワークＮを介して接続される記憶装置を用いて実現されていても良い。

画面応答部３０１は、後述する機器２０の画面要求部４０２からの画面取得要求に応じて、画面情報記憶部３０２から画面情報を取得する。そして、画面応答部３０１は、取得した画面情報を機器２０に返信する。これにより、機器２０には、シングルページアプリケーションが提供される。

画面情報記憶部３０２は、画面情報１０００を記憶する。ここで、画面情報１０００には、機器２０がシングルページアプリケーションを利用するためのＨＴＭＬやＣＳＳ（Cascading Style Sheets）、ＪａｖａＳｃｒｉｐｔ等の各種情報が含まれる。画面情報１０００は、Ｗｅｂコンテンツの一例である。

図５に示す機器２０は、入力受付部４０１と、画面要求部４０２と、表示処理部４０３と、画面管理部４０４とを有する。これら各機能部は、機器２０にインストールされたＷｅｂブラウザ４０が、ＣＰＵ２１１に実行させる処理により実現される。

また、機器２０は、画面管理情報記憶部４０５を有する。当該記憶部は、例えば、ＨＤＤ２１５を用いて実現可能である。

入力受付部４０１は、ユーザからの各種操作の入力を受け付ける。例えば、入力受付部４０１は、ユーザからのシングルページアプリケーションの利用を開始するためのアプリ開始操作、シングルページアプリケーションにおける画面を遷移させるための画面遷移操作等の各種操作を受け付ける。

また、入力受付部４０１は、アプリ開始操作に応じて、シングルページアプリケーションにおける初期画面に表示されるページのＰａｇｅＩＤが含まれる初期画面遷移指示を表示処理部４０３に送信する。同様に、入力受付部４０１は、画面遷移操作に応じて、遷移先の画面に表示されるページのＰａｇｅＩＤ（又はＴａｂＩＤ）が含まれる画面遷移指示を表示処理部４０３に送信する。

画面要求部４０２は、入力受付部４０１からの指示に応じて、サーバ装置１０から画面情報１０００を取得するための画面取得要求をサーバ装置１０に送信する。

表示処理部４０３は、各種画面の表示に関する処理（すなわち、画面の遷移に関する処理）を行う。ここで、表示処理部４０３は、表示判定部４１１と、表示制御部４１２とを有する。

表示判定部４１１は、初期画面遷移指示や画面遷移指示等に含まれるＰａｇｅＩＤやＴａｂＩＤ等に基づいて、遷移先のページやタブを判定する。

表示制御部４１２は、表示判定部４１１により判定されたページやタブを画面に表示させる。これにより、機器２０の操作パネル２０２上に各種画面が表示される（すなわち、機器２０の操作パネル２０２上の画面が遷移する。）。

なお、表示処理部４０３は、例えば、サーバ装置１０から取得したＪａｖａＳｃｒｉｐｔ等をＷｅｂブラウザ４０が実行することで実現される。

画面管理部４０４は、サーバ装置１０から取得した画面情報１０００に含まれる各種情報に基づき、状態情報２０００及び部品情報３０００を作成して、画面管理情報記憶部４０５に記憶させる。

ここで、状態情報２０００とは、Ｗｅｂブラウザ４０が現在表示しているページのＰａｇｅＩＤや前回表示していたページのＰａｇｅＩＤを管理する情報である。また、部品情報３０００とは、各画面を構成するページ部品やタブ部品等を管理する情報である。

なお、画面管理部４０４は、例えば、サーバ装置１０から取得したＪａｖａＳｃｒｉｐｔ等をＷｅｂブラウザ４０が実行することで実現される。

画面管理情報記憶部４０５は、状態情報２０００と、部品情報３０００とを記憶する。なお、状態情報２０００及び部品情報３０００の詳細については後述する。

＜処理の詳細＞
次に、本実施形態に係るＷｅｂシステム１の処理の詳細について説明する。以降では、機器２０のユーザが、サーバ装置１０により提供されるシングルページアプリケーションを利用する場合における画面遷移について、図６を参照しながら説明する。図６は、第一の実施形態に係る画面遷移の全体処理の一例を示すシーケンス図である。

まず、機器２０のユーザは、アプリ開始操作を行う。すると、機器２０の入力受付部４０１は、ユーザからのアプリ開始操作を受け付ける（ステップＳ６０１）。なお、アプリ開始操作は、例えば、シングルページアプリケーションの利用を開始するための所定のＵＲＬ（Uniform Resource Locator）が含まれ、Ｗｅｂブラウザ４０を起動させるためのショートカットアイコンを押下することで行うことができる。また、アプリ開始操作は、Ｗｅｂブラウザ４０により表示されるアドレスバーに所定のＵＲＬを入力することで行っても良い。

機器２０の入力受付部４０１は、画面取得指示を画面要求部４０２に送信する（ステップＳ６０２）。

次に、機器２０の画面要求部４０２は、入力受付部４０１から画面取得指示を受信すると、画面取得要求をサーバ装置１０に送信する（ステップＳ６０３）。なお、画面要求部４０２により送信される画面取得要求は、例えば、ユーザにより押下されたショートカットアイコンに含まれるＵＲＬが定義されたＨＴＴＰ（Hypertext Transfer Protocol）リクエストである。

次に、サーバ装置１０の画面応答部３０１は、機器２０から画面取得要求を受信すると、画面情報記憶部３０２から画面情報１０００を取得して、当該画面情報１０００を機器２０に返信する（ステップＳ６０４）。なお、画面応答部３０１は、例えば、画面情報１０００が含まれるＨＴＴＰレスポンスを機器２０に送信することで、当該画面情報１０００を機器２０に返信する。

ここで、サーバ装置１０から返信される画面情報１０００には、例えば、ＨＴＭＬ等の画面定義情報１１００と、ページやタブの構成を示す構成情報１２００とが含まれる。

本実施形態に係る画面定義情報１１００について、図７を参照しながら説明する。図７は、第一の実施形態に係る画面定義情報１１００の一例を示す図である。

図７に示すように、画面定義情報１１００は、各ページ及び各タブが＜ｄｉｖ＞で定義されている。これにより、例えば、ＣＳＳにおいて「ｄｉｓｐｌａｙ」プロパティの値を「ｎｏｎｅ」にして、表示するページやタブ以外のページやタブを非表示にすることができる。また、例えば、＜ｄｉｖ＞要素をＤＯＭ（Document Object Model）で削除することでも同様に、表示するページやタブ以外のページやタブを非表示（削除）にすることができる。なお、＜ｄｉｖ＞とは、１つのコンテンツ（例えば、ページやタブ等）を１つのまとまりとして定義するためのタグである。

また、本実施形態に係る構成情報１２００について、図８を参照しながら説明する。図８は、第一の実施形態に係る構成情報１２００の一例の示す図である。

図８に示すように、構成情報１２００は、ページを識別するＰａｇｅＩＤと、タブを識別するＴａｂＩＤとの構成を示す情報である。すなわち、図８に示す構成情報１２００では、ＰａｇｅＩＤ「ｐａｇｅ１」、「ｐａｇｅ２」、及び「ｐａｇｅ３」が同じ階層として定義されている。一方で、図８に示す構成情報１２００では、ＴａｂＩＤ「ｐａｇｅ１／ｔａｂ１」及び「ｐａｇｅ１／ｔａｂ２」がＰａｇｅＩＤ「ｐａｇｅ１」の１つ下の階層として定義されている。

このように、図８に示す構成情報１２００では、ＰａｇｅＩＤ及びＴａｂＩＤが階層構造（木構造）となるように定義されている。

なお、ＴａｂＩＤは、タブが含まれるページの「ＰａｇｅＩＤ」と、「当該ページ内においてタブを識別する情報」とをスラッシュ「／」で繋ぐことで定義されているが、これに限られない。すなわち、ＴａｂＩＤは、ＰａｇｅＩＤと階層構造となるように定義されていれば良い。したがって、「ｐａｇｅ１／ｔａｂ１」は、例えば、「Ｐａｇｅ１・ｔａｂ１」や「ｐａｇｅ１−１」等と定義されていても良い。

なお、図８に示す構成情報１２００は、例えば、ＪＳＯＮ（JavaScript Object Notation）等のデータ形式でサーバ装置１０から返信される。

次に、機器２０は、サーバ装置１０から画面情報１０００を受信すると、当該画面情報１０００に基づいて、シングルページアプリケーションを利用するための初期画面を表示させる初期画面表示処理を行う（ステップＳ６０５）。これにより、機器２０の操作パネル２０２上には、例えば、図２に示す画面Ｇ１１０等の予め設定された初期画面が表示される。なお、初期画面表示処理の詳細については後述する。

次に、機器２０のユーザは、画面遷移操作を行う。すると、機器２０の入力受付部４０１は、ユーザからの画面遷移操作を受け付ける（ステップＳ６０６）。なお、画面遷移操作は、例えば、図２に示す画面Ｇ１１０において、他のページやタブを表示させるための表示部品（タブ切替ボタンＧ１１１や遷移ボタンＧ１１２等）を押下することで行うことができる。図２に示す画面Ｇ１２０や画面Ｇ２００、画面３００等においても同様である。

機器２０の入力受付部４０１は、画面遷移指示を表示処理部４０３に送信する（ステップＳ６０７）。なお、画面遷移指示には、遷移先の画面に表示されるページのＰａｇｅＩＤ（又はＴａｂＩＤ）が含まれる。

次に、機器２０の表示処理部４０３は、画面遷移指示を受信すると、当該画面遷移指示に含まれるＰａｇｅＩＤ（又はＴａｂＩＤ）に基づいて、画面を遷移させるための画面遷移処理を行う（ステップＳ６０８）。これにより、機器２０の操作パネル２０２上には、例えば、図２に示す画面Ｇ１１０から画面Ｇ１２０への画面遷移や画面Ｇ１２０から画面Ｇ２００への画面遷移等、現在表示中の画面から他の画面への画面遷移を行うことができる。なお、画面遷移処理の詳細については後述する。

なお、機器２０のユーザは、現在表示中の画面から他の画面への画面遷移を所望する都度、上記のステップＳ６０６の画面遷移操作を行えば良い。

ここで、図６におけるステップＳ６０５の初期画面表示処理の詳細について、図９を参照しながら説明する。図９は、第一の実施形態に係る初期画面の表示処理の一例を示すシーケンス図である。

機器２０の入力受付部４０１は、部品作成指示を表示処理部４０３に送信する（ステップＳ９０１）。なお、部品作成指示には、サーバ装置１０から取得した画面情報１０００が含まれる。

機器２０の表示処理部４０３は、入力受付部４０１から部品作成指示を受信すると、状態情報及び部品情報の作成指示を画面管理部４０４に送信する（ステップＳ９０２）。なお、状態情報及び部品情報の作成指示には、画面情報１０００に含まれる構成情報１２００が含まれる。

次に、機器２０の画面管理部４０４は、状態情報及び部品情報の作成指示を受信すると、当該作成指示に含まれる構成情報１２００に基づき、状態情報２０００及び部品情報３０００を作成する。そして、画面管理部４０４は、作成した状態情報２０００及び部品情報３０００を画面管理情報記憶部４０５に記憶させる（ステップＳ９０３）。

ここで、画面管理部４０４により作成される状態情報２０００について、図１０を参照しながら説明する。図１０は、第一の実施形態に係る状態情報２０００の一例を示す図である。

図１０に示すように、本実施形態に係る状態情報２０００は、データ項目として、「現在のページ」と、「前回のページ」とを有する。データ項目「現在のページ」には、機器２０の画面に現在表示されているページのＰａｇｅＩＤが格納される。データ項目「前回のページ」には、機器２０の画面に前回表示されていたページのＰａｇｅＩＤが格納される。

なお、画面管理部４０４は、例えば、シングルページアプリケーションの初期画面として表示されるページのＰａｇｅＩＤを「現在のページ」に設定した状態情報２０００を作成する。具体的には、例えば、シングルページアプリケーションの初期画面として表示されるページのＰａｇｅＩＤが「ｐａｇｅ１」である場合、「現在のページ」には「ｐａｇｅ１」が設定される。

このように、図１０に示す状態情報２０００は、機器２０が現在表示しているページのＰａｇｅＩＤと、１つ前に表示していたページのＰａｇｅＩＤとを管理する情報である。したがって、例えば、機器２０の画面に、ＰａｇｅＩＤ「ｐａｇｅ１」のページが表示されている場合、状態情報２０００の「現在のページ」には「ｐａｇｅ１」が格納される。そして、例えば、機器２０の画面がＰａｇｅＩＤ「ｐａｇｅ１」のページからＰａｇｅＩＤ「ｐａｇｅ２」のページに遷移した場合、状態情報２０００の「現在のページ」には「ｐａｇｅ２」が格納される一方で、「前回のページ」には「ｐａｇｅ１」が格納される。

なお、図１０に示す状態情報２０００には、前回表示されていたページのＰａｇｅＩＤが格納されるデータ項目「前回のページ」を有するものとしたが、これに限られない。状態情報２０００は、表示されていたページのＰａｇｅＩＤの履歴を格納するデータ項目を有していても良い。

また、画面管理部４０４により作成される部品情報３０００について、図１１を参照しながら説明する。図１１は、第一の実施形態に係る部品情報３０００の一例を示す図である。

図１１に示すように、本実施形態に係る部品情報３０００は、データ項目として、「ページＩＤ」と、「ページ部品」と、「タブＩＤ」と、「タブ部品」と、「現在のタブ」とを有する。

データ項目「ページＩＤ」は、各ページを識別するＰａｇｅＩＤが格納される。データ項目「ページ部品」は、各種画面を構成するページ部品を格納する。なお、ページ部品とは、例えば、画面情報１０００に含まれるＪａｖａＳｃｒｉｐｔにより生成されるページのオブジェクトである。

データ項目「タブＩＤ」は、各タブを識別するＴａｂＩＤが格納される。データ項目「タブ部品」は、各種画面を構成するタブ部品を格納する。なお、タブ部品とは、例えば、画面情報１０００に含まれるＪａｖａＳｃｒｉｐｔにより生成されるタブのオブジェクトである。

データ項目「現在のタブ」は、データ項目「ページＩＤ」に格納されているＰａｇｅＩＤのページに含まれる各タブのうち、最後に表示されたタブのＴａｂＩＤが格納される。なお、画面管理部４０４は、例えば、該当のページにおいてデフォルトとして表示されるタブのＴａｂＩＤを「現在のタブ」に設定した部品情報３０００を作成する。具体的には、データ項目「ページＩＤ」が「ｐａｇｅ１」であるページには、例えば、データ項目「現在のタブ」に「ｐａｇｅ１／ｔａｂ１」が設定される。

なお、ページにタブが含まれない場合、データ項目「タブＩＤ」、「タブ部品」、及び「現在のタブ」には、例えば、ブランク又は空値が設定される。

このように、図１１に示す部品情報３０００には、ページ毎に、ページ部品と、当該ページに含まれるタブ部品と、最後に表示されたタブのＴａｂＩＤとが関連付けて管理されている。

入力受付部４０１は、状態情報２０００及び部品情報３０００が作成されると、初期画面遷移指示を表示処理部４０３に送信する（ステップＳ９０４）。なお、初期画面遷移指示には、上記のステップＳ９０３で作成された状態情報２０００の「現在ページ」に格納されているＰａｇｅＩＤが含まれる。

そして、表示処理部４０３は、初期画面遷移指示を受信すると、当該初期画面遷移指示に含まれるＰａｇｅＩＤに基づいて、初期画面に画面を遷移させるための画面遷移処理を行う（ステップＳ９０５）。これにより、機器２０の操作パネル２０２上には、シングルページアプリケーションの初期画面として、例えば、図２に示す画面Ｇ１１０が表示される。なお、画面遷移処理の詳細については後述する。

以上により、本実施形態に係る機器２０には、サーバ装置１０から取得した画面情報１０００に基づいて、シングルページアプリケーションの初期画面が表示される。

ここで、図６におけるステップＳ６０８及び図９におけるステップＳ９０５の画面遷移処理の詳細について、図１２を参照しながら説明する。図１２は、第一の実施形態に係る画面遷移処理の一例を示すフローチャートである。なお、図６において、初期画面遷移指示と画面遷移指示とを区別せずに、単に「遷移指示」と表す。また、遷移指示に含まれるＰａｇｅＩＤやＴａｂＩＤ等の遷移先を示す情報を、「遷移先情報」と表す。

まず、表示処理部４０３は、画面管理部４０４により、画面管理情報記憶部４０５から状態情報２０００及び部品情報３０００を取得する（ステップＳ１２０１）。

次に、表示判定部４１１は、入力受付部４０１から受信した遷移指示が、遷移元へ画面を遷移させるための遷移指示（以降、「遷移元への遷移指示」と表す。）であるか否かを判定する（ステップＳ１２０２）。

ここで、例えば、図２に示す画面Ｇ３００において、ユーザにより遷移ボタンＧ３０１や遷移ボタンＧ３０２等が押下された場合、入力受付部４０１は、遷移元への遷移指示を表示処理部４０３に送信する。このような、遷移元への遷移指示には、遷移先情報として、例えば、遷移元の画面を表示することを示す指定「ｐｒｅｖ」等が含まれる。したがって、表示判定部４１１は、遷移先情報として「ｐｒｅｖ」が遷移指示に含まれるか否かを判定することにより、当該遷移指示が、遷移元への遷移指示であるか否かを判定すれば良い。

ステップＳ１２０２において、入力受付部４０１から受信した遷移指示が、遷移元への遷移指示であると判定された場合、表示処理部４０３は、状態情報２０００のデータ項目「前回のページ」に格納されているＰａｇｅＩＤを取得して、遷移先情報とする（ステップＳ１２０３）。

表示判定部４１１は、遷移先情報がＴａｂＩＤであるか否かを判定する（ステップＳ１２０４）。

ステップＳ１２０４において、遷移先情報がＴａｂＩＤでない（すなわち、ＰａｇｅＩＤである）と判定された場合、表示判定部４１１は、部品情報３０００において、当該ＰａｇｅＩＤにＴａｂＩＤが対応付けられているか否かを判定する（ステップＳ１２０５）。すなわち、表示判定部４１１は、遷移先情報（ＰａｇｅＩＤ）のページにタブが含まれるか否かを判定する。

ステップＳ１２０５において、遷移先情報にＴａｂＩＤが対応付けられていない（すなわち、ページにタブが含まれない）と判定された場合、表示判定部４１１は、画面に現在表示中のページのＰａｇｅＩＤと同一であるか否かを判定する（ステップＳ１２０６）。

すなわち、表示判定部４１１は、状態情報２０００のデータ項目「現在のページ」に格納されているＰａｇｅＩＤを取得して、当該ＰａｇｅＩＤと、遷移先情報（ＰａｇｅＩＤ）とが同一であるか否かを判定する。

ステップＳ１２０６において、現在表示中のページのＰａｇｅＩＤと遷移先情報（ＰａｇｅＩＤ）とが同一でないと判定された場合、表示制御部４１２は、遷移先情報（ＰａｇｅＩＤ）のページを画面に表示させる（ステップＳ１２０７）。これにより、機器２０において、ページが表示された画面への画面遷移が行われる。

なお、表示制御部４１２は、上述したように、例えば、ＣＳＳにおいて「ｄｉｓｐｌａｙ」プロパティの値を「ｎｏｎｅ」にすることにより、ページを画面に表示させる。具体的には、例えば、遷移先情報が「ｐａｇｅ２」である場合、図７に示す画面定義情報１１００の＜ｄｉｖ ｉｄ＝"ｐａｇｅ１"＞及び＜ｄｉｖ ｉｄ＝"ｐａｇｅ３"＞について、ＣＳＳにおける「ｄｉｓｐｌａｙ」プロパティの値を「ｎｏｎｅ」にすれば良い。また、図７に示す画面定義情報１１００の＜ｄｉｖ ｉｄ＝"ｐａｇｅ１"＞及び＜ｄｉｖ ｉｄ＝"ｐａｇｅ３"＞要素のＤＯＭを削除しても良い。

これにより、表示制御部４１２により、図１１に示す部品情報において、ＰａｇｅＩＤ「ｐａｇｅ２」に対応付けられているページ部品が表示されて、ページ２が画面に表示される（すなわち、ページ２が表示された画面に画面遷移する。）。

また、このとき、表示制御部４１２は、画面管理部４０４により、状態情報２０００のデータ項目「現在のページ」及び「前回のページ」を更新する。すなわち、画面管理部４０４は、状態情報２０００のデータ項目「現在のページ」に格納されているＰａｇｅＩＤを「前回のページ」に格納した後、「現在のページ」に遷移先情報（ＰａｇｅＩＤ）を格納する。

一方、ステップＳ１２０６において、現在表示中のページのＰａｇｅＩＤと遷移先情報（ＰａｇｅＩＤ）とが同一であると判定された場合、表示処理部４０３は、処理を終了させる。この場合、機器２０において、画面の遷移は行われない。

ここで、ステップＳ１２０５において、遷移先情報（ＰａｇｅＩＤ）にＴａｂＩＤが対応付けられていると判定された場合、表示処理部４０３は、部品情報３０００のデータ項目「現在のタブ」に格納されているＴａｂＩＤのうち、遷移先情報（ＰａｇｅＩＤ）に対応付けられているＴａｂＩＤを取得して、遷移先情報とする（ステップＳ１２０８）。

すなわち、例えば、遷移先情報が「ｐａｇｅ１」である場合、表示処理部４０３は、図１１に示す部品情報３０００のデータ項目「現在のタブ」に格納されているＴａｂＩＤのうち、ＴａｂＩＤ「ｐａｇｅ１／ｔａｂ１」を取得して、遷移先情報とする。

また、ステップＳ１２０４において、遷移先情報がＴａｂＩＤであると判定された場合、表示判定部４１１は、画面にタブが表示中である否かを判定する（ステップＳ１２０９）。すなわち、表示判定部４１１は、状態情報２０００のデータ項目「現在のページ」に格納されているＰａｇｅＩＤが、部品情報３０００においてＴａｂＩＤと対応付けられている否かを判定する。

ステップＳ１２０９において、タブが表示中であると判定された場合、表示判定部４１１は、表示中のタブのＴａｂＩＤと同一であるか否かを判定する（ステップＳ１２１０）。すなわち、表示判定部４１１は、部品情報３０００のデータ項目「現在のタブ」に格納されているＴａｂＩＤのうち、現在表示中のページのＰａｇｅＩＤと対応付けられているＴａｂＩＤを取得して、遷移先情報（ＴａｂＩＤ）と同一であるか否かを判定する。

ステップＳ１２１０において、表示中のタブのＴａｂＩＤと同一でないと判定された場合、表示制御部４１２は、遷移先情報（ＴａｂＩＤ）に基づいて、当該ＴａｂＩＤのタブ及び当該タブを含むページを画面に表示させる（ステップＳ１２１１）。これにより、機器２０において、タブを含むページが表示された画面への画面遷移が行われる。

なお、表示制御部４１２は、上述したように、例えば、ＣＳＳにおいて「ｄｉｓｐｌａｙ」プロパティの値を「ｎｏｎｅ」にすることにより、ページ及びタブを画面に表示させる。具体的には、例えば、遷移先情報が「ｐａｇｅ１／ｔａｂ２」である場合、図７に示す画面定義情報１１００の＜ｄｉｖ ｉｄ＝"ｐａｇｅ１／ｔａｂ１"＞、＜ｄｉｖ ｉｄ＝"ｐａｇｅ２"＞、及び＜ｄｉｖ ｉｄ＝"ｐａｇｅ３"＞について、ＣＳＳにおける「ｄｉｓｐｌａｙ」プロパティの値を「ｎｏｎｅ」にすれば良い。また、図７に示す画面定義情報１１００の＜ｄｉｖ ｉｄ＝"ｐａｇｅ１／ｔａｂ１"＞、＜ｄｉｖ ｉｄ＝"ｐａｇｅ２"＞、及び＜ｄｉｖ ｉｄ＝"ｐａｇｅ３"＞要素のＤＯＭを削除しても良い。

これにより、表示制御部４１２により、図１１に示す部品情報において、ＰａｇｅＩＤ「ｐａｇｅ１」に対応付けられているページ部品と、ＴａｂＩＤ「ｐａｇｅ１／ｔａｂ２」に対応付けられているタブ部品とが表示され、ページ１のタブ２が画面に表示される。

また、このとき、表示制御部４１２は、画面管理部４０４により、状態情報２０００のデータ項目「現在のページ」及び「前回のページ」と、部品情報３０００のデータ項目「現在のタブ」を更新する。すなわち、画面管理部４０４は、状態情報２０００のデータ項目「現在のページ」に格納されているＰａｇｅＩＤを「前回のページ」に格納した後、「現在のページ」に、部品情報３０００において遷移先情報（ＴａｂＩＤ）に対応付けられているＰａｇｅＩＤを格納する。また、画面管理部４０４は、部品情報３０００のデータ項目「現在のタブ」のうち、当該ＰａｇｅＩＤに対応付けられているＴａｂＩＤを遷移先情報（ＴａｂＩＤ）に更新する。

一方、ステップＳ１２１０において、表示中のタブのＴａｂＩＤと同一であると判定された場合、表示制御部４１２は、処理を終了させる。この場合、機器２０において、画面の遷移は行われない。

以上のように、本実施形態に係るＷｅｂシステム１では、サーバ装置１０から提供されたシングルページアプリケーションを利用する機器２０において、ＰａｇｅＩＤやＴａｂＩＤ等を指定することで、画面遷移を行うことができる。このため、本実施形態に係るＷｅｂシステム１によれば、サーバ装置１０が提供するシングルページアプリケーションの開発者等は、各画面におけるボタン等の表示部品にＰａｇｅＩＤやＴａｂＩＤを定義することで、当該アプリケーションにおける画面間の遷移関係を容易に作成することができる。

なお、本実施形態に係るＷｅｂシステム１では、シングルページアプリケーションにおける各画面のＵＲＬは同一であるものとしたが、これに限られず、各画面のＵＲＬにハッシュ（＃）を付与して、各画面のＵＲＬとしても良い。すなわち、例えば、ページ２が表示された画面のＵＲＬを、シングルページアプリケーションのＵＲＬにハッシュ「＃ｐａｇｅ２」を付与したＵＲＬとしても良い。同様に、例えば、ページ１のタブ２が表示された画面のＵＲＬを、シングルページアプリケーションＵＲＬにハッシュ「＃ｐａｇｅ１／ｔａｂ２」を付与したＵＲＬとしても良い。

これにより、例えば、機器２０のユーザは、Ｗｅｂブラウザ４０が提供する「戻る」ボタンやブックマーク等の機能を利用することができるようになる。

［第二の実施形態］
次に、第二の実施形態について説明する。第二の実施形態では、ページ及びタブに加えて、複数のページから構成されるスクリーンと呼ばれる概念も考慮した画面遷移について説明する。すなわち、第二の実施形態に係るサーバ装置１０により提供されるシングルページアプリケーションでは、ページ間の遷移やタブ間の遷移に加えて、スクリーン間の遷移も行うものとする。

なお、第二の実施形態の説明では、主に、第一の実施形態との相違点について説明し、第一の実施形態と実質的に同様の機能構成を有する箇所及び実質的に同様の処理を実行する箇所は、適宜、その説明を省略する。

まず、機器２０のＷｅｂブラウザ４０により表示されたシングルページアプリケーションにおける画面遷移について、図１３を参照しながら説明する。図１３は、第二の実施形態に係る画面遷移の一例を説明する図である。

図１３に示すように、サーバ装置１０により提供されるシングルページアプリケーションは、ＳｃｒｅｅｎＩＤ「ｓｃｒｅｅｎ１」の主スクリーンと、ＳｃｒｅｅｎＩＤ「ｓｃｒｅｅｎ２」の詳細スクリーンとを有するものとする。

主スクリーンには、ＰａｇｅＩＤ「ｓｃｒｅｅｎ１／ｐａｇｅ１」のページ１と、ＰａｇｅＩＤ「ｓｃｒｅｅｎ１／ｐａｇｅ２」のページ２と、ＰａｇｅＩＤ「ｓｃｒｅｅｎ１／ｐａｇｅ３」のページ３とが含まれるものとする。また、ページ１には、ＴａｂＩＤ「ｓｃｒｅｅｎ１／ｐａｇｅ１／ｔａｂ１」のタブ１と、ＴａｂＩＤ「ｓｃｒｅｅｎ１／ｐａｇｅ１／ｔａｂ２」のタブ２とが含まれるものとする。

同様に、詳細スクリーンには、ＰａｇｅＩＤ「ｓｃｒｅｅｎ２／ｐａｇｅ４」のページ４と、ＰａｇｅＩＤ「ｓｃｒｅｅｎ２／ｐａｇｅ５」のページ４とが含まれるものとする。

ここで、主スクリーン内におけるページ１〜ページ３間の画面遷移は、第一の実施形態と略同様であるため、その説明を省略する。

図１３に示すように、ページ１におけるタブ１が表示された画面Ｇ１１０において、ユーザにより、遷移ボタンＧ１１４が押下されたものとする。この場合、Ｗｅｂブラウザ４０は、当該遷移ボタンＧ１１４に対応付けられたスクリーンＩＤ「ｓｃｒｅｅｎ２」に基づいて、画面Ｇ４００及び画面Ｇ５００のうち、最後に表示されていた画面を表示する。なお、ページ１におけるタブ２が表示された画面Ｇ１２０において、ユーザにより、遷移ボタンＧ１２４が押下された場合についても同様である。

また、ページ４が表示された画面Ｇ４００において、ユーザにより、遷移ボタンＧ４０１が押下されたものとする。この場合、Ｗｅｂブラウザ４０は、当該遷移ボタンＧ４０１に対応付けられたスクリーンＩＤ「ｓｃｒｅｅｎ１」に基づいて、画面Ｇ１１０、画面Ｇ１２０、画面Ｇ２００、及び画面Ｇ３００のうち、最後に表示されていた画面を表示する。なお、ページ５が表示された画面Ｇ５００において、ユーザにより、遷移ボタンＧ５０１が押下された場合についても同様である。

このように、本実施形態に係る機器２０では、シングルページアプリケーションにおける複数の画面が含まれるスクリーンと呼ばれる概念を導入して、スクリーン間での画面遷移を行う。これにより、例えば、主スクリーンでは、シングルアプリケーションを利用するための必須の画面が含まれるようにする一方で、詳細スクリーンでは、設定値の変更画面等の任意的な画面が含まれるようにすることができる。このため、シングルページアプリケーションの開発者等は、共通の目的に利用されるような画面を１つのスクリーンにまとめて、画面間の遷移関係をより容易に作成することができるようになる。

なお、画面Ｇ４００において、ユーザにより、遷移ボタンＧ４０２が押下された場合、Ｗｅｂブラウザ４０は、当該遷移ボタンＧ４０２に対応付けられたスクリーンＩＤ「ｓｃｒｅｅｎ２／ｐａｇｅ５」に基づいて、画面Ｇ５００を表示する。一方、画面Ｇ５００において、ユーザにより、遷移ボタンＧ５０２が押下された場合、Ｗｅｂブラウザ４０は、当該遷移ボタンＧ５０２に対応付けられたスクリーンＩＤ「ｓｃｒｅｅｎ２／ｐａｇｅ４」に基づいて、画面Ｇ４００を表示する。

＜処理の詳細＞
次に、本実施形態に係るＷｅｂシステム１の処理の詳細について説明する。以降では、機器２０のユーザが、サーバ装置１０により提供されるシングルページアプリケーションを利用する場合における画面遷移について、図１４を参照しながら説明する。図１４は、第二の実施形態に係る画面遷移の全体処理の一例を示すシーケンス図である。

サーバ装置１０の画面応答部３０４は、機器２０から画面取得要求を受信すると、画面情報記憶部３０２から画面情報１０００を取得して、当該画面情報１０００を機器２０に返信する（ステップＳ１４０１）。

ここで、サーバ装置１０から返信される画面情報１０００には、例えば、ＨＴＭＬ等の画面定義情報１１００と、スクリーンやページ、タブの構成を示す構成情報１２００とが含まれる。

本実施形態に係る画面定義情報１１００について、図１５を参照しながら説明する。図１５は、第二の実施形態に係る画面定義情報１１００の一例を示す図である。

図１５に示すように、本実施形態に係る画面定義情報１１００は、各スクリーン、各ページ、及び各タブが＜ｄｉｖ＞で定義されている。これにより、例えば、ＣＳＳにおいて「ｄｉｓｐｌａｙ」プロパティの値を「ｎｏｎｅ」にすることにより、表示するスクリーンにおけるページやタブ以外のスクリーンやページ、タブを非表示することができる。なお、例えば、＜ｄｉｖ＞要素をＤＯＭ（Document Object Model）で削除することでも同様に、表示するスクリーンにおけるページやタブ以外のスクリーンやページ、タブを非表示（削除）にすることができる。

また、本実施形態に係る構成情報１２００について、図１６を参照しながら説明する。図１６は、第二の実施形態に係る構成情報１２００の一例の示す図である。

図１６に示すように、本実施形態に係る構成情報１２００は、スクリーンを識別するＳｃｒｅｅｎＩＤと、ページを識別するＰａｇｅＩＤと、タブを識別するＴａｂＩＤとの構成を示す情報である。すなわち、図１６に示す構成情報１２００では、ＳｃｒｅｅｎＩＤ「ｓｃｒｅｅｎ１」及び「ｓｃｒｅｅｎ２」が同じ階層として定義されている。

また、図１６に示す構成情報１２００では、ＰａｇｅＩＤ「ｓｃｒｅｅｎ１／ｐａｇｅ１」、「ｓｃｒｅｅｎ１／ｐａｇｅ２」、及び「ｓｃｒｅｅｎ１／ｐａｇｅ３」が「ｓｃｒｅｅｎ１」の１つ下の階層として定義されている。同様に、図１６に示す構成情報１２００では、ＰａｇｅＩＤ「ｓｃｒｅｅｎ２／ｐａｇｅ４」及び「ｓｃｒｅｅｎ２／ｐａｇｅ５」が「ｓｃｒｅｅｎ２」の１つ下の階層として定義されている。

さらに、図１６に示す構成情報１２００では、ＴａｂＩＤ「ｓｃｒｅｅｎ１／ｐａｇｅ１／ｔａｂ１」及び「ｓｃｒｅｅｎ１／ｐａｇｅ１／ｔａｂ２」がＰａｇｅＩＤ「ｐａｇｅ１」の１つ下の階層として定義されている。

このように、図１６に示す構成情報１２００では、ＳｃｒｅｅｎＩＤ、ＰａｇｅＩＤ、及びＴａｂＩＤが階層構造（木構造）となるように定義されている。

次に、機器２０は、サーバ装置１０から画面情報１０００を受信すると、当該画面情報１０００に基づいて、シングルページアプリケーションを利用するための初期画面を表示させる初期画面表示処理を行う（ステップＳ１４０２）。これにより、機器２０の操作パネル２０２上には、例えば、図１３に示す画面Ｇ１１０等の予め設定された初期画面が表示される。なお、初期画面表示処理の詳細については後述する。

また、機器２０の表示処理部４０３は、ステップＳ６０６で送信された画面遷移指示を受信すると、当該画面遷移指示に含まれる、ＳｃｒｅｅｎＩＤ、ＰａｇｅＩＤ、又はＴａｂＩＤに基づいて、画面を遷移させるための画面遷移処理を行う（ステップＳ１４０３）。これにより、機器２０の操作パネル２０２上には、例えば、図１３に示す画面Ｇ１１０から画面Ｇ１２０への画面遷移や画面Ｇ１２０から画面Ｇ２００への画面遷移、画面Ｇ１２０から画面Ｇ４００への画面遷移等の画面遷移を行うことができる。なお、画面遷移処理の詳細については後述する。

ここで、図１４におけるステップＳ１４０２の初期画面表示処理の詳細について、図１７を参照しながら説明する。図１７は、第二の実施形態に係る初期画面の表示処理の一例を示すシーケンス図である。

機器２０の画面管理部４０４は、状態情報及び部品情報の作成指示を受信すると、当該作成指示に含まれる構成情報１２００に基づき、状態情報２０００及び部品情報３０００を作成する。そして、画面管理部４０４は、作成した状態情報２０００及び部品情報３０００を画面管理情報記憶部４０５に記憶させる（ステップＳ１７０１）。

ここで、本実施形態に係る画面管理部４０４により作成される状態情報２０００について、図１８を参照しながら説明する。図１８は、第二の実施形態に係る状態情報２０００の一例を示す図である。

図１８に示すように、本実施形態に係る状態情報２０００は、データ項目として、さらに、「現在のスクリーン」を有する。データ項目「現在のスクリーン」には、機器２０の画面に現在表示されているページが含まれるスクリーンのＳｃｒｅｅｎＩＤが格納される。

なお、画面管理部４０４は、例えば、シングルページアプリケーションの初期画面として表示されるページが含まれるスクリーンのＳｃｒｅｅｎＩＤを「現在のスクリーン」に設定した状態情報を作成する。具体的には、例えば、シングルページアプリケーションの初期画面として表示されるページのＰａｇｅＩＤが「ｐａｇｅ１」である場合、「現在のスクリーン」には「ｐａｇｅ１」のページが含まれるスクリーン１のＳｃｒｅｅｎＩＤ「ｓｃｒｅｅｎ１」が設定される。

このように、図１８に示す状態情報２０００は、機器２０が現在表示しているページのＰａｇｅＩＤと、１つ前に表示していたページのＰａｇｅＩＤと、現在表示しているページが含まれるスクリーンのＳｃｒｅｅｎＩＤとを管理する情報である。

また、画面管理部４０４により作成される部品情報３０００について、図１９を参照しながら説明する。図１９は、第二の実施形態に係る部品情報３０００の一例を示す図である。

図１９に示すように、本実施形態に係る部品情報３０００は、データ項目として、さらに、「スクリーンＩＤ」を有する。データ項目「スクリーンＩＤ」は、各スクリーンを識別するＳｃｒｅｅｎＩＤが格納される。

このように、図１９に示す部品情報３０００には、スクリーン毎に、当該スクリーンに含まれるページのページ部品と、当該ページに含まれるタブ部品と、最後に表示されたタブのタブＩＤとが関連付けて管理されている。

入力受付部４０１は、状態情報２０００及び部品情報３０００が作成されると、初期画面遷移指示を表示処理部４０３に送信する（ステップＳ１７０２）。なお、初期画面遷移指示には、上記のステップＳ１７０１で作成された状態情報２０００の「現在ページ」に格納されているＰａｇｅＩＤが含まれる。

そして、表示処理部４０３は、初期画面遷移指示を受信すると、当該初期画面遷移指示に含まれるＰａｇｅＩＤに基づいて、初期画面に画面を遷移させるための画面遷移処理を行う（ステップＳ１７０３）。これにより、機器２０の操作パネル２０２上には、シングルページアプリケーションの初期画面として、例えば、図１３に示す画面Ｇ１１０が表示される。なお、画面遷移処理の詳細については後述する。

以上により、本実施形態に係る機器２０には、サーバ装置１０から取得した画面情報１０００に基づいて、シングルページアプリケーションの初期画面が表示される。

ここで、図１４におけるステップＳ１４０３及び図１７におけるステップＳ１７０３の画面遷移処理の詳細について、図２０を参照しながら説明する。図２０は、第二の実施形態に係る画面遷移処理の一例を示すフローチャートである。なお、図２０において、第一の実施形態と同様に、初期画面遷移指示と画面遷移指示とを区別せずに、単に「遷移指示」と表す。また、遷移指示に含まれるＳｃｒｅｅｎＩＤやＰａｇｅＩＤ、ＴａｂＩＤ等の遷移先を示す情報を、「遷移先情報」と表す。

ステップＳ１２０４において、遷移先情報がＴａｂＩＤでない（すなわち、ＳｃｒｅｅｎＩＤ又はＰａｇｅＩＤである）と判定された場合、表示判定部４１１は、遷移先情報がＰａｇｅＩＤであるか否かを判定する（ステップＳ２００１）。

ステップＳ２００１において、遷移先情報がＰａｇｅＩＤでない（すなわち、ＳｃｒｅｅｎＩＤである）と判定された場合、表示処理部４０３は、状態情報２０００のデータ項目「現在のページ」に格納されているＰａｇｅＩＤを取得して、遷移先情報とする（ステップＳ２００２）。

これにより、図２０におけるステップＳ１２０７やステップＳ１２１１において、機器２０は、スクリーン間における画面の遷移も含めて画面遷移を行うことができる。

以上のように、本実施形態に係るＷｅｂシステム１では、サーバ装置１０から提供されたシングルページアプリケーションを利用する機器２０において、ＳｃｒｅｅｎＩＤやＰａｇｅＩＤ、ＴａｂＩＤ等を指定することで、画面遷移を行うことができる。

このため、本実施形態に係るＷｅｂシステム１によれば、各画面におけるボタン等の表示部品にＳｃｒｅｅｎＩＤやＰａｇｅＩＤ、ＴａｂＩＤを定義することで、当該アプリケーションにおける画面間の遷移関係を容易に作成することができる。また、シングルページアプリケーションの開発者等は、共通の目的に利用されるような画面を１つのスクリーンにまとめて、画面の遷移関係を作成することができるようになる。

なお、本実施形態に係るＷｅｂシステム１では、複数のページが含まれるスクリーンと呼ばれる概念を定義して、スクリーン、ページ、及びタブの３階層で画面が構成される例を示したが、これに限られない。すなわち、本実施形態に係るＷｅｂシステム１では、任意の階層で画面が構成されていても良い。

以上、本発明の実施形態について詳述したが、本発明は斯かる特定の実施形態に限定されるものではなく、特許請求の範囲に記載された本発明の要旨の範囲内において、種々の変形・変更が可能である。

１ Ｗｅｂシステム
１０ サーバ装置
２０ 機器
３０ サーバプログラム
４０ Ｗｅｂブラウザ
３０１ 画面応答部
３０２ 画面情報記憶部
４０１ 入力受付部
４０２ 画面要求部
４０３ 表示処理部
４０４ 画面管理部
４０５ 画面管理情報記憶部
４１１ 表示判定部
４１２ 表示制御部
１０００ 画面情報
２０００ 状態情報
３０００ 部品情報

特許第４７５９４３６号公報

Claims (10)

1. シングルページアプリケーションを提供するサーバ装置とネットワークを介して接続され、Ｗｅｂブラウザが搭載された情報処理装置であって、
   前記シングルページアプリケーションにおけるページを表示するためのＷｅｂコンテンツであって、前記ページを識別するページ識別情報毎にコンテンツ要素が定義された画面定義情報と、前記ページ識別情報間の構成が定義された構成情報とが含まれるＷｅｂコンテンツを、前記サーバ装置から前記Ｗｅｂブラウザが取得する取得手段と、
   前記取得手段により取得された前記Ｗｅｂコンテンツに含まれる前記構成情報に基づいて、前記Ｗｅｂブラウザが表示するページのページ識別情報毎に、該ページを表示するページ部品を含む部品情報を前記Ｗｅｂブラウザが作成する作成手段と、
   ユーザによりページの遷移操作がなされた場合、前記画面定義情報に定義されているコンテンツ要素のうち、遷移先のページのページ識別情報に対応する前記コンテンツ要素と、前記遷移先のページのページ識別情報に対応する前記ページ部品とに基づいて、前記遷移先のページを前記Ｗｅｂブラウザが表示する表示手段と、
   を有する情報処理装置。
2. 前記構成情報は、前記ページ識別情報間の構成、及び前記ページに含まれるタブを識別するタブ識別情報と該タブを含むページのページ識別情報との間の構成が定義されており、
   前記作成手段は、
   前記構成情報に基づいて、前記ページ識別情報毎に、該ページを表示するページ部品と、前記ページに含まれるタブを表示するタブ部品とを含む部品情報を前記Ｗｅｂブラウザが作成し、
   前記表示手段は、
   ユーザによりページの遷移操作がなされた場合、前記画面定義情報に定義されているコンテンツ要素のうち、遷移先のページのページ識別情報に対応する前記コンテンツ要素と、前記遷移先のページのページ識別情報に対応する前記ページ部品と、前記遷移先のページに含まれるタブのタブ識別情報に対応する前記タブ部品とに基づいて、前記遷移先のページを前記Ｗｅｂブラウザが表示する、請求項１に記載の情報処理装置。
3. 前記作成手段は、
   前記構成情報に基づいて、前記ページ識別情報毎に、該ページを表示するページ部品と、前記ページに含まれるタブを表示するタブ部品と、前記ページに含まれるタブのうち、最後に表示されたタブのタブ識別情報とを含む部品情報を前記Ｗｅｂブラウザが作成し、
   前記表示手段は、
   ユーザによりページの遷移操作がなされた場合、前記画面定義情報に定義されているコンテンツ要素のうち、遷移先のページのページ識別情報に対応する前記コンテンツ要素と、前記遷移先のページのページ識別情報に対応する前記ページ部品と、前記遷移先のページに含まれるタブのうち、前記最後に表示されたタブのタブ識別情報に対応する前記タブ部品とに基づいて、前記遷移先のページを前記Ｗｅｂブラウザが表示する、請求項２に記載の情報処理装置。
4. 前記構成情報は、前記ページ識別情報同士が並列になるように前記ページ識別情報間の構成が定義され、かつ、前記タブ識別情報が、該タブ識別情報により識別されるタブを含むページのページ識別情報よりも下位となるように前記ページ識別情報と前記タブ識別情報との間の構成が定義されている、請求項２又は３に記載の情報処理装置。
5. 前記画面定義情報は、前記ページ識別情報毎に、ｄｉｖタグが定義された情報である、請求項１乃至４の何れか一項に記載の情報処理装置。
6. 前記表示手段は、
   ユーザによりページの遷移操作がなされた場合、前記画面定義情報に定義されているｄｉｖタグが示す要素のうち、遷移先のページのページ識別情報に対応する前記要素以外の他の要素を削除又は非表示とする一方で、前記要素に対応する前記ページ部品を表示させることで、前記遷移先のページを前記Ｗｅｂブラウザが表示する、請求項５に記載の情報処理装置。
7. 前記表示手段は、
   ＣＳＳのｄｉｓｐｌｙプロパティの値をｎｏｎｅにすることにより、前記他の要素を非表示とする、請求項６に記載の情報処理装置。
8. 前記構成情報は、前記ページ識別情報間の構成をＪＳＯＮ形式で定義された情報である、請求項１乃至７の何れか一項に記載の情報処理装置。
9. シングルページアプリケーションを提供するサーバ装置とネットワークを介して接続され、Ｗｅｂブラウザが搭載された情報処理装置に用いられる情報処理方法であって、
   前記シングルページアプリケーションにおけるページを表示するためのＷｅｂコンテンツであって、前記ページを識別するページ識別情報毎にコンテンツ要素が定義された画面定義情報と、前記ページ識別情報間の構成が定義された構成情報とが含まれるＷｅｂコンテンツを、前記サーバ装置から前記Ｗｅｂブラウザが取得する取得手順と、
   前記取得手順により取得された前記Ｗｅｂコンテンツに含まれる前記構成情報に基づいて、前記Ｗｅｂブラウザが表示するページのページ識別情報毎に、該ページを表示するページ部品を含む部品情報を前記Ｗｅｂブラウザが作成する作成手順と、
   ユーザによりページの遷移操作がなされた場合、前記画面定義情報に定義されているコンテンツ要素のうち、遷移先のページのページ識別情報に対応する前記コンテンツ要素と、前記遷移先のページのページ識別情報に対応する前記ページ部品とに基づいて、前記遷移先のページを前記Ｗｅｂブラウザが表示する表示手順と、
   を有する情報処理方法。
10. シングルページアプリケーションを提供するサーバ装置とネットワークを介して接続され、Ｗｅｂブラウザが搭載された情報処理装置に、
    前記シングルページアプリケーションにおけるページを表示するためのＷｅｂコンテンツであって、前記ページを識別するページ識別情報毎にコンテンツ要素が定義された画面定義情報と、前記ページ識別情報間の構成が定義された構成情報とが含まれるＷｅｂコンテンツを、前記サーバ装置から前記Ｗｅｂブラウザが取得する取得手順、
    前記取得手順により取得された前記Ｗｅｂコンテンツに含まれる前記構成情報に基づいて、前記Ｗｅｂブラウザが表示するページのページ識別情報毎に、該ページを表示するページ部品を含む部品情報を前記Ｗｅｂブラウザが作成する作成手順、
    ユーザによりページの遷移操作がなされた場合、前記画面定義情報に定義されているコンテンツ要素のうち、遷移先のページのページ識別情報に対応する前記コンテンツ要素と、前記遷移先のページのページ識別情報に対応する前記ページ部品とに基づいて、前記遷移先のページを前記Ｗｅｂブラウザが表示する表示手順、
    を実行させるためのプログラム。

Images