JP4964173B2

JP4964173B2 - Display control method and program

Info

Publication number: JP4964173B2
Application number: JP2008052153A
Authority: JP
Inventors: 美宇筒井
Original assignee: Yahoo Japan Corp
Current assignee: Yahoo Japan Corp
Priority date: 2008-03-03
Filing date: 2008-03-03
Publication date: 2012-06-27
Anticipated expiration: 2028-03-03
Also published as: JP2009211282A

Description

本発明は、表示装置に、複数のコンテンツを表示するときの表示制御方法及びプログラムに関する。 The present invention relates to a display control method and a program for displaying a plurality of contents on a display device.

従来、コンピュータ、携帯電話、ＴＶ、ビデオカメラ等、身近な電子機器の操作手段として、グラフィカルユーザインターフェース（ＧＵＩ：Graphical User Interface）が採用されている。ＧＵＩとは、グラフィックを多用した表示画面によりユーザに情報を提供するとともに、大半の操作をマウス等のポインティングデバイスによって直接的に行うことができるユーザインターフェースである。
近年では、デザイン性だけでなく、電子機器の高機能化に対応できる操作性に優れたＧＵＩが要求されている。 2. Description of the Related Art Conventionally, a graphical user interface (GUI) has been adopted as an operation unit for familiar electronic devices such as a computer, a mobile phone, a TV, and a video camera. The GUI is a user interface that provides information to the user through a display screen that uses a lot of graphics, and can perform most operations directly with a pointing device such as a mouse.
In recent years, there is a demand for a GUI that is excellent not only in design but also in operability that can cope with higher functionality of electronic devices.

例えば、コンピュータの分野においては、起動したアプリケーションの作業画面やコンテンツ（例えば、ウェブページ）を表示するウィンドウ、ファイルやアプリケーションなどのオブジェクトをシンボル化したアイコン、テキストや画像による選択肢をリスト表示するメニュー、マウス操作（クリック）によって特定の処理を実行させるボタン等の要素により構成されたＧＵＩが利用されている。また、複数のアプリケーションの作業画面やコンテンツをそれぞれ別のウィンドウとして同時に表示することをマルチウィンドウといい、ユーザはマウス操作により１つのウィンドウをアクティブにすることにより所望のアプリケーションを操作可能としたり、所望のコンテンツを表示したりすることができる。
このマルチウィンドウ環境において、ユーザは、ウィンドウ内でマウス操作を行うか、現在起動しているアプリケーション一覧（例えば、ｗｉｎｄｏｗｓ（登録商標）のタスクバー、ＭａｃＯＳＸのＤｏｃｋ）に配置されたボタンをマウス操作することにより、所望のウィンドウをアクティブにすることができる。 For example, in the field of computers, a window for displaying a work screen or content (for example, a web page) of an activated application, an icon symbolizing an object such as a file or an application, a menu for displaying a list of options based on text or images, A GUI configured by elements such as buttons for executing specific processing by mouse operation (clicking) is used. Displaying the work screens and contents of multiple applications at the same time as separate windows is called multi-window, and the user can operate a desired application by activating one window by operating the mouse. Can be displayed.
In this multi-window environment, the user performs a mouse operation in the window or operates a button arranged on a list of currently activated applications (for example, a task bar of Windows (registered trademark), Dock of Mac OSX). Thus, a desired window can be activated.

一方で、アプリケーションによっては、同一ウィンドウ内で複数のコンテンツを表示できるものがある。例えば、特許文献１には、タブを用いて１つのウィンドウ内で複数のコンテンツを表示することができるタブブラウザに関する技術が開示されている。
このタブブラウザによれば、タブ操作（タブをマウスでクリックすること）という簡単な操作により、新規にウィンドウを開くことなく表示するコンテンツを切り換えることができるので、画面に複数のウィンドウが散乱してウィンドウ管理が煩雑になるのを回避できる。
特許第３７８９４６６号公報 On the other hand, some applications can display a plurality of contents in the same window. For example, Patent Document 1 discloses a technology related to a tab browser that can display a plurality of contents in one window using tabs.
According to this tab browser, the content to be displayed can be switched without opening a new window by a simple operation called tab operation (clicking on the tab with the mouse), so that multiple windows are scattered on the screen. It is possible to avoid complicated window management.
Japanese Patent No. 3789466

上述したマルチウィンドウ環境において、複数のコンテンツを同時に表示する場合、ウィンドウの大きさが比較的大きいとウィンドウ同士が重なり合ってしまい、それぞれを確実に視認することが困難になるという問題がある。また、ウィンドウ同士が重なり合わないように、それぞれのウィンドウの大きさを調整して並べて表示させる場合、ウィンドウのサイズ調整という煩雑な操作が必要となる上、それぞれのコンテンツが最適な状態で表示されなくなる虞がある。つまり、表示すべきコンテンツに対してウィンドウが小さすぎるために、縦／横のスクロールバーを操作する必要が生じる場合がある。 In the above-described multi-window environment, when a plurality of contents are displayed at the same time, there is a problem that if the windows are relatively large, the windows overlap each other, and it is difficult to reliably recognize each of them. In addition, when adjusting the size of each window so that the windows do not overlap each other and displaying them side by side, a complicated operation of adjusting the size of the windows is required, and each content is displayed in an optimal state. There is a risk of disappearing. In other words, since the window is too small for the content to be displayed, it may be necessary to operate the vertical / horizontal scroll bar.

また、特許文献１に記載のタブブラウザでは、タブを操作して表示するコンテンツを切り換えるとき、タブ操作によりアクティブ化されたコンテンツが、これまでアクティブとなっていたコンテンツに代わって、ウィンドウ全体に瞬時に表示されることとなる。したがって、特許文献１に記載のタブブラウザを利用しても、複数のコンテンツを同時に表示するためには、やはり、従来と同様に複数のウィンドウを開く必要がある。
特に、表示しようとする複数のコンテンツが関連する場合（例えば、メインコンテンツとこれに付随するサブコンテンツがある場合）には、画面上に同時に表示させることが要求されるが、従来のウェブブラウザ又はその他のアプリケーションにおけるＧＵＩでは容易に対応することができない。 Further, in the tab browser described in Patent Document 1, when the contents to be displayed are switched by operating the tab, the content activated by the tab operation is instantaneously applied to the entire window instead of the previously active content. Will be displayed. Therefore, even if the tab browser described in Patent Document 1 is used, in order to display a plurality of contents at the same time, it is necessary to open a plurality of windows as in the prior art.
In particular, when a plurality of contents to be displayed are related (for example, when there is main content and sub-contents accompanying it), it is required to be displayed on the screen at the same time, but a conventional web browser or other It is not possible to easily cope with the GUI in the application.

本発明は、関連する複数のコンテンツを簡単な操作により同時に画面上に表示できるとともに、表示態様を切り換える際、視覚的な興趣を与えることができる表示制御方法及びプログラムを提供することを目的とする。 An object of the present invention is to provide a display control method and program capable of simultaneously displaying a plurality of related contents on a screen by a simple operation and giving a visual interest when switching display modes. .

