JP6670904B1 - Information processing apparatus, information processing method, and program - Google Patents

Information processing apparatus, information processing method, and program Download PDF

Info

Publication number
JP6670904B1
JP6670904B1 JP2018186762A JP2018186762A JP6670904B1 JP 6670904 B1 JP6670904 B1 JP 6670904B1 JP 2018186762 A JP2018186762 A JP 2018186762A JP 2018186762 A JP2018186762 A JP 2018186762A JP 6670904 B1 JP6670904 B1 JP 6670904B1
Authority
JP
Japan
Prior art keywords
window
displayed
area
display
content
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.)
Active
Application number
JP2018186762A
Other languages
Japanese (ja)
Other versions
JP2020057155A (en
Inventor
冠呈 郭
冠呈 郭
哲也 岩瀬
哲也 岩瀬
英迪 廖
英迪 廖
恵介 佐々木
恵介 佐々木
Original Assignee
楽天株式会社
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 楽天株式会社 filed Critical 楽天株式会社
Priority to JP2018186762A priority Critical patent/JP6670904B1/en
Application granted granted Critical
Publication of JP6670904B1 publication Critical patent/JP6670904B1/en
Publication of JP2020057155A publication Critical patent/JP2020057155A/en
Active legal-status Critical Current

Links

Images

Abstract

【課題】ウェブページ等の表示において、コンテンツウインドウに表示されるコンテンツ情報の視認性を損なうことのないようにポップアップウインドウを表示させる。【解決手段】ネットワークシステムの配信サーバ2は、制御部21とウェブページデータ生成部22を有する。ウェブページデータ生成部22は、第1処理、第2処理、第3処理を行いウェブページデータを生成する。第1処理は、第1ウインドウにコンテンツ表示画像を有するページ領域を表示する。第2処理は、ページ領域におけるコンテンツ表示画像の配置に応じて第2ウインドウの表示位置を選択する。第3処理は、第1ウインドウのページ領域上の表示位置に、第2ウインドウを表示する。制御部21は、生成したウェブページデータを端末装置に送信し、提示させる。【選択図】図1PROBLEM TO BE SOLVED: To display a pop-up window so as not to impair the visibility of content information displayed in a content window when displaying a web page or the like. A distribution server 2 of a network system includes a control unit 21 and a web page data generation unit 22. The web page data generation unit 22 performs the first process, the second process, and the third process to generate web page data. The first process displays a page area having a content display image in the first window. The second process selects the display position of the second window according to the arrangement of the content display image in the page area. The third process displays the second window at the display position on the page area of the first window. The control unit 21 transmits the generated web page data to the terminal device for presentation. [Selection diagram] Fig. 1

Description

本発明は情報処理装置、情報処理方法、及びプログラムであって、特にウェブページ等の表示制御についての技術分野に関する。   The present invention relates to an information processing apparatus, an information processing method, and a program, and particularly relates to a technical field of display control of a web page or the like.
或るコンテンツが表示されている第1のウインドウにおいて、当該コンテンツの詳細情報や関連情報などが含まれる第2のウインドウを、第1のウインドウ上にポップアップ表示させる表示方法が知られている(以下、第1のウインドウをコンテンツウインドウ、第2のウインドウをポップアップウインドウとも表記する。)。
引用文献1には、商品購入画面が表示されたコンテンツウインドウにおいて、商品の購入ボタン等の表示すべき項目が、ポップアップウインドウの下に隠れてしまった場合に、当該項目と同じ機能を有する代替項目を当該ポップアップウインドウに表示させるための表示制御方法について開示されている。
In a first window in which a certain content is displayed, a display method for pop-up displaying a second window including detailed information and related information of the content on the first window is known (hereinafter, referred to as a first window). , The first window is also referred to as a content window, and the second window is also referred to as a pop-up window.)
In the cited document 1, when an item to be displayed such as a product purchase button is hidden under a pop-up window in a content window in which a product purchase screen is displayed, an alternative item having the same function as the item is displayed. Is displayed in the pop-up window.
国際公開第2015/159360号WO 2015/159360
ポップアップウインドウは、コンテンツウインドウ上に表示されたコンテンツの詳細情報や関連情報を視覚的にわかりやすく確認できるためユーザにとって利便である。
しかしながら、コンテンツウインドウ上にポップアップウインドウが表示されることにより、購入ボタン等のサービスを実現するための機能を発揮させる領域のみならず、当該コンテンツ中の画像や説明文が隠れてしまい、本来、提供するサービスの主体となるコンテンツウインドウに表示されているコンテンツの情報をユーザに十分に伝えきれないということも生じうる。
そこで、本発明は、コンテンツウインドウに表示されるコンテンツ情報の視認性を損なうことのないようにポップアップウインドウを表示させることを目的とする。
The pop-up window is convenient for the user because detailed information and related information of the content displayed on the content window can be visually confirmed in an easily understandable manner.
However, since the pop-up window is displayed on the content window, not only the area where the function for realizing the service such as the purchase button is realized, but also the image and the description in the content are hidden, and the content is originally provided. In some cases, the information of the content displayed in the content window, which is the subject of the service to be provided, cannot be sufficiently transmitted to the user.
Therefore, an object of the present invention is to display a pop-up window so as not to impair the visibility of content information displayed in the content window.
本発明に係る情報処理装置は、第1ウインドウに、コンテンツ表示画像を有するページ領域を表示する第1処理と、前記ページ領域における前記コンテンツ表示画像の配置に応じて第2ウインドウの表示位置を選択する第2処理と、前記第1ウインドウに表示された前記ページ領域上の前記第2処理で選択された表示位置に、前記第2ウインドウを表示させる第3処理と、を端末装置に実行させるプログラムを含むウェブページデータを生成するウェブページデータ生成部と、前記生成したウェブページデータを前記端末装置に送信し、提示させる処理を行う制御部と、を備えるものである。
これにより、スクロール操作に応じて変化する第1ウインドウに表示されるコンテンツ画像において、第1ウインドウの各停止位置において、コンテンツ画像として表示されるコンテンツ表示領域の配置を加味した上で、第2ウインドウの表示位置を決定することができる。
ここで、ウインドウとは、ウェブブラウザ上でウェブページを提示する枠を含む枠内の領域のことをいう。
以下の実施の形態においては、第1ウインドウをコンテンツウインドウと表記し、第2ウインドウをポップアップウインドウと表記する。
ここで、コンテンツウインドウとは、端末装置のブラウザ上に表示されるコンテンツ画像を表示するウインドウをいう。ここで、コンテンツ画像では、当該システムを用いて提供するサービスにおいて取り扱われ得るコンテンツが表示される。
また、ポップアップウインドウとは、コンテンツウインドウに表示されるコンテンツ画像上にポップアップ表示されるウインドウのことを指す。
またポップアップ表示とは、文章や画像、リンク等により構成され、例えばコンテンツウインドウのコンテンツ画像内において用いられる機能や画像の情報を展開表示するものである。コンテンツウインドウに表示中のコンテンツ画像上の一部にポップアップウインドウを重ねて表示することで、当該機能や情報をコンテンツ画像上に表示する。
また、ポップアップウインドウにおいては、コンテンツウインドウに表示される内容(機能や情報)を代替的にポップアップ表示することも可能である。
また、以下においてはコンテンツ表示画像をコンテンツ表示領域とも表記する。
An information processing apparatus according to the present invention includes a first process for displaying a page area having a content display image in a first window, and selecting a display position of a second window in accordance with an arrangement of the content display image in the page area. Causing the terminal device to execute a second process to be performed and a third process to display the second window at a display position selected in the second process on the page area displayed in the first window. And a control unit that transmits the generated web page data to the terminal device and performs a process of presenting the web page data to the terminal device.
Thus, in the content image displayed in the first window that changes in response to the scroll operation, the position of the content display area displayed as the content image is added at each stop position of the first window, and then the second window is displayed. Can be determined.
Here, the window refers to an area in a frame including a frame for presenting a web page on a web browser.
In the following embodiments, the first window is referred to as a content window, and the second window is referred to as a pop-up window.
Here, the content window refers to a window that displays a content image displayed on the browser of the terminal device. Here, in the content image, a content that can be handled in a service provided using the system is displayed.
Further, the pop-up window refers to a window that is pop-up displayed on a content image displayed in the content window.
The pop-up display is composed of sentences, images, links, and the like, and expands and displays information on functions and images used in the content image of the content window, for example. The function or information is displayed on the content image by displaying a popup window overlapping a part of the content image being displayed on the content window.
In the pop-up window, the contents (functions and information) displayed in the content window can be alternatively displayed in a pop-up window.
In the following, a content display image is also referred to as a content display area.
上記した情報処理装置において、前記第2処理では、前記ページ領域におけるコンテンツ非表示領域のうちで前記第2ウインドウの表示位置を選択することが考えられる。
これにより、第1ウインドウに表示されるコンテンツ表示領域に重ならないように第2ウインドウが表示される。
In the above-described information processing apparatus, in the second processing, a display position of the second window may be selected from a content non-display area in the page area.
As a result, the second window is displayed so as not to overlap the content display area displayed in the first window.
上記した情報処理装置において、前記第2処理では、前記ページ領域における、前記第2ウインドウの表示によって提示情報の重畳が生ずる領域の解析に基づいて、前記第2ウインドウの表示位置を選択することが考えられる。
これにより、コンテンツ表示領域の配置関係を考慮した第2ウインドウの表示位置を選択することが可能となる。
In the above information processing apparatus, in the second processing, a display position of the second window may be selected based on an analysis of an area in the page area where presentation information is superimposed by the display of the second window. Conceivable.
This makes it possible to select the display position of the second window in consideration of the arrangement relationship of the content display area.
上記した情報処理装置において、前記第2処理では、前記ページ領域のスクロールの終了の際の表示範囲における前記コンテンツ非表示領域から、前記第2ウインドウの表示位置を選択することが考えられる。
これにより、スクロール操作終了後の第1ウインドウにおけるコンテンツ画像に基づいて、第1ウインドウに表示されるコンテンツ表示領域に重ならないような第2ウインドウの表示位置を特定することができる。
In the information processing apparatus described above, in the second processing, it is conceivable that a display position of the second window is selected from the content non-display area in a display range at the end of scrolling of the page area.
Thus, the display position of the second window that does not overlap the content display area displayed in the first window can be specified based on the content image in the first window after the scroll operation is completed.
上記した情報処理装置において、前記第2ウインドウが前記第1ウインドウ上に表示されている場合、前記ページ領域のスクロールが開始されたことに応じて、前記第2ウインドウを非表示とすることが考えられる。
これにより、コンテンツ画像がスクロール移動中は、第2ウインドウは第1ウインドウ上に表示されない。また、コンテンツ画像のスクロールが終了すると、第2ウインドウがコンテンツ表示領域に重ならないように表示される。
In the information processing apparatus described above, when the second window is displayed on the first window, the second window may be hidden in response to the start of scrolling of the page area. Can be
Thus, the second window is not displayed on the first window while the content image is scrolling. When the scroll of the content image is completed, the second window is displayed so as not to overlap the content display area.
上記した情報処理装置において、前記第2処理で選択した前記第2ウインドウの表示位置の領域の大きさに合わせて、前記第3処理で表示する前記第2ウインドウの大きさが可変とされることが考えられる。
これにより、第2ウインドウの表示位置の領域に収まるように第2ウインドウの大きさを調節することで、例えば第2ウインドウがコンテンツ表示領域に重ならない。
In the information processing apparatus described above, the size of the second window displayed in the third process may be variable according to the size of the display position area of the second window selected in the second process. Can be considered.
Thus, by adjusting the size of the second window so as to fit in the display position area of the second window, for example, the second window does not overlap the content display area.
上記した情報処理装置において、前記第2処理では、前記ページ領域を、スクロール進行方向に複数の配置列に区分し、前記複数の配置列のうちで、前記コンテンツ表示画像の面積割合が最も低い配置列に含まれる位置を前記第2ウインドウの表示位置として選択することが考えられる。
これにより、コンテンツ画像をスクロールする際に、第1ウインドウに表示される第2ウインドウのスクロール進行方法における位置が、表示されるコンテンツ画像に応じて変化することがなくなる。
In the information processing apparatus described above, in the second processing, the page area is divided into a plurality of arrangement columns in a scroll traveling direction, and among the plurality of arrangement columns, the arrangement area having the lowest area ratio of the content display image is set. It is conceivable to select a position included in the column as a display position of the second window.
Thus, when scrolling the content image, the position of the second window displayed in the first window in the scroll progress method does not change according to the displayed content image.
上記した情報処理装置において、前記第3処理では、前記ページ領域のスクロールの開始に応じて、前記第2ウインドウのスクロール追従表示を開始させることが考えられる。
これにより、スクロールに応じて変化する第1ウインドウに表示されたコンテンツ画像において、表示された第2ウインドウの移動位置が視覚的に確認しやすい。
In the above-described information processing apparatus, in the third process, it is conceivable that the scroll following display of the second window is started according to the start of scrolling of the page area.
Accordingly, in the content image displayed in the first window that changes in accordance with the scroll, the moving position of the displayed second window can be easily visually confirmed.
上記した情報処理装置において、前記第2ウインドウが前記コンテンツ表示画像に重なる場合、前記第2ウインドウの重なる前記コンテンツ表示画像が視認可能となるように前記第2ウインドウを半透明表示とすることが考えられる。
これにより、第2ウインドウがコンテンツ表示領域に重なる場合であっても、コンテンツ表示領域のコンテンツ内容の視認性を確保しつつ、第2ウインドウを表示することができる。
In the information processing apparatus described above, when the second window overlaps the content display image, the second window may be translucently displayed so that the content display image overlapping the second window can be visually recognized. Can be
Thus, even when the second window overlaps the content display area, the second window can be displayed while ensuring the visibility of the content content in the content display area.
上記した情報処理装置において、前記第1ウインドウ上のカーソルが前記第2ウインドウに接近した場合、前記第2ウインドウの半透明表示を解除することが考えられる。
これにより、カーソルで第2ウインドウをクリックしようとする際に、第2ウインドウがコンテンツ表示領域等に重なる状態で表示される。
In the information processing apparatus described above, when the cursor on the first window approaches the second window, it may be possible to cancel the translucent display of the second window.
Thus, when the user attempts to click the second window with the cursor, the second window is displayed so as to overlap the content display area or the like.
上記した情報処理装置において、前記第2処理では、前記第2ウインドウの表示位置とする前記コンテンツ非表示領域が存在しないときは、前記コンテンツ表示画像に表示されているコンテンツの視認性を損なわない位置を前記第2ウインドウの表示位置として選択することが考えられる。
これにより、第2ウインドウを表示できる大きさのコンテンツ非表示領域がないなどの場合であっても、例えば第1ウインドウに表示されるコンテンツ画像の背景の模様などの提供するコンテンツの視認性を損なわない部分に第2ウインドウを表示する。
In the above information processing apparatus, in the second processing, when the content non-display area serving as the display position of the second window does not exist, a position that does not impair the visibility of the content displayed in the content display image. May be selected as the display position of the second window.
Thus, even when there is no content non-display area large enough to display the second window, for example, the visibility of the provided content such as the background pattern of the content image displayed in the first window is impaired. The second window is displayed in the missing part.
上記した情報処理装置において、前記第1ウインドウに表示されている前記ページ領域に、前記第2ウインドウと代替可能な領域が含まれている期間は、前記第2ウインドウの表示を行わないことが考えられる。
即ち、例えば第2ウインドウがコンテンツ購入画面へのリンクを表示するものだった場合、第1ウインドウに表示されるコンテンツ画像内に、第2ウインドウと同じ機能を有する当該購入画面へのリンクが表示されているときは、第2ウインドウを表示しない。
In the information processing apparatus described above, it is considered that the display of the second window is not performed during a period in which the page area displayed in the first window includes an area that can be substituted for the second window. Can be
That is, for example, when the second window displays a link to the content purchase screen, a link to the purchase screen having the same function as the second window is displayed in the content image displayed in the first window. , The second window is not displayed.
本発明に係る情報処理方法は、第1ウインドウに、コンテンツ表示画像を有するページ領域を表示する第1処理と、前記ページ領域における前記コンテンツ表示画像の配置に応じて第2ウインドウの表示位置を選択する第2処理と、前記第1ウインドウに表示された前記ページ領域上の前記第2処理で選択された表示位置に、前記第2ウインドウを表示させる第3処理と、を端末装置に実行させるプログラムを含むウェブページデータを生成するウェブページデータ生成ステップと、
前記生成したウェブページデータを前記端末装置に送信し、提示させる処理を行う制御ステップと、を情報処理装置が実行する情報処理方法である。
An information processing method according to the present invention includes a first process of displaying a page area having a content display image in a first window, and a display position of a second window according to an arrangement of the content display image in the page area. Causing the terminal device to execute a second process to be performed and a third process to display the second window at a display position selected in the second process on the page area displayed in the first window. A web page data generating step of generating web page data including:
A control step of transmitting the generated web page data to the terminal device and performing a process of presenting the web page data to the terminal device;
本発明に係るプログラムは、上記情報処理方法の各処理を情報処理装置に実行させるプログラムである。本発明に係る記憶媒体は、上記プログラムを記憶した記憶媒体である。
これらのプログラムや記憶媒体により上記の情報処理装置を実現する。
A program according to the present invention is a program for causing an information processing device to execute each process of the information processing method. A storage medium according to the present invention is a storage medium storing the above program.
The above information processing apparatus is realized by these programs and storage media.
また本発明に係る情報処理方法は、第1ウインドウに、コンテンツ表示領域を有するページ画像を表示する第1処理と、前記ページ画像における前記コンテンツ表示領域の配置に応じて第2ウインドウの表示位置を選択する第2処理と、前記第1ウインドウに表示された前記ページ画像上の前記第2処理で選択された表示位置に、前記第2ウインドウを表示させる第3処理と、を端末装置としての情報処理装置が実行する情報処理方法である。   In the information processing method according to the present invention, a first process of displaying a page image having a content display area in a first window, and a display position of a second window in accordance with an arrangement of the content display area in the page image Information as a terminal device, wherein a second process to be selected and a third process to display the second window at the display position selected in the second process on the page image displayed in the first window This is an information processing method executed by the processing device.
本発明に係るプログラムは、上記情報処理方法の各処理を端末装置に実行させるプログラムである。本発明に係る記憶媒体は、上記プログラムを記憶した記憶媒体である。
これらのプログラムや記憶媒体により上記の端末装置としての情報処理装置を実現する。
A program according to the present invention is a program that causes a terminal device to execute each process of the information processing method. A storage medium according to the present invention is a storage medium storing the above program.
The information processing device as the above terminal device is realized by these programs and storage media.
本発明によれば、コンテンツウインドウの視認性を損なうことなくポップアップウインドウを表示制御することで、ユーザの利便性を向上させることができる。またこれにより、表示領域の有効活用を図ることができる。   ADVANTAGE OF THE INVENTION According to this invention, a user's convenience can be improved by controlling a display of a pop-up window, without impairing the visibility of a content window. Thus, the display area can be effectively used.
実施の形態のネットワークシステムの構成例の説明図である。FIG. 1 is an explanatory diagram of a configuration example of a network system according to an embodiment. 実施の形態のハードウェア構成の説明図である。FIG. 3 is an explanatory diagram of a hardware configuration according to an embodiment; 実施の形態のユーザ端末における提示画面の概要の説明図である。It is an explanatory view of the outline of the presentation screen in the user terminal of an embodiment. 実施の形態のシステム全体の処理の流れの説明図である。FIG. 3 is an explanatory diagram of a processing flow of the entire system according to the embodiment; 第1の実施の形態のユーザ端末における提示画面の概要の説明図である。It is an explanatory view of the outline of the presentation screen in the user terminal of a 1st embodiment. 第1の実施の形態のユーザ端末における提示画面の概要の説明図である。It is an explanatory view of the outline of the presentation screen in the user terminal of a 1st embodiment. 第1の実施の形態のユーザ端末の処理の流れのフローチャートである。5 is a flowchart of a process flow of the user terminal according to the first embodiment. 第1の実施の形態のユーザ端末における提示画面の概要の説明図である。It is an explanatory view of the outline of the presentation screen in the user terminal of a 1st embodiment. 第1の実施の形態のユーザ端末の処理の流れのフローチャートである。5 is a flowchart of a process flow of the user terminal according to the first embodiment. 第2の実施の形態のユーザ端末における提示画面の概要の説明図である。It is an explanatory view of the outline of the presentation screen in the user terminal of a 2nd embodiment. 第2の実施の形態のユーザ端末における提示画面の概要の説明図である。It is an explanatory view of the outline of the presentation screen in the user terminal of a 2nd embodiment. 第2の実施の形態のユーザ端末の処理の流れのフローチャートである。It is a flow chart of a flow of processing of a user terminal of a 2nd embodiment. 第2の実施の形態のユーザ端末の処理の流れのフローチャートである。It is a flow chart of a flow of processing of a user terminal of a 2nd embodiment. 第2の実施の形態のユーザ端末の処理の流れのフローチャートである。It is a flow chart of a flow of processing of a user terminal of a 2nd embodiment.
<1.全体構成>
以下の実施の形態では、コンテンツウインドウ内におけるポップアップウインドウの表示制御システム(以下、単に本システムとも表記する。)の全体構成について説明する。
図1に実施の形態の本システムの構成例を示す。この例では、本システムは、コンテンツ表示領域を有するコンテンツ画像が表示されているコンテンツウインドウ上でのポップアップウインドウの表示制御を実行するためのシステムとして機能する。
またユーザ端末はウェブブラウザを備え、配信サーバから受信したウェブページデータに基づいて、ユーザの操作に応じた様々な処理を実行する。
実施の形態では一例として、EC(EC:electronic commerce(電子商取引))システムを挙げ、コンテンツウインドウ上で表示される商品閲覧画像(コンテンツ画像)のスクロール操作等に応じたポップアップウインドウの表示態様の制御について説明する。
<1. Overall Configuration>
In the following embodiments, an overall configuration of a display control system for a pop-up window in a content window (hereinafter, simply referred to as the present system) will be described.
FIG. 1 shows a configuration example of the present system of the embodiment. In this example, the present system functions as a system for executing display control of a pop-up window on a content window displaying a content image having a content display area.
In addition, the user terminal includes a web browser, and executes various processes according to a user operation based on web page data received from the distribution server.
In the embodiment, as an example, an EC (EC: electronic commerce (electronic commerce)) system is cited, and a display mode of a pop-up window is controlled according to a scroll operation of a product browsing image (content image) displayed on the content window. Will be described.
図1における配信サーバ2が本発明請求項の情報処理装置に相当する。
図1に示すように、本実施の形態に係るネットワークシステムは、1又は複数のユーザ端末1、配信サーバ2がネットワークNWにより相互に通信可能な状態で接続されている。また、配信サーバ2はコンテンツデータベース3にアクセス可能とされている。
なお、以下ではデータベースをDB(Database)とも表記する。
The distribution server 2 in FIG. 1 corresponds to the information processing device according to the present invention.
As shown in FIG. 1, in the network system according to the present embodiment, one or a plurality of user terminals 1 and a distribution server 2 are connected in a state where they can communicate with each other via a network NW. The distribution server 2 can access the content database 3.
In the following, a database is also referred to as a DB (Database).
ネットワークNWの構成は多様な例が想定される。例えば、インターネット、イントラネット、エキストラネット、LAN(Local Area Network)、CATV(Community Antenna TeleVision)通信網、仮想専用網(VPN:Virtual Private Network)、電話回線網、移動体通信網、衛星通信網などが想定される。
またネットワークNWの全部又は一部を構成する伝送媒体についても多様な例が想定される。例えばIEEE(Institute of Electrical and Electronics Engineers)1394、USB(Universal Serial Bus)、電力線搬送、電話線などの有線でも、IrDA(Infrared Data Association)のような赤外線、Bluetooth(登録商標)、802.11無線、携帯電話網、衛星回線、地上波デジタル網などの無線でも使用可能である。
Various examples are assumed for the configuration of the network NW. For example, the Internet, an intranet, an extranet, a LAN (Local Area Network), a CATV (Community Antenna TeleVision) communication network, a virtual private network (VPN: Virtual Private Network), a telephone line network, a mobile communication network, a satellite communication network, and the like. is assumed.
Also, various examples of transmission media constituting all or a part of the network NW are assumed. For example, even in the case of a wire such as IEEE (Institute of Electrical and Electronics Engineers) 1394, USB (Universal Serial Bus), power line carrier, and telephone line, infrared rays such as IrDA (Infrared Data Association), Bluetooth (registered trademark), and 802.11 wireless. It can also be used by wireless such as a mobile phone network, a satellite line, and a terrestrial digital network.
配信サーバ2は、本システムを用いたサービスを提供する運営側の情報処理装置である。配信サーバ2は、例えば運営側の会社に据え置かれた通信機能を備えたコンピュータ装置などにより実現される。   The distribution server 2 is an information processing device on the operation side that provides a service using the present system. The distribution server 2 is realized by, for example, a computer device having a communication function set up in an operating company.
ユーザ端末1は、当該サービスを利用する、即ち広告を閲覧するユーザが使用する情報処理装置である。ユーザ端末1には例えば通信機能を備えたフィーチャーフォンやPDA、或いはスマートフォンやタブレット端末などのスマートデバイスなどを想定している。また、ユーザ端末1は、通信機能を備えたPC(Personal Computer)などによっても実現される。   The user terminal 1 is an information processing device used by a user who uses the service, that is, a user who browses an advertisement. The user terminal 1 is assumed to be, for example, a feature phone or a PDA having a communication function, or a smart device such as a smartphone or a tablet terminal. The user terminal 1 is also realized by a PC (Personal Computer) having a communication function.
コンテンツDB3は、配信サーバ2が処理を実行するために必要な情報が格納されたDBを包括的に示している。コンテンツDB3の詳細については後述する。   The content DB 3 comprehensively indicates a DB in which information necessary for the distribution server 2 to execute a process is stored. Details of the content DB 3 will be described later.
続いて、図1に示したユーザ端末1、配信サーバ2、コンテンツDB3を構成する情報処理装置のハードウェア構成を図2に示す。ユーザ端末1、配信サーバ2、コンテンツDB3として示した各装置は、情報処理及び情報通信が可能な図2に示すようなコンピュータ装置として実現できる。   Next, FIG. 2 illustrates a hardware configuration of the information processing apparatus that configures the user terminal 1, the distribution server 2, and the content DB 3 illustrated in FIG. Each device shown as the user terminal 1, the distribution server 2, and the content DB 3 can be realized as a computer device capable of information processing and information communication as shown in FIG.
図2において、コンピュータ装置のCPU(Central Processing Unit)101は、ROM(Read Only Memory)102に記憶されているプログラム、または記憶部108からRAM(Random Access Memory)103にロードされたプログラムに従って各種の処理を実行する。RAM103にはまた、CPU101が各種の処理を実行する上において必要なデータなども適宜記憶される。
CPU101、ROM102、及びRAM103は、バス104を介して相互に接続されている。このバス104には、入出力インターフェース105も接続されている。
入出力インターフェース105には、キーボード、マウス、タッチパネルなどよりなる入力部106、LCD(Liquid Crystal Display)、CRT(Cathode Ray Tube)、有機EL(Electroluminescence)パネルなどよりなるディスプレイ、並びにスピーカなどよりなる出力部107、HDD(Hard Disk Drive)やフラッシュメモリ装置などより構成される記憶部108、ネットワークNWを介しての通信処理や機器間通信を行う通信部109が接続されている。
入出力インターフェース105にはまた、必要に応じてメディアドライブ110が接続され、磁気ディスク、光ディスク、光磁気ディスク、或いは半導体メモリなどのリムーバブルメディア111が適宜装着され、リムーバブルメディア111に対する情報の書込や読出が行われる。
In FIG. 2, a CPU (Central Processing Unit) 101 of a computer device executes various types of programs according to a program stored in a ROM (Read Only Memory) 102 or a program loaded from a storage unit 108 into a RAM (Random Access Memory) 103. Execute the process. The RAM 103 also appropriately stores data necessary for the CPU 101 to execute various processes.
The CPU 101, the ROM 102, and the RAM 103 are mutually connected via a bus 104. An input / output interface 105 is also connected to the bus 104.
The input / output interface 105 includes an input unit 106 including a keyboard, a mouse, and a touch panel, a display including an LCD (Liquid Crystal Display), a CRT (Cathode Ray Tube), an organic EL (Electroluminescence) panel, and an output including a speaker. The storage unit 108 includes a unit 107, a hard disk drive (HDD), a flash memory device, and the like, and a communication unit 109 that performs communication processing and communication between devices via a network NW.
A media drive 110 is connected to the input / output interface 105 as necessary, and a removable medium 111 such as a magnetic disk, an optical disk, a magneto-optical disk, or a semiconductor memory is appropriately mounted. Reading is performed.
このようなコンピュータ装置では、通信部109による通信によりデータやプログラムのアップロード、ダウンロードが行われたり、リムーバブルメディア111を介してデータやプログラムを受け渡したりすることが可能である。
CPU101が各種のプログラムに基づいて処理動作を行うことで、ユーザ端末1、配信サーバ2、コンテンツDB3としての必要な情報処理や通信が実行される。
なお、ユーザ端末1、配信サーバ2、コンテンツDB3を構成する情報処理装置は、図2のようなコンピュータ装置が単一で構成されることに限らず、複数のコンピュータ装置がシステム化されて構成されてもよい。複数のコンピュータ装置は、LAN(Local Area Network)などによりシステム化されていてもよいし、インターネットなどを使用したVPN(Virtual Private Network)などにより遠隔地に通信可能な状態で配置されたものでもよい。
In such a computer device, data and programs can be uploaded and downloaded by communication through the communication unit 109, and data and programs can be transferred via the removable medium 111.
When the CPU 101 performs processing operations based on various programs, necessary information processing and communication as the user terminal 1, the distribution server 2, and the content DB 3 are executed.
It should be noted that the information processing apparatus constituting the user terminal 1, the distribution server 2, and the content DB 3 is not limited to a single computer apparatus as shown in FIG. You may. The plurality of computer devices may be systemized by a LAN (Local Area Network) or the like, or may be arranged in a communicable state at a remote location by a VPN (Virtual Private Network) using the Internet or the like. .
<2.ユーザ端末、配信サーバ及びDBの機能>
図1に戻り、ユーザ端末1、配信サーバ2、コンテンツDB3の機能について説明する。
ユーザ端末1、配信サーバ2は、1又は複数の情報処理装置で構成される。ユーザ端末1、配信サーバ2の各機能は、情報処理装置においてCPU101でプログラムに応じて実行される処理により実現される機能である。但し、以下説明する全部又は一部の各構成の処理をハードウェアにより実現してもよい。
また各機能をソフトウェアで実現する場合に、各機能がそれぞれ独立したプログラムで実現される必要はない。一つのプログラムにより複数の機能の処理が実行されてもよいし、一つの機能が複数のプログラムモジュールの連携で実現されてもよい。また各機能は複数の情報処理装置に分散されていてもよい。さらに機能の一つが複数の情報処理装置によって実現されてもよい。
<2. Functions of User Terminal, Distribution Server and DB>
Returning to FIG. 1, the functions of the user terminal 1, the distribution server 2, and the content DB 3 will be described.
The user terminal 1 and the distribution server 2 include one or a plurality of information processing devices. Each function of the user terminal 1 and the distribution server 2 is a function realized by processing executed by the CPU 101 in the information processing apparatus according to a program. However, the processing of all or some of the components described below may be realized by hardware.
When each function is realized by software, each function does not need to be realized by an independent program. Processing of a plurality of functions may be executed by one program, or one function may be realized by cooperation of a plurality of program modules. Each function may be distributed to a plurality of information processing devices. Further, one of the functions may be realized by a plurality of information processing devices.
配信サーバ2は、制御部21とウェブページデータ生成部22を有する。
制御部21は、本システムを用いたサービスを実現するための様々な処理を行う。例えば実施の形態において、制御部21によりHTTP(Hypertext Transfer Protocol)デーモンが起動される。一方、ユーザ端末1ではウェブブラウザが起動され、ユーザ端末1からはウェブブラウザを介して処理要求(HTTPリクエスト)が配信サーバ2に送信される。配信サーバ2の制御部21は、上記の処理要求に対応する処理結果(HTTPレスポンス)をユーザ端末1に送信する。これにより、ウェブページ記述言語で記載されたウェブページデータがユーザ端末1に送信される。
The distribution server 2 has a control unit 21 and a web page data generation unit 22.
The control unit 21 performs various processes for realizing a service using the present system. For example, in the embodiment, the control unit 21 starts an HTTP (Hypertext Transfer Protocol) daemon. On the other hand, a web browser is started in the user terminal 1, and a processing request (HTTP request) is transmitted from the user terminal 1 to the distribution server 2 via the web browser. The control unit 21 of the distribution server 2 transmits a processing result (HTTP response) corresponding to the processing request to the user terminal 1. Thereby, the web page data described in the web page description language is transmitted to the user terminal 1.
ウェブページ記述言語としては、例えばHTML(HyperText Markup Language)やXHTML(Extensible HyperText Markup Language)などが使用される。ウェブページ記述言語には、記事などのテキストデータや記事に添付された画像などの画像データと、それらの配置や提示態様(文字色、フォント、大きさ及び装飾など)が記述されている。また、このようなウェブページ記述言語には、送信先の端末に様々な処理を実行させるためのスクリプト言語がプラグインされていることもある。スプリクト言語としては、例えばJavaScript(登録商標)などが使用される。   As a web page description language, for example, HTML (HyperText Markup Language) or XHTML (Extensible HyperText Markup Language) is used. The web page description language describes text data such as articles, image data such as images attached to articles, and their arrangement and presentation mode (character color, font, size, decoration, etc.). Further, such a web page description language may be plugged in with a script language for causing a destination terminal to execute various processes. As a script language, for example, JavaScript (registered trademark) is used.
そして、制御部21は、このウェブページデータに基づいて、処理結果に基づくウェブページ(画面)をユーザ端末1のウェブブラウザ上に提示制御する。   Then, the control unit 21 controls presentation of a web page (screen) based on the processing result on the web browser of the user terminal 1 based on the web page data.
ページ生成部22は、ユーザ端末1に送信するためのウェブページを生成する。当該ウェブページは、ユーザ端末1のウェブブラウザに処理を実行させるためのスクリプト言語をプラグインしたものである。   The page generation unit 22 generates a web page to be transmitted to the user terminal 1. The web page is a plug-in of a script language for causing a web browser of the user terminal 1 to execute a process.
ユーザ端末1はウェブブラウザを備え、HTTPに則ったリクエスト信号(HTTPリクエスト)を配信サーバ2等のサーバに送信することで商品閲覧画面等のウェブページを要求する。そして、ユーザ端末1はそのHTTPリクエストに応じて配信サーバ2等のサーバから送られてきたウェブページを受信してウェブブラウザ上に表示する。これにより、ユーザは所望のウェブページを閲覧したり操作したりすることができる。   The user terminal 1 includes a web browser, and requests a web page such as a product browsing screen by transmitting a request signal (HTTP request) conforming to HTTP to a server such as the distribution server 2. Then, the user terminal 1 receives the web page sent from the server such as the distribution server 2 in response to the HTTP request, and displays the web page on the web browser. Thereby, the user can browse and operate a desired web page.
またユーザ端末1は、受信したウェブページにプラグインされたスクリプト言語に基づいて様々な処理を実行する。
具体的にユーザ端末1は、コンテンツウインドウに、コンテンツ表示領域を有するウェブページを表示する処理と、ウェブページにおけるコンテンツ表示領域の配置に応じてポップアップウインドウの表示位置を選択する処理と、コンテンツウインドウに表示されたウェブページ上の第2処理で選択された表示位置に、ポップアップウインドウを表示させる処理と、を行う。
The user terminal 1 executes various processes based on the script language plugged into the received web page.
Specifically, the user terminal 1 displays a web page having a content display area in a content window, selects a display position of a pop-up window according to the arrangement of the content display area in the web page, Performing a process of displaying a pop-up window at the display position selected in the second process on the displayed web page.
次に、上記機能を備えた配信サーバ2が、商品閲覧画像等のウェブページデータの生成を行うために用いるコンテンツDB3について説明する。
コンテンツDB3には、ECシステムを構成する様々なウェブページデータが記憶されている。記憶されるウェブページデータとしては、例えばログイン画面や商品閲覧画面、商品購入画面等が挙げられる。これらのウェブページデータは、例えば、HTML(Hyper Text Markup Language)やXHTML(Extensible Hyper Text Markup Language)などの構造化文書ファイルである。
配信サーバ2は、コンテンツDB3から取得した画像やテキストをユーザ端末1のウェブブラウザ上で提示させる。
なお、もちろんこれ以外にもインターネットの配信サーバ2として機能するために必要なDBが構成されていてもよい。
Next, the content DB 3 used by the distribution server 2 having the above function to generate web page data such as a product browsing image will be described.
The content DB 3 stores various web page data constituting the EC system. The stored web page data includes, for example, a login screen, a product browsing screen, and a product purchase screen. These web page data are, for example, structured document files such as HTML (Hyper Text Markup Language) and XHTML (Extensible Hyper Text Markup Language).
The distribution server 2 causes the image or text acquired from the content DB 3 to be presented on the web browser of the user terminal 1.
In addition, a DB required for functioning as the distribution server 2 of the Internet may be configured in addition to the above.
以上のDB3等の各DBは、配信サーバ2とは別のサーバコンピュータ内に構築されていてもよいし、配信サーバ2内に構築されていてもよい。
また各DBは、配信サーバ2がアクセス可能とされていればどのような形態で実現されていてもよい。例えば配信サーバ2と同一システム内の記憶部に各DBのすべてが形成されていてもよいし、各DBの一部又は全部が別体、遠隔地などのコンピュータシステムに設けられていてもよい。もちろん各DBが一つの装置(例えば一つのHDDなど)内に形成されている必要はない。また各DBのそれぞれが、それぞれ1つのDBとして構成される必要もない。実施の形態で説明する上記DBは、実施の形態の処理に関連する情報の記憶部を、それぞれ一つのDBの形態で例示したものに過ぎない。
Each DB such as the DB 3 described above may be constructed in a server computer different from the distribution server 2 or may be constructed in the distribution server 2.
Each DB may be realized in any form as long as the distribution server 2 is accessible. For example, all of the DBs may be formed in a storage unit in the same system as the distribution server 2, or some or all of the DBs may be provided in a separate or remote computer system. Of course, each DB need not be formed in one device (for example, one HDD). Further, each of the DBs does not need to be configured as one DB. The DB described in the embodiment is merely an example of the storage unit of information related to the processing of the embodiment in the form of one DB.
<3.ユーザ端末における提示画面の概要>
実施の形態のユーザがECシステムを利用する場合における、ユーザ端末1に提示される画面の一例について図3を用いて説明する。
<3. Overview of presentation screen on user terminal>
An example of a screen presented on the user terminal 1 when the user of the embodiment uses the EC system will be described with reference to FIG.
図3は、ECシステムにおける購入可能な商品を紹介する商品閲覧画面に表示されるウェブページデータWPの一部を示している。実施の形態ではユーザ端末1の一例として、ユーザの自宅に据え置かれたコンピュータ装置や携帯可能なタブレット端末などを想定している。
ウェブページデータWPに基づいて、コンテンツウインドウWDに商品閲覧画面が表示される。
FIG. 3 shows a part of the web page data WP displayed on the product browsing screen that introduces a purchaseable product in the EC system. In the embodiment, as an example of the user terminal 1, a computer device or a portable tablet terminal installed at the user's home is assumed.
A product browsing screen is displayed in the content window WD based on the web page data WP.
コンテンツウインドウWD(以下、ウインドウWDとも表記する。)は、ユーザ端末1が配信サーバ2から受信したウェブページデータに基づいて、ユーザ端末1のウェブブラウザにより表示される商品閲覧画面の範囲を示している。
図3の太枠で囲まれたウインドウWDの領域は、実際にユーザ端末1に表示される商品閲覧画面を示している。図3では一例として、ウインドウWDに商品閲覧画面のファーストビュー画像が表示されている。
The content window WD (hereinafter also referred to as a window WD) indicates a range of a product browsing screen displayed by the web browser of the user terminal 1 based on web page data received by the user terminal 1 from the distribution server 2. I have.
An area of the window WD surrounded by a thick frame in FIG. 3 indicates a product browsing screen actually displayed on the user terminal 1. In FIG. 3, as an example, the first view image of the product browsing screen is displayed in the window WD.
また、ウインドウWDの商品閲覧画面上には、ポップアップウインドウPUがポップアップ表示されている。
ポップアップウインドウPUには、商品閲覧画面に表示された商品に関する補助的情報や、購入画面等の他の画面に移動するためのリンク、ECシステム上の機能を発揮させるための操作領域などが表示される。
図3では一例として、表示されている商品の関連情報として名称(メンズシューズ)や価格(税込3,900円)、購入手続き画面に移動するためのリンク(ご購入手続きへ)、表示されている商品を購入リストに追加する機能を発揮する操作領域(商品かごに追加)、がポップアップウインドウPUに設けられている。
またポップアップ表示とは、ユーザ端末1のウェブブラウザのウインドウWD上で自動的にポップアップウインドウPUを表示させることをいう。ポップアップ表示は様々な態様で表示され、例えば、画面外から画面内に徐々に移動しながらポップアップウインドウPUを表示させたり、何もない領域から突然ポップアップウインドウPUを表示させたりすることができる。
A pop-up window PU is pop-up displayed on the product browsing screen of the window WD.
In the pop-up window PU, auxiliary information about the product displayed on the product browsing screen, a link for moving to another screen such as a purchase screen, an operation area for displaying a function on the EC system, and the like are displayed. You.
In FIG. 3, as an example, a name (men's shoes), a price (3,900 yen including tax), a link for moving to a purchase procedure screen (to the purchase procedure), and related information of the displayed product are displayed. An operation area (addition to a product basket) for performing a function of adding a product to a purchase list is provided in the pop-up window PU.
The pop-up display means that the pop-up window PU is automatically displayed on the window WD of the web browser of the user terminal 1. The pop-up display is displayed in various modes. For example, the pop-up window PU can be displayed while gradually moving from the outside of the screen to the inside of the screen, or the pop-up window PU can be suddenly displayed from an empty area.
ウェブページデータWPは、コンテンツ表示領域(CT1〜CT7)、優先表示領域PR、ブランク領域BKなどが配置されている。   The web page data WP includes a content display area (CT1 to CT7), a priority display area PR, a blank area BK, and the like.
コンテンツ表示領域CT(CT1〜CT7)は、ECシステムで提供する商品の情報が表示される領域をいう。ユーザは、商品閲覧画面においてコンテンツ表示領域を閲覧することで、ECシステムにおいて商品の購入を考える際に、商品に関する様々な情報を取得することができる。コンテンツ表示領域は、商品に関する画像を主に表示する画像コンテンツ領域(CT1〜CT4)と、商品に関する説明文を主に表示する文字コンテンツ領域(CT5〜CT7)とを有している。   The content display area CT (CT1 to CT7) is an area in which information on products provided by the EC system is displayed. By browsing the content display area on the product browsing screen, the user can obtain various information on the product when considering purchasing the product in the EC system. The content display area has an image content area (CT1 to CT4) that mainly displays an image related to a product, and a character content area (CT5 to CT7) that mainly displays a description about the product.
優先表示領域PRは、ポップアップウインドウPUに表示されるものと同様の(代替可能な)情報が表示されている領域又は同様の(代替可能な)機能を発揮することができる領域などをいう。優先表示領域PRは、ポップアップウインドウPUと同じ内容を表示することになる場合は、ポップアップウインドウPUよりも優先的に表示すべき領域となる。
例えば図3では、ポップアップウインドウPUに表示される特定の画面に移動するためのリンク(ご購入手続きへ)、購入リスト追加等の機能を発揮するための操作領域(商品かごに追加)について、ウェブページデータWPに対応する領域があるため、当該領域を優先表示領域PRとして示している。
なお、本実施の形態では、優先表示領域PRとして、特定の画面に移動するためのリンクや、購入リスト追加等の機能を発揮するための操作領域について説明したが、優先表示領域PRは、文字、画像といった情報を表示するものであってもよい。例えば「商品10パーセントオフセール開催中」といった情報をポップアップウインドウPUに表示することとしてもよい。
The priority display area PR is an area in which the same (substitutable) information as that displayed in the pop-up window PU is displayed, or an area in which a similar (substitutable) function can be exhibited. When the same content as the pop-up window PU is to be displayed, the priority display area PR is an area to be displayed with priority over the pop-up window PU.
For example, in FIG. 3, a link (to purchase procedure) for moving to a specific screen displayed in the pop-up window PU, and an operation area (add to product basket) for displaying a function of adding a purchase list, etc. Since there is an area corresponding to the page data WP, this area is shown as the priority display area PR.
Note that, in the present embodiment, a link for moving to a specific screen and an operation area for exhibiting functions such as adding a purchase list have been described as the priority display area PR. , An image or the like may be displayed. For example, information such as “product 10% off sale is being held” may be displayed in the pop-up window PU.
ブランク領域BKは、コンテンツ表示領域CTや優先表示領域PR等が設けられていない領域をいう。つまり、ブランク領域BKは、例えばウェブページデータWP上に商品のコンテンツ情報や操作領域を配置した後に残る余剰領域である。
ブランク領域BKは、主に商品閲覧画面において何も表示されていない空白領域のことを指すが、ブランク領域BKは当該空白領域に限られることはなく、例えば商品閲覧画面を装飾するための背景画面領域などであってもよい。即ち、ブランク領域BKは、具体的な商品(コンテンツ)の情報が表示されていない領域のことをいう。
The blank area BK is an area in which the content display area CT, the priority display area PR, and the like are not provided. That is, the blank area BK is a surplus area that remains after, for example, arranging the content information and the operation area of the product on the web page data WP.
The blank area BK mainly refers to a blank area in which nothing is displayed on the product browsing screen. However, the blank area BK is not limited to the blank area, and is, for example, a background screen for decorating the product browsing screen. It may be an area or the like. That is, the blank area BK refers to an area in which specific product (content) information is not displayed.
上記領域を含むように構成されたウェブページデータWPの一部を、ユーザ端末1のウェブブラウザ上のウインドウWDに商品閲覧画面として表示することで、ユーザは商品及びその商品に関する情報を閲覧することができる。
このように商品閲覧画面が提示されている状態において、商品の関連情報や購入画面へのリンクを表示するポップアップウインドウPUが、適宜ウインドウWD上にポップアップ表示されることになる。
これにより、ユーザは、現在ウインドウWDに表示されていない当該関連情報やリンクをウェブページデータWP上で探すことなしに、閲覧、選択することが可能となる。
By displaying a part of the web page data WP configured to include the area as a product browsing screen in a window WD on a web browser of the user terminal 1, the user can browse the product and information about the product. Can be.
In the state where the product browsing screen is presented in this manner, a pop-up window PU that displays information related to the product and a link to the purchase screen is appropriately pop-up displayed on the window WD.
Thus, the user can browse and select the related information or link that is not currently displayed in the window WD without searching the web page data WP.
このように、ユーザの利便性を向上させるポップアップウインドウPUであるが、商品閲覧画面上での表示の態様によっては、却って、ユーザに対して商品情報を十分に伝えきれないおそれもある。
例えば図3に示すように、商品閲覧画面上にポップアップウインドウPUを表示する際に、ポップアップウインドウPUが画像コンテンツ領域CT1,CT2や文字コンテンツ領域CT5に重なってしまうことがある。このような場合、画像コンテンツ領域に表示された商品の画像や文字コンテンツ領域に表記された文章の一部がポップアップウインドウPUにより隠されてしまい、ユーザが商品に関する情報を十分に閲覧できないことがある。特に文字コンテンツ領域に表示される文章の場合は、一部が隠されてしまうだけで文章全体の内容の把握が難しくなってしまうことも多々見受けられる。
As described above, although the pop-up window PU improves the convenience of the user, depending on the display mode on the product browsing screen, there is a possibility that the product information may not be sufficiently transmitted to the user.
For example, as shown in FIG. 3, when the pop-up window PU is displayed on the product browsing screen, the pop-up window PU may overlap the image content areas CT1, CT2 and the character content area CT5. In such a case, the image of the product displayed in the image content area or a part of the text written in the text content area may be hidden by the pop-up window PU, and the user may not be able to sufficiently view the information on the product. . In particular, in the case of a sentence displayed in the character content area, it is often found that it is difficult to grasp the contents of the entire sentence because only a part is hidden.
そこで本発明では、ウインドウWDの商品閲覧画面上に表示されるポップアップウインドウPUの表示態様を状況に応じて変化させることで、コンテンツ表示領域の視認性を損なわずにポップアップウインドウPUを表示させることとした。
これにより、ユーザはコンテンツ表示領域CTにおける商品情報等を閲覧した上で、ウェブページ上を探すことなしに、商品の関連情報を取得したり、購入画面へのリンクを選択操作したりすることが可能となる。即ち、本発明によりユーザの利便性の向上が図られる。
Therefore, in the present invention, by changing the display mode of the pop-up window PU displayed on the product browsing screen of the window WD according to the situation, the pop-up window PU is displayed without impairing the visibility of the content display area. did.
This allows the user to browse the product information and the like in the content display area CT, acquire the relevant information of the product, and select a link to the purchase screen without searching for the web page. It becomes possible. That is, the convenience of the user is improved by the present invention.
<4.表示制御システムの処理の概要>
次に、図4によりECシステムの商品閲覧画面等に用いられる表示制御システムの概要について説明する。図4では、ユーザ端末1、配信サーバ2が実行する処理の流れの一例を示している。
<4. Overview of Display Control System Processing>
Next, an outline of a display control system used for a product browsing screen or the like of the EC system will be described with reference to FIG. FIG. 4 shows an example of the flow of processing executed by the user terminal 1 and the distribution server 2.
まず、ステップS11において、ユーザの操作に応じてユーザ端末1が商品閲覧画面のウェブページデータの要求を行う。
配信サーバ2は当該要求を受信すると、ステップS12において、ウェブページデータの生成を実行する。このとき配信サーバ2は、後述する商品画面閲覧処理をユーザ端末1に実行させるためのスクリプト言語をプラグインしたウェブページデータを生成する。
そして配信サーバ2は、ステップS13において、生成したウェブページデータをユーザ端末1に送信する。
ユーザ端末1は配信サーバ2からウェブページデータを受信すると、ステップS14において、当該ウェブページデータに基づいて商品画面閲覧処理を実行する。ユーザ端末1のウェブブラウザ上で商品画面閲覧処理を実行することで、図3に示すようなウインドウWDにおけるポップアップウインドウPUの表示制御が実現される。
商品画面閲覧処理の詳細については後述する。
First, in step S11, the user terminal 1 requests web page data of a product browsing screen in response to a user operation.
Upon receiving the request, the distribution server 2 generates web page data in step S12. At this time, the distribution server 2 generates web page data into which a script language for causing the user terminal 1 to execute a product screen browsing process described later is plugged in.
Then, the distribution server 2 transmits the generated web page data to the user terminal 1 in step S13.
Upon receiving the web page data from the distribution server 2, the user terminal 1 executes a product screen browsing process based on the web page data in step S14. By executing the product screen browsing process on the web browser of the user terminal 1, the display control of the pop-up window PU in the window WD as shown in FIG. 3 is realized.
The details of the product screen browsing process will be described later.
<5.第1の実施の形態における提示画面の概要>
第1の実施の形態における、ユーザ端末1での商品閲覧画面上のポップアップウインドウPUの表示制御の概要について、図5及び図6を用いて説明する。
<5. Overview of Presentation Screen in First Embodiment>
The outline of the display control of the pop-up window PU on the product browsing screen in the user terminal 1 according to the first embodiment will be described with reference to FIGS. 5 and 6.
まず、図5に示すように、ユーザ端末1のウェブブラウザ上で商品閲覧画面に移動すると、ウインドウWDに商品閲覧画面のファーストビュー画像が表示される。
本実施の形態では、ウインドウWDにファーストビュー画像が表示されている段階においては、ポップアップウインドウPUは表示されない。つまり、商品閲覧画面に移動した当初は、ウインドウWDの商品閲覧画面上にポップアップウインドウPUは表示されていない。
First, as shown in FIG. 5, when the user moves to the product browsing screen on the web browser of the user terminal 1, the first view image of the product browsing screen is displayed on the window WD.
In the present embodiment, the pop-up window PU is not displayed when the first view image is displayed in the window WD. That is, at the beginning of moving to the product browsing screen, the pop-up window PU is not displayed on the product browsing screen of the window WD.
その後、ユーザはさらなる商品情報を閲覧するにあたり、商品閲覧画面のスクロール操作を行う。
すると、図6に示すように、ユーザのスクロール操作に伴い、ウインドウWDにおける商品閲覧画面がスクロールする。そして、ユーザのスクロール操作の終了に伴い、商品閲覧画面にスクロール後の画像が表示される。
Thereafter, the user performs a scroll operation on the product browsing screen when browsing further product information.
Then, as shown in FIG. 6, the product browsing screen in the window WD scrolls in accordance with the scroll operation of the user. Then, as the user finishes the scroll operation, the scrolled image is displayed on the product browsing screen.
そして商品閲覧画面の画像のスクロールが停止した後、図6に示すようにポップアップウインドウPUがブランク領域BKにポップアップ表示される。即ち、ユーザ端末1はスクロールの終了によりウインドウWDへの表示領域が決定した後に、当該決定した表示領域から検出したブランク領域BKに重なるようにポップアップウインドウPUをポップアップ表示する。   Then, after the scrolling of the image on the product browsing screen is stopped, a pop-up window PU is pop-up displayed in the blank area BK as shown in FIG. That is, the user terminal 1 displays the pop-up window PU in a pop-up manner so as to overlap the blank area BK detected from the determined display area after the display area for the window WD is determined by the end of the scroll.
本実施の形態では、ブランク領域BKに重なるようにポップアップウインドウPUをポップアップ表示することで、コンテンツ表示領域にポップアップウインドウPUが重なることを防止し、コンテンツ表示領域の視認性を確保することができる。また、情報量の少ないブランク領域BKを有効活用することができる。   In the present embodiment, the pop-up window PU is displayed in a pop-up manner so as to overlap the blank area BK, thereby preventing the pop-up window PU from overlapping the content display area and ensuring the visibility of the content display area. Further, the blank area BK having a small amount of information can be effectively used.
<6.第1の実施の形態における商品画面閲覧処理>
第1の実施の形態における表示制御システムの動作を実現するためにユーザ端末1がウェブブラウザ上で実行する商品画面閲覧処理(図4のS14)について、図7乃至図9を用いて説明する。ユーザ端末1は、配信サーバ2から受信したウェブページデータにプラグインされたプログラムに基づいて商品画面閲覧処理を実行する。
以下、一度説明した処理と同様の処理については同一符号を付し、説明を省略するものとする。
<6. Product Screen Browsing Process in First Embodiment>
The product screen browsing process (S14 in FIG. 4) executed by the user terminal 1 on the web browser to realize the operation of the display control system according to the first embodiment will be described with reference to FIGS. The user terminal 1 executes a product screen browsing process based on a program plugged into the web page data received from the distribution server 2.
Hereinafter, the same processes as those described once are denoted by the same reference numerals, and description thereof will be omitted.
まずユーザ端末1は、ステップS101において、配信サーバ2から受信したウェブページデータに基づいて、ウインドウWDの商品閲覧画面を表示させる処理を実行する。これにより、例えば図5に示すように、ウインドウWDの商品閲覧画面にファーストビュー画像が表示されることとなる。このときファーストビュー画像には、ポップアップウインドウPUが表示されていない状態である。   First, in step S101, the user terminal 1 executes a process of displaying a product browsing screen of the window WD based on the web page data received from the distribution server 2. As a result, for example, as shown in FIG. 5, the first view image is displayed on the product browsing screen of the window WD. At this time, the pop-up window PU is not displayed in the first view image.
商品閲覧画面が表示された状態において、ユーザ端末1は、ステップS102でユーザのスクロール操作が開始されたことを検知するまで待機する。
ユーザのスクロール操作の開始を検知すると、ユーザ端末1はステップS103に処理を進め、ポップアップウインドウPUが表示されているか否かを判定する。
ここで、ウインドウWDにファーストビュー画像が表示される状態においては、ポップアップウインドウPUは表示されていないため、ユーザ端末1はステップS104の処理を行うことなくステップS105に処理を進める。
当該スクロール操作に応じて、ウインドウWDに表示される画像が移動することになる。実施の形態では、ウインドウWDにおける商品閲覧画面のスクロール方向は、例えば図5に示す上下方向とされている。ただし、当該スクロール方向は上下方向に限られず、左右方向、斜め方向等、様々な方向にスクロールすることとしてもよい。
In a state where the product browsing screen is displayed, the user terminal 1 waits until it detects that the user has started the scroll operation in step S102.
Upon detecting the start of the user's scroll operation, the user terminal 1 proceeds to step S103 and determines whether or not the pop-up window PU is displayed.
Here, in a state where the first view image is displayed in the window WD, the pop-up window PU is not displayed, and therefore the user terminal 1 proceeds to step S105 without performing step S104.
The image displayed in the window WD moves according to the scroll operation. In the embodiment, the scroll direction of the product browsing screen in the window WD is, for example, the vertical direction shown in FIG. However, the scroll direction is not limited to the up-down direction, and scrolling may be performed in various directions such as a left-right direction and an oblique direction.
ユーザ端末1は、ステップS105において、ステップS102で開始されたユーザのスクロール操作の終了を検知するまで待機する。
ステップS105で当該スクロール操作の終了を検知すると、ユーザ端末1は、ウインドウWDにスクロール後の商品閲覧画像を表示する。例えばスクロール操作により、ウインドウWDに表示される画像が、図5のファーストビュー画像から図6に示す画像まで移動して表示される。
In step S105, the user terminal 1 waits until detecting the end of the user's scroll operation started in step S102.
Upon detecting the end of the scroll operation in step S105, the user terminal 1 displays the scrolled product browsing image in the window WD. For example, by a scroll operation, the image displayed in the window WD moves from the first view image in FIG. 5 to the image shown in FIG. 6 and is displayed.
その後、ユーザ端末1は、ステップS106において、商品閲覧画面の解析処理を実行する。ユーザ端末1は、当該解析処理により、ウインドウWDに表示されている商品閲覧画面におけるコンテンツ表示領域CTや優先表示領域PRの有無や配置関係を把握する。またユーザ端末1は、コンテンツ表示領域CTや優先表示領域PRの配置関係からブランク領域BKを特定する。
ここで、ユーザ端末1は、ブランク領域BKとして、ポップアップウインドウPUをポップアップ表示することが可能な空白領域や背景画面領域などがある場合はその位置等の情報を取得する。またユーザ端末1は、ECシステムの機能を発揮させるために、ユーザの操作により選択可能な操作領域の配置情報を取得する
上記の他にも、ユーザ端末1は、商品閲覧画面上における様々な情報を解析し取得する。ユーザ端末1は、当該解析処理で取得した情報に基づいて、後述する表示領域決定処理等を実行する。
Thereafter, in step S106, the user terminal 1 executes an analysis process of the product browsing screen. The user terminal 1 grasps the presence / absence and arrangement of the content display area CT and the priority display area PR on the product browsing screen displayed on the window WD by the analysis processing. Further, the user terminal 1 specifies the blank area BK based on the arrangement relationship between the content display area CT and the priority display area PR.
Here, if there is a blank area or a background screen area in which the pop-up window PU can be popped up as the blank area BK, the user terminal 1 acquires information such as the position thereof. In addition, the user terminal 1 acquires arrangement information of an operation area that can be selected by a user operation in order to exert the function of the EC system. In addition to the above, the user terminal 1 includes various information on the product browsing screen. Parse and get. The user terminal 1 executes a display area determination process and the like to be described later based on the information acquired in the analysis process.
ステップS106における解析処理の後、ユーザ端末1はステップS107に処理を進め、スクロール後の商品閲覧画面上に優先表示領域PRが表示されているか否かを判定する。ユーザ端末1は、当該解析処理により取得した優先表示領域PRの有無についての情報に基づいて当該判定を実行する。   After the analysis processing in step S106, the user terminal 1 advances the processing to step S107, and determines whether or not the priority display area PR is displayed on the scrolled product browsing screen. The user terminal 1 performs the determination based on the information on the presence or absence of the preferential display area PR acquired by the analysis processing.
例えば図8に示すように、ウインドウWDの商品閲覧画面上に優先表示領域PRが表示されている場合、ポップアップウインドウPUを表示しなくても購入手続き画面へのリンク(ご購入手続きへ)や購入リスト追加等の機能を発揮するための操作領域(商品かごに追加)が、商品閲覧画面に表示されている。
このような場合に、商品閲覧画面上に当該ポップアップウインドウPUを表示すると、同じ機能を有する領域が複数依存することになり、却って、ユーザの混乱を招くおそれがある。
そこで、ユーザ端末1はステップS107において商品閲覧画面に優先表示領域PRが表示されていると判定すると、ステップS108以降のポップアップウインドウPUを表示させる処理を行うことなく、ステップS102に処理を進める。そしてユーザ端末1は、ステップS102において再度スクロール操作を検知するまで待機する。
これにより、商品閲覧画面に優先表示領域PRが表示されている場合は、図8のようにポップアップウインドウPUがポップアップ表示されない状態となる。
For example, as shown in FIG. 8, when the priority display area PR is displayed on the product browsing screen of the window WD, the link to the purchase procedure screen (to the purchase procedure) or the purchase can be made without displaying the pop-up window PU. An operation area (added to a product basket) for displaying a function such as adding a list is displayed on the product browsing screen.
In such a case, if the pop-up window PU is displayed on the product browsing screen, a plurality of areas having the same function depend on each other, which may cause confusion for the user.
Therefore, if the user terminal 1 determines in step S107 that the priority display area PR is displayed on the product browsing screen, the process proceeds to step S102 without performing the process of displaying the pop-up window PU after step S108. Then, the user terminal 1 waits until a scroll operation is detected again in step S102.
As a result, when the priority display area PR is displayed on the product browsing screen, the pop-up window PU is not displayed as shown in FIG.
ステップS107において、商品閲覧画面に優先表示領域PRがない場合、ユーザ端末1は、商品閲覧画面上にポップアップウインドウPUを表示させるために、ステップS108〜S112の処理を実行する。
ユーザ端末1は、ステップS108において、コンテンツPUを表示する領域を決定する表示領域決定処理を実行する。
ここで、表示領域決定処理の詳細について、図9を用いて説明する。ユーザ端末1は、図7のステップS106での解析処理により取得した情報に基づいて、表示領域決定処理を実行する。
In step S107, when there is no priority display area PR on the product browsing screen, the user terminal 1 executes the processing of steps S108 to S112 to display the pop-up window PU on the product browsing screen.
In step S108, the user terminal 1 executes a display area determination process for determining an area for displaying the content PU.
Here, details of the display area determination processing will be described with reference to FIG. The user terminal 1 executes a display area determination process based on the information obtained by the analysis process in step S106 in FIG.
まずユーザ端末1は、ステップS201において、商品閲覧画面にポップアップウインドウPUをポップアップ表示することが可能な空白領域があるか否かを判定する。具体的には、ユーザ端末1は、解析処理により取得した空白領域のうち、ポップアップウインドウPUが表示可能な広さを有する空白領域があるか否かを判定する。
ポップアップウインドウPUが表示可能な領域の広さとしては、表示される文字が小さくなりすぎない等のユーザの視認性が確保でき、ポップアップウインドウPU内の操作領域を選択する際のユーザの操作性を損なわない程度の広さを有することが望ましい。また当該領域の広さは、コンピュータ装置や携帯端末等、表示画面の大きさが異なる端末装置ごとに設定されていることが望ましい。
なお、当該領域の広さは、ユーザ端末1が図7のステップS106の解析処理の際に、端末装置の表示画面の大きさに応じて、ポップアップウインドウPUが表示可能な領域の広さを設定することとしてもよい。
また、ポップアップウインドウPUをポップアップ表示することが可能な空白領域とは、ポップアップウインドウPUが重なる全ての領域が空白領域である必要はなく、ユーザの商品情報の視認性を損なわない程度であれば、コンテンツ表示領域に部分的に重なることとなる領域の広さであってもよい。これにより、商品閲覧画面上にあまり広い空白領域が設けられていない場合であっても、ポップアップウインドウPUを表示することが可能となる。
First, in step S201, the user terminal 1 determines whether or not there is a blank area in which the popup window PU can be popup displayed on the product browsing screen. Specifically, the user terminal 1 determines whether or not there is a blank area having a size that can be displayed by the pop-up window PU among the blank areas acquired by the analysis processing.
As the size of the area in which the pop-up window PU can be displayed, the visibility of the user can be ensured such that the displayed characters are not too small, and the operability of the user when selecting the operation area in the pop-up window PU is improved. It is desirable to have a width that does not impair. It is desirable that the size of the area be set for each terminal device having a different display screen size, such as a computer device or a portable terminal.
Note that the size of the area is set by the user terminal 1 in the analysis process of step S106 in FIG. 7 according to the size of the display screen of the terminal device, in which the pop-up window PU can be displayed. You may do it.
Further, the blank area in which the pop-up window PU can be displayed in a pop-up window means that all the areas where the pop-up window PU overlaps need not be a blank area, as long as the visibility of the product information of the user is not impaired. The size of an area that partially overlaps the content display area may be used. As a result, the pop-up window PU can be displayed even when a very large blank area is not provided on the product browsing screen.
ユーザ端末1は、ステップS201において、ポップアップウインドウPUが表示可能な空白領域があると判定すると、ステップS202に処理を進め、当該空白領域をポップアップウインドウPUの表示画面として選択する。
ステップS202において表示領域の選択が完了すると、ユーザ端末1は図7のステップS109に処理を進める。
When the user terminal 1 determines in step S201 that there is a blank area in which the pop-up window PU can be displayed, the process proceeds to step S202, and selects the blank area as a display screen of the pop-up window PU.
When the selection of the display area is completed in step S202, the user terminal 1 advances the process to step S109 in FIG.
ここで、ポップアップウインドウPUが表示可能な空白領域が複数ある場合は、ユーザ端末1はある一つの空白領域を表示領域として選択する処理を行う。例えば、ユーザ端末1は、複数の空白領域のうち、最も広い領域を有する空白領域を表示領域として選択することが考えられる。これにより、余裕を持ったポップアップウインドウPUの表示が可能となる。
なお、表示領域は他の様々な基準により選択することが可能であり、例えば、複数の空白領域のうち、最も狭い領域を有する空白領域を表示領域として選択してもよいし、平均的な大きさの空白領域を表示領域として選択してもよい。
Here, when there are a plurality of blank areas in which the pop-up window PU can be displayed, the user terminal 1 performs a process of selecting a certain blank area as a display area. For example, it is conceivable that the user terminal 1 selects a blank area having the largest area among the plurality of blank areas as the display area. Thereby, it is possible to display the pop-up window PU with a margin.
The display area can be selected based on various other criteria. For example, a blank area having a narrowest area among a plurality of blank areas may be selected as a display area, or an average size may be selected. May be selected as the display area.
またユーザ端末1は、あらかじめポップアップウインドウPUのサイズを設定しておき、当該サイズに最も近い空白領域を表示領域として選択することが考えられる。これにより、隙間の小さいポップアップウインドウPUを表示することができ、全体としてまとまりのある商品閲覧画面を表示することが可能となる。また、領域が余るような空白領域を選択しないことで、サイズの多きい空白領域には、他のポップアップウインドウを表示する等、商品閲覧画面における表示領域の有効活用を図ることができる。   It is also conceivable that the user terminal 1 sets the size of the pop-up window PU in advance and selects the blank area closest to the size as the display area. As a result, a pop-up window PU with a small gap can be displayed, and a coherent product browsing screen can be displayed as a whole. In addition, by not selecting a blank area having an extra area, the display area on the product browsing screen can be effectively used, such as displaying another pop-up window in a blank area having a large size.
またユーザ端末1は、空白領域のうち、左右何れかの端部に設けられている領域を表示領域として選択することが考えられる。例えば、商品の関連情報やリンク等が表示されているポップアップウインドウPUが、画面中央部に表示されると、ECシステムの本来の提供内容がどれであるかの判断が難しくなり、ユーザにとって、本来の提供内容であるコンテンツ表示領域が却って見づらくなることがある。
そのため、商品閲覧画面の端部といった目立たない位置にポップアップウインドウPUを表示することで、ユーザの視認性を損なわないポップアップ表示が可能となる。ポップアップ表示は、商品閲覧画面に様々な態様で自動的に表れてくるものであるため、元々ユーザの目を引きやすい。そのため、ポップアップウインドウPUを端部に表示してもユーザの視認性を確保しやすいといえる。
なお、ユーザ端末1は、左右何れかの端部のみならず、上下何れかの端部等、ウインドウWDの枠付近に配置された空白領域を表示領域として選択することができる。
The user terminal 1 may select an area provided at one of the left and right ends of the blank area as the display area. For example, if a pop-up window PU displaying related information or a link of a product is displayed in the center of the screen, it is difficult to determine what the EC system originally provided, and for the user, In some cases, the content display area, which is provided by the user, becomes difficult to see.
Therefore, by displaying the pop-up window PU in an inconspicuous position such as an end of the product browsing screen, a pop-up display without impairing the visibility of the user can be performed. Since the pop-up display automatically appears on the product browsing screen in various modes, it is originally easy to catch the eyes of the user. Therefore, it can be said that the visibility of the user is easily ensured even when the pop-up window PU is displayed at the end.
Note that the user terminal 1 can select a blank area arranged near the frame of the window WD, such as not only one of the left and right ends but also one of the upper and lower ends, as the display area.
またステップS201において、ポップアップウインドウPUが表示可能な空白領域がない場合、ユーザ端末1はステップS203において、ポップアップウインドウPUが表示可能な背景画面領域があるか否かを判定する。
背景画面領域には、商品閲覧画面を装飾するための模様等が表示されている領域であるため、ポップアップウインドウPUを表示したとしても、空白領域に次いでコンテンツ表示領域のようにユーザに商品情報の閲覧を妨げることがないと考えられるためである。
なお、ユーザ端末1は、背景画面領域があるか否かの判定にあたり、空白領域と背景画面領域を組み合わせることで、ポップアップウインドウPUが表示可能な領域が確保できる場合は、背景画面領域があると判定してもよい。
If there is no blank area in which the popup window PU can be displayed in step S201, the user terminal 1 determines in step S203 whether there is a background screen area in which the popup window PU can be displayed.
The background screen area is an area in which a pattern or the like for decorating the product browsing screen is displayed. Therefore, even if the pop-up window PU is displayed, the user is provided with product information such as the content display area next to the blank area. This is because it is considered that the browsing is not prevented.
When determining whether or not there is a background screen area, the user terminal 1 combines the blank area and the background screen area to secure an area where the pop-up window PU can be displayed. It may be determined.
ユーザ端末1は、ステップS203において、ポップアップウインドウPUが表示可能な背景画面領域があると判定すると、ステップS204に処理を進め、当該背景画面領域をポップアップウインドウPUの表示画面として選択する。
ステップS204において表示領域の選択が完了すると、ユーザ端末1は図7のステップS109に処理を進める。
なお、背景画面領域が複数ある場合は、空白領域が複数ある場合と同様の処理により表示領域を選択すればよい。
If the user terminal 1 determines in step S203 that there is a background screen area on which the popup window PU can be displayed, the process proceeds to step S204, and selects the background screen area as a display screen of the popup window PU.
When the selection of the display area is completed in step S204, the user terminal 1 advances the process to step S109 in FIG.
When there are a plurality of background screen regions, a display region may be selected by the same processing as in the case where there are a plurality of blank regions.
ステップS203において、ポップアップウインドウPUが表示可能な背景画面領域がないと判定すると、ユーザ端末1は、ステップS205に処理を進める。ユーザ端末1は、ステップS205において、ポップアップウインドウPUをポップアップ表示することが可能な画像コンテンツ領域があるか否かを判定する。
空白領域及び背景画面領域がない場合において、やむを得ずコンテンツ表示領域に重なるようにポップアップウインドウPUを表示させることも考えられるが、このとき、一部が隠れると内容の把握が困難となることが多い文字コンテンツ領域を避け、一部が隠れていても全体の内容をおおよそ把握可能な画像コンテンツ領域にポップアップウインドウPUを表示させることとしたものである。
If it is determined in step S203 that there is no background screen area in which the pop-up window PU can be displayed, the user terminal 1 proceeds to step S205. In step S205, the user terminal 1 determines whether or not there is an image content area in which the pop-up window PU can be popped up.
When there is no blank area and no background screen area, a pop-up window PU may be unavoidably displayed so as to overlap with the content display area. However, at this time, if a part is hidden, it is often difficult to grasp the contents. The pop-up window PU is displayed in an image content area where the entire content can be roughly grasped even if a part is hidden, avoiding the content area.
ユーザ端末1は、ステップS205において、画像コンテンツ領域があると判定するとステップS206に処理を進め、当該画像コンテンツ領域を表示領域として選択する。
なお、画像コンテンツ領域が複数ある場合は、空白領域が複数ある場合と同様の処理により表示領域を選択すればよい。
ここで、ユーザ端末1は、画像コンテンツ領域の解析処理を行い、画像コンテンツ領域内での空白領域を特定し、当該特定した空白領域に重なるようにポップアップウインドウPUをポップアップ表示することができる画像コンテンツ領域を、表示領域として選択することも可能である。これにより、一部がポップアップウインドウPUにより隠れていても画像コンテンツ領域の内容を容易に把握することが可能となり、ユーザの視認性を損なわずにポップアップウインドウPUを表示することができる。
ステップS205において表示領域の選択が完了すると、ユーザ端末1は図7のステップS109に処理を進める。
When the user terminal 1 determines in step S205 that there is an image content area, the process proceeds to step S206, and the image content area is selected as a display area.
When there are a plurality of image content areas, a display area may be selected by the same processing as when there are a plurality of blank areas.
Here, the user terminal 1 performs an analysis process on the image content area, specifies a blank area in the image content area, and displays the pop-up window PU in a pop-up window so as to overlap the specified blank area. It is also possible to select an area as a display area. Thereby, even if a part is hidden by the pop-up window PU, the contents of the image content area can be easily grasped, and the pop-up window PU can be displayed without impairing the visibility of the user.
When the selection of the display area is completed in step S205, the user terminal 1 advances the process to step S109 in FIG.
ステップS205において、ポップアップウインドウPUが表示可能な画像コンテンツ領域がないと判定すると、ユーザ端末1は、ステップS207に処理を進める。ユーザ端末1はステップS207において、操作領域でない領域から表示領域を選択する。操作領域とは、ユーザが操作領域をタッチ、クリック等の操作を受け付ける領域をいう。
つまり、ユーザの操作性を妨げない位置にポップアップウインドウPUを表示させるための処理である。ユーザ端末1は、操作領域でない領域から、空白領域等が複数ある場合と同様の処理により表示領域を選択する。
ステップS207において表示領域の選択が完了すると、ユーザ端末1は図7のステップS109に処理を進める。
なお、ユーザ端末1はステップS208において、表示領域を選択することなしに図7のステップS108に処理を進めることとしてもよい。つまり、ステップS207に処理を進める場合、ポップアップウインドウPUを表示させないでステップS102に戻るという例もあり得る。
空白領域、背景画面領域、画像コンテンツ領域の何れかにポップアップウインドウPUを表示できないのであれば、商品閲覧画面の視認性が確保できないおそれが高いため、あえてポップアップウインドウPUを表示しないほうがよい場合もある。
If it is determined in step S205 that there is no image content area in which the pop-up window PU can be displayed, the user terminal 1 proceeds to step S207. In step S207, the user terminal 1 selects a display area from an area other than the operation area. The operation area refers to an area in which the user receives an operation such as touching and clicking on the operation area.
That is, this is a process for displaying the pop-up window PU at a position where the operability of the user is not hindered. The user terminal 1 selects a display area from an area other than the operation area by the same processing as when there are a plurality of blank areas and the like.
When the selection of the display area is completed in step S207, the user terminal 1 advances the process to step S109 in FIG.
Note that the user terminal 1 may proceed to step S108 in FIG. 7 without selecting a display area in step S208. That is, when the process proceeds to step S207, there may be an example in which the process returns to step S102 without displaying the popup window PU.
If the pop-up window PU cannot be displayed in any of the blank area, the background screen area, and the image content area, there is a high possibility that the visibility of the product browsing screen cannot be secured. Therefore, it may be better not to display the pop-up window PU. .
以上により、図9に示す表示領域決定処理(図7のステップS108)の説明を終了する。ユーザ端末1が表示領域決定処理を行うことで、商品閲覧画面においてポップアップウインドウPUを表示する場合は、当該ポップアップウインドウPUを表示する位置(表示領域)が決定する。   This is the end of the description of the display region determination process (step S108 in FIG. 7) illustrated in FIG. When the user terminal 1 displays the popup window PU on the product browsing screen by performing the display area determination process, the position (display area) where the popup window PU is displayed is determined.
図7に処理を戻し、ユーザ端末1は、ステップS109において、表示領域があるか否かを判定する。
ステップS109において表示領域がないと判定すると、ユーザ端末1は、ステップS110〜S112でのポップアップウインドウPUのポップアップ表示処理を行うことなしに、ステップS102に処理を進め、ユーザからのスクロール開始操作を検知するまで待機する。
表示領域がない場合とは、例えば図9のステップS207において、ユーザ端末1が表示領域を選択しなかった場合である。
Referring back to FIG. 7, in step S109, the user terminal 1 determines whether there is a display area.
If it is determined in step S109 that there is no display area, the user terminal 1 proceeds to step S102 without performing the pop-up window PU pop-up display processing in steps S110 to S112, and detects a scroll start operation from the user. Wait until you do.
The case where there is no display area is, for example, a case where the user terminal 1 has not selected a display area in step S207 of FIG.
またステップS109において表示領域があると判定した場合、ユーザ端末1はステップS110に処理を進め、表示領域の広さについてのサイズ情報の取得を行う。当該サイズ情報は、ユーザ端末1によるステップS106での解析処理により求められるものである。   If it is determined in step S109 that there is a display area, the user terminal 1 proceeds to step S110 and acquires size information on the size of the display area. The size information is obtained by the analysis process in step S106 by the user terminal 1.
そしてユーザ端末1は、ステップS111において、ポップアップウインドウPUのサイズ調整を行う。ユーザ端末1は、表示領域のサイズ情報に基づいてポップアップウインドウPUのサイズ調整を行い、例えば表示領域のサイズと同じになるようにポップアップウインドウPUを拡大又は縮小する。
このとき、ユーザ端末1は、ポップアップウインドウPUの画面自体を拡大、縮小してもよいし、あらかじめ様々なサイズのポップアップウインドウPUを用意しておき、表示領域のサイズに一番近いものを選択することとしてもよい。
また、ポップアップウインドウPUのサイズは、表示領域よりも少し広めに調整してもよいし、狭めに調整してもよい。
Then, in step S111, the user terminal 1 adjusts the size of the popup window PU. The user terminal 1 adjusts the size of the pop-up window PU based on the size information of the display area, and enlarges or reduces the pop-up window PU so as to have the same size as the display area, for example.
At this time, the user terminal 1 may enlarge or reduce the screen itself of the pop-up window PU, or prepare pop-up windows PU of various sizes in advance, and select the one closest to the size of the display area. It may be that.
In addition, the size of the pop-up window PU may be adjusted to be slightly larger or narrower than the display area.
ポップアップウインドウPUのサイズ調整が終了すると、ユーザ端末1はステップS112において、商品閲覧画面における表示領域にポップアップウインドウPUが表示される。
これにより、図5のウインドウWDに表示された画像から図6のウインドウWDに表示される画像まで商品閲覧画面のスクロールが行われた後、当該スクロールが停止すると、例えば表示領域に選択されたブランク領域BKに重なるように、ポップアップウインドウPUが表示される(図6)。
When the size adjustment of the pop-up window PU ends, the user terminal 1 displays the pop-up window PU in the display area on the product browsing screen in step S112.
Thereby, after scrolling the product browsing screen from the image displayed in the window WD in FIG. 5 to the image displayed in the window WD in FIG. 6, when the scrolling stops, for example, the blank selected in the display area is displayed. A pop-up window PU is displayed so as to overlap the area BK (FIG. 6).
ステップS112の処理が終了した後、ユーザ端末1はステップS102において、商品閲覧画面にポップアップウインドウPUが表示された状態で、再度スクロール操作を検知するまで待機する。
そしてユーザのスクロール操作の開始を検知すると、ユーザ端末1はステップS103に処理を進める。ここで、ステップS112の処理により商品閲覧画面にポップアップウインドウPUが表示された状態であるため、ユーザ端末1はステップS103からステップS104に処理を進め、表示されているポップアップウインドウPUを非表示とする処理を実行する。
そして、ユーザ端末1はステップS105に処理を進め、以下上記と同様の処理を実行する。これにより、スクロール中はポップアップウインドウPUを非表示とし、スクロールの停止後の商品閲覧画面にポップアップウインドウPUが表示される処理が実現できる。
After the process of step S112 is completed, the user terminal 1 waits in step S102 until a scroll operation is detected again with the popup window PU displayed on the product browsing screen.
Then, upon detecting the start of the user's scroll operation, the user terminal 1 proceeds to step S103. Here, since the pop-up window PU is displayed on the product browsing screen by the process of step S112, the user terminal 1 proceeds from step S103 to step S104, and hides the displayed pop-up window PU. Execute the process.
Then, the user terminal 1 advances the process to step S105, and executes the same process as above. Thereby, the process of hiding the pop-up window PU during scrolling and displaying the pop-up window PU on the product browsing screen after the scrolling is stopped can be realized.
なお、ステップS104について、商品閲覧画面のスクロール中においては、スクロールに追従してポップアップウインドウPUが表示されるようにしてもよい。
また図7の処理は、ユーザの操作によりウインドウWD内で商品閲覧画面から他の画面に移動したり、商品閲覧画面が表示されているウインドウWDが閉じられたりすることで適宜、終了される。
In step S104, during scrolling of the product browsing screen, a pop-up window PU may be displayed following the scrolling.
Further, the processing in FIG. 7 is appropriately terminated by moving from the product browsing screen to another screen in the window WD or closing the window WD on which the product browsing screen is displayed in the window WD by a user operation.
<7.第2の実施の形態における提示画面の概要>
次に、第2の実施の形態における、ユーザ端末1に表示される商品閲覧画面上のポップアップウインドウPUの表示制御の概要について、図5、図10及び図11を用いて説明する。本実施の形態は、ウインドウWDに表示される商品閲覧画面をスクロールする際に、ポップアップウインドウPUがスクロール中の画面を追従するように表示される例である。
<7. Overview of Presentation Screen in Second Embodiment>
Next, the outline of the display control of the pop-up window PU on the product browsing screen displayed on the user terminal 1 according to the second embodiment will be described with reference to FIGS. 5, 10, and 11. FIG. This embodiment is an example in which a pop-up window PU is displayed so as to follow a scrolling screen when scrolling a product browsing screen displayed in a window WD.
まず、図5に示すように、ユーザ端末1のウェブブラウザ上で商品閲覧画面に移動すると、ウインドウWDの商品閲覧画面にファーストビュー画像が表示される。
本実施の形態では、第1の実施の形態と同様に、ファーストビュー画像がウインドウWDに表示されている状態において、ポップアップウインドウPUは表示されていない。
First, as shown in FIG. 5, when the user moves to the product browsing screen on the web browser of the user terminal 1, the first view image is displayed on the product browsing screen of the window WD.
In the present embodiment, as in the first embodiment, the pop-up window PU is not displayed while the first view image is displayed in the window WD.
その後、ユーザによりウインドウWDにおける商品閲覧画面のスクロール操作が行われると、図10に示すように、例えばウインドウWDの右上の部分にポップアップウインドウPUがポップアップ表示される。
このとき、ポップアップウインドウPUのウインドウWD上における表示位置は固定される。即ち、商品閲覧画面がスクロール中であっても、ポップアップウインドウPUはウインドウWDに対して常に一定の位置に表示されることになる。例えばポップアップウインドウPUは、ウインドウWDの右上部分に固定して表示される。
これにより、商品閲覧画面のスクロールに伴い、画面の進行方向にポップアップウインドウPUが追従するように表示される。
Thereafter, when the user performs a scroll operation on the product browsing screen in the window WD, a pop-up window PU is displayed in a pop-up window, for example, in the upper right portion of the window WD as shown in FIG.
At this time, the display position of the popup window PU on the window WD is fixed. That is, even when the product browsing screen is scrolling, the pop-up window PU is always displayed at a fixed position with respect to the window WD. For example, the pop-up window PU is fixedly displayed on the upper right portion of the window WD.
Thus, the pop-up window PU is displayed so as to follow the moving direction of the product browsing screen in accordance with the scroll of the screen.
第2の実施の形態は、商品閲覧画面のスクロール中及びスクロールが終了した状態において、ポップアップウインドウPUが常にウインドウWD上に何れかの配置列に固定して表示されるため、商品閲覧画面がスクロールされた場合であってもポップアップウインドウPUの位置が把握しやすいといった利点がある。
また、第2の実施の形態では、複数の配置列のうちコンテンツ表示領域CTが重なりづらい配置列をポップアップウインドウPUの表示領域とすることで、コンテンツ表示領域CTの視認性を確保したポップアップウインドウPUの表示態様を実現できる。
In the second embodiment, the pop-up window PU is always displayed on the window WD in a fixed manner in one of the arrangement rows during and after scrolling of the product browsing screen. There is an advantage that the position of the pop-up window PU can be easily grasped even when it is performed.
Further, in the second embodiment, the layout column in which the content display area CT is unlikely to overlap among the plurality of layout rows is used as the display area of the pop-up window PU, thereby ensuring the visibility of the content display area CT. Can be realized.
また、商品閲覧画面のスクロール中及びスクロールが終了した状態において、ポップアップウインドウPUは常にウインドウWDの右上部分に固定して表示されることになる。そのため、商品閲覧画面の表示部分によっては、図11に示すように、例えば画像コンテンツ領域CT3等のコンテンツ表示領域にポップアップウインドウPUが重なってしまうことがある。そこでこのような場合は、ポップアップウインドウPUを半透明になるように表示制御する。図11では、半透明に表示されたポップアップウインドウPUを破線により表記する。これにより、画面のスクロール中及び停止状態において、コンテンツ表示領域の視認性を必要以上に損なうことなしに、ポップアップウインドウPUを表示することが可能となる。   In addition, the pop-up window PU is always fixedly displayed on the upper right portion of the window WD while the product browsing screen is being scrolled and the scrolling is completed. Therefore, depending on the display portion of the product browsing screen, as shown in FIG. 11, for example, the pop-up window PU may overlap the content display area such as the image content area CT3. Therefore, in such a case, display control is performed so that the pop-up window PU becomes translucent. In FIG. 11, the pop-up window PU displayed translucently is indicated by a broken line. Thereby, it is possible to display the pop-up window PU while scrolling the screen and in the stopped state without unnecessarily impairing the visibility of the content display area.
<8.第2の実施の形態における商品画面閲覧処理の第1例>
第2の実施の形態における表示制御システムの動作を実現するためにユーザ端末1がウェブブラウザ上で実行する商品画面閲覧処理(図4のS14)の第1例について、図12及び図13を用いて説明する。ユーザ端末1は、配信サーバ2から受信したウェブページデータにプラグインされたプログラムに基づいて商品画面閲覧処理を実行する。
<8. First Example of Product Screen Browsing Process in Second Embodiment>
A first example of the product screen browsing process (S14 in FIG. 4) executed by the user terminal 1 on the web browser to realize the operation of the display control system in the second embodiment will be described with reference to FIGS. Will be explained. The user terminal 1 executes a product screen browsing process based on a program plugged into the web page data received from the distribution server 2.
まずユーザ端末1は、ステップS101においてウインドウWDに商品閲覧画面を表示させる。そしてユーザ端末1は、ステップS301において、ユーザによるスクロール操作を検知した際にポップアップ表示するポップアップウインドウPUの位置を決定するための配置列決定処理を行う。   First, in step S101, the user terminal 1 displays a product browsing screen on the window WD. Then, in step S301, the user terminal 1 performs an arrangement column determination process for determining the position of the pop-up window PU that displays a pop-up when a scroll operation by the user is detected.
ここで、配置列決定処理の詳細について、図13を用いて説明する。
まずユーザ端末1は、ステップS401において、ウインドウWDのウインドウサイズ情報を取得し、ステップS402において、当該取得したウインドウサイズ情報に応じたウインドウWD上における商品閲覧画面の表示態様を特定する処理を実行する。つまりユーザ端末1は、ウインドウWDに表示されるウェブページデータWPの構成を特定する。ウインドウWDのウインドウサイズによって、表示するウェブページデータのサイズや、コンテンツ表示領域及び優先表示領域等の配置関係が調整されるためである。
Here, details of the arrangement column determination processing will be described with reference to FIG.
First, in step S401, the user terminal 1 acquires the window size information of the window WD, and in step S402, executes a process of specifying the display mode of the product browsing screen on the window WD according to the acquired window size information. . That is, the user terminal 1 specifies the configuration of the web page data WP displayed in the window WD. This is because the size of the web page data to be displayed and the arrangement relationship of the content display area and the priority display area are adjusted by the window size of the window WD.
ウインドウWDに表示されるウェブページデータWPの構成を特定すると、ユーザ端末1は、ステップS403において、当該ウェブページデータWPの解析処理を行う。これにより、ユーザ端末1は、ウェブページデータWPにおけるコンテンツ表示領域CT及び優先表示領域PR等の配置関係を特定することができる。またコンテンツ表示領域CT及び優先表示領域PR等の配置関係を特定することで、ブランク領域BKの位置も特定することができる。   After specifying the configuration of the web page data WP displayed in the window WD, the user terminal 1 performs an analysis process on the web page data WP in step S403. Thereby, the user terminal 1 can specify the arrangement relationship of the content display area CT and the priority display area PR in the web page data WP. By specifying the arrangement relationship of the content display area CT and the priority display area PR, the position of the blank area BK can also be specified.
ユーザ端末1は、ステップS404において、ウェブページデータWPを複数の列に分割する。例えば図10に示すように、ウェブページデータWPを等間隔の列wh1〜wh3に分割する。
ユーザ端末1は、各列ごとの、ブランク領域BKの割合を算出する。そしてユーザ端末1はステップS405において、最もブランク領域BKの面積割合の高い列(つまり、コンテンツ表示領域CTの面積割合の低い列)を配置列として決定する。即ち、ユーザ端末1は、後述するユーザからのスクロール操作の開始を検知した際に、当該配置列の何れかの領域にポップアップウインドウPUをポップアップ表示することになる。
以上により、ユーザ端末1は、図13での配置列決定処理を終了し、図12においてステップS301の配置列決定処理の後、ステップS302→S304→S305の監視ループを行う。
In step S404, the user terminal 1 divides the web page data WP into a plurality of columns. For example, as shown in FIG. 10, the web page data WP is divided into equally-spaced columns wh1 to wh3.
The user terminal 1 calculates the ratio of the blank area BK for each column. Then, in step S405, the user terminal 1 determines a column having the highest area ratio of the blank region BK (that is, a column having the lowest area ratio of the content display region CT) as the arrangement column. That is, when the user terminal 1 detects the start of the scroll operation from the user, which will be described later, the user terminal 1 pops up the pop-up window PU in any area of the arrangement row.
As described above, the user terminal 1 ends the arrangement sequence determination processing in FIG. 13 and performs a monitoring loop of steps S302 → S304 → S305 after the arrangement sequence determination processing in step S301 in FIG.
ユーザ端末1は、図12のステップS302において、ユーザのスクロール操作が開始されたことを検知した場合、ステップS303に処理を進める。
ユーザ端末1は、ステップS303において、ウインドウWDの商品閲覧画面のスクロールに対して、ポップアップウインドウPUが追従するように表示される。
つまり、ユーザ端末1は、ポップアップウインドウPUのウインドウWD上に表示位置を固定して表示する。これにより、スクロール中であっても、ポップアップウインドウPUはウインドウWDに対して常に一定の位置に表示されることになる。例えばスクロール前を示す図10及びスクロール後を示す図11において、ポップアップウインドウPUは、ウインドウWDの右上部分に固定して表示されている。
なお、ユーザ端末1は、ユーザのスクロール操作が開始されたことを検知した際に、ウインドウWDにポップアップウインドウPUが表示されていなかった場合は、ステップS301で決定した配置列にポップアップウインドウPUを表示してから、追従表示を実行する。
ユーザ端末1はステップS303の処理を終えると、ステップS302→S304→S305の監視に戻る。
なお、スクロール追従表示についてはステップS302のタイミングに限られることはなく、ユーザのスクロール操作が開始されたことを検知した場合に、適宜、ユーザ端末1によりポップアップウインドウPUの追従表示が行われるものとする。
If the user terminal 1 detects in step S302 in FIG. 12 that the user has started the scroll operation, the process proceeds to step S303.
In step S303, the user terminal 1 displays the pop-up window PU so as to follow the scroll of the product browsing screen of the window WD.
That is, the user terminal 1 displays the fixed display position on the window WD of the pop-up window PU. As a result, even during scrolling, the pop-up window PU is always displayed at a fixed position with respect to the window WD. For example, in FIG. 10 showing before scrolling and FIG. 11 showing after scrolling, the pop-up window PU is fixedly displayed in the upper right portion of the window WD.
In addition, when the user terminal 1 detects that the scroll operation of the user has been started, if the pop-up window PU is not displayed in the window WD, the pop-up window PU is displayed in the arrangement row determined in step S301. Then, the follow-up display is executed.
After finishing the process of step S303, the user terminal 1 returns to the monitoring of steps S302 → S304 → S305.
Note that the scrolling follow-up display is not limited to the timing of step S302, and it is assumed that the user terminal 1 appropriately performs the follow-up display of the pop-up window PU when detecting that the user has started the scroll operation. I do.
ユーザ端末1は、ステップS304において、ウインドウサイズの変更が変更されたと判定すると、ユーザ端末1はS301に処理を進め、再度配置列決定処理を行った上で、ステップS302→S304→S305の監視に戻る。
ここで、ウインドウサイズの変更とは、例えばコンピュータ装置上でのウェブブラウザのウインドウが全画面化、拡大、縮小等された場合をいう。
If the user terminal 1 determines in step S304 that the change in the window size has been changed, the user terminal 1 proceeds to step S301, performs the arrangement column determination process again, and then proceeds to step S302 → S304 → S305. Return.
Here, the change in the window size refers to, for example, a case where the window of the web browser on the computer device is made full-screen, enlarged, reduced, or the like.
ユーザ端末1は、ステップS305において、ウインドウWD上にポップアップウインドウPUが表示されていると判定すると、ステップS306に処理を進める。ここでいう、ポップアップウインドウPUの表示は、半透明化等されていない通常の表示態様で表示されている通常表示と、半透明化され重畳部分においてコンテンツ表示領域が視認可能とされる半透明表示との何れかの表示態様により表示されていればよい。   If the user terminal 1 determines in step S305 that the pop-up window PU is displayed on the window WD, the process proceeds to step S306. Here, the display of the pop-up window PU includes a normal display displayed in a normal display mode that is not translucent, and a translucent display in which the content display area is translucent and the content display area is visible in a superimposed portion. It is only necessary that the information be displayed in any of the display modes.
ユーザ端末1はステップS306において、ポップアップウインドウPUが表示されている領域がコンテンツ表示領域と重なるか否かを判定する。
ポップアップウインドウPUがコンテンツ表示領域に重なっていない場合、ユーザ端末1はステップS307において、ウインドウWD上にポップアップウインドウPUが通常表示されているか否かを判定する。
In step S306, the user terminal 1 determines whether the area where the popup window PU is displayed overlaps the content display area.
If the popup window PU does not overlap the content display area, the user terminal 1 determines in step S307 whether the popup window PU is normally displayed on the window WD.
ポップアップウインドウPUが通常表示されていない場合、即ちポップアップウインドウPUが半透明で表示されている場合は、ユーザ端末1はステップS308に処理を進め、ポップアップウインドウPUを通常表示とする処理を行う。ここでは、ポップアップウインドウPUがコンテンツ表示領域に重なっていないので、コンテンツ表示領域の視認性を確保するためにポップアップウインドウPUを半透明化する必要がないためである。
ステップS308の後、ユーザ端末1はステップS311に処理を進める。
If the pop-up window PU is not normally displayed, that is, if the pop-up window PU is displayed translucently, the user terminal 1 proceeds to step S308, and performs a process of setting the pop-up window PU to normal display. Here, since the pop-up window PU does not overlap the content display area, it is not necessary to make the pop-up window PU translucent to ensure the visibility of the content display area.
After step S308, the user terminal 1 proceeds to step S311.
またステップS307においてポップアップウインドウPUが通常表示されていない場合は、ユーザ端末1はステップS308の処理を行うことなく、ステップS311に処理を進める。   If the pop-up window PU is not normally displayed in step S307, the user terminal 1 proceeds to step S311 without performing the process in step S308.
またステップS306において、ポップアップウインドウPUがコンテンツ表示領域と重なる場合、ユーザ端末1はステップS309に処理を進める。
ユーザ端末1は、ステップS309においてウインドウWD上にポップアップウインドウPUが通常表示されている否かを判定する。
ウインドウWD上にポップアップウインドウPUが通常表示されている場合、即ち、例えば図11に示すように、ポップアップウインドウPUが半透明で表示されていない場合は、ユーザ端末1はステップS310において、ポップアップウインドウPUを半透明に表示させる処理を実行する。なおこのとき、ポップアップウインドウPUを透明とする処理を行ってもよい。ユーザ端末1はステップS309の後、ステップS311に処理を進める。
またステップS309において、ウインドウWD上にポップアップウインドウPUが通常表示されていない場合、即ち、ポップアップウインドウPUが半透明表示されている場合は、ステップS310の処理を行うことなくステップS311に処理を進める。
If the pop-up window PU overlaps the content display area in step S306, the user terminal 1 proceeds to step S309.
The user terminal 1 determines in step S309 whether the pop-up window PU is normally displayed on the window WD.
If the pop-up window PU is normally displayed on the window WD, that is, if the pop-up window PU is not displayed translucently as shown in FIG. 11, for example, the user terminal 1 determines in step S310 that the pop-up window PU Is executed to make the translucent display. At this time, a process of making the pop-up window PU transparent may be performed. After step S309, the user terminal 1 proceeds to step S311.
If the pop-up window PU is not normally displayed on the window WD in step S309, that is, if the pop-up window PU is translucently displayed, the process proceeds to step S311 without performing the process of step S310.
ユーザ端末1は、ステップS311において、ウインドウWDの商品閲覧画面内に優先表示領域が表示されているか否かを判定する。優先表示領域が表示されていない場合、ユーザ端末1はステップS304に処理を進め、以下、監視ループに処理を戻す。
優先表示領域が表示されている場合、ユーザ端末1は、ステップS312において、ポップアップウインドウPUを非表示とする処理を行う。例えば図8に示すように、ウインドウWDに表示される商品閲覧画面上に優先表示領域PRが表示されている場合、ポップアップウインドウPUを表示しなくても購入手続き画面へのリンク(ご購入手続きへ)や購入リスト追加等の機能を発揮するための操作領域(商品かごに追加)は、商品閲覧画面に表示されているためである。
In step S311, the user terminal 1 determines whether a priority display area is displayed in the product browsing screen of the window WD. If the priority display area is not displayed, the user terminal 1 proceeds to step S304, and thereafter returns to the monitoring loop.
When the priority display area is displayed, the user terminal 1 performs a process of hiding the pop-up window PU in step S312. For example, as shown in FIG. 8, when the priority display area PR is displayed on the product browsing screen displayed in the window WD, a link to the purchase procedure screen (to the purchase procedure) without displaying the pop-up window PU. This is because the operation area (added to the product basket) for exhibiting functions such as ()) and the purchase list addition is displayed on the product browsing screen.
ステップS312の処理の終了後、ユーザ端末1はステップS313において、優先表示領域がウインドウWDの商品閲覧画面外に移動するまで待機する。
優先表示領域が商品閲覧画面外に移動すると、ユーザ端末1は、ステップS314において、ポップアップウインドウPUを再度表示させる。このとき、ステップS312で表示にした際のポップアップウインドウPUと同様の表示態様(通常表示や半透明表示等)で表示を行う。
ステップS314の処理が終了すると、ユーザ端末1はステップS304に処理を進め、以下、監視ループに戻る。
After the process of step S312 ends, in step S313, the user terminal 1 waits until the priority display area moves out of the product browsing screen of the window WD.
When the priority display area moves out of the product browsing screen, in step S314, the user terminal 1 displays the pop-up window PU again. At this time, the display is performed in the same display mode (normal display, translucent display, or the like) as the pop-up window PU displayed in step S312.
When the process of step S314 ends, the user terminal 1 advances the process to step S304, and thereafter returns to the monitoring loop.
なお、図12及び図13の処理は、ユーザの操作によりウインドウWD内で商品閲覧画面から他の画面に移動したり、商品閲覧画面が表示されているウインドウWDが閉じられたりすることで適宜、終了される。   Note that the processing in FIGS. 12 and 13 is appropriately performed by moving from the product browsing screen to another screen in the window WD by the user's operation or closing the window WD displaying the product browsing screen. Will be terminated.
以上の商品画面閲覧処理をユーザ端末1が実行することで、ウインドウWD内の商品閲覧画面のスクロールに対して、ポップアップウインドウPUが表示態様を変化させつつ追従表示されることとなる。   When the user terminal 1 executes the above product screen browsing process, the pop-up window PU is displayed following the scroll of the product browsing screen in the window WD while changing the display mode.
<9.第2の実施の形態における商品画面閲覧処理の第2例>
第2の実施の形態における商品画面閲覧処理(図4のS14)の第2例について、図14を用いて説明する。
第2例は、半透明の状態で表示されているポップアップウインドウPUにカーソル等の操作子が接近した場合に、当該ポップアップウインドウPUを通常表示の状態とする例である。
第2例は、ステップS311の前に実行されるステップS501以降の処理以外は、第1例と同様の処理であるため、本例ではステップS501以降の処理についてのみ説明する。ステップS501は、ステップS307乃至S310の何れかの処理の後に実行される処理である。
<9. Second Example of Product Screen Browsing Process in Second Embodiment>
A second example of the product screen browsing process (S14 in FIG. 4) according to the second embodiment will be described with reference to FIG.
In the second example, when an operator such as a cursor approaches a pop-up window PU displayed in a translucent state, the pop-up window PU is set to a normal display state.
The second example is the same as the first example except for the processing after step S501 executed before step S311. Therefore, in this example, only the processing after step S501 will be described. Step S501 is a process executed after any of the processes of steps S307 to S310.
まず、ユーザ端末1は、ステップS501において、カーソルがポップアップウインドウPUに接近している状態であるか否かを判定する。
カーソルがポップアップウインドウPUに接近していない場合、ユーザ端末1はステップS311に処理を進め、以下第1例と同様の処理を行う。
カーソルがポップアップウインドウPUに接近している状態であることを検知すると、ステップS502に処理を進め、ポップアップウインドウPUが通常表示されているか否かを判定する。そして、通常表示されている場合は、ユーザ端末1はステップS311に処理を進め、以下第1例と同様の処理を行う。
First, in step S501, the user terminal 1 determines whether or not the cursor is approaching the pop-up window PU.
If the cursor is not approaching the pop-up window PU, the user terminal 1 proceeds to step S311 and performs the same processing as in the first example.
If it is detected that the cursor is approaching the pop-up window PU, the process proceeds to step S502, and it is determined whether the pop-up window PU is normally displayed. If it is normally displayed, the user terminal 1 proceeds to step S311 and performs the same processing as in the first example.
ポップアップウインドウPUが通常表示されていない場合、即ち、ポップアップウインドウPUが半透明の状態である場合、ユーザ端末1はステップS503に処理を進める。
ユーザ端末1は、ステップS503において、半透明状態で表示されているポップアップウインドウPUの表示態様を通常表示とする処理を実行する。
その後、ユーザ端末1は、ステップS504において、カーソルがポップアップウインドウPUに接近していない状態、即ち、カーソルがポップアップウインドウPUから離れるまで待機する。カーソルがポップアップウインドウPUから離れたことを検知すると、ユーザ端末1はステップS306に処理を進め、以下第1例と同様の処理を実行する。
以上により、第2の実施の形態における商品画面閲覧処理の第2例の説明を終了する。
If the pop-up window PU is not normally displayed, that is, if the pop-up window PU is in a semi-transparent state, the user terminal 1 proceeds to step S503.
In step S503, the user terminal 1 executes a process of setting the display mode of the pop-up window PU displayed in the semi-transparent state to the normal display.
Thereafter, in step S504, the user terminal 1 waits until the cursor is not approaching the pop-up window PU, that is, waits until the cursor leaves the pop-up window PU. When detecting that the cursor has left the pop-up window PU, the user terminal 1 proceeds to step S306, and executes the same processing as in the first example below.
This concludes the description of the second example of the product screen browsing process according to the second embodiment.
<10.まとめ及び変形例>
上記した実施の形態等で説明した配信サーバ2は、第1ウインドウ(ウインドウWD)に、コンテンツ表示画像(コンテンツ表示領域)を有するページ領域を表示する第1処理と、ページ領域におけるコンテンツ表示領域の配置に応じて第2ウインドウ(ポップアップウインドウPU)の表示位置を選択する第2処理と、第1ウインドウ(ウインドウWD)に表示されたページ領域上の第2処理で選択された表示位置(表示領域)に、第2ウインドウ(ポップアップウインドウPU)を表示させる第3処理と、を端末装置(ユーザ端末1)に実行させるプログラムを含むウェブページデータWPを生成するウェブページデータ生成部22と、生成したウェブページデータWPを端末装置(ユーザ端末1)に送信し、提示させる処理を行う制御部21と、を備えるものである(図7、図12、図14)。
これにより、スクロール操作に応じて変化するウインドウWDに表示される商品閲覧画面において、当該商品閲覧画面の各停止位置において、ウインドウWDに表示されるコンテンツ表示領域の配置を加味した上で、ポップアップウインドウPUのポップアップ表示位置を決定することができる。即ち、例えばウインドウWD上のコンテンツ表示領域に重ならないように、ポップアップウインドウPUの表示領域を決定することができるようになる。
<10. Summary and Modified Examples>
The distribution server 2 described in the above embodiments and the like performs a first process of displaying a page area having a content display image (content display area) in a first window (window WD), and a process of displaying a content display area in the page area. The second processing for selecting the display position of the second window (pop-up window PU) according to the arrangement, and the display position (display area) selected in the second processing on the page area displayed in the first window (window WD) ), A third process for displaying a second window (pop-up window PU), and a web page data generation unit 22 for generating web page data WP including a program for causing a terminal device (user terminal 1) to execute the third process. Control for transmitting web page data WP to a terminal device (user terminal 1) and presenting the web page data WP 21, but with a (7, 12, 14).
Thus, in the product browsing screen displayed in the window WD that changes in response to the scroll operation, the position of the content display area displayed in the window WD is added to each stop position of the product browsing screen, and then the pop-up window is displayed. The pop-up display position of the PU can be determined. That is, for example, the display area of the pop-up window PU can be determined so as not to overlap the content display area on the window WD.
ポップアップウインドウPUを商品閲覧画面上に表示することは、例えば、商品閲覧画面に表示されていない特定の画面に移動するためのリンク(ご購入手続きへ)や、購入リスト追加等の機能を発揮するための操作領域(商品かごに追加)等をポップアップウインドウPUに表示させることでユーザの利便性を向上させるものである。
そこで、例えばウインドウWD上のコンテンツ表示領域に重ならないように、ポップアップウインドウPUの表示領域を決定することで、ウインドウWDに表示される商品閲覧画面の視認性を損なうことなしに、ユーザにとって利便性の高いポップアップウインドウPUを表示することが可能となる。
また、ウインドウWD上のコンテンツ表示領域に重ならないようにポップアップウインドウPUを表示することで、ウインドウWD上の表示領域の有効活用を図ることができる。
Displaying the pop-up window PU on the product browsing screen exerts, for example, a link (to purchase procedure) for moving to a specific screen not displayed on the product browsing screen, and a function of adding a purchase list. The user's convenience is improved by displaying an operation area (added to the product basket) for the user in the pop-up window PU.
Therefore, for example, by determining the display area of the pop-up window PU so as not to overlap the content display area on the window WD, it is convenient for the user without impairing the visibility of the product browsing screen displayed on the window WD. Can be displayed.
In addition, by displaying the pop-up window PU so as not to overlap the content display area on the window WD, it is possible to effectively use the display area on the window WD.
また配信サーバ2が生成するウェブページデータにおける第2処理では、ページ領域におけるコンテンツ非表示領域(ブランク領域BK)のうちで第2ウインドウ(ポップアップウインドウPU)の表示位置を選択することが考えられる(図9のS201)。
ブランク領域BKは、商品閲覧画面において空白である等のユーザに対して情報量の少ない領域といえる。そのような領域をポップアップウインドウPUの表示領域とすることで、ウインドウWDに表示されるコンテンツ表示領域に重ならないようにポップアップウインドウPUがポップアップ表示され、ユーザのウインドウWDに表示される商品閲覧画面の視認性をより一層向上させることができる。
また、ユーザに対して情報量の少ない領域にポップアップウインドウPUを表示することで、ウインドウWD上の表示領域のより一層の有効活用を図ることができる。
In the second processing of the web page data generated by the distribution server 2, it is conceivable to select a display position of the second window (pop-up window PU) from the content non-display area (blank area BK) in the page area ( S201 of FIG. 9).
The blank area BK is an area having a small amount of information for the user such as a blank area on the product browsing screen. By setting such an area as the display area of the pop-up window PU, the pop-up window PU is displayed in a pop-up manner so as not to overlap the content display area displayed in the window WD, and a product browsing screen displayed in the user's window WD is displayed. The visibility can be further improved.
Further, by displaying the pop-up window PU in an area where the amount of information is small for the user, it is possible to further effectively utilize the display area on the window WD.
また、第2処理では、ページ領域のスクロールの終了の際の表示範囲におけるコンテンツ非表示領域(ブランク領域BK)から、第2ウインドウ(ポップアップウインドウPU)の表示位置を選択する(図7のS108)。
これにより、スクロール操作終了後にウインドウWDに表示される商品閲覧画面に基づいて、ウインドウWDに表示されるコンテンツ表示領域に重ならないようなポップアップウインドウPUのポップアップ表示位置を特定することができる。
スクロールの開始後に一度ポップアップウインドウPUを非表示とし、スクロール終了後の商品閲覧画面において、再度、ポップアップウインドウPUの表示領域を選択することにより、コンテンツ表示領域にポップアップウインドウPUが重なることを回避することができ、ユーザの視認性の向上を図ることが可能となる。
また、スクロールの停止ごとにポップアップウインドウPUの表示領域を選択する処理を行うことで、現在表示されている商品閲覧画面ごとに適したポップアップウインドウPUの表示領域をその都度選択することができる。従って、直近の商品閲覧画面の表示態様を反映させたポップアップウインドウPUのポップアップ表示を行うことができる。
In the second process, the display position of the second window (pop-up window PU) is selected from the content non-display area (blank area BK) in the display range at the end of scrolling of the page area (S108 in FIG. 7). .
Thereby, the pop-up display position of the pop-up window PU that does not overlap the content display area displayed in the window WD can be specified based on the product browsing screen displayed in the window WD after the scroll operation ends.
To prevent the pop-up window PU from overlapping the content display area by hiding the pop-up window PU once after the start of scrolling and selecting the display area of the pop-up window PU again on the product browsing screen after scrolling is completed. It is possible to improve the visibility of the user.
Further, by performing the process of selecting the display area of the pop-up window PU every time the scroll is stopped, the display area of the pop-up window PU suitable for each of the currently displayed product browsing screens can be selected each time. Therefore, the pop-up window PU in which the display mode of the latest product browsing screen is reflected can be displayed.
また、第2ウインドウ(ポップアップウインドウPU)が第1ウインドウ(ウインドウWD)上に表示されている場合、ページ領域のスクロールが開始されたことに応じて、第2ウインドウ(ポップアップウインドウPU)を非表示とすることが考えられる(図7のS104)。
商品閲覧画面がスクロール移動中は、ポップアップウインドウPUをウインドウWD上に表示しないことで、ユーザはスクロール中の画面の閲覧を快適に行うことができる。また、スクロール中は、ポップアップウインドウPUをウインドウWD上に表示せず、スクロールの停止後にポップアップウインドウPUを表示することで、ポップアップウインドウPUの自然な表示を実現できる。
When the second window (pop-up window PU) is displayed on the first window (window WD), the second window (pop-up window PU) is not displayed in response to the start of scrolling of the page area. (S104 in FIG. 7).
By not displaying the pop-up window PU on the window WD while the product browsing screen is scrolling, the user can comfortably browse the scrolling screen. In addition, during scrolling, the pop-up window PU is not displayed on the window WD, and the pop-up window PU is displayed after the scrolling is stopped, so that a natural display of the pop-up window PU can be realized.
また配信サーバ2が生成するウェブページデータにおける第2処理で選択した第2ウインドウ(ポップアップウインドウPU)の表示位置の領域の大きさに合わせて、第3処理で表示する第2ウインドウ(ポップアップウインドウPU)の大きさが可変とされる(図7のS110〜S112)。
これにより、例えばブランク領域がポップアップウインドウPUよりも小さい場合、ブランク領域等の表示領域に収まるようにポップアップウインドウPUの大きさを調節することで、ポップアップウインドウPUが商品閲覧画面のコンテンツ表示領域に重ならないように表示することができる。従って、ユーザのコンテンツ表示領域の視認性をより確保することができる。
また、ブランク領域等の表示領域に収まるようにポップアップウインドウPUの大きさを調節することで、例えばブランク領域が大きいときは、ユーザが閲覧や操作がしやすいようにポップアップウインドウPUを拡大して表示することも可能となる。これにより、ユーザのポップアップウインドウPUの視認性及び操作性の向上を図ることができる。
また、ブランク領域等の大きさに関わらず、ポップアップウインドウPUを表示することが可能となるため、ウインドウWDの表示領域の有効活用を図ることができる。
Further, the second window (pop-up window PU) displayed in the third process is adjusted to the size of the display position area of the second window (pop-up window PU) selected in the second process in the web page data generated by the distribution server 2. ) Is variable (S110 to S112 in FIG. 7).
Thus, for example, when the blank area is smaller than the pop-up window PU, the size of the pop-up window PU is adjusted so as to fit in the display area such as the blank area, so that the pop-up window PU overlaps the content display area of the product browsing screen. It can be displayed so as not to be. Therefore, the visibility of the content display area of the user can be further secured.
Also, by adjusting the size of the pop-up window PU so as to fit in a display area such as a blank area, for example, when the blank area is large, the pop-up window PU is enlarged and displayed so that the user can easily browse and operate. It is also possible to do. Thereby, the visibility and operability of the pop-up window PU of the user can be improved.
Further, since the pop-up window PU can be displayed regardless of the size of the blank area or the like, the display area of the window WD can be effectively used.
また配信サーバ2が生成するウェブページデータにおける第2処理では、ページ領域における、第2ウインドウ(ポップアップウインドウPU)の表示によって提示情報の重畳が生ずる領域の解析に基づいて、第2ウインドウ(ポップアップウインドウPU)の表示位置を選択することが考えられる(図12、図14のS301)。
これにより、商品閲覧画面をスクロールする際に、ウインドウWDにポップアップ表示されるポップアップウインドウPUのスクロール進行方法における位置が、表示される商品閲覧画面に応じて変化することがなくなる。
従って、画面のスクロール等に応じて、ウインドウWD上でポップアップウインドウPUの表示位置が度々変わることがなくなるため、ユーザに違和感を感じさせないポップアップウインドウPUの表示態様を実現するとともに、ウインドウWD上における定位置にポップアップウインドウPUが表示されることによるユーザの視認性を向上させることができる。
In the second processing of the web page data generated by the distribution server 2, the second window (pop-up window PU) is analyzed based on the analysis of the region where the presentation information is superimposed by the display of the second window (pop-up window PU) in the page area. It is conceivable to select the display position of (PU) (S301 in FIGS. 12 and 14).
Thereby, when scrolling the product browsing screen, the position of the pop-up window PU displayed in the window WD in the scrolling progress method does not change according to the displayed product browsing screen.
Therefore, the display position of the pop-up window PU does not frequently change on the window WD according to the scrolling of the screen or the like, so that the display mode of the pop-up window PU that does not make the user feel uncomfortable is realized, and the fixed position on the window WD is realized. It is possible to improve the user's visibility by displaying the pop-up window PU at the position.
また配信サーバ2が生成するウェブページデータにおける第2処理では、前記ページ領域を、スクロール進行方向に複数の配置列(wh1〜wh3)に区分し、複数の配置列のうちで、コンテンツ表示領域の面積割合が最も低い配置列に含まれる位置を第2ウインドウ(ポップアップウインドウPU)の表示位置として選択することが考えられる(図13のS405)。
これにより、ウインドウWDにポップアップ表示されるポップアップウインドウPUのスクロール進行方法における位置を固定しても、コンテンツ表示領域にポップアップウインドウPUが重なることが少なくなる。従って、スクロール中やスクロール停止後の商品閲覧画面のユーザの視認性の向上を図ることができる。
In the second processing of the web page data generated by the distribution server 2, the page area is divided into a plurality of arrangement rows (wh1 to wh3) in the scrolling direction, and among the plurality of arrangement rows, It is conceivable to select a position included in the arrangement row having the lowest area ratio as a display position of the second window (pop-up window PU) (S405 in FIG. 13).
Thereby, even if the position of the popup window PU displayed in the window WD in the scrolling progress method is fixed, the popup window PU is less likely to overlap the content display area. Therefore, it is possible to improve the visibility of the user on the product browsing screen during or after scrolling.
また配信サーバ2が生成するウェブページデータにおける第3処理では、ページ領域のスクロールの開始に応じて、第2ウインドウのスクロール追従表示を開始させる(図12のS303)。
これにより、スクロールに応じて変化するウインドウWDに表示された商品閲覧画面において、ポップアップ表示されたポップアップウインドウPUの移動位置が視覚的に確認しやすい。従って、ユーザがポップアップウインドウPUに表示される関連情報の閲覧やリンクの操作を行う際に、容易にポップアップウインドウPUを視認することができ、ユーザの利便性の向上を図ることができる。
In the third processing of the web page data generated by the distribution server 2, the scroll following display of the second window is started in response to the start of the scroll of the page area (S303 in FIG. 12).
This makes it easy to visually confirm the moving position of the pop-up window PU displayed in the pop-up window on the product browsing screen displayed in the window WD that changes according to the scroll. Therefore, when the user browses related information displayed on the pop-up window PU or operates a link, the pop-up window PU can be easily visually recognized, and user convenience can be improved.
また、第2ウインドウ(ポップアップウインドウPU)がコンテンツ表示領域に重なる場合、第2ウインドウ(ポップアップウインドウPU)の重なるコンテンツ表示領域が視認可能となるように第2ウインドウ(ポップアップウインドウPU)を半透明表示とすることが考えられる(図12、図14のS310)。
ユーザにとっては、ポップアップウインドウPUがコンテンツ表示領域に重なることで、商品の内容が把握できなくなることは避けたいが、ポップアップウインドウPUが表示されないことで、ポップアップウインドウPUが有する機能や情報を商品閲覧画面から探すことは、それ以上に手間である。また、コンテンツ表示領域の閲覧にあたっては、多少見づらい部分があってもコンテンツの内容を把握することができればそれでよい場合もある。
そこで、コンテンツ表示領域に重なるポップアップウインドウPUを半透明状態とすることで、ポップアップウインドウPUがコンテンツ表示領域に重なる場合であっても、コンテンツ表示領域のコンテンツ内容を把握可能な視認性を確保しつつ、ポップアップウインドウPUの位置を把握することができる。
Further, when the second window (pop-up window PU) overlaps the content display area, the second window (pop-up window PU) is translucently displayed so that the overlapping content display area of the second window (pop-up window PU) becomes visible. (S310 in FIGS. 12 and 14).
For the user, it is desirable to avoid that the content of the product cannot be grasped because the pop-up window PU overlaps the content display area. However, since the pop-up window PU is not displayed, the functions and information of the pop-up window PU are displayed on the product browsing screen. Searching from is more troublesome. In addition, when browsing the content display area, there may be a case where it is sufficient if the content of the content can be grasped even if there is a part that is hard to see.
Therefore, by setting the pop-up window PU overlapping the content display area to be in a semi-transparent state, even when the pop-up window PU overlaps the content display area, it is possible to secure visibility in which the contents of the content display area can be grasped. , The position of the pop-up window PU can be grasped.
また第1ウインドウ(ウインドウWD)上のカーソルが第2ウインドウ(ポップアップウインドウPU)に接近した場合、第2ウインドウ(ポップアップウインドウPU)の半透明表示を解除することが考えられる(図14のS503)。
これにより、カーソルでポップアップウインドウPUをクリックする際に、ポップアップウインドウPUがコンテンツ表示領域等に重なる状態で表示される。
カーソルがポップアップウインドウPUに近づいているということは、ユーザがポップアップウインドウPUに表示されている機能等を操作しようと考えていると推測できる。こういった場合、ポップアップウインドウPUが半透明な状態であると、ユーザが選択する領域を視認しづらいこともある。
そのため、カーソルがポップアップウインドウPUに接近したことに応じて、ポップアップウインドウPUの透明状態を解除することで、ユーザの操作性を向上させることができる。
When the cursor on the first window (window WD) approaches the second window (pop-up window PU), the translucent display of the second window (pop-up window PU) may be canceled (S503 in FIG. 14). .
Thus, when the pop-up window PU is clicked with the cursor, the pop-up window PU is displayed in a state of overlapping the content display area or the like.
When the cursor is approaching the pop-up window PU, it can be assumed that the user intends to operate a function or the like displayed in the pop-up window PU. In such a case, if the pop-up window PU is in a semi-transparent state, it may be difficult for the user to visually recognize an area selected by the user.
Therefore, the operability of the user can be improved by releasing the transparent state of the popup window PU in response to the cursor approaching the popup window PU.
また配信サーバ2が生成するウェブページデータにおける第2処理では、第2ウインドウ(ポップアップウインドウPU)の表示位置とするコンテンツ非表示領域(ブランク領域BK)が存在しないときは、コンテンツ表示領域に表示されているコンテンツの視認性を損なわない位置を第2ウインドウ(ポップアップウインドウPU)の表示位置として選択することが考えられる(図9)。
これにより、ポップアップウインドウPUを表示できる大きさのブランク領域BKがないなどの場合であっても、例えばコンテンツ画像の背景の模様などの提供するコンテンツの視認性を損なわない部分にポップアップウインドウPUを表示する。
商品閲覧画面等のコンテンツ表示画面には、必ずしも空白領域が十分設けられているとは限らない。そこで、背景画面領域等、具体的なコンテンツの情報が記載されていない部分等を自動的に選択して表示することでユーザの利便性を向上させることができる。
In the second processing of the web page data generated by the distribution server 2, when there is no content non-display area (blank area BK) to be displayed in the second window (pop-up window PU), the content is displayed in the content display area. It is conceivable to select a position that does not impair the visibility of the content being displayed as the display position of the second window (pop-up window PU) (FIG. 9).
Thus, even when there is no blank area BK large enough to display the pop-up window PU, the pop-up window PU is displayed in a portion where the visibility of the provided content such as the background pattern of the content image is not impaired. I do.
The content display screen such as the product browsing screen does not always have a sufficient blank area. Therefore, it is possible to improve the convenience for the user by automatically selecting and displaying a part or the like where specific content information is not described, such as a background screen area.
また第1ウインドウ(ウインドウWD)に表示されているページ領域に、第2ウインドウ(ポップアップウインドウPU)で代替可能な領域(優先表示領域PR)が含まれている期間は、第2ウインドウ(ポップアップウインドウPU)の表示を行わないことが考えられる(図7のS107、図12、図14のS311)。
例えば図8に示すように、ウインドウWDに表示される商品閲覧画面上に優先表示領域PRが表示されている場合、ポップアップウインドウPUを表示しなくても購入手続き画面へのリンク(ご購入手続きへ)や購入リスト追加等の機能を発揮するための操作領域(商品かごに追加)は、商品閲覧画面に表示されている状態である。
このような場合に、商品閲覧画面上に当該ポップアップウインドウPUを表示すると、同じ機能を有する領域が複数依存することになり、却って、ユーザの混乱を招くおそれがある。
そこで、例えばポップアップウインドウPUがコンテンツ購入画面へのリンクを表示するものだった場合、ウインドウWDにポップアップウインドウPUと同じ機能を有する情報が表示されている場合は、ポップアップウインドウPUを表示しないことで、ウインドウWDの表示領域を有効活用し、ユーザの快適な閲覧を実現することができる。
While the page area displayed in the first window (window WD) includes an area (priority display area PR) that can be replaced by the second window (pop-up window PU), the second window (pop-up window PU) is used. PU) may not be displayed (S107 in FIG. 7, S311 in FIGS. 12 and 14).
For example, as shown in FIG. 8, when the priority display area PR is displayed on the product browsing screen displayed in the window WD, a link to the purchase procedure screen (to the purchase procedure) without displaying the pop-up window PU. ) And an operation area (added to a product basket) for exhibiting functions such as addition of a purchase list are displayed on the product browsing screen.
In such a case, if the pop-up window PU is displayed on the product browsing screen, a plurality of areas having the same function depend on each other, which may cause confusion for the user.
Therefore, for example, when the pop-up window PU displays a link to the content purchase screen, and when information having the same function as the pop-up window PU is displayed in the window WD, the pop-up window PU is not displayed. It is possible to effectively utilize the display area of the window WD and realize comfortable browsing for the user.
なお、本実施の形態においては、コンテンツの一例として商品を用い、提示された当該商品の閲覧画面の表示制御システムとして説明したが、本発明のコンテンツは商品閲覧画面の表示制御に限られることはなく、例えばニュースやレビュー、ブログ、レシピなどが様々なウェブページ画面における表示制御システムとして用いることが可能である。もちろん、ウェブサイトの種別によって様々なコンテンツを採用することが可能である。   In the present embodiment, a product is used as an example of the content, and the display control system of the browse screen of the presented product has been described. However, the content of the present invention is not limited to the display control of the product browse screen. For example, news, reviews, blogs, recipes, and the like can be used as a display control system on various web page screens. Of course, various contents can be adopted depending on the type of website.
また、本実施の形態について説明した処理は、それぞれが独立した処理であってもよいし、それぞれの処理を組み合わせて行うことも可能である。実施の形態の組み合わせとしては様々な態様が考えられる。   Further, the processes described in the present embodiment may be independent processes, or may be performed in combination. Various aspects can be considered as a combination of the embodiments.
<11.プログラム及び記憶媒体>
以上、本実施の形態の情報処理装置の実施の形態としての配信サーバ2を説明してきたが、実施の形態のプログラムは、配信サーバ2における各処理を情報処理装置(CPUなど)に実行させるプログラムである。
<11. Program and Storage Medium>
The distribution server 2 as an embodiment of the information processing apparatus according to the present embodiment has been described above. The program according to the embodiment is a program for causing an information processing apparatus (such as a CPU) to execute each process in the distribution server 2. It is.
実施の形態のプログラムは、第1ウインドウに、コンテンツ表示画像を有するページ領域を表示する第1処理と、前記ページ領域における前記コンテンツ表示領域の配置に応じて第2ウインドウの表示位置を選択する第2処理と、前記第1ウインドウに表示された前記ページ領域上の前記第2処理で選択された表示位置に、前記第2ウインドウを表示させる第3処理と、を端末装置に実行させるプログラムを含むウェブページデータを生成するウェブページデータ生成機能と、前記生成したウェブページデータを前記端末装置に送信し、提示させる処理を行う制御機能と、を情報処理装置に実行させるものである。
即ちこのプログラムは、配信サーバ2に対して図4で説明した各ステップの処理を実行させるプログラムである。
A program according to an embodiment includes a first process for displaying a page area having a content display image in a first window, and a second process for selecting a display position of a second window in accordance with an arrangement of the content display area in the page area. A program for causing a terminal device to execute a second process and a third process of displaying the second window at a display position selected in the second process on the page area displayed in the first window. The information processing apparatus is configured to execute a web page data generation function of generating web page data and a control function of transmitting the generated web page data to the terminal device and performing a process of presenting the web page data.
That is, this program is a program that causes the distribution server 2 to execute the processing of each step described in FIG.
また実施の形態のプログラムは、第1処理、第2処理、及び第3処理の各処理をユーザ端末1の情報処理装置(CPUなど)に実行させるプログラムとすることもできる。即ち、第1ウインドウに、コンテンツ表示画像を有するページ領域を表示する第1処理と、前記ページ領域における前記コンテンツ表示領域の配置に応じて第2ウインドウの表示位置を選択する第2処理と、前記第1ウインドウに表示された前記ページ領域上の前記第2処理で選択された表示位置に、前記第2ウインドウを表示させる第3処理と、を端末装置に実行させることができる。
このようなプログラムをアプリケーションプログラムとしてユーザ端末1にインストールされるようにし、ユーザ端末1において上述の処理が実行されるようにしてもよい。即ち、実施の形態の配信サーバ2による例えばウェブページデータ生成部が生成したウェブページデータに含まれるプログラムでの処理を、ユーザ端末1にインストールされたアプリケーションプログラムにより実行するようにする。これにより、配信サーバ2との通信を介さずに、ウインドウWDに表示されるコンテンツ表示領域の配置を加味したポップアップ表示をユーザ端末上で実現できる。その場合、ユーザ端末1が請求項14でいう情報処理装置に該当することになる。
このプログラムは、ユーザ端末1に対して図7,図9,図12〜図14で説明した各ステップの処理を実行させるプログラムである。
Further, the program according to the embodiment may be a program that causes an information processing device (such as a CPU) of the user terminal 1 to execute the first process, the second process, and the third process. That is, a first process of displaying a page area having a content display image in a first window, a second process of selecting a display position of a second window according to an arrangement of the content display area in the page area, The terminal device can execute a third process of displaying the second window at a display position selected in the second process on the page area displayed in the first window.
Such a program may be installed in the user terminal 1 as an application program, and the above-described processing may be executed in the user terminal 1. That is, the processing by the distribution server 2 according to the embodiment, which is performed by the program included in the web page data generated by the web page data generation unit, is executed by the application program installed in the user terminal 1. Thereby, a pop-up display can be realized on the user terminal in consideration of the arrangement of the content display area displayed in the window WD without communication with the distribution server 2. In that case, the user terminal 1 corresponds to the information processing apparatus according to claim 14.
This program is a program that causes the user terminal 1 to execute the processing of each step described with reference to FIGS. 7, 9, and 12 to 14.
このようなプログラムにより、配信サーバ2としての情報処理装置又はユーザ端末1としての情報処理装置を実現できる。
そしてこのようなプログラムはコンピュータ装置などの機器に内蔵されている記憶媒体としてのHDDや、CPUを有するマイクロコンピュータ内のROMなどに予め記憶しておくことができる。或いはまた、半導体メモリ、メモリカード、光ディスク、光磁気ディスク、磁気ディスクなどのリムーバブル記憶媒体に、一時的或いは永続的に格納(記憶)しておくことができる。またこのようなリムーバブル記憶媒体は、いわゆるパッケージソフトウェアとして提供することができる。
また、このようなプログラムは、リムーバブル記憶媒体からパーソナルコンピュータなどにインストールする他、ダウンロードサイトから、LAN、インターネットなどのネットワークによりダウンロードすることもできる。
With such a program, an information processing device as the distribution server 2 or an information processing device as the user terminal 1 can be realized.
Such a program can be stored in advance in an HDD as a storage medium built in a device such as a computer device, a ROM in a microcomputer having a CPU, or the like. Alternatively, it can be temporarily (or permanently) stored in a removable storage medium such as a semiconductor memory, a memory card, an optical disk, a magneto-optical disk, or a magnetic disk. Further, such a removable storage medium can be provided as so-called package software.
Such a program can be installed on a personal computer or the like from a removable storage medium, or can be downloaded from a download site via a network such as a LAN or the Internet.
N…ネットワーク、1…ユーザ端末、2…配信サーバ、21…制御部、22…ウェブページデータ生成部、CT…コンテンツ表示領域、PU…ポップアップウインドウ、WD…コンテンツウインドウ   N: Network, 1: User terminal, 2: Distribution server, 21: Control unit, 22: Web page data generation unit, CT: Content display area, PU: Pop-up window, WD: Content window

