JP2014186532A - 情報処理装置、情報処理装置の制御方法、およびプログラム - Google Patents

Abstract

【課題】 大量の画像を含むウェブページに表示する際であっても、ユーザのウェブページの参照開始操作から表示完了までの時間的な間隔を小さくするための技術を提供する。
【解決手段】 描画セルを、配置情報に基づいてセル配置オブジェクトに配置し、画像データをアプリケーションに表示するため描画セルに格納して、セル配置オブジェクトの１画面となるページを、情報処理装置の表示装置に表示させ、また表示装置に表示されたページを、ユーザの操作により次のページに切り替えるページ操作手段を備え、ページに描画セルを配置した結果、ページと描画セルの余白のサイズが、描画セル同士の間隔よりも大きい場合には、該描画セルの一部を表示する。画像データ格納手段は、少なくとも表示装置に表示されている描画セルと、ページ操作手段により次のページに切り替えられた際に表示される描画セルに対応する画像データを、予め描画セルに格納する。
【選択図】図１１

Description

本発明は、アプリケーションの画面操作に関し、特に画面上にレイアウトされた多数の要素（画像を含むセルなど）を、ユーザがスワイプ（あるいはスクロール）する際に、スムーズにスワイプ（あるいはスクロール）が実行させるための技術に関する。

近年、インターネットなどのネットワークを経由して、パーソナルコンピュータ（ノートパソコンなどの携帯型を含む）や携帯端末（スマートフォンなどを含む）において、写真サイト、商品サイトなど、画像データが大量に並べられているサイトを表示する機会も多い。

特許文献１においては、ウェブサイトから取得した電子ドキュメント（ウェブページ）に、グラフィックなどから構成されるブロックが含まれている場合の表示位置の変更についての技術が記載されている。表示位置の移動は、オブジェクトの移動を検知して行われる。ここでオブジェクトとは例えば指であり、移動とは例えばスワイプの動作である。

特表２０１０−５１５９７８号公報

しかしながら、特許文献１においては、電子ドキュメントにグラフィックなどから構成されるブロックが含まれている場合の表示について述べられている。グラフィックなどのコンテンツを表示が不要な部分までも予めブロックとしてページに貼り付けておくことは、最初の位置を表示するまでに時間がかかってしまうことにもつながる。

以下、ブロックとして画像データが表示される場合、本発明においては、画像データを格納・配置し、さらに表示領域において表示可能とするための描画セルと呼ぶ。

本発明は、上記問題に鑑み、大量の画像を含むウェブページに表示する際であっても、ユーザのウェブページの参照開始操作から表示完了までの時間的な間隔を小さくするための技術を提供することを目的とする。

本発明は、アプリケーションサーバとネットワークを介して接続可能な情報処理装置であって、アプリケーションに表示する画像データを格納する描画セルを、等間隔に配置するセル配置オブジェクトにおいて、１画面となるページにおける該描画セルの配置位置として少なくとも該描画セルの間隔をセル配置位置記憶手段に記憶させるセル配置登録手段と、前記描画セルを、前記セル配置位置記憶手段に記憶された配置情報に基づいて前記セル配置オブジェクトに配置する描画セル配置手段と、画像データをアプリケーションに表示可能とするため前記描画セルに格納させる画像データ格納手段と、前記描画セルを含む前記セル配置オブジェクトの１画面となるページを、前記情報処理装置の表示装置に表示させる表示制御手段と、前記表示制御手段により前記表示装置に表示されたページを、ユーザの操作により次のページに切り替えるページ操作手段と、を備え、前記表示制御手段は、前記ページに前記描画セルを配置した結果、該ページと該描画セルの余白のサイズが、該セル配置位置記憶手段に記憶された該描画セルの間隔よりも大きいことにより、他のページの該描画セルの一部を表示可能な場合には、該描画セルの一部を表示するものであって、前記画像データ格納手段は、少なくとも前記表示装置に表示されている描画セルと、前記ページ操作手段により次のページに切り替えられた際に表示される描画セルに対応する画像データを、予め前記描画セルに格納することを特徴とする。

本発明により、大量の画像を含むウェブページに表示する際であっても、ユーザのウェブページの参照開始操作から表示完了までの時間的な間隔を小さくするための技術を提供することが可能となる。

本発明に係わるプログラム開発装置、プログラム開発サーバ、アプリケーションクライアント、アプリケーションサーバの構成の一例を示すシステム構成図である。 本発明に係わるプログラム開発装置、プログラム開発サーバ、アプリケーションクライアント、アプリケーションサーバ、適用可能な各ハードウェア構成の一例を示すブロック図である。 開発者がレイアウト定義指示を行う画面の一例を示す図である。 開発者のレイアウト定義指示に従ってレイアウトを行うフローチャートの一例である。 レイアウトを定義する際のコンテナやオブジェクトの配置を示す一例である。 図５で配置されたオブジェクトの位置などの情報を記憶するデータベースの構成の一例である。 開発者がセル配置オブジェクト上に描画セルを配置する画面の一例を示す図である。 セル配置オブジェクト上に配置された描画セルの位置を記憶するセル配置位置記憶部のデータベース構成の一例を示す図である。 描画セルをセル配置オブジェクトに配置するフローチャートの一例である。 描画セルをセル配置オブジェクトに配置するフローチャートの一例である。 画像データをセル配置オブジェクトに配置された描画セルに表示する状態の一例を示す図である。 画像データをセル配置オブジェクトに配置された描画セルに表示するフローチャートの一例である。 画像データをセル配置オブジェクトに配置された描画セルに表示するフローチャートの一例である。

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

図１は、本発明に係わるプログラム開発装置、プログラム開発サーバ、アプリケーションクライアント、アプリケーションサーバの構成の一例を示すシステム構成図である。アプリケーションクライアントは、パーソナルコンピュータなど持ち運ばずに使用する装置（１０３ａ）であっても良いし、ノートパソコン、携帯端末（スマートフォンを含む）など持ち運ぶ装置（１０３ｂ）であっても良い。

プログラム開発装置１０１（情報処理装置）は、開発者の操作に従って画面レイアウトおよびデータベース検索のアクションなどを定義する。プログラム開発装置１０１単体では、ユーザの入力を受け付け、後述するプログラム開発サーバ１０２（情報処理装置）に実際のプログラム生成処理をさせてもよいし、プログラム開発装置１０１単体でプログラム生成まで処理してもよい。