上記目的を達成するため、請求項１に記載の発明は、
メインコンテンツとこれに付随するサブコンテンツを、画面に表示する表示制御方法であって、
コンテンツ表示領域を、
前記メインコンテンツを表示するメインフレームと、
１辺にタブを有し、前記サブコンテンツを表示するサブフレームと、で構成し、
前記メインフレームのフレーム外に前記サブフレームのタブだけが現出するように、前記サブフレームに前記メインフレームを重畳させた第１態様で表示し、
前記第１態様で表示された状態において操作手段により前記タブが操作されると、前記メインフレームの前記タブが現出していた側に前記サブフレームを連結した第２態様で表示し、
前記第２態様で表示された状態において前記タブが操作されると、前記第１態様に遷移して表示し、
前記第２態様で、前記サブフレームにおいて前記タブが設置されている辺と対向する辺と、前記メインフレームにおいて当該タブが現出していた側の辺と、が一致するようにして当該メインフレーム及び当該サブフレームを連結して表示し、
前記メインフレーム及び前記サブフレームをウェブブラウザ内の表示領域の一部に表示し、
前記第１態様から前記第２態様に表示態様を遷移する際、前記ウェブブラウザ内において、前記第１態様で前記タブの現出方向における前記メインフレームのフレーム外に表示されていた情報を、前記第２態様で前記現出方向に前記サブフレームの分だけずらして表示し、
前記サブコンテンツが、内容の異なる複数のサブコンテンツで構成される場合、
前記サブフレームをタブ位置が異なる複数のサブフレームで構成し、
前記第１態様では、前記メインフレームのフレーム外に複数のタブが並んで現出するように表示し、
前記第２態様では、前記第１態様で表示された状態において操作されたタブに対応するサブフレームを、操作されていないタブに対応するサブフレームに重畳させた状態で、前記メインフレームに連結して表示し、
前記第２態様で表示された状態において、前記操作手段により最上位層のサブフレームのタブが操作された場合には、前記第２態様から前記第１態様に表示態様を遷移し、前記操作手段により前記最上位層以外のサブフレームのタブが操作された場合には、当該操作されたタブに対応するサブフレームを最上位層に切り換えて表示することを特徴とする。 In order to achieve the above object, the invention described in claim 1
A display control method for displaying main content and accompanying sub-contents on a screen,
The content display area
A main frame for displaying the main content;
A sub-frame having a tab on one side and displaying the sub-content,
Displayed in a first mode in which the main frame is superimposed on the subframe so that only the subframe tab appears outside the mainframe frame,
When the tab is operated by operating means in the state displayed in the first mode, the subframe is displayed in the second mode connected to the side where the tab of the main frame has appeared,
When the tab is operated in the state displayed in the second mode, the transition to the first mode is displayed,
In the second aspect, the main frame and the side facing the side where the tab is installed in the subframe coincide with the side where the tab appears in the main frame. The subframes are connected and displayed,
Displaying the mainframe and the subframe in a part of a display area in a web browser;
When the display mode is changed from the first mode to the second mode, the information displayed outside the mainframe frame in the appearance direction of the tab in the first mode is displayed in the web browser. In the second aspect, the display direction is shifted by the amount corresponding to the subframe,
When the sub-content is composed of a plurality of sub-contents having different contents,
The subframe is composed of a plurality of subframes with different tab positions,
In the first aspect, a plurality of tabs are displayed so as to appear side by side outside the main frame,
In the second aspect, the subframe corresponding to the tab operated in the state displayed in the first aspect is connected to the main frame in a state where the subframe is superimposed on the subframe corresponding to the tab not operated. Display
In the state displayed in the second mode, when a tab of the uppermost subframe is operated by the operation unit, the display mode is changed from the second mode to the first mode, and the operation unit When a sub-frame tab other than the uppermost layer is operated, the sub-frame corresponding to the operated tab is switched to the uppermost layer and displayed.

請求項２に記載の発明は、請求項１に記載の表示制御方法において、
前記第１態様から前記第２態様に表示態様を遷移する際、前記メインフレームから前記タブが現出している方向に前記サブフレームが出現し、
前記第２態様から前記第１態様に表示態様を遷移する際、前記サブフレームが前記メインフレームの背面に収納されるように、
アニメーションにより前記サブフレームの表示を制御することを特徴とする。 The invention according to claim 2 is the display control method according to claim 1,
When the display mode is changed from the first mode to the second mode, the subframe appears in the direction in which the tab appears from the main frame,
When the display mode is changed from the second mode to the first mode, the subframe is stored on the back of the main frame.
The display of the subframe is controlled by animation.

請求項３に記載の発明は、
メインコンテンツとこれに付随するサブコンテンツを、コンピュータの画面に表示するためのプログラムであって、
前記コンピュータに、
コンテンツの表示領域を、前記メインコンテンツを表示するメインフレームと、１辺にタブを有し、前記サブコンテンツを表示するサブフレームと、で構成する機能と、
前記メインフレームのフレーム外に前記サブフレームのタブだけが現出するように、前記サブフレームに前記メインフレームを重畳させた第１態様で表示する機能と、
前記第１態様で表示された状態において操作手段により前記タブが操作されると、前記メインフレームの前記タブが現出していた側に前記サブフレームを連結した第２態様で表示する機能と、
前記第２態様で表示された状態において前記タブが操作されると、前記第１態様に遷移して表示する機能と、
前記第２態様で、前記サブフレームにおいて前記タブが設置されている辺と対向する辺と、前記メインフレームにおいて当該タブが現出していた側の辺と、が一致するようにして当該メインフレーム及び当該サブフレームを連結して表示する機能と、
前記メインフレーム及び前記サブフレームをウェブブラウザ内の表示領域の一部に表示し、前記第１態様から前記第２態様に表示態様を遷移する際、前記ウェブブラウザ内において、前記第１態様で前記タブの現出方向における前記メインフレームのフレーム外に表示されていた情報を、前記第２態様で前記現出方向に前記サブフレームの分だけずらして表示する機能と、
前記サブコンテンツが、内容の異なる複数のサブコンテンツで構成される場合、前記サブフレームをタブ位置が異なる複数のサブフレームで構成し、前記第１態様では、前記メインフレームのフレーム外に複数のタブが並んで現出するように表示し、前記第２態様では、前記第１態様で表示された状態において操作されたタブに対応するサブフレームを、操作されていないタブに対応するサブフレームに重畳させた状態で、前記メインフレームに連結して表示し、前記第２態様で表示された状態において、前記操作手段により最上位層のサブフレームのタブが操作された場合には、前記第２態様から前記第１態様に表示態様を遷移し、前記操作手段により前記最上位層以外のサブフレームのタブが操作された場合には、当該操作されたタブに対応するサブフレームを最上位層に切り換えて表示する機能と、
を実現させるためのプログラムである。 The invention according to claim 3
A program for displaying main content and accompanying sub-contents on a computer screen,
In the computer,
A function for configuring a content display area by a main frame for displaying the main content and a sub frame having a tab on one side and displaying the sub content;
A function of displaying in a first mode in which the main frame is superimposed on the subframe such that only the tab of the subframe appears outside the frame of the mainframe;
When the tab is operated by operating means in the state displayed in the first mode, a function of displaying in the second mode in which the subframe is connected to the side where the tab of the main frame has appeared;
When the tab is operated in the state displayed in the second aspect, a function to display a transition to the first aspect;
In the second aspect, the main frame and the side facing the side where the tab is installed in the subframe coincide with the side where the tab appears in the main frame. A function for connecting and displaying the subframes;
When the main frame and the sub-frame are displayed in a part of a display area in a web browser, and when the display mode is changed from the first mode to the second mode, the web browser has the first mode in the first mode. A function of displaying information displayed outside the main frame in the appearance direction of the tab by shifting by the amount of the subframe in the appearance direction in the second mode;
When the sub-content is composed of a plurality of sub-contents having different contents, the sub-frame is composed of a plurality of sub-frames having different tab positions, and in the first aspect, a plurality of tabs are disposed outside the main frame. Are displayed side by side, and in the second mode, the subframe corresponding to the tab operated in the state displayed in the first mode is superimposed on the subframe corresponding to the tab not operated. When the tab of the uppermost subframe is operated by the operation means in the state displayed in the second mode, the second mode is displayed. When the display mode is changed from the first mode to the first mode and a tab of a subframe other than the top layer is operated by the operating means, And displaying is switched to the uppermost layer of the sub-frame to respond,
It is a program for realizing.

本発明によれば、関連する複数のコンテンツをタブ操作という簡単な操作により同時に画面上に表示でき、メインコンテンツの内容表示を残したまま、必要に応じてサブコンテンツを表示できるようになる。また、表示態様を切り換える際、アニメーションによる表示制御を行うことで、ユーザに視覚的な興趣を与えることができる。 According to the present invention, a plurality of related contents can be simultaneously displayed on the screen by a simple operation such as a tab operation, and sub contents can be displayed as needed while leaving the main contents displayed. In addition, when the display mode is switched, visual interest can be given to the user by performing display control using animation.

以下、本発明の実施の形態を図面に基づいて説明する。
図１は、本実施形態に係るネットワーク構成について示す概略図である。
本実施形態では、サーバ１からクライアント２に、ネットワークＮを介してコンテンツ（例えば、ウェブページ等）を提供し、クライアント２においてコンテンツを利用する場合について示している。 Hereinafter, embodiments of the present invention will be described with reference to the drawings.
FIG. 1 is a schematic diagram showing a network configuration according to the present embodiment.
In the present embodiment, a case where content (for example, a web page) is provided from the server 1 to the client 2 via the network N and the content is used in the client 2 is shown.

図１に示すように、サーバ１には、通信ネットワークＮを介してクライアント２（例えば、パーソナルコンピュータ２ａ、携帯電話２ｂ等）が接続されている。
通信ネットワークＮは、インターネットや電気通信事業者等の電話回線網、携帯電話通信網等であり、当該通信ネットワークＮに接続するサーバ１とクライアント２の間を、データ通信可能に接続する。 As shown in FIG. 1, a client 2 (for example, a personal computer 2a, a mobile phone 2b, etc.) is connected to the server 1 via a communication network N.
The communication network N is a telephone network such as the Internet or a telecommunications carrier, a cellular phone communication network, and the like, and connects the server 1 and the client 2 connected to the communication network N so that data communication is possible.