Claims (14)

  1. 第1ウインドウに、コンテンツ表示画像を有するページ領域を表示する第1処理と、
    前記ページ領域における前記コンテンツ表示画像の配置に応じて第2ウインドウの表示位置を選択する第2処理と、
    前記第1ウインドウに表示された前記ページ領域上の前記第2処理で選択された表示位置に、前記第2ウインドウを表示させる第3処理と、
    前記第2ウインドウが前記コンテンツ表示画像に重なる場合、前記第2ウインドウの重なる前記コンテンツ表示画像が視認可能となるように前記第2ウインドウを半透明表示とし、前記第1ウインドウ上のカーソルが前記第2ウインドウに接近した場合、前記第2ウインドウの半透明表示を解除する第4処理と、
    を端末装置に実行させるプログラムを含むウェブページデータを生成するウェブページデータ生成部と、
    前記生成したウェブページデータを前記端末装置に送信し、提示させる処理を行う制御部と、を備える
    情報処理装置。
    A first process of displaying a page area having a content display image in a first window;
    A second process of selecting a display position of a second window according to an arrangement of the content display image in the page area;
    A third process of displaying the second window at a display position selected in the second process on the page area displayed in the first window;
    When the second window overlaps the content display image, the second window is set to be translucent so that the content display image overlapping the second window is visible, and the cursor on the first window is moved to the second window. A fourth process of canceling the translucent display of the second window when approaching the two windows;
    A web page data generation unit that generates web page data including a program that causes the terminal device to execute
    An information processing apparatus, comprising: a control unit that transmits the generated web page data to the terminal device and performs a process of presenting the web page data to the terminal device.
  2. 第1ウインドウに、コンテンツ表示画像を有するページ領域を表示する第1処理と、
    前記ページ領域における前記コンテンツ表示画像の配置に応じて第2ウインドウの表示位置を選択する第2処理と、
    前記第1ウインドウに表示された前記ページ領域上の前記第2処理で選択された表示位置に、前記第2ウインドウを表示させる第3処理と、
    前記第1ウインドウに表示されている前記ページ領域に、前記第2ウインドウと代替可能な領域が含まれている期間は、前記第2ウインドウの表示を行わない第4処理と、
    を端末装置に実行させるプログラムを含むウェブページデータを生成するウェブページデータ生成部と、
    前記生成したウェブページデータを前記端末装置に送信し、提示させる処理を行う制御部と、を備える
    情報処理装置。
    A first process of displaying a page area having a content display image in a first window;
    A second process of selecting a display position of a second window according to an arrangement of the content display image in the page area;
    A third process of displaying the second window at a display position selected in the second process on the page area displayed in the first window;
    A fourth process in which the second window is not displayed during a period in which the page area displayed in the first window includes an area that can be replaced with the second window;
    A web page data generation unit that generates web page data including a program that causes the terminal device to execute
    An information processing apparatus, comprising: a control unit that transmits the generated web page data to the terminal device and performs a process of presenting the web page data to the terminal device.
  3. 前記第2処理では、前記ページ領域におけるコンテンツ非表示領域のうちで前記第2ウインドウの表示位置を選択する
    請求項1又は請求項2に記載の情報処理装置。
    Wherein in the second process, the information processing apparatus according to claim 1 or claim 2 for selecting the display position of the second window among the content-display area in the page area.
  4. 前記第2処理では、前記ページ領域における前記第2ウインドウの表示によって提示情報の重畳が生ずる領域の解析に基づいて、前記第2ウインドウの表示位置を選択する
    請求項1又は請求項2に記載の情報処理装置。
    Wherein in the second process, on the basis of the analysis of the area where superposed occurs in presentation information by a display of the second window in the page area, according to claim 1 or claim 2 for selecting the display position of the second window Information processing device.
  5. 前記第2処理では、前記ページ領域のスクロールの終了の際の表示範囲における前記コンテンツ非表示領域から、前記第2ウインドウの表示位置を選択する
    請求項3に記載の情報処理装置。
    In the second processing, a display position of the second window is selected from the content non-display area in the display range at the end of the scroll of the page area.
    The information processing device according to claim 3 .
  6. 前記第2ウインドウが前記第1ウインドウ上に表示されている場合、前記ページ領域のスクロールが開始されたことに応じて、前記第2ウインドウを非表示とする
    請求項1から請求項5の何れかに記載の情報処理装置。
    If the second window are displayed on the first window in response to the scrolling of the page area is started, any one of the preceding claims 1 to hide the second window An information processing apparatus according to claim 1.
  7. 前記第2処理で選択した前記第2ウインドウの表示位置の領域の大きさに合わせて、前記第3処理で表示する前記第2ウインドウの大きさが可変とされる
    請求項1から請求項6の何れかに記載の情報処理装置。
    7. The size of the second window displayed in the third process is variable according to the size of the display position area of the second window selected in the second process. 8 . An information processing device according to any one of the above.
  8. 前記第2処理では、前記ページ領域をスクロール進行方向に複数の配置列に区分し、前記複数の配置列のうちで、前記コンテンツ表示画像の面積割合が最も低い配置列に含まれる位置を前記第2ウインドウの表示位置として選択する
    請求項4に記載の情報処理装置。
    In the second process, the page area is divided into a plurality of arrangement rows in a scrolling direction, and among the plurality of arrangement rows, a position included in the arrangement row having the smallest area ratio of the content display image is determined as the second position. Select as the display position of two windows
    The information processing device according to claim 4 .
  9. 前記第3処理では、前記ページ領域のスクロールの開始に応じて、前記第2ウインドウのスクロール追従表示を開始させる
    請求項4又は請求項8に記載の情報処理装置。
    In the third process, a scroll following display of the second window is started according to a start of scrolling of the page area.
    An information processing apparatus according to claim 4 or claim 8 .
  10. 前記第2処理では、前記第2ウインドウの表示位置とする前記コンテンツ非表示領域が存在しないときは、前記コンテンツ表示画像に表示されているコンテンツの視認性を損なわない位置を前記第2ウインドウの表示位置として選択する
    請求項3又は請求項5に記載の情報処理装置。
    In the second processing, when the content non-display area to be the display position of the second window does not exist, a position that does not impair the visibility of the content displayed in the content display image is displayed in the second window. Select as position
    The information processing apparatus according to claim 3 or claim 5 .
  11. 第1ウインドウに、コンテンツ表示画像を有するページ領域を表示する第1処理と、前記ページ領域における前記コンテンツ表示画像の配置に応じて第2ウインドウの表示位置を選択する第2処理と、前記第1ウインドウに表示された前記ページ領域上の前記第2処理で選択された表示位置に、前記第2ウインドウを表示させる第3処理と、前記第2ウインドウが前記コンテンツ表示画像に重なる場合、前記第2ウインドウの重なる前記コンテンツ表示画像が視認可能となるように前記第2ウインドウを半透明表示とし、前記第1ウインドウ上のカーソルが前記第2ウインドウに接近した場合、前記第2ウインドウの半透明表示を解除する第4処理と、を端末装置に実行させるプログラムを含むウェブページデータを生成するウェブページデータ生成ステップと、
    前記生成したウェブページデータを前記端末装置に送信し、提示させる処理を行う制御ステップと、
    を情報処理装置が実行する情報処理方法。
    A first process of displaying a page region having a content display image in a first window, a second process of selecting a display position of a second window according to an arrangement of the content display image in the page region, A third process of displaying the second window at a display position selected in the second process on the page area displayed in the window; and a second process in which the second window overlaps the content display image. The second window is translucently displayed so that the content display image overlapping the window can be visually recognized. When the cursor on the first window approaches the second window, the translucent display of the second window is displayed. webpage de that generates web page data including the program to be executed and a fourth process for releasing, to the terminal apparatus And the data generating step,
    A control step of transmitting the generated web page data to the terminal device and performing a process of presenting the web page data,
    Information processing method in which the information processing apparatus executes the processing.
  12. 第1ウインドウに、コンテンツ表示画像を有するページ領域を表示する第1処理と、前記ページ領域における前記コンテンツ表示画像の配置に応じて第2ウインドウの表示位置を選択する第2処理と、前記第1ウインドウに表示された前記ページ領域上の前記第2処理で選択された表示位置に、前記第2ウインドウを表示させる第3処理と、前記第1ウインドウに表示されている前記ページ領域に、前記第2ウインドウと代替可能な領域が含まれている期間は、前記第2ウインドウの表示を行わない第4処理と、を端末装置に実行させるプログラムを含むウェブページデータを生成するウェブページデータ生成ステップと、
    前記生成したウェブページデータを前記端末装置に送信し、提示させる処理を行う制御ステップと、
    を情報処理装置が実行する情報処理方法。
    A first process of displaying a page region having a content display image in a first window, a second process of selecting a display position of a second window according to an arrangement of the content display image in the page region, A third process for displaying the second window at the display position selected in the second process on the page area displayed in the window, and a third process for displaying the second window in the page area displayed in the first window. A web page data generating step of generating web page data including a program for causing a terminal device to execute a fourth process of not displaying the second window during a period in which the area that can be replaced with two windows is included ; ,
    A control step of transmitting the generated web page data to the terminal device and performing a process of presenting the web page data,
    Information processing method in which the information processing apparatus executes the processing.
  13. 第1ウインドウに、コンテンツ表示画像を有するページ領域を表示する第1処理と、前記ページ領域における前記コンテンツ表示画像の配置に応じて第2ウインドウの表示位置を選択する第2処理と、前記第1ウインドウに表示された前記ページ領域上の前記第2処理で選択された表示位置に、前記第2ウインドウを表示させる第3処理と、前記第2ウインドウが前記コンテンツ表示画像に重なる場合、前記第2ウインドウの重なる前記コンテンツ表示画像が視認可能となるように前記第2ウインドウを半透明表示とし、前記第1ウインドウ上のカーソルが前記第2ウインドウに接近した場合、前記第2ウインドウの半透明表示を解除する第4処理と、
    を情報処理装置に実行させるプログラム。
    A first process of displaying a page region having a content display image in a first window, a second process of selecting a display position of a second window according to an arrangement of the content display image in the page region, A third process of displaying the second window at the display position selected in the second process on the page area displayed in the window; and a second process in which the second window overlaps the content display image. The second window is translucently displayed so that the content display image overlapping the window can be visually recognized. When the cursor on the first window approaches the second window, the translucent display of the second window is displayed. A fourth processing to cancel,
    That causes an information processing apparatus to execute the process.
  14. 第1ウインドウに、コンテンツ表示画像を有するページ領域を表示する第1処理と、前記ページ領域における前記コンテンツ表示画像の配置に応じて第2ウインドウの表示位置を選択する第2処理と、前記第1ウインドウに表示された前記ページ領域上の前記第2処理で選択された表示位置に、前記第2ウインドウを表示させる第3処理と、前記第1ウインドウに表示されている前記ページ領域に、前記第2ウインドウと代替可能な領域が含まれている期間は、前記第2ウインドウの表示を行わない第4処理と、
    を情報処理装置に実行させるプログラム。
    A first process of displaying a page region having a content display image in a first window, a second process of selecting a display position of a second window according to an arrangement of the content display image in the page region, A third process for displaying the second window at a display position selected in the second process on the page region displayed in the window, and a third process for displaying the second window in the page region displayed in the first window. A fourth process in which the second window is not displayed during a period in which an area that can be replaced with the second window is included;
    That causes an information processing apparatus to execute the process.