プログラム開発サーバ１０２ａ〜１０２ｂは、プログラム開発装置１０１により入力された開発者の指示に従って、プログラムを開発する。プログラム開発サーバ１０２ａはＬＡＮなどのネットワーク１０５内に配置されてもよいし、プログラム開発サーバ１０２ｂはインターネット上やクラウド上に配置されてもよい。

アプリケーションサーバ１０４ａ〜１０４ｂは、プログラム開発装置１０１で開発されたアプリケーションを実行する。ＬＡＮなどのネットワーク１０５内に配置されてもよい（アプリケーションサーバ１０４ａ）し、またインターネット上やクラウド上に配置されてもよい（アプリケーションサーバ１０４ｂ）。

アプリケーションクライアント１０３ａ〜１０３ｂ（クライアント装置）は、アプリケーションサーバ１０４と協調してプログラム開発装置１０１で開発したアプリケーションプログラムを動作させる、ユーザの入力端末である。ＬＡＮなどのネットワーク１０５内に配置されてもよい（アプリケーションクライアント１０３ａ）し、またインターネット上やクラウド上に配置されてもよい（アプリケーションクライアント１０３ｂ）。携帯端末などの情報処理装置であってもよい。本実施例においては、タッチパネルでスワイプ（スクロール）することで“次のページ”などを表示することができる携帯端末（情報処理装置）を想定しているが、必ずしもタッチパネルではなくても、マウスなどによりページ単位で“次のページ”を表示するアプリケーションが動作する情報処理装置として想定されればよい。

図２は、本発明に係わるプログラム開発装置、プログラム開発サーバ、プリケーションクライアント、アプリケーションサーバとして適用可能な各ハードウェア構成の一例を示すブロック図である。

図２において、ＣＰＵ２０１は、システムバス２０４に接続される各デバイスを統括的に制御する。

また、ＲＯＭ２０３あるいは外部メモリ２１１には、ＣＰＵ２０１の制御プログラムであるオペレーティングシステム（ＯＳ）や、プログラム開発装置、アプリケーションクライアント、各種サーバの後述する各種機能を実現するためのプログラムが記憶されている。

ＲＡＭ２０２は、ＣＰＵ２０１の主メモリ、ワークエリア、一時待避領域等として機能する。

入力コントローラ２０５は、入力部２０９からの入力を制御する。この入力部２０９としては、特に、プログラム開発装置、アプリケーションクライアント、各種サーバでは、キーボード、マウス等のポインティングデバイスが挙げられる。

出力コントローラ２０６は、出力部２１０の表示を制御する。この出力部２１０としては、例えば、ＣＲＴや液晶ディスプレイ等が挙げられる。

外部メモリコントローラ２０７は、ブートプログラム、各種のアプリケーション、フォントデータ、ユーザーファイル、編集ファイル、プリンタドライバ等を記憶する外部メモリ２１１へのアクセスを制御する。加えて、外部メモリ２１１には、プログラム開発装置、アプリケーションクライアント、各種サーバの各種機能を実現するための各種テーブル、パラメータが記憶されている。この外部メモリ２１１としては、ハードディスク（ＨＤ）やフロッピー（登録商標）ディスク（ＦＤ）、ＰＣＭＣＩＡカードスロットにアダプタを介して接続されるコンパクトフラッシュ（登録商標）、スマートメディア等が挙げられる。

通信Ｉ／Ｆコントローラ２０８は、ネットワークを介して外部機器との通信制御処理を実行する。

本発明を実現するためのプログラム２１２は外部メモリ２１１に記録されており、必要に応じてＲＡＭ２０２にロードされることによりＣＰＵ２０１によって実行されるものである。

図３は、開発者がレイアウト定義指示を行う画面の一例を示す図であり、プログラム開発装置１０１上に表示される。開発ＧＵＩ３００のヘッダー３０１には、開発者が行う作業毎に画面一覧３０２、レイアウト定義３０３が表示されている。３０２〜３０３は単なる作業状況を示すものであってもよいし、あるいはタブとして選択し処理内容を移行できてもよいが、あくまで一例である。また本例では作業している内容に従い、３０２〜３０３のタイトルの前に“＊”を表示している。

作成画面一覧３０４には、作成済みの画面が表示されている。今回の説明では、新規画面作成ボタン３０５を指示することにより、開発ＧＵＩ３００ａの構成に変わる。前記指示は、マウスによるクリック、キーボードによる操作などあるが、以降の説明では区別しない。

例では、新規画面として画面名称３１１に“注文確認”と入力し、過去の注文を確認するための画面レイアウトを定義する処理を行う。

作業領域３１２には、初期状態で新規画面のベースとなる列形式コンテナ３１３が配置される。

コンテナには、例として１件の情報を１葉で各種データを表示する帳票の作成を主な用途とし、複数の行を挿入可能な“列形式コンテナ”と、列形式コンテナの中に“行”を追加して、その“行”の中の横方向に複数のオブジェクトなどを並べることが可能な“行形式コンテナ”の２種類を使用可能である。本実施形態の例では、初期状態では前述の列形式コンテナ３１３が配置される。ただし、初期状態で何も配置されず開発者が行形式コンテナか行形式コンテナを自由に配置できるようにしてもよい。

レイアウト部品３２０には部品ボタンが含まれ、各部品ボタンはコンテナ上に配置できるオブジェクトに対応する。部品ボタンをクリックあるいは、マウスでドラッグアンドドロップすることで、指定のオブジェクトを作業領域３１２に配置済みの他のコンテナに配置可能である。例として列形式コンテナ作成ボタン３２１、行形式コンテナ作成ボタン３２２、テキスト作成ボタン３２３、テキストボックス作成ボタン３２４、グリッド作成ボタン３２５、ボタン作成ボタン３２６などがある。

図４は、開発者がレイアウト定義指示を行う操作手順の一例を簡単に説明するフローチャートである。図４のフローチャートにおける各ステップは、開発者の操作指示を受け付けながら、プログラム開発装置１０１のＣＰＵ２０１において実行されても良いし、また、プログラム開発装置１０１のＣＰＵ２０１とプログラム開発サーバ１０２が必要に応じて、通信を行いながら各ステップを分担して実行しても良い。