このようなネットワークシステムにおいて、例えば、ユーザが、クライアント２でウェブブラウザを起動しＵＲＬを指定すると、クライアント２はこれを元に対応するコンテンツ（例えば、ＨＴＭＬファイル）を保有しているサーバ１をインターネット上で探して、コンテンツのデータを要求する。
一方、要求されたコンテンツを保有するサーバ１は、要求されたコンテンツをクライアント２に送信する。そして、クライアント２は、受信したコンテンツの内容を解析してウェブページ等を表示する。 In such a network system, for example, when a user activates a web browser on the client 2 and designates a URL, the client 2 sets the server 1 holding the corresponding content (for example, an HTML file) on the Internet. Search above and request content data.
On the other hand, the server 1 that holds the requested content transmits the requested content to the client 2. Then, the client 2 analyzes the content of the received content and displays a web page or the like.

図２は、サーバ１のハードウェア構成の概略を示すブロック図である。本実施形態におけるサーバ１は、例えば、楽曲コンテンツの配信サービスを提供するウェブサーバである。
図２に示すように、サーバ１は、制御部１１、通信部１２，データベース１３等を備えて構成され、各部はバスライン１５により電気的に接続されている。 FIG. 2 is a block diagram illustrating an outline of the hardware configuration of the server 1. The server 1 in this embodiment is, for example, a web server that provides a music content distribution service.
As shown in FIG. 2, the server 1 includes a control unit 11, a communication unit 12, a database 13, and the like, and each unit is electrically connected by a bus line 15.

制御部１１は、ＣＰＵ（Central Processing Unit）１１１、ＲＡＭ（Random Access Memory）１１２、ＲＯＭ（Read Only Memory）１１３で構成される。
ＣＰＵ１１１は、各種演算処理を行う他、各部の集中制御を行う。ＲＡＭ１１２は、ＣＰＵ１１１が演算処理を行うときのデータを一時的に記憶しておく作業領域を有する。ＲＯＭ１１３は、ＣＰＵ１１１が実行するオペレーティングシステム（ＯＳ）やサーバ用ソフトウェア、ウェブアプリケーション等のプログラムを記憶する。
通信部１２は、ＴＣＰ／ＩＰ等の通信プロトコルに従って処理を行い、ネットワークＮを介してクライアント２とデータの送受信を行う。
データベース１３には、例えば、ウェブページのデータ、楽曲コンテンツ、楽曲コンテンツのプレイリスト等が格納されている。 The control unit 11 includes a CPU (Central Processing Unit) 111, a RAM (Random Access Memory) 112, and a ROM (Read Only Memory) 113.
The CPU 111 performs various arithmetic processes and performs centralized control of each unit. The RAM 112 has a work area for temporarily storing data when the CPU 111 performs arithmetic processing. The ROM 113 stores programs such as an operating system (OS) executed by the CPU 111, server software, and web applications.
The communication unit 12 performs processing according to a communication protocol such as TCP / IP, and transmits / receives data to / from the client 2 via the network N.
The database 13 stores, for example, web page data, music content, a playlist of music content, and the like.

図４は、データベース１３に格納される楽曲テーブルの一構成例について示す説明図である。この楽曲テーブルは、データベース１３に格納されている楽曲コンテンツを管理するために利用される。
図４に示すように、楽曲テーブルには、楽曲コンテンツごとに一意の楽曲ＩＤが付与され、これに対応して、例えば、楽曲データのファイル名、タイトル名（楽曲名）、再生時間、アーティスト名、アルバム名、ジャンル、現在利用していりるユーザ等のデータが格納されている。
図４において、例えば楽曲ＩＤ“Ｍ００１”で特定される楽曲コンテンツは、アーティスト“ａａａ”が演奏（歌唱）した、タイトル“ＡＡＡ”、再生時間“４：００”、ジャンル“Ｊ−ＰＯＰ”の楽曲であり、アルバム“ＸＹＺ”に収録されている楽曲であることを示している。また、この楽曲コンテンツのファイル名は“ＡＡＡ．ｗｍａ”であることを示している。
また、楽曲ＩＤ“Ｍ００３”で特定される楽曲コンテンツは、ユーザＤによって現在再生されていることを示している。つまり、サーバ１がクライアント２に対して楽曲コンテンツを送信している間、このクライアント２のユーザを示す情報（例えば、ユーザ名）が楽曲テーブルに登録されてることとなる。
なお、楽曲コンテンツの実データ（例えば、ファイル名“ＡＡＡ．ｗｍａ”のデータ）は、同じデータベース１３に格納されてもよいし、別のデータベースに格納されるようにしてもよい。 FIG. 4 is an explanatory diagram showing a configuration example of a music table stored in the database 13. This music table is used for managing the music content stored in the database 13.
As shown in FIG. 4, the music table is assigned a unique music ID for each music content. Corresponding to this, for example, the file name of the music data, title name (music name), playback time, artist name In addition, data such as album name, genre, and currently used user are stored.
In FIG. 4, for example, the music content specified by the music ID “M001” is the music of the title “AAA”, the playback time “4:00”, and the genre “J-POP” performed (sung) by the artist “aaa”. This indicates that the music is recorded in the album “XYZ”. In addition, the file name of this music content is “AAA.wma”.
Further, it is indicated that the music content specified by the music ID “M003” is currently being reproduced by the user D. That is, while the music content is transmitted from the server 1 to the client 2, information (for example, user name) indicating the user of the client 2 is registered in the music table.
The actual music content data (for example, data of the file name “AAA.wma”) may be stored in the same database 13 or may be stored in another database.

ここで、サーバ１から配信された楽曲コンテンツをクライアント２で再生する方法としては、一般に、サーバ１が保有する楽曲コンテンツをクライアント２のハードディスク（後述する記憶部２２）に保存した上で再生するダウンロード再生と、サーバ１から配信された楽曲コンテンツの一部を受信した時点で再生を開始するストリーミング再生がある。本実施形態では、一例として、クライアント２においてストリーミング再生が行われる場合について説明する。この場合、楽曲テーブルに登録され、配信可能な楽曲コンテンツは、ストリーミングに対応したファイル形式とされる。 Here, as a method for reproducing the music content distributed from the server 1 by the client 2, generally, the music content held by the server 1 is stored in the hard disk (a storage unit 22 described later) of the client 2 and downloaded for reproduction. There are playback and streaming playback that starts playback when a part of the music content distributed from the server 1 is received. In the present embodiment, as an example, a case where streaming reproduction is performed in the client 2 will be described. In this case, the music content that is registered in the music table and can be distributed is in a file format that supports streaming.

図５は、データベース１３に格納されるプレイリストテーブルの一構成例について示す説明図である。
図５に示すように、プレイリストテーブルには、プレイリストごとに一意のプレイリストＩＤが付与され、これに対応して、例えば、プレイリストのタイトル名、当該プレイリストを構成する楽曲コンテンツのＩＤ（図４の楽曲ＩＤ）、アーティスト名、アルバム名、ジャンル等のデータが格納されている。
図５において、例えばプレイリストＩＤ“Ｐ００１”で特定されるプレイリストは、タイトルが“ｐＬｉｓｔ１”で、楽曲ＩＤ“Ｍ００１，Ｍ００２，Ｍ００３，・・”の楽曲コンテンツで構成されていることを示している。また、このプレイリスト“ｐＬｉｓｔ１”は、アーティスト“ａａａ”が演奏（歌唱）した、アルバム“ＸＹＺ”に収録されている楽曲コンテンツで構成され、そのジャンルは“Ｊ−ＰＯＰ”であることを示している。 FIG. 5 is an explanatory diagram showing a configuration example of the playlist table stored in the database 13.
As shown in FIG. 5, a unique playlist ID is assigned to each playlist in the playlist table. Correspondingly, for example, the title name of the playlist and the ID of the music content constituting the playlist are given. (Music ID in FIG. 4), artist name, album name, genre, and other data are stored.
In FIG. 5, for example, the playlist identified by the playlist ID “P001” has the title “pList1” and is composed of the music content with the music ID “M001, M002, M003,. Yes. The playlist “pList1” is composed of music contents recorded on the album “XYZ” performed (sung) by the artist “aaa”, and indicates that the genre is “J-POP”. Yes.