JP2018186762A 2018-10-01 2018-10-01 Information processing apparatus, information processing method, and program Active JP6670904B1 (en)

Priority Applications (1)

Application Number Priority Date Filing Date Title
JP2018186762A JP6670904B1 (en) 2018-10-01 2018-10-01 Information processing apparatus, information processing method, and program

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
JP2018186762A JP6670904B1 (en) 2018-10-01 2018-10-01 Information processing apparatus, information processing method, and program

Publications (2)

Publication Number Publication Date
JP6670904B1 true JP6670904B1 (en) 2020-03-25
JP2020057155A JP2020057155A (en) 2020-04-09

Family

ID=70000845

Family Applications (1)

Application Number Title Priority Date Filing Date
JP2018186762A Active JP6670904B1 (en) 2018-10-01 2018-10-01 Information processing apparatus, information processing method, and program

Country Status (1)

Country Link
JP (1) JP6670904B1 (en)

Also Published As

Publication number Publication date
JP2020057155A (en) 2020-04-09

Similar Documents

Publication Publication Date Title
US9563327B1 (en) Intelligent adjustment of graphical user interfaces
US10725645B2 (en) Information processing device for controlling display of web pages using main display area and sub display area
JP5580924B1 (en) Distribution device, terminal device, distribution method, and distribution program
JP2017107436A (en) Program, device, and method for displaying information, and delivery device
JP5318968B2 (en) Object control method, object control program, and web server
JP6670904B1 (en) Information processing apparatus, information processing method, and program
JP5668180B1 (en) Information processing device
US20140096090A1 (en) Information and action bar for a user interface
JP4958853B2 (en) Product search server, product search method, program, and product search system
JP5956706B1 (en) Information processing system, information processing apparatus, information processing method, and program
JP5956707B1 (en) Information processing system, information processing apparatus, information processing method, and program
JP2019164721A (en) Information display program, information display device, information display method, and delivery device
KR20140027823A (en) System and method for providing webpage
JP6203140B2 (en) Display program, terminal device, display method, and distribution device
JP2017129999A (en) Information display program, information display device, information display method, and delivery device
JPWO2019176111A1 (en) Information processing apparatus, information processing method, program, storage medium
JP6783598B2 (en) Display control program, display control method, and terminal device
JP5795137B1 (en) Information processing apparatus, information processing method, program, and storage medium
JP5727684B1 (en) Browsing device, display control method, recording medium, and program
JP6695833B2 (en) Information display program, information display device, information display method, and distribution device
JP6568282B1 (en) Information display program, information display device, information display method, and distribution device
JP2019028799A (en) Information display program, information display device, information display method, and distribution device
JP6158903B2 (en) Information display program, information display device, information display method, and distribution device
US20190317971A1 (en) Web page distributing server, web page distributing method, and storage medium
JP5923141B2 (en) Distribution device, terminal device, distribution method, distribution program, and server device

Legal Events

Date Code Title Description
A621 Written request for application examination

Free format text: JAPANESE INTERMEDIATE CODE: A621

Effective date: 20181005

A131 Notification of reasons for refusal

Free format text: JAPANESE INTERMEDIATE CODE: A131

Effective date: 20191210

A521 Written amendment

Free format text: JAPANESE INTERMEDIATE CODE: A523

Effective date: 20200123

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: 20200204

A61 First payment of annual fees (during grant procedure)

Free format text: JAPANESE INTERMEDIATE CODE: A61

Effective date: 20200302

R150 Certificate of patent or registration of utility model

Ref document number: 6670904

Country of ref document: JP

Free format text: JAPANESE INTERMEDIATE CODE: R150

S533 Written request for registration of change of name

Free format text: JAPANESE INTERMEDIATE CODE: R313533