また図５は、レイアウトを定義する際のコンテナやオブジェクトの配置を示す一例であり、図４の説明とあわせて使用する。ここでの説明は、あくまで一例であり、レイアウト定義を途中で中断することや、コンテナやオブジェクトの種類で、配置できないときの警告などは割愛する。

ステップＳ４０１においては、ユーザが行った図３の新規画面作成ボタン３０５のマウスクリックなどを受け付け、列形式コンテナ３１３が配置されレイアウト定義作業を開始される。例えば図５の列形式コンテナ３１３ａが配置される。

次に、開発者は、配置作業の内容として“配置”または“対象の移動”のいずれかを行うかを判断する。現時点では、列形式コンテナ３１３ａ（図５）上に何も配置されていないため、開発者は新しい対象の“配置”しかできない。例えば、行形式コンテナを列形式コンテナに追加するためには、開発者は、図３の行形式コンテナ作成ボタン３２２をマウスクリックする。ステップＳ４０２においては、開発者から“配置の内容”（本例では行形式コンテナ）を受け付け後、ステップＳ４０３に進む。

ステップＳ４０３においては、開発者が行った操作が“配置対象の選択”か、“移動対象の選択”であるかを判定する。“配置対象の選択”の場合にはステップＳ４０４に進む。“移動対象の選択”の場合には、ステップＳ４０６に進む。ここで、これ以外の操作は省略するが、例えば対象の削除、対象のサイズの変更などがあっても良い。あくまで操作の例を説明するため、“配置対象の選択”、“移動対象の選択”をあげている。

ステップＳ４０４においては、開発者により指定された配置対象の挿入位置（コンテナなどの挿入先とその中の座標など）を受け付ける。図５の例では、列形式コンテナ３１３ａの指定が受け付けられている。

ステップＳ４０５においては、図５の列形式コンテナ３１３ａの中に階層的に（入れ子状態に）行形式コンテナ５０１が新規作成、挿入される。

ステップＳ４０６においては、配置作業を継続するか否かを開発者から受け付ける。継続する場合（ＹＥＳの場合）は、ステップＳ４０２に戻る。継続しない場合（ＮＯの場合）は、配置作業を終了する。

図５の例では、行形式コンテナ５０１の下方に行形式コンテナ５０２を追加し（３１３ｂ）、更に行形式コンテナ５０２の中にテキストボックスなどのオブジェクト（３１３ｃにおける５１１、３１３ｄにおける５１２）を繰り返して配置している。また、行形式コンテナ５０２の下方に行形式コンテナ５０３をも追加している（３１３ｅ）。

上記の配置処理を繰り返した後、ステップＳ４０２のステップにあるとする。開発者が、既に配置されている対象をマウスで選択し、移動すると、ステップＳ４０２ではその操作を“対象の移動”として受け付ける。

対象の移動は、例えば開発者が、行形式コンテナ５０３をドラッグし、行形式コンテナ５０１と行形式コンテナ５０２の間に移動してドロップすることで実施される。

ステップＳ４０６においては、ステップＳ４０２で受け付けられた（開発者が選択した）対象の移動先を受け付ける。

ステップＳ４０７においては、対象の配置を調整する。例えば、先の例においては、行形式コンテナ５０３をドロップした時点で、該コンテナの座標が決定され、さらに行形式コンテナ５０２はその下方に座標がずらされる。

同様の処理を繰り返す（開発者のドラッグアンドドロップ繰り返し受け付ける）ことにより、コンテナまたはオブジェクト５１１と５１２を入れ替えることも可能である（図５の３１３ｆ、５２２の移動）。

以上の説明では、外側にあるコンテナを選択して、内側に他のコンテナ（あるいはオブジェクト）を最後の行、最右の位置に追加したが、上記の説明はあくまで一例である。

他の方法として、例えば、列形式コンテナ３１３ｄの行形式コンテナ５０１と行形式コンテナ５０２の間を選択し、行形式コンテナ作成ボタン３２２をクリックすると、行形式コンテナ５０１と５０２の間に、行形式コンテナ５０３が新規作成、挿入されるようにしてもよい。

以上でレイアウト定義作業とそのプログラム開発装置１０１におけるフローチャートについて説明したが、本例で示したコンテナ、あるいはオブジェクトを内部に複数の項目を表示できるという意味で、“表示グループ”と呼ぶ。また、コンテナを階層的に深く配置していくことも可能であってもよい。すなわち、コンテナの中にコンテナを繰り返しは位置していっても良い。そして、いずれの階層のコンテナにもテキストオブジェクトなどのオブジェクトを配置することが可能である。

図６は、図５で配置されたオブジェクトの位置などの情報を記憶するデータベースの構成の一例である。

図５では、一番基底におかれた列形式コンテナ３１３上に、更に幾つかのオブジェクトを配置することで画面レイアウトを作成した。例えば、この画面にＩＤを付与し、以下、“ＧＵＩ−１”とする。

図６で示されるレイアウト記憶部６００は、画面ＩＤ６０１、オブジェクト種別６０２、オブジェクトＩＤ６０３、配置先コンテナＩＤ６０４（表示グループ）、配置始点の座標Ｘ６０５、座標Ｙ６０６、そのオブジェクトのサイズ横６０７、サイズ縦６０８などのデータ項目から構成される。

画面ＩＤ６０１は、アプリケーションにおいて定義された画面を一意的に示すためのＩＤである。

オブジェクト種別６０２は、配置されたオブジェクトの種別を示す。図５および図６の例では、列形式コンテナ３１３、行形式コンテナ５０１〜５０３、テキストオブジェクト（５１１、５１２）である。

オブジェクトＩＤ６０３は、配置されたオブジェクト毎に一意的に付与される。ここでは、図５の説明で使用した番号をそのまま、オブジェクトＩＤとしている。

配置先コンテナＩＤ６０４（表示グループ）は、オブジェクトが他のコンテナに配置される場合には、そのコンテナのオブジェクトＩＤを指定する。例では、列形式コンテナ３１３は、ベースとなる（ルートとなる）コンテナであり、他のコンテナに配置するものではないので、配置先コンテナＩＤ６０４の定義がないが、それ以外のオブジェクトは、いずれかのコンテナのＩＤを記載している。すなわち、いずれかのコンテナに配置されていることになる。

配置始点の座標Ｘ６０５、座標Ｙ６０６は、オブジェクトが配置される（例えば左上の画面上ドット数でカウントした）位置を、Ｘ座標（横向き）、Ｙ座標（縦向き）で表す。本例では、コンテナに配置されたオブジェクトは、コンテナからの相対位置で記載されているが、全体の絶対位置であっても良い。