このプレイリストは、サーバ１によって、例えば、アルバムごとやアーティストごと等、所定の条件に従って楽曲テーブルから複数の楽曲コンテンツを抽出して作成される。また例えば、ユーザが楽曲テーブルからお気に入りの楽曲コンテンツを集めたプレイリストを作成し、データベース１３に登録できるようにしてもよい。この場合、プレイリストを作成したユーザに関する情報（例えば、ユーザＩＤ）や、プレイリストの特徴を示す情報を登録できるようにしてもよい。 The playlist is created by the server 1 by extracting a plurality of music contents from the music table according to predetermined conditions such as albums or artists. Further, for example, a user may create a playlist in which favorite music contents are collected from the music table and register the playlist in the database 13. In this case, information regarding the user who created the playlist (for example, user ID) and information indicating the characteristics of the playlist may be registered.

上述した楽曲テーブル又はプレイリストテーブルにおいて、タイトル、アーティスト、アルバム、ジャンルとして格納された情報は、クライアント２から送信される検索キーワードに適合する楽曲コンテンツ又はプレイリストを抽出するときに利用される。 Information stored as a title, artist, album, and genre in the music table or playlist table described above is used when music content or a playlist that matches the search keyword transmitted from the client 2 is extracted.

図２において、サーバ１のＣＰＵ１１１は、例えば、ＲＯＭ１１３に記憶されているサーバ用ソフトウェアを実行することにより、クライアント２からの要求に応じて、所定のコンテンツ（データベース１３に格納されているウェブページ等）を送信する。
また、ＲＯＭ１１３に記憶されているウェブアプリケーションプログラムを実行することにより、クライアント２から送信されたデータに基づく処理を行う。 In FIG. 2, the CPU 111 of the server 1 executes predetermined software (such as a web page stored in the database 13) in response to a request from the client 2 by executing server software stored in the ROM 113. ).
In addition, by executing a web application program stored in the ROM 113, processing based on data transmitted from the client 2 is performed.

例えば、クライアント２のウェブブラウザにおいて所望の楽曲コンテンツ又はプレイリストを検索するためのキーワード（検索キーワード）が入力され、送信されると、この検索キーワードに基づいて適合する楽曲コンテンツ又はプレイリストを抽出し、抽出結果（例えば、個々の楽曲コンテンツ又はプレイリスト）をクライアント２に送信する。
そして、クライアント２から楽曲コンテンツの送信要求がなされると、対応する楽曲コンテンツをクライアント２に送信する。また、クライアント２においてプレイリストが選択されると、このプレイリストを構成する複数の楽曲コンテンツを登録されている順に順次送信する。送信された複数の楽曲コンテンツは、クライアント２において連続してストリーミング再生される。 For example, when a keyword (search keyword) for searching for a desired music content or playlist is input and transmitted in the web browser of the client 2, a suitable music content or playlist is extracted based on the search keyword. The extraction result (for example, individual music content or playlist) is transmitted to the client 2.
Then, when a transmission request for music content is made from the client 2, the corresponding music content is transmitted to the client 2. When a playlist is selected in the client 2, a plurality of music contents constituting the playlist are sequentially transmitted in the registered order. The transmitted plurality of music contents are continuously streamed and reproduced in the client 2.

図３は、クライアント２のハードウェア構成の概略を示すブロック図である。
図３に示すように、クライアント２は、制御部２１、記憶部２２，通信部２３，操作部２４，表示部２５等を備えて構成され、各部はバスライン２６により電気的に接続されている。 FIG. 3 is a block diagram showing an outline of the hardware configuration of the client 2.
As shown in FIG. 3, the client 2 includes a control unit 21, a storage unit 22, a communication unit 23, an operation unit 24, a display unit 25, and the like, and each unit is electrically connected by a bus line 26. .

制御部２１の構成はサーバ１の制御部１１の構成と同様である。ＲＯＭ２１３は、ＯＳやウェブブラウザ、コンテンツ再生ソフト等のプログラムを記憶する。このコンテンツ再生ソフトは、例えば、サーバ１から配信される楽曲コンテンツをストリーミング再生可能で、ウェブブラウザ上でプラグインとして機能するソフトウェア（いわゆるマルチメディアプレイヤー）である。
記憶部２２は、例えばハードディスクで構成され、サーバ１からダウンロードしたコンテンツ（例えば、楽曲コンテンツ等）のデータ等を記憶することができる。 The configuration of the control unit 21 is the same as the configuration of the control unit 11 of the server 1. The ROM 213 stores programs such as an OS, a web browser, and content reproduction software. This content playback software is, for example, software (so-called multimedia player) capable of streaming playback of music content distributed from the server 1 and functioning as a plug-in on a web browser.
The storage unit 22 is composed of, for example, a hard disk, and can store data of content (for example, music content) downloaded from the server 1.

通信部２３は、ＴＣＰ／ＩＰ等の通信プロトコルに従って処理を行い、ネットワークＮを介してサーバ１とデータの送受信を行う。
操作部２４は、例えば、キーボード及びマウスで構成され、ユーザが情報を入力する際に使用される。例えば、楽曲コンテンツの配信サービスを提供するサーバ１に所望の楽曲コンテンツの配信を要求する場合、ユーザはウェブページ上のキーワード入力欄に操作部２４により検索キーワード（例えば、アーティスト名や楽曲名、アルバム名等）を入力する。また、コンテンツ再生ソフトのＧＵＩにおいて、所望の楽曲コンテンツを再生したり、音量を調整したりするための操作を操作部２４により行う。
表示部２５は、例えば、液晶ディスプレイ等の表示装置で構成され、制御部２１からの表示制御指令に基づいて所定の画面を表示する。表示部２５には、例えば、様々なアプリケーション（例えば、ウェブブラウザ等）のＧＵＩが表示される。 The communication unit 23 performs processing according to a communication protocol such as TCP / IP and transmits / receives data to / from the server 1 via the network N.
The operation unit 24 includes, for example, a keyboard and a mouse, and is used when a user inputs information. For example, when requesting distribution of a desired music content to the server 1 that provides a music content distribution service, the user searches the keyword input field on the web page using the operation unit 24 to search keywords (for example, artist name, music name, album). Name). Further, in the GUI of the content reproduction software, the operation unit 24 performs operations for reproducing desired music content and adjusting the volume.
The display unit 25 is configured by a display device such as a liquid crystal display, for example, and displays a predetermined screen based on a display control command from the control unit 21. For example, GUIs of various applications (for example, web browsers) are displayed on the display unit 25.

クライアント２のＣＰＵ２１１は、例えば、ＲＯＭ２１３に記憶されているウェブブラウザを実行し、ユーザが操作部２４によりＵＲＬを入力することに伴い、ＵＲＬで指定されるウェブページをサーバ１に要求する。そして、サーバ１から送信されたウェブページのデータを解析して、ウェブブラウザのウィンドウに表示する。
また、楽曲コンテンツを配信するウェブページにおいて、ＣＰＵ２１１は、コンテンツ再生ソフトを起動し、ウェブブラウザ上でプラグインとして機能させる。このとき、このコンテンツ再生ソフトのＧＵＩがウェブブラウザのウィンドウ内に表示されることとなる。なお、ウェブブラウザのウィンドウ内には、コンテンツ再生ソフトのＧＵＩの他、当該ウェブページに関する情報、例えば、楽曲に関する様々な情報が表示されたり、ユーザが所望の楽曲コンテンツやプレイリストを検索するためのキーワード入力欄が設けられたりする。 For example, the CPU 211 of the client 2 executes a web browser stored in the ROM 213, and requests the server 1 for a web page specified by the URL when the user inputs the URL through the operation unit 24. Then, the web page data transmitted from the server 1 is analyzed and displayed on the web browser window.
Further, in the web page that distributes the music content, the CPU 211 activates the content reproduction software and causes it to function as a plug-in on the web browser. At this time, the GUI of the content reproduction software is displayed in the web browser window. In addition, in the web browser window, in addition to the GUI of the content playback software, information related to the web page, for example, various information related to music, is displayed, and the user can search for desired music content and playlists. A keyword entry field is provided.

上述したように、サーバ１がクライアント２に楽曲コンテンツの配信サービス（ウェブサイト）を提供する場合、クライアント２のウェブブラウザのウィンドウにはコンテンツ再生ソフトのＧＵＩが表示される。本実施形態では、このコンテンツ再生ソフトのＧＵＩに、本発明に係る表示制御方法を適用している。 As described above, when the server 1 provides the music content distribution service (web site) to the client 2, the GUI of the content reproduction software is displayed in the window of the web browser of the client 2. In the present embodiment, the display control method according to the present invention is applied to the GUI of the content reproduction software.