オブジェクトのサイズ横６０７、サイズ縦６０８は、オブジェクトのサイズを示す情報である。例えば画面上のドット数などで定義する。

なお、以上の説明はあくまで本発明のレイアウト定義を説明するための最低限のものであるため、６０１〜６０８のデータ項目のみを記載したが、これらのデータ項目に限定するものではない。例えば、各オブジェクトの詳細の属性を定義可能であっても良い。詳細の属性とは、背景色、枠色、枠の太さ、透過度、立体的な表示の場合の影や影の色、オブジェクト上に何らかの文字列がある場合はその文字列、などがレイアウト記憶部６００に格納されるよう、データ構成を定義しても良い。
＜画面レイアウトを効率的に行うための実施例＞

次に図７から図１０を用いて、開発者がアプリケーションのＧＵＩに描画セルを配置する処理を説明する。

図７は、開発者がセル配置オブジェクト上に描画セルを配置する画面の一例を示す図である。開発者は、画像データを等間隔に配列させるために、セル配置オブジェクトを使用する。セル配置オブジェクトは、前述したコンテナ（行形式コンテナ、列形式コンテナ）の上に配置する。

ここで、画像データとは、写真やイラストなど画像そのものであっても良いし、例えばアプリケーションにリンクされたアイコンであってもよい。いずれにしても、アプリケーションの利用者にとっては、画像の配列とみなされるものであればよい。

セル配置オブジェクト７００ａは、アプリケーションのＧＵＩにおいて、画像データを表示する領域を示すものであって、開発者が、プログラム開発装置１０１において、前述の通りコンテナの上に配置される。例では、セル配置オブジェクト７００ａを配置する際に、セル配置オブジェクト７００ａが表示されるサイズを、高さが５００、幅が８００（単位はドットなど）としている。このサイズを、便宜上、ページ（表示可能な１ページ）と呼ぶ。例えば、１回の横方向のスワイプ（スクロール）などの操作により、セル配置オブジェクトに整列表示されている画像データ（あるいは、画像データを格納する描画セル７０１）が、８００ドット分だけ、移動する。すなわち、ページめくりのような操作感を得られる。

開発者が、サイズを指定して描画セル７０１ａ（高さは２００、幅は３００）を配置し、描画セル７０１ａを１つだけ表示された状態は、セル配置オブジェクト７００ａとなる。

また、本実施形態では、ページのサイズに幾つの描画セル７０１が配置可能であるかを算出し、セル配置オブジェクト７００ｂの通り、算出された数の描画セル７０１を配置する。図７の例、セル配置オブジェクト７００ｂにおいては、幅は８００のページにおいて描画セル７０１（幅は３００）は、幅方向に２つ表示可能である。また、高さは５００のページにおいて描画セル７０１（高さは２００）は、高さ方向に２つ表示可能である。従って、描画セル７０１ａ〜７０１ｄの４つのセルが表示される状態となる。この状態では、ページ内の幅の右側に２００ドットの余白、高さの下側に１００ドットの余白がある。

この後、さらに描画セル７０１ａ〜７０１ｄの４つの配置を修正してもよい。１つの方法として、開発者が描画セル７０１ａの位置を、マウスでドラッグするなどしてセル配置オブジェクト７００の上から、また左からのマージンを決定する。更に隣接する描画セル７０１ｂ（幅方向）、描画セル７０１ｃ（高さ方向）との間隔を、やはりマウスで隣接する描画セル７０１をドラッグするなどにより指定しても良い。

上記の方法では、位置を修正した描画セル７０１の位置を修正するだけではなく、ページ内に表示される全ての描画セル７０１の位置を修正する。図７では７０１ａ〜７０１ｄの４つしか表示されていないが、例えば、幅ｎ個×高さｍ個の描画セル７０１があれば、セル配置オブジェクト７００の上、左に接している全ての描画セル７０１には同じマージンが設定され、また、隣接する描画セルの間隔も自動的に同一の間隔に調整される。また、それらのマージン、間隔を決定した結果として、表示可能な描画セル７０１の数が変更される場合もある。この配置定義は、間隔調整を同一にする部分は自動に行われるものの、開発者の手動による配置位置修正である。開発者は、（１）上側のマージン、下側のマージンを決定するか、（２）上側のマージンまたは下側のマージンのいずれかと上下に隣接する描画セル７０１の間隔を１つ決定するか、のみにより高さ方向の描画セル７０１の配置を決定でき、また幅方向においては、（３）左側のマージンと幅方向に隣接する描画セル７０１の間隔を１つ決定することにより、幅方向の描画セル７０１の配置を決定できる。

図７のセル配置オブジェクト７００ｃにおいては、算出された数の描画セル７０１同士の間隔は０とし、上下の余白をマージンとして上、下に均等に、また左右の余白をマージンとして左、右に均等に割り当てたものである。

また、上記の説明では、開発者の操作による配置と、自動的な配置とが混在した形であるとしたが、例えば７００ｃまで完全に自動的に配置が決定されても良い。その後、開発者の人で操作により修正できるようにしても良い。

さらに、最初に自動的に配置することをＧＵＩ上の配置実行ボタン（不図示）で開発者が行っても良い。その場合、現在、自動的に配置しようとするセル配置オブジェクト７００をマウスなどでフォーカスした上で、配置実行ボタンを押下することで、セル配置オブジェクト７００ａ、ｂからｄに配置修正がされるよう実装されていても良い。

図８は、セル配置オブジェクト上に配置された描画セルの位置を記憶するセル配置位置記憶部のデータベース構成の一例を示す図である。図７で説明したように、セル配置オブジェクト７００上のページへ上への描画セル７０１に配置した結果、セル配置位置記憶部８００にマージン位置８０１と対応する割当サイズ８０２を記憶させる。例えば、セル配置位置記憶部８００ａに対応する。すなわち、マージン位置８０１ａにおいて、セル間（縦）、セル間（横）がいずれも０となっている。

一方、セル配置オブジェクト７００ｄは、高さ余白を、上下マージンと上下の描画セル７０１同士の間隔に可能な限り均等に割り当て、また、幅余白を、左側のマージン、右側のマージンと左右の描画セル７０１同士の間隔に可能な限り均等に割り当てた状態である。図８のセルはセル配置位置記憶部８００ｂに対応する。