ここで、本実施形態のコンテンツ再生ソフトは、メインとなる楽曲コンテンツの再生機能の他に、以下の機能を備えているものとする。すなわち、コンテンツ再生ソフトは、サーバ１から楽曲配信のサービスを受けているユーザ（例えば、サーバ１が提供しているウェブサイトにログインしているユーザ、以下ログインユーザと称する）が、楽曲コンテンツに対して感想等のコメントを入力したり、ログインユーザがこのコメントを参照したりできる機能（以下、コメント機能）を備えている。また、同じプレイリストを利用しているログインユーザが、ネットワークを通じてリアルタイムにテキストベースの会話を行うことができる機能（いわゆるチャット機能）を備えている。 Here, the content reproduction software of the present embodiment is assumed to have the following functions in addition to the main music content reproduction function. In other words, the content playback software allows a user who receives a music distribution service from the server 1 (for example, a user who is logged in to a website provided by the server 1, hereinafter referred to as a login user) to a music content. In addition, a function (hereinafter referred to as a comment function) is provided so that comments such as comments can be input and the logged-in user can refer to the comments. In addition, a login user using the same playlist has a function (so-called chat function) that allows a text-based conversation in real time through a network.

そして、コンテンツ配信ソフトにおいては、楽曲コンテンツの再生機能を実現するための表示画面が本発明におけるメインコンテンツとなり、コメント機能及びチャット機能を実現するための表示画面が本発明におけるサブコンテンツとなる。つまり、本実施形態において、メインコンテンツは楽曲コンテンツの再生処理に関する操作を行うための情報を有し、サブコンテンツは再生されている楽曲コンテンツに付随する情報を有している。 In the content distribution software, the display screen for realizing the music content playback function is the main content in the present invention, and the display screen for realizing the comment function and the chat function is the sub-content in the present invention. In other words, in the present embodiment, the main content has information for performing operations related to the music content playback process, and the sub-content has information accompanying the music content being played back.

図６は、クライアント２の表示部２５にコンテンツ再生ソフトのＧＵＩを表示するための表示制御処理の一例を示すフローチャートである。この表示制御処理は、例えば、クライアント２のＣＰＵ２１１がＲＯＭ２１３に記憶されているコンテンツ再生ソフトを起動したときに実行される。
図７〜１０は、コンテンツ再生ソフトのＧＵＩの一例を示す説明図である。なお、図７〜１０では、コンテンツ再生ソフトにおいて、プレイリスト“ｐＬｉｓｔ１”を構成する楽曲コンテンツのうち、３番目に登録されているタイトル“ＣＣＣ”の楽曲コンテンツが、再生する楽曲コンテンツとして選択されている場合を示している。また、クライアント２のユーザ名を“ユーザＤ”としている。 FIG. 6 is a flowchart showing an example of display control processing for displaying the GUI of the content reproduction software on the display unit 25 of the client 2. This display control processing is executed, for example, when the CPU 211 of the client 2 activates content reproduction software stored in the ROM 213.
7 to 10 are explanatory diagrams illustrating an example of the GUI of the content reproduction software. 7 to 10, in the content reproduction software, the music content of the third registered title “CCC” is selected as the music content to be reproduced among the music contents constituting the playlist “pList1”. Shows the case. Further, the user name of the client 2 is “user D”.

図６において、ステップＳ１０１では、コンテンツ再生ソフトのＧＵＩを第１態様で表示する（図７参照）。すなわち、コンテンツ再生ソフトが起動されると、ウェブブラウザのウィンドウ内に図７に示すＧＵＩが表示される。
図７に示すように、コンテンツ再生ソフトのＧＵＩを構成するメインフレームＦｍには、例えば、再生する楽曲コンテンツに関する情報（例えば、プレイリストのタイトル名（プレイリストに登録されている場合）、アーティスト名、アルバム名）Ｉ１、再生する楽曲コンテンツに関する画像（アルバムのジャケット画像等）Ｉ２、楽曲コンテンツの進行状況や再生中の楽曲コンテンツのタイトルを示す情報（再生バー）Ｉ３、現在利用しているプレイリストの構成等を示すプレイリスト情報Ｉ４、等が表示される。また、楽曲コンテンツの再生処理を行うための操作ボタンＢ（再生／停止ボタン、早戻しボタン、早送りボタン、ボリュームボタン）が配置されている。 In FIG. 6, in step S101, the GUI of the content reproduction software is displayed in the first mode (see FIG. 7). That is, when the content reproduction software is activated, the GUI shown in FIG. 7 is displayed in the web browser window.
As shown in FIG. 7, the main frame Fm constituting the GUI of the content reproduction software includes, for example, information related to the music content to be reproduced (for example, the title name of the playlist (when registered in the playlist), the artist name) , Album name) I1, an image related to the music content to be played (album jacket image, etc.) I2, information on the progress of the music content and the title of the music content being played (playback bar) I3, the playlist currently being used Play list information I4, etc., indicating the configuration of and the like is displayed. In addition, operation buttons B (play / stop button, fast reverse button, fast forward button, volume button) for performing music content playback processing are arranged.

また、メインフレームＦｍの下フレーム外には、後述するサブフレームＦｓ１，Ｆｓ２に設けられた２つのタグＴ１，Ｔ２が並んで表示されている。
ここで、タブＴ１はコメント機能を実現するための画面を表示するサブフレームＦｓ１に設けられるタブで、タブＴ２はチャット機能を実現するための画面を表示するサブフレームＦｓ２に設けられるタブである。図７等に示すように、このタブＴ１，Ｔ２には、対応するサブフレームＦｓ１，Ｆｓ２に表示されるサブコンテンツの内容が認識できるような情報（テキストやマーク）を表示する。
このように、第１態様では、メインフレームＦｍのフレーム外にサブフレームＦｓのタブＴ１，Ｔ２だけが現出するように、サブフレームＦｓ１，Ｆｓ２にメインフレームＦｍを重畳させた状態で表示している。 In addition, outside the lower frame of the main frame Fm, two tags T1 and T2 provided in sub-frames Fs1 and Fs2, which will be described later, are displayed side by side.
Here, the tab T1 is a tab provided in the subframe Fs1 that displays a screen for realizing the comment function, and the tab T2 is a tab provided in the subframe Fs2 that displays a screen for realizing the chat function. As shown in FIG. 7 and the like, the tabs T1 and T2 display information (text and marks) that allows the contents of the sub contents displayed in the corresponding sub frames Fs1 and Fs2 to be recognized.
As described above, in the first mode, the main frame Fm is superimposed on the subframes Fs1 and Fs2 so that only the tabs T1 and T2 of the subframe Fs appear outside the main frame Fm. Yes.

図６において、ステップＳ１０２では、コンテンツ再生ソフトのＧＵＩが第１態様で表示された状態でタブＴ１又はタブＴ２をマウスでクリックする操作が行われたか否か判定する。そして、タブ操作が行われたと判定すると、ステップＳ１０３に移行する。
ステップＳ１０３では、コンテンツ再生ソフトのＧＵＩを第２態様で表示する（図９参照）。例えば、図７に示すＧＵＩが表示された状態でタブＴ１が操作されると、タブＴ１に対応するサブフレームＦｓ１がアクティブ化され、ウェブブラウザのウィンドウ内には図９に示すＧＵＩが表示される。 In FIG. 6, in step S102, it is determined whether or not an operation of clicking the tab T1 or the tab T2 with the mouse is performed in a state where the GUI of the content reproduction software is displayed in the first mode. If it is determined that a tab operation has been performed, the process proceeds to step S103.
In step S103, the content reproduction software GUI is displayed in the second mode (see FIG. 9). For example, when the tab T1 is operated while the GUI shown in FIG. 7 is displayed, the subframe Fs1 corresponding to the tab T1 is activated, and the GUI shown in FIG. 9 is displayed in the web browser window. .

図９に示すように、コンテンツ再生ソフトのＧＵＩを構成するサブフレームＦｓ１には、コメント機能を実現するための画面が表示される。例えば、ユーザＤが、現在再生している楽曲コンテンツに対して感想等のコメントを入力するための情報入力欄Ｉ１１や、他のログインユーザ（図９ではユーザＡ、ユーザＢ、ユーザＣ）が入力したコメントＩ１２が表示される。 As shown in FIG. 9, a screen for realizing the comment function is displayed in the subframe Fs1 constituting the GUI of the content reproduction software. For example, the user D inputs an information input field I11 for inputting a comment such as a comment on the currently played music content, or other login users (user A, user B, user C in FIG. 9). Comment I12 is displayed.