更に、セル配置位置記憶部８００ｃは、図７で説明したようにセル配置オブジェクト７００ｂ、ｃなどに対して、開発者が手動で修正を加えた結果の例である。左右上下のマージン、間隔を変更している。

また、図７で説明した（１）〜（３）の状況においては、セル配置位置記憶部８００の全てのデータ項目が独立した値ではなく、１つのデータ項目が決定すれば他のデータ項目も自動的に決定する場合もある。

なお、図８では、１つの描画セル７０１ａの配置位置、サイズ、マージン、間隔が決定すれば、他の描画セル７０１の配置も自動的に決まるため、１つの定義だけを記憶している。

しかしながら、後述するアプリケーションの動作（画面の表示処理）において、毎回、高さ方向に配置される描画セル７０１の数や配置位置、さらに幅方向でも例えば１ページ分の描画セル７０１の数や配置位置を記憶しても良い。また、横方向に関しては、実際には幾つの画像データを表示するのか、アプリケーションの開発時には決定できないが、後述する実行時の都合により、例えば３ページ分の描画セルの配置位置などを記憶しても良い。

さらに、不図示ではあるが、これらのマージン、間隔を決定する際に、最小でもマージン、間隔として間を空けたいドット数を、最小マージン記憶部（不図示）に記憶させても良い。これにより自動的にマージン、間隔を算出する際、手動により開発者が修正する際に、制限を加えても良い。

図９と図１０は、描画セルをセル配置オブジェクトに配置するフローチャートの一例である。図９、図１０で１つのフローチャートであり、各ステップは、開発者の操作指示を受け付けながら、プログラム開発装置１０１のＣＰＵ２０１において実行されても良いし、また、プログラム開発装置１０１のＣＰＵ２０１とプログラム開発サーバ１０２が必要に応じて、通信を行いながら各ステップを分担して実行しても良い。

ステップＳ９０１においては、プログラム開発装置１０１の開発ツールの開発中アプリケーションのレイアウト定義可能な状態において、ＧＵＩ作成の操作を受け付ける。具体的にはＧＵＩ上にセル配置オブジェクト７００と配置位置を受け付け、開発者の指定の位置に配置する。また、セル配置オブジェクト７００のサイズ（高さ、幅）も受け付け、そのサイズで配置する。

ステップＳ９０２においては、前述のセル配置オブジェクト７００上への描画セル７０１の配置を受け付ける。具体的には、開発者が選択した描画セル７０１とサイズ（高さ、幅）を受け付け、前述のセル配置オブジェクト７００上の指定位置に配置する。

ステップＳ９０３においては、セル配置オブジェクト７００の１画面（ページ）分の高さ、幅のサイズを取得する。

ステップＳ９０４においては、描画セル７０１の描画セル７０１の高さ、幅のサイズを取得する。

ステップＳ９０５においては、最小マージンを取得する。具体的には、最小マージン記憶部（不図示）から、最小でもマージン、間隔として間を空けたいドット数を、読み込む。最小マージンは必須のものではなく、そもそも最小マージン記憶部がない場合、あるいは最小マージンを使用しないように設定されている場合には、取得しなくとも良い（ステップＳ９０５がないか、判断により実行しなくとも良い）。なお、最小マージン記憶部がある際に、その値を使用するか否かは、指定可能であっても良い。例えば、最小マージン記憶部の中に、使用するか否かを指定するフラグを記載可能としても良い。あるいは、別の記憶部（不図示）に最小マージンを使用するか否かのフラグを記載するようにしても良い。

ステップＳ９０６においては、セル配置オブジェクト７００の１画面（ページ）に表示可能な描画セル７０１の枚数（高さ分×幅分）を算出する。具体的には、まず、最小マージンの指定がある場合には、最小マージン、間隔をセル配置オブジェクト７００から差し引いたサイズを算出する。具体的には、例えば高さについて説明すると、上下の最小マージン、上下の描画セル７０１同士の間隔をセル配置オブジェクト７００の高さから差し引いたサイズを、配置された描画セル７０１の高さのサイズで割った商（整数値）が、高さ方向の算出結果である。幅方向も同様に算出する。

ステップＳ９０７においては、前記算出された数の描画セル７０１を整列させ、上下マージン、描画セル同士の間隔があれば算入した上で、さらにセル配置オブジェクト７００の１画面（ページ）の余白を算出する。具体的には、描画セル７０１の算出した数を全て配列させ、そこに上下マージン、間隔を算入したサイズが、セル配置オブジェクト７００の１画面（ページ）と同じサイズであれば余白がない、セル配置オブジェクト７００の１画面（ページ）の方が大きければ余白があることになる。実際には、高さ方向と、幅方向で別々に算出される。次に図１０の（１）に進む。

ステップＳ１００１においては、図９のステップＳ９０７の算出結果として、余白があるか否かを判定する。具体的には、高さ、または幅の方向において余白が０であるか否かを判定し、０である場合（ＮＯの場合）には、ステップＳ１００３に進む。０でない場合（ＹＥＳの場合）には、ステップＳ１００２に進む。

ステップＳ１００２においては、余白を、上下マージンや、描画セル７０１の間隔に割り付けるための算出を行う。ただし、そもそも余白割当ポリシー記憶部（不図示）にどのように余白を割り当てるかが定義されていても良い。余白割当ポリシー記憶部においては、余白の割当は行わない、割り当てるとしてもその比率が定められており、その比率も余白割当ポリシー記憶部に記憶されている、などがあっても良い。

しかしながら、そもそもある程度自動的に割り当てた後で開発者が手動で操作して、描画セル７０１の配置を変更することを想定しているため、デフォルトで余白のマージン、間隔への割当をする（図７の７００ｂから７００ｃまたは７００ｄへの配置換え）ことで、開発者のレイアウト作業の効率化が可能とする効果が得られる。以下、デフォルトで余白が割り当てられるものとして説明する。

ステップＳ１００３においては、最小マージンの指定と算出された余白があれば、そのサイズも算入した上で、描画セル７０１の配置位置を算出する。

ステップＳ１００４においては、前記配置位置を決定された描画セル７０１に対して、開発者が位置の修正を行う操作を受け付ける。具体的には自動的に算出されたマージンや間隔の修正を受け付ける。

ステップＳ１００５においては、開発者から描画セル７０１の位置の修正を受け付けたか否かを判定する。修正を受け付けた場合（ＹＥＳの場合）には、ステップＳ１００６に進む。修正を受け付けない場合（ＮＯの場合）には、ステップＳ１００７に進む。

ステップＳ１００６においては、ステップＳ１００４において受け付けた開発者の操作に従って、描画セル７０１の位置、すなわちマージン、間隔を修正する。

ステップＳ１００７においては、最終的に決定した描画セルの配置を、セル配置位置記憶部８００に記憶する。

以上で、図９と図１０のフローチャートを用いて、セル配置オブジェクト７００と、描画セル７０１の配置を、開発者の簡単な操作指示を受け付けるだけで、自動に勧める処理の説明を完了する。

この処理によって、開発者が描画セルを整列させるための配置作業を効率的に行うことを可能にする効果を得ることができる。
＜アプリケーションクライアント１０３での処理の実施例＞

次に図１１から図１３を用いて、前記開発されたアプリケーションにおけるセル配置オブジェクトに、描画がされる処理を説明する。

図１１は、画像データをセル配置オブジェクトに配置された描画セルに表示する状態の一例を示す図である。前述の図７で配置した結果は、アプリケーションの動作時にはページを移動するスワイプ（スクロール）に対して次の２つの動作を実装することが可能である。

まず１つめは、上記の１つのページに配置した描画セル７０１（上記例では４つ）の配置をあくまでそのページ内の配置として、スワイプ（スクロール）による前後のページへの移動に際しては、前後のページの別の４つの描画セル７０１が同様の配置で表示される。すなわち全てのページに同一の配置が反映される。

次に２つめは、上記の１つのページに配置した描画セル７０１（上記例では４つ）のうち、幅方向については、少なくとも“間隔”、“右”（のマージン）の区別はなく、同一間隔に整列して現れる。この結果、例えば、最初のページにおいては、上記の例では４つの描画セル７０１は、ページの中心に表示されるが、マージン、間隔の割当サイズが狭い場合には、次のページの左側の描画セル７０１の一部が見えている場合もある。また２ページ目を表示している場合には、ページの中心に表示された４つの描画セル７０１の他に、前後のページの描画セルが表示されている場合があっても良い。本発明の説明においては、２つめの例において説明を進める。

アプリケーションの動作時に、アプリケーションクライアント１０３が、アプリケーションサーバ１０４から、多数の画像データをダウンロードする場合がある。前述のように、この画像データは、写真などの画像データそのものであっても良いし、他のアプリケーションにリンクするためのアイコンでよっても良い。いずれにしても描画セル７０１上に１つ１つの画像データが配置され、複数の描画セル７０１が、セル配置オブジェクト７００に整列配置される。

１１００ａは、ダウンロードされた数の画像データ分の描画セル７０１を配置できるように、幅方向に長いセル配置オブジェクト１１００ａを生成する。様々な実装方法がある。例えば、実際に幅方向に長いサイズのセル配置オブジェクト１１００ａを用意して、そこに描画セル７０１を整列配置させる方法がある。あるいは、実際には、例えば３ページ分（現在のページと、前後のページ）の画像データが配置できるだけのサイズのセル配置オブジェクトを生成し、必要に応じて、配置する描画セル７０１内を入れ替えていく、ということであっても良い。

画像データの数は、例えば画像データを一括でダウンロードしたり、画像データの数が全ての画像データをダウンロードしなくても分かったりするのであれば、その数を使用する。また、後述のフローチャートでは、画像データは一括でダウンロードするようにしているが、例えば画像データの表示（描画セル７０１への画像の格納）をするのと並行して、ダウンロード処理を行うようにしても良い。

また、セル配置オブジェクト１１００ｄに示すように、ダウンロードした画像データを全て（例では２０個）を描画セル７０１に格納し、いつでも表示できるようにしておく必要は、必ずしも無い。

これは、全ての画像データを描画セル７０１に格納するまでに時間がかかり、操作ができなくなることを防ぐためである。例えば、スワイプして次のページに移動しようとしたり、特定のアイコンを選択して、別のアプル医ケーションを起動しようとする際に、全ての画像が、描画セル７０１に格納されるのを待たないようにしたりすることが、以下のフローチャートで説明される。また、前述の通り必ずしも全ての画像データがダウンロードされている必要もない。

セル配置オブジェクト１１００ｂでは、最初のページ（初期表示ページ１１０１ｂ）の４つの描画セルおよび格納された画像データが表示されている。また、実際には、ページサイズと、幅方向の描画セル７０１の間隔の設定による配置を行うため、次のページの描画セル７０１（“ハートマーク”、“星のマーク”）の一部が表示されている。従って、次のページの画像データは描画セル７０１に格納し、いつでも表示可能な状態にしておく必要がある。

さらに、セル配置オブジェクト１１００ｂの初期表示ページから、ユーザがスワイプにより２ページ目に移動した際、仮に３ページ目の画像データが描画セル７０１に格納されていなければ、３ページ目の描画セル７０１への画像データの格納および描画セル７０１の配置などの処理を行ってから、スワイプ処理に応じることになる。そうでなければ、２ページ目の右に見えるはずの３ページ目の画像データの一部（セル配置オブジェクト１１００ｂでは、“三角”、“四角”の画像）が見えないまま、２ページ目が表示されることになる。すなわち、スワイプした瞬間に、次のページへの移動がスムーズに行われ、且つ、次のページの画像が確実に見えるためには、現在表示されているページの２ページ先までの画像データは、描画セル７０１に格納され、セル配置オブジェクト１１００ｂに配置されている必要がある。

さらに、スワイプ後、次のページが表示された場合（セル配置オブジェクト１１００ｃのスワイプ後の表示ページ１１０１ｃ）には、更に次のページ（本例では４ページ目）が、表示されるようにする。すなわち、少なくとも２ページ先までの描画セルは画像データを格納し、セル配置オブジェクト１１００に配置されていることで、スムーズなスワイプ処理（次のページの表示処理）が行われるという効果を得ることができる。
以上で、図１１の説明を完了する。

図１２は、画像データをセル配置オブジェクトに配置された描画セルに表示するフローチャートの一例である。図１２は、アプリケーションクライアントのユーザが、画像データのダウンロードを指示して最初のページを表示する処理の説明である。ステップＳ１２０１〜ステップＳ１２０８の各ステップは、アプリケーションクライアント１０３のＣＰＵ２０１において実行され、また、ステップＳ１２１１〜ステップＳ１２１５の各ステップは、アプリケーションサーバ１０４において実行される。