このように、第２態様では、第１態様で表示されたＧＵＩにおいて操作されたタブＴ１に対応するアクティブなサブフレームＦｓ１を、操作されていないタブＴ２に対応する非アクティブなサブフレームＦｓ２に重畳させた状態で、メインフレームＦｍの下方に連結して表示している。
また、第１態様で表示されたＧＵＩにおいてタブＴ２が操作されると、タブＴ２に対応するサブフレームＦｓ２を、操作されていないタブＴ１に対応するサブフレームＦｓ１に重畳させた状態で、メインフレームＦｍの下方に連結して表示することとなる。
このとき、ウェブブラウザのウィンドウ内において、タブ操作前にメインフレームＦｍの下方に表示されていた情報は、例えば、サブフレームＦｓ１，Ｆｓ２の分だけ下方にずれて表示される。 Thus, in the second mode, the active subframe Fs1 corresponding to the tab T1 operated in the GUI displayed in the first mode is superimposed on the inactive subframe Fs2 corresponding to the tab T2 that has not been operated. In such a state, it is connected and displayed below the main frame Fm.
When the tab T2 is operated in the GUI displayed in the first mode, the main frame is displayed in a state where the subframe Fs2 corresponding to the tab T2 is superimposed on the subframe Fs1 corresponding to the tab T1 that is not operated. It will be displayed below Fm.
At this time, the information displayed below the main frame Fm before the tab operation in the web browser window is displayed shifted downward by, for example, the subframes Fs1 and Fs2.

本実施形態では、第１態様から第２態様へ画面遷移するに際し、メインフレームＦｍからタブが現出している方向（図８ではメインフレームＦｍの下方）にサブフレームＦｓ１又はＦｓ２が徐々に出現するように、アニメーションによる表示制御が行われるようにしている（図８参照）。
これにより、サブフレームＦｓ１又はＦｓ２が、メインフレームＦｍに連結して瞬時に表示される場合よりも、ユーザに視覚的な興趣を与えることができる。 In the present embodiment, when the screen transitions from the first mode to the second mode, the subframe Fs1 or Fs2 gradually appears in the direction in which the tab appears from the main frame Fm (below the main frame Fm in FIG. 8). In this way, display control by animation is performed (see FIG. 8).
Thereby, a visual interest can be given to a user rather than the case where sub-frame Fs1 or Fs2 connects with the main frame Fm, and is displayed instantaneously.

図６において、ステップＳ１０４では、コンテンツ再生ソフトのＧＵＩが第２態様で表示された状態でタブＴ１又はタブＴ２をマウスでクリックする操作が行われたか否か判定する。そして、タブ操作が行われたと判定すると、ステップＳ１０５に移行する。
ステップＳ１０５では、操作されたタブが現在アクティブとなっているサブフレームに設けられたタブ（図９ではタブＴ１、以下アクティブタブと称する）か否かを判定する。そして、アクティブタブの操作であると判定した場合はステップＳ１０６に移行し、アクティブタブの操作でないと判定した場合はステップＳ１０７に移行する。 In FIG. 6, in step S104, it is determined whether or not an operation of clicking the tab T1 or the tab T2 with the mouse is performed in a state where the GUI of the content reproduction software is displayed in the second mode. If it is determined that a tab operation has been performed, the process proceeds to step S105.
In step S105, it is determined whether or not the operated tab is a tab provided in the currently active subframe (in FIG. 9, tab T1, hereinafter referred to as an active tab). If it is determined that the operation is an active tab operation, the process proceeds to step S106. If it is determined that the operation is not an active tab operation, the process proceeds to step S107.

ステップＳ１０６では、コンテンツ再生ソフトのＧＵＩを第１態様で表示する（図７参照）。例えば、図９に示すＧＵＩが表示された状態でアクティブタブＴ１が操作されると、ウェブブラウザのウィンドウ内には図７に示すＧＵＩが表示される。
すなわち、コンテンツ再生ソフトのＧＵＩが第２態様で表示された状態において、アクティブとなっている最上位層のサブフレームＦｓ１のタブＴ１が操作された場合には、第２態様から第１態様に表示態様を遷移する。 In step S106, the content reproduction software GUI is displayed in the first mode (see FIG. 7). For example, when the active tab T1 is operated in a state where the GUI shown in FIG. 9 is displayed, the GUI shown in FIG. 7 is displayed in the window of the web browser.
That is, when the GUI of the content playback software is displayed in the second mode and the tab T1 of the active uppermost subframe Fs1 is operated, the display from the second mode to the first mode is performed. Transition aspects.

このとき、第２態様から第１態様へ画面遷移するに際し、サブフレームＦｓ１がメインフレームＦｍの背面に収納されるように、アニメーションによる表示制御が行われる。
これにより、サブフレームＦｓ１又はＦｓ２が、メインフレームＦｍに瞬時に隠れて表示される場合よりも、ユーザに視覚的な興趣を与えることができる。 At this time, when the screen transitions from the second mode to the first mode, display control by animation is performed so that the sub-frame Fs1 is stored on the back surface of the main frame Fm.
Thereby, the visual interest can be given to the user, compared with the case where the subframe Fs1 or Fs2 is hidden and displayed instantaneously in the main frame Fm.

図６において、ステップＳ１０７では、操作されたタブに対応するサブフレームをアクティブ化して表示する（図１０参照）。例えば、図９に示すＧＵＩが表示された状態で非アクティブタブＴ２が操作されると、サブフレームＦｓ２がアクティブ化され、ウェブブラウザのウィンドウ内には図１０に示すＧＵＩが表示される。
図１０に示すように、サブフレームＦｓ２には、チャット機能を実現するための画面が表示される。例えば、ユーザＤが、プレイリスト“ｐＬｉｓｔ１”について発言する内容を入力するための情報入力欄Ｉ２１や、当該チャットルームにおいてユーザＤ及び他のログインユーザによって発言された内容Ｉ１２が表示される。 In FIG. 6, in step S107, the subframe corresponding to the operated tab is activated and displayed (see FIG. 10). For example, when the inactive tab T2 is operated in a state where the GUI shown in FIG. 9 is displayed, the subframe Fs2 is activated, and the GUI shown in FIG. 10 is displayed in the web browser window.
As shown in FIG. 10, a screen for realizing the chat function is displayed in the subframe Fs2. For example, the information input field I21 for inputting the content that the user D speaks about the playlist “pList1” and the content I12 that is spoken by the user D and other logged-in users in the chat room are displayed.

このように、コンテンツ再生ソフトのＧＵＩが第２態様で表示された状態において、最上位層以外の非アクティブなサブフレームＦｓ２のタブＴ２が操作された場合には、当該操作されたタブＴ２に対応するサブフレームＦｓ２を最上位層に切り換えて表示する。 As described above, when the tab T2 of the inactive subframe Fs2 other than the highest layer is operated in the state where the GUI of the content reproduction software is displayed in the second mode, it corresponds to the operated tab T2. The subframe Fs2 to be switched is displayed on the uppermost layer.

上述したように、本実施形態では、メインコンテンツとこれに付随するサブコンテンツを有するコンテンツ再生ソフトのＧＵＩを表示するにあたり、コンテンツ表示領域を、メインコンテンツを表示するメインフレームＦｍと、サブコンテンツを表示するサブフレームＦｓ１，Ｆｓ２と、で構成する。
また、サブコンテンツが２つのコンテンツからなる場合（例えば、コメント機能の画面とチャット機能の画面）、２つのサブフレームＦｓ１，Ｆｓ２には、それぞれのタブ位置が異なるようにタブＴ１，Ｔ２が設けられる。 As described above, in the present embodiment, when displaying the GUI of the content playback software having the main content and the sub-contents accompanying the main content, the content display area, the main frame Fm for displaying the main content, and the sub-content for displaying the sub-content are displayed. The frame Fs1, Fs2.
Further, when the sub-content is composed of two contents (for example, a comment function screen and a chat function screen), the two sub-frames Fs1 and Fs2 are provided with tabs T1 and T2 so that the respective tab positions are different. .