本フローチャートはあくまで一例であり、例えば、前述のように、画像データを３ページ分表示可能な状態にした後から、残りの画像データをダウンロードするようにしても良い。

ステップＳ１２０１においては、ユーザからアプリケーションの画面であって、セル配置オブジェクトを含むＧＵＩの要求が、アプリケーションサーバ１０４に送られる。

ステップＳ１２１１においては、アプリケーションクライアント１０３から受け付けたＧＵＩの要求に対して、画面を生成する。具体的には、コンテナの上にセル配置オブジェクト７００が配置された画面データが生成される。

ステップＳ１２１２においては、生成された画面データを、アプリケーションクライアント１０３に送信する。

ステップＳ１２０２においては、アプリケーションサーバ１０４から送信された画面データを受信する。

ステップＳ１２０３においては、受信した画面データをアプリケーションクライアント１０３に表示し、ユーザの操作を受け付ける。具体的には、ユーザにダウンロードしたい画像データを選択させる。また、そのダウンロード要求をアプリケーションサーバ１０４に要求する。

ステップＳ１２１３においては、画面に表示する画像データの取得要求を受け付ける。

ステップＳ１２１４においては、画面に表示するデータを、関連するデータベースなど（不図示）から取得する。

ステップＳ１２１５においては、前記取得した画像データを、アプリケーションクライアント１０３に送信する。

ステップＳ１２０４においては、アプリケーションサーバ１０４から送信された画像データを受信する。

ステップＳ１２０５においては、セル配置オブジェクト７００に描画セル７０１を配置するため、セル配置位置記憶部から配置情報を読み込む。

ステップＳ１２０６においては、ダウンロードした各々の画像データ分の描画セル７０１を生成して配置情報に従って、セル配置オブジェクト７００に配置する。

ステップＳ１２０７においては、セル配置オブジェクト７００に配置された３ページ分の描画セル７０１に、画像データを格納する。

ステップＳ１２０８において、アプリケーションクライアント１０３に１ページ目を表示する。

図１３は、画像データをセル配置オブジェクトに配置された描画セルに表示するフローチャートの一例である。図１３のフローチャートは、既にいずれかのページが表示されている状態で、スワイプにより次のページを表示する処理についての説明である。図１３のフローチャートの各ステップは、アプリケーションクライアント１０３のＣＰＵ２０１において実行される。

ステップＳ１３０１においては、ユーザによるページ切り替え操作を受け付ける。ここでは、具体的には、次のページを表示させるためのスワイプ操作を受け付けるものとする。

ステップＳ１３０２においては、セル配置オブジェクト７００に配置されている描画セル７０１のページが、最後のページにあるかどうかを確認するため、次のページがあるか否かを判定する。次のページがある場合（ＹＥＳの場合）には、１３０１〜１３０２の間の非同期処理を実行する。次のページがない場合（ＮＯの場合）には、スワイプ操作は意味がないため、図１３のフローチャートを完了する。

ステップＳ１３０３においては、次のページを表示する。ここで、ステップＳ１３０４とステップＳ１３０５は、非同期で並列に処理される。

ステップＳ１３０４においては、セル配置オブジェクト７００上の２ページに、描画セル７０１が配置されているか否かを確認する。２ページ先がない場合（ＮＯの場合）には、画像データが無いため、描画セルに画像データを読み込む必要がないため、何も行わない。２ページ先がある場合（ＹＥＳの場合）には、本処理の例では、描画セル７０１は、セル配置オブジェクト７００上に配置されているものの画像データを格納していないため、画像データの格納処理を行う。

図１２、図１３のフローチャートによる処理により、必要なタイミングで画像を描画セル７０１に格納することで、格納処理におけるユーザ操作性能の劣化を避けるという効果を得ることが可能となる。

さらに前述したとおり、ダウンロード自体も並行処理で行っても良い。ダウンロードも並行に行うことで、データが大量である場合には最初のページの表示が遅くなる、という問題を解決することが可能である。

以上で、図１２、図１３のフローチャートによるアプリケーションクライアント１０３でのスムーズなスワイプに関する説明を完了する。

以上、一実施形態について示したが、本発明は、例えば、システム、装置、方法、プログラムもしくは記録媒体等としての実施態様をとることが可能であり、具体的には、複数の機器から構成されるシステムに適用しても良いし、また、一つの機器からなる装置に適用しても良い。

また、本発明におけるプログラムは、本発明に示すフローチャートの処理方法をコンピュータが実行可能なプログラムであり、本発明の記憶媒体はコンピュータが実行可能なプログラムが記憶されている。なお、本発明におけるプログラムは各装置の処理方法ごとのプログラムであってもよい。

以上のように、前述した実施形態の機能を実現するプログラムを記録した記録媒体を、システムあるいは装置に供給し、そのシステムあるいは装置のコンピュータ（またはＣＰＵやＭＰＵ）が記録媒体に格納されたプログラムを読出し実行することによっても、本発明の目的が達成されることは言うまでもない。

この場合、記録媒体から読み出されたプログラム自体が本発明の新規な機能を実現することになり、そのプログラムを記憶した記録媒体は本発明を構成することになる。

プログラムを供給するための記録媒体としては、例えば、フレキシブルディスク、ハードディスク、光ディスク、光磁気ディスク、ＣＤ−ＲＯＭ、ＣＤ−Ｒ、ＤＶＤ−ＲＯＭ、磁気テープ、不揮発性のメモリカード、ＲＯＭ、ＥＥＰＲＯＭ、シリコンディスク、ソリッドステートドライブ等を用いることができる。

また、コンピュータが読み出したプログラムを実行することにより、前述した実施形態の機能が実現されるだけでなく、そのプログラムの指示に基づき、コンピュータ上で稼働しているＯＳ（オペレーティングシステム）等が実際の処理の一部または全部を行い、その処理によって前述した実施形態の機能が実現される場合も含まれることは言うまでもない。

さらに、記録媒体から読み出されたプログラムが、コンピュータに挿入された機能拡張ボードやコンピュータに接続された機能拡張ユニットに備わるメモリに書き込まれた後、そのプログラムコードの指示に基づき、その機能拡張ボードや機能拡張ユニットに備わるＣＰＵ等が実際の処理の一部または全部を行い、その処理によって前述した実施形態の機能が実現される場合も含まれることは言うまでもない。