そして、メインフレームＦｍのフレーム外にサブフレームＦｓ１，Ｆｓ２のタブＴ１，Ｔ２だけが並んで現出するように、サブフレームＦｓ１，Ｆｓ２にメインフレームＦｍを重畳させた第１態様で表示する（図６のステップＳ１０１）。
また、第１態様で表示された状態において操作手段（例えば、マウス）によりサブフレームＦｓ１，Ｆｓ２のタブＴ１，Ｔ２が操作されると、メインフレームＦｍのタブＴ１，Ｔ２が現出していた側にサブフレームＦｓ１，Ｆｓ２を連結した第２態様で表示する（図６のステップＳ１０３）。
一方、第２態様で表示された状態においてアクティブタブ（例えば、タブＴ１）が操作されると、第１態様に遷移して表示する（図６のステップＳ１０６）。 Then, the subframes Fs1 and Fs2 are displayed in a first mode in which the main frame Fm is superimposed so that only the tabs T1 and T2 of the subframes Fs1 and Fs2 appear side by side outside the main frame Fm (see FIG. 6 step S101).
Further, when the tabs T1 and T2 of the subframes Fs1 and Fs2 are operated by the operating means (for example, a mouse) in the state displayed in the first mode, the tabs T1 and T2 of the main frame Fm appear on the side where the tabs T1 and T2 have appeared. The subframes Fs1 and Fs2 are displayed in the second mode in which the subframes Fs1 and Fs2 are connected (step S103 in FIG. 6).
On the other hand, when an active tab (for example, tab T1) is operated in the state displayed in the second mode, the screen is shifted to the first mode and displayed (step S106 in FIG. 6).

これにより、関連する複数のコンテンツをタブ操作という簡単な操作により同時に画面上に表示できるので、利便性が格段に向上する。また、サブコンテンツについては必要なときに表示させればよく、通常時はメインコンテンツだけを表示させることとなるので、ウェブブラウザのウィンドウ内の他の表示領域を有効に利用することができる。
さらに、第１態様から第２態様へ、又は第２態様から第１態様へと表示態様を遷移する際、アニメーションによる表示制御を行うので、ユーザに視覚的な興趣を与えることができる。 Thereby, a plurality of related contents can be simultaneously displayed on the screen by a simple operation such as a tab operation, so that the convenience is greatly improved. Further, the sub-contents may be displayed when necessary, and only the main content is displayed in normal times, so that other display areas in the web browser window can be used effectively.
Furthermore, when the display mode is changed from the first mode to the second mode or from the second mode to the first mode, display control is performed using animation, so that the user can be given visual interest.

以上、本発明者によってなされた発明を実施形態に基づいて具体的に説明したが、本発明は上記実施形態に限定されるものではなく、その要旨を逸脱しない範囲で変更可能である。 As mentioned above, although the invention made by this inventor was concretely demonstrated based on embodiment, this invention is not limited to the said embodiment, It can change in the range which does not deviate from the summary.

例えば、上記実施形態では、サブコンテンツが２つのコンテンツからなる場合について説明したが、３以上の複数のコンテンツからなる場合も同様に表示制御することができる。この場合、複数のサブフレームには、それぞれのタブ位置が異なるようにタブが設けられる。
また、メインフレームに対してサブフレームが出現する方向は、メインフレームの下方向に制限されず、左又は右方向としてもよい。この場合、メインフレームの左フレーム外又は右フレーム外にサブフレームのタブが現出することとなる。 For example, in the above-described embodiment, the case where the sub-content is composed of two contents has been described, but display control can be similarly performed when the sub-content is composed of a plurality of three or more contents. In this case, the plurality of subframes are provided with tabs so that the tab positions are different.
Further, the direction in which the subframe appears with respect to the main frame is not limited to the downward direction of the main frame, and may be the left or right direction. In this case, the subframe tab appears outside the left frame or the right frame of the main frame.

また、上記実施形態では、本発明に係る表示制御方法を、ウェブブラウザのプラグインとして機能するコンテンツ再生ソフトのＧＵＩの表示に適用した場合について説明したが、例えば、コンテンツ再生ソフトは、ウェブブラウザとは独立して起動され、ネットワーク接続可能なコンテンツ再生ソフト（いわゆるネットワークメディアプレイヤー）であってもよい。
さらに、コンテンツ再生ソフトのＧＵＩの表示に制限されず、ウェブブラウザやウェブアプリケーション、ガジェット等、コンピュータ上で利用されるその他の様々なアプリケーションのＧＵＩの表示に本発明を適用することができる。 In the above-described embodiment, the case where the display control method according to the present invention is applied to the display of the GUI of content reproduction software that functions as a plug-in of a web browser has been described. May be content playback software (so-called network media player) that is activated independently and can be connected to the network.
Furthermore, the present invention is not limited to display of GUI of content reproduction software, and the present invention can be applied to display of GUI of various other applications used on a computer such as a web browser, a web application, and a gadget.

例えば、図１１に示すように、ウェブブラウザのウィンドウ内で、地図を表示するウェブアプリケーションのＧＵＩの表示に本発明を適用することができる。
このウェブアプリケーションにおいては、ユーザによって要求された地図情報の表示画面がメインコンテンツであり、地図上に配置された施設や店舗（例えば、病院、レストラン、コンビニエンスストア等）の詳細情報（住所、電話番号、ホームページのＵＲＬ、営業時間等）の表示画面がサブコンテンツとなる。 For example, as shown in FIG. 11, the present invention can be applied to GUI display of a web application that displays a map in a window of a web browser.
In this web application, the display screen of the map information requested by the user is the main content, and detailed information (address, telephone number, etc.) of facilities and stores (for example, hospitals, restaurants, convenience stores, etc.) arranged on the map. The display screen of the home page URL, business hours, etc.) is the sub-content.

図１１では、メインフレームＦｍには○○周辺の地図が表示されており、下フレーム外にはサブフレームのタブＴ１（病院），Ｔ２（レストラン），Ｔ３（コンビニ）が現出している。ユーザがタブＴ１，Ｔ２，Ｔ３を操作すると、対応する詳細情報がサブフレームにおいて表示されることとなる。
このように、メインフレームＦｍに地図を表示させながら、施設や店舗等の詳細情報を入手することができるとともに、タブ操作によりサブコンテンツの表示／非表示を切り換えられ表示領域を有効に利用できるので、地図情報を提供するアプリケーションのＧＵＩとして非常に優れている。 In FIG. 11, a map around OO is displayed on the main frame Fm, and sub-frame tabs T1 (hospital), T2 (restaurant), and T3 (convenience store) appear outside the lower frame. When the user operates the tabs T1, T2, and T3, the corresponding detailed information is displayed in the subframe.
In this way, while displaying a map on the main frame Fm, it is possible to obtain detailed information on facilities, stores, etc., and the display area can be used effectively by switching display / non-display of sub-contents by tab operation. This is an excellent GUI for applications that provide map information.

なお、上述したようなアプリケーションのＧＵＩは、開発ツール（例えば、アドビ社製Ｆｌｅｘ２等）を用いて作成することができる。 Note that the GUI of the application as described above can be created using a development tool (for example, Flex2 manufactured by Adobe).

今回開示された実施の形態はすべての点で例示であって制限的なものではないと考えられるべきである。本発明の範囲は上記した説明ではなくて特許請求の範囲によって示され、特許請求の範囲と均等の意味および範囲内でのすべての変更が含まれることが意図される。 The embodiment disclosed this time should be considered as illustrative in all points and not restrictive. The scope of the present invention is defined by the terms of the claims, rather than the description above, and is intended to include any modifications within the scope and meaning equivalent to the terms of the claims.

本実施形態に係るネットワーク構成について示す概略図である。It is the schematic shown about the network structure which concerns on this embodiment. サーバ１のハードウェア構成の概略を示すブロック図である。2 is a block diagram showing an outline of a hardware configuration of a server 1. FIG. クライアント２のハードウェア構成の概略を示すブロック図である。2 is a block diagram illustrating an outline of a hardware configuration of a client 2. FIG. データベース１３に格納される楽曲テーブルの一構成例について示す説明図である。It is explanatory drawing shown about one structural example of the music table stored in the database. データベース１３に格納されるプレイリストテーブルの一構成例について示す説明図である。It is explanatory drawing shown about the structural example of the playlist table stored in the database. コンテンツ再生ソフトのＧＵＩを表示するための表示制御処理の一例を示すフローチャートである。It is a flowchart which shows an example of the display control process for displaying GUI of content reproduction software. コンテンツ再生ソフトのＧＵＩの一例を示す説明図である。It is explanatory drawing which shows an example of GUI of content reproduction software. コンテンツ再生ソフトのＧＵＩの一例を示す説明図である。It is explanatory drawing which shows an example of GUI of content reproduction software. コンテンツ再生ソフトのＧＵＩの一例を示す説明図である。It is explanatory drawing which shows an example of GUI of content reproduction software. コンテンツ再生ソフトのＧＵＩの一例を示す説明図である。It is explanatory drawing which shows an example of GUI of content reproduction software. 地図情報を提供するウェブアプリケーションのＧＵＩの一例を示す説明図である。It is explanatory drawing which shows an example of GUI of the web application which provides map information.