また、本発明は、複数の機器から構成されるシステムに適用しても、１つの機器からなる装置に適用してもよい。また、本発明は、システムあるいは装置にプログラムを供給することによって達成される場合にも適応できることは言うまでもない。この場合、本発明を達成するためのプログラムを格納した記録媒体を該システムあるいは装置に読み出すことによって、そのシステムあるいは装置が、本発明の効果を享受することが可能となる。

上記プログラムの形態は、オブジェクトコード、インタプリタにより実行されるプログラムコード、ＯＳ（オペレーティングシステム）に供給されるスクリプトデータ等の形態から成ってもよい。

さらに、本発明を達成するためのプログラムをネットワーク上のサーバ、データベース等から通信プログラムによりダウンロードして読み出すことによって、そのシステムあるいは装置が、本発明の効果を享受することが可能となる。

なお、上述した各実施形態およびその変形例を組み合わせた構成も全て本発明に含まれるものである。

１０１ プログラム開発装置
１０２ プログラム開発サーバ
１０３ アプリケーションクライアント
１０４ アプリケーションサーバ
１０５ ネットワーク

Claims (4)

1. アプリケーションサーバとネットワークを介して接続可能な情報処理装置であって、
   アプリケーションに表示する画像データを格納する描画セルを、等間隔に配置するセル配置オブジェクトにおいて、１画面となるページにおける該描画セルの配置位置として少なくとも該描画セルの間隔をセル配置位置記憶手段に記憶させるセル配置登録手段と、
   前記描画セルを、前記セル配置位置記憶手段に記憶された配置情報に基づいて前記セル配置オブジェクトに配置する描画セル配置手段と、
   画像データをアプリケーションに表示可能とするため前記描画セルに格納させる画像データ格納手段と、
   前記描画セルを含む前記セル配置オブジェクトの１画面となるページを、前記情報処理装置の表示装置に表示させる表示制御手段と、
   前記表示制御手段により前記表示装置に表示されたページを、ユーザの操作により次のページに切り替えるページ操作手段と、
   を備え、
   前記表示制御手段は、
   前記ページに前記描画セルを配置した結果、該ページと該描画セルの余白のサイズが、該セル配置位置記憶手段に記憶された該描画セルの間隔よりも大きいことにより、他のページの該描画セルの一部を表示可能な場合には、該描画セルの一部を表示するものであって、
   前記画像データ格納手段は、
   少なくとも前記表示装置に表示されている描画セルと、前記ページ操作手段により次のページに切り替えられた際に表示される描画セルに対応する画像データを、予め前記描画セルに格納することを特徴とする情報処理装置。
2. 前記ページ操作手段により、前記表示装置に表示されたページを切り替える際に、該ページの切り替えの後のユーザの操作により、更に次のページに切り替えられる際に表示される描画セルに対応する画像データが格納されていない場合には、該ページを表示する前記表示制御手段と、更に次のページに切り替えた際に表示される該描画セルに対応する該画像データを格納する前記画像データ格納手段とは、非同期に処理されることを特徴とする請求項１に記載の情報処理装置。
3. アプリケーションサーバとネットワークを介して接続可能な情報処理装置の制御方法であって、
   セル配置登録手段が、アプリケーションに表示する画像データを格納する描画セルを、等間隔に配置するセル配置オブジェクトにおいて、１画面となるページにおける該描画セルの配置位置として少なくとも該描画セルの間隔をセル配置位置記憶手段に記憶させるセル配置登録ステップと、
   描画セル配置手段が、前記描画セルを、前記セル配置位置記憶手段に記憶された配置情報に基づいて前記セル配置オブジェクトに配置する描画セル配置ステップと、
   画像データ格納手段が、画像データをアプリケーションに表示可能とするため前記描画セルに格納させる画像データ格納ステップと、
   表示制御手段が、前記描画セルを含む前記セル配置オブジェクトの１画面となるページを、前記情報処理装置の表示装置に表示させる表示制御ステップと、
   ページ操作手段が、前記表示制御ステップにより前記表示装置に表示されたページを、ユーザの操作により次のページに切り替えるページ操作ステップと、
   を含み、
   前記表示制御ステップは、
   前記ページに前記描画セルを配置した結果、該ページと該描画セルの余白のサイズが、該セル配置位置記憶手段に記憶された該描画セルの間隔よりも大きいことにより、他のページの該描画セルの一部を表示可能な場合には、該描画セルの一部を表示するものであって、
   前記画像データ格納ステップは、
   少なくとも前記表示装置に表示されている描画セルと、前記ページ操作ステップにより次のページに切り替えられた際に表示される描画セルに対応する画像データを、予め前記描画セルに格納することを特徴とする情報処理装置の制御方法。
4. コンピュータを、アプリケーションサーバとネットワークを介して接続可能な情報処理装置として機能させるためのプログラムであって、
   アプリケーションに表示する画像データを格納する描画セルを、等間隔に配置するセル配置オブジェクトにおいて、１画面となるページにおける該描画セルの配置位置として少なくとも該描画セルの間隔をセル配置位置記憶手段に記憶させるセル配置登録手段、
   前記描画セルを、前記セル配置位置記憶手段に記憶された配置情報に基づいて前記セル配置オブジェクトに配置する描画セル配置手段、
   画像データをアプリケーションに表示可能とするため前記描画セルに格納させる画像データ格納手段、
   前記描画セルを含む前記セル配置オブジェクトの１画面となるページを、前記情報処理装置の表示装置に表示させる表示制御手段、
   前記表示制御手段により前記表示装置に表示されたページを、ユーザの操作により次のページに切り替えるページ操作手段として機能させ、
   前記表示制御手段は、
   前記ページに前記描画セルを配置した結果、該ページと該描画セルの余白のサイズが、該セル配置位置記憶手段に記憶された該描画セルの間隔よりも大きいことにより、他のページの該描画セルの一部を表示可能な場合には、該描画セルの一部を表示するものであって、
   前記画像データ格納手段は、
   少なくとも前記表示装置に表示されている描画セルと、前記ページ操作手段により次のページに切り替えられた際に表示される描画セルに対応する画像データを、予め前記描画セルに格納することを特徴とするプログラム。

Images