符号の説明Explanation of symbols

Ｆｍメインフレーム
Ｆｓ１，Ｆｓ２サブフレーム
Ｔ１，Ｔ２タブ Fm Main frame Fs1, Fs2 Subframe T1, T2 Tab

Claims

メインコンテンツとこれに付随するサブコンテンツを、画面に表示する表示制御方法であって、
コンテンツ表示領域を、
前記メインコンテンツを表示するメインフレームと、
１辺にタブを有し、前記サブコンテンツを表示するサブフレームと、で構成し、
前記メインフレームのフレーム外に前記サブフレームのタブだけが現出するように、前記サブフレームに前記メインフレームを重畳させた第１態様で表示し、
前記第１態様で表示された状態において操作手段により前記タブが操作されると、前記メインフレームの前記タブが現出していた側に前記サブフレームを連結した第２態様で表示し、
前記第２態様で表示された状態において前記タブが操作されると、前記第１態様に遷移して表示し、
前記第２態様で、前記サブフレームにおいて前記タブが設置されている辺と対向する辺と、前記メインフレームにおいて当該タブが現出していた側の辺と、が一致するようにして当該メインフレーム及び当該サブフレームを連結して表示し、
前記メインフレーム及び前記サブフレームをウェブブラウザ内の表示領域の一部に表示し、
前記第１態様から前記第２態様に表示態様を遷移する際、前記ウェブブラウザ内において、前記第１態様で前記タブの現出方向における前記メインフレームのフレーム外に表示されていた情報を、前記第２態様で前記現出方向に前記サブフレームの分だけずらして表示し、
前記サブコンテンツが、内容の異なる複数のサブコンテンツで構成される場合、
前記サブフレームをタブ位置が異なる複数のサブフレームで構成し、
前記第１態様では、前記メインフレームのフレーム外に複数のタブが並んで現出するように表示し、
前記第２態様では、前記第１態様で表示された状態において操作されたタブに対応するサブフレームを、操作されていないタブに対応するサブフレームに重畳させた状態で、前記メインフレームに連結して表示し、
前記第２態様で表示された状態において、前記操作手段により最上位層のサブフレームのタブが操作された場合には、前記第２態様から前記第１態様に表示態様を遷移し、前記操作手段により前記最上位層以外のサブフレームのタブが操作された場合には、当該操作されたタブに対応するサブフレームを最上位層に切り換えて表示することを特徴とする表示制御方法。 A display control method for displaying main content and accompanying sub-contents on a screen,
The content display area
A main frame for displaying the main content;
A sub-frame having a tab on one side and displaying the sub-content,
Displayed in a first mode in which the main frame is superimposed on the subframe so that only the subframe tab appears outside the mainframe frame,
When the tab is operated by operating means in the state displayed in the first mode, the subframe is displayed in the second mode connected to the side where the tab of the main frame has appeared,
When the tab is operated in the state displayed in the second mode, the transition to the first mode is displayed,
In the second aspect, the main frame and the side facing the side where the tab is installed in the subframe coincide with the side where the tab appears in the main frame. The subframes are connected and displayed,
Displaying the mainframe and the subframe in a part of a display area in a web browser;
When the display mode is changed from the first mode to the second mode, the information displayed outside the mainframe frame in the appearance direction of the tab in the first mode is displayed in the web browser. In the second aspect, the display direction is shifted by the amount corresponding to the subframe,
When the sub-content is composed of a plurality of sub-contents having different contents,
The subframe is composed of a plurality of subframes with different tab positions,
In the first aspect, a plurality of tabs are displayed so as to appear side by side outside the main frame,
In the second aspect, the subframe corresponding to the tab operated in the state displayed in the first aspect is connected to the main frame in a state where the subframe is superimposed on the subframe corresponding to the tab not operated. Display
In the state displayed in the second mode, when a tab of the uppermost subframe is operated by the operation unit, the display mode is changed from the second mode to the first mode, and the operation unit When a tab of a subframe other than the top layer is operated by the above, the display control method is characterized in that the subframe corresponding to the operated tab is switched to the top layer and displayed.

前記第１態様から前記第２態様に表示態様を遷移する際、前記メインフレームから前記タブが現出している方向に前記サブフレームが出現し、
前記第２態様から前記第１態様に表示態様を遷移する際、前記サブフレームが前記メインフレームの背面に収納されるように、
アニメーションにより前記サブフレームの表示を制御することを特徴とする請求項１に記載の表示制御方法。 When the display mode is changed from the first mode to the second mode, the subframe appears in the direction in which the tab appears from the main frame,
When the display mode is changed from the second mode to the first mode, the subframe is stored on the back of the main frame.
The display control method according to claim 1, wherein display of the subframe is controlled by animation.

メインコンテンツとこれに付随するサブコンテンツを、コンピュータの画面に表示するためのプログラムであって、
前記コンピュータに、
コンテンツの表示領域を、前記メインコンテンツを表示するメインフレームと、１辺にタブを有し、前記サブコンテンツを表示するサブフレームと、で構成する機能と、
前記メインフレームのフレーム外に前記サブフレームのタブだけが現出するように、前記サブフレームに前記メインフレームを重畳させた第１態様で表示する機能と、
前記第１態様で表示された状態において操作手段により前記タブが操作されると、前記メインフレームの前記タブが現出していた側に前記サブフレームを連結した第２態様で表示する機能と、
前記第２態様で表示された状態において前記タブが操作されると、前記第１態様に遷移して表示する機能と、
前記第２態様で、前記サブフレームにおいて前記タブが設置されている辺と対向する辺と、前記メインフレームにおいて当該タブが現出していた側の辺と、が一致するようにして当該メインフレーム及び当該サブフレームを連結して表示する機能と、
前記メインフレーム及び前記サブフレームをウェブブラウザ内の表示領域の一部に表示し、前記第１態様から前記第２態様に表示態様を遷移する際、前記ウェブブラウザ内において、前記第１態様で前記タブの現出方向における前記メインフレームのフレーム外に表示されていた情報を、前記第２態様で前記現出方向に前記サブフレームの分だけずらして表示する機能と、
前記サブコンテンツが、内容の異なる複数のサブコンテンツで構成される場合、前記サブフレームをタブ位置が異なる複数のサブフレームで構成し、前記第１態様では、前記メインフレームのフレーム外に複数のタブが並んで現出するように表示し、前記第２態様では、前記第１態様で表示された状態において操作されたタブに対応するサブフレームを、操作されていないタブに対応するサブフレームに重畳させた状態で、前記メインフレームに連結して表示し、前記第２態様で表示された状態において、前記操作手段により最上位層のサブフレームのタブが操作された場合には、前記第２態様から前記第１態様に表示態様を遷移し、前記操作手段により前記最上位層以外のサブフレームのタブが操作された場合には、当該操作されたタブに対応するサブフレームを最上位層に切り換えて表示する機能と、
を実現させるためのプログラム。 A program for displaying main content and accompanying sub-contents on a computer screen,
In the computer,
A function for configuring a content display area by a main frame for displaying the main content and a sub frame having a tab on one side and displaying the sub content;
A function of displaying in a first mode in which the main frame is superimposed on the subframe such that only the tab of the subframe appears outside the frame of the mainframe;
When the tab is operated by operating means in the state displayed in the first mode, a function of displaying in the second mode in which the subframe is connected to the side where the tab of the main frame has appeared;
When the tab is operated in the state displayed in the second aspect, a function to display a transition to the first aspect;
In the second aspect, the main frame and the side facing the side where the tab is installed in the subframe coincide with the side where the tab appears in the main frame. A function for connecting and displaying the subframes;
When the main frame and the sub-frame are displayed in a part of a display area in a web browser, and when the display mode is changed from the first mode to the second mode, the web browser has the first mode in the first mode. A function of displaying information displayed outside the main frame in the appearance direction of the tab by shifting by the amount of the subframe in the appearance direction in the second mode;
When the sub-content is composed of a plurality of sub-contents having different contents, the sub-frame is composed of a plurality of sub-frames having different tab positions, and in the first aspect, a plurality of tabs are disposed outside the main frame. Are displayed side by side, and in the second mode, the subframe corresponding to the tab operated in the state displayed in the first mode is superimposed on the subframe corresponding to the tab not operated. When the tab of the uppermost subframe is operated by the operation means in the state displayed in the second mode, the second mode is displayed. When the display mode is changed from the first mode to the first mode and a tab of a subframe other than the top layer is operated by the operating means, And displaying is switched to the uppermost layer of the sub-frame to respond,
A program to realize