情報処理装置、情報処理方法及びコンピュータプログラム
【課題】複数のユーザによる同一のＷｅｂページの閲覧及び操作の様子を閲覧するだけのユーザからのフィードバックによって円滑なコミュニケーションが実現可能な情報処理装置を提供する。
【解決手段】コンテンツを直接操作するプレイヤーによって操作されるコンテンツと同一の内容を前記プレイヤー側とリアルタイムに共有して表示するコンテンツ表示部と、前記コンテンツ表示部が前記プレイヤー側とリアルタイムに共有して表示する前記コンテンツの所定の領域に、前記プレイヤーの操作を閲覧するのみの自装置及び他装置から送信されるコメントを所定の規則に基づいて規則的に出現させる表示制御部と、を備える、情報表示装置が提供される。
【解決手段】コンテンツを直接操作するプレイヤーによって操作されるコンテンツと同一の内容を前記プレイヤー側とリアルタイムに共有して表示するコンテンツ表示部と、前記コンテンツ表示部が前記プレイヤー側とリアルタイムに共有して表示する前記コンテンツの所定の領域に、前記プレイヤーの操作を閲覧するのみの自装置及び他装置から送信されるコメントを所定の規則に基づいて規則的に出現させる表示制御部と、を備える、情報表示装置が提供される。
【発明の詳細な説明】
【技術分野】
【０００１】
本開示は、情報処理装置、情報処理方法及びコンピュータプログラムに関する。
【背景技術】
【０００２】
複数のユーザによって同一のコンテンツ（例えば、インターネット上のＷｅｂページ）を、当該コンテンツを表示するためのアプリケーション（例えば、Ｗｅｂブラウザ）で同時に閲覧する技術がある（例えば、特許文献１等参照）。ここで、ＷｅｂページとＷｅｂブラウザの関係を例にとれば、この技術では、あるユーザがＷｅｂページ上のリンクを選択したり、Ｗｅｂブラウザをスクロールさせたりしても、他のユーザのＷｅｂブラウザに同じように反映される。この技術により、複数のユーザが同じように、Ｗｅｂページを同時に閲覧できる。
【先行技術文献】
【特許文献】
【０００３】
【特許文献１】特開２０１１−７０５１１号公報
【発明の概要】
【発明が解決しようとする課題】
【０００４】
この技術を応用して、複数のユーザによる同一のＷｅｂページの閲覧及び操作の様子を、閲覧するだけのユーザという概念を用意する。複数のＷｅｂブラウザ間でＷｅｂページの閲覧をリアルタイムに共有する技術である。この共有では、同じＵＲＬのＷｅｂページを表示することに加えて、スクロールやマウスカーソルもリアルタイムに共有できる。この技術により、複数のユーザで話題のＷｅｂページを題材にチャットをするといったコミュニケーションが、Ｗｅｂブラウザだけで実現可能になる。
【０００５】
複数のユーザによる同一のＷｅｂページの閲覧及び操作の様子を閲覧するだけのユーザからは必要に応じてフィードバックが返される。しかし、そのフィードバックが無秩序に画面上に表示されると、かえって円滑なコミュニケーションの妨げとなってしまう。
【０００６】
そこで、本開示は、上記問題に鑑みてなされたものであり、本開示の目的とするところは、複数のユーザによる同一のＷｅｂページの閲覧及び操作の様子を閲覧するだけのユーザからのフィードバックによって円滑なコミュニケーションが実現可能な、新規かつ改良された情報処理装置、情報処理方法及びコンピュータプログラムを提供することにある。
【課題を解決するための手段】
【０００７】
本開示によれば、コンテンツを直接操作するプレイヤーによって操作されるコンテンツと同一の内容を前記プレイヤー側とリアルタイムに共有して表示するコンテンツ表示部と、前記コンテンツ表示部が前記プレイヤー側とリアルタイムに共有して表示する前記コンテンツの所定の領域に、前記プレイヤーの操作を閲覧するのみの自装置及び他装置から送信されるコメントを所定の規則に基づいて規則的に出現させる表示制御部と、を備える、情報表示装置が提供される。
【０００８】
また本開示によれば、コンテンツを直接操作するプレイヤーによって操作される共有コンテンツと同一の内容を前記プレイヤー側とリアルタイムに表示するコンテンツ表示ステップと、前記コンテンツ表示ステップが前記プレイヤー側とリアルタイムに共有して表示する前記コンテンツの所定の領域に、前記プレイヤーの操作を閲覧するのみの自装置及び他装置から送信されるコメントを所定の規則に基づいて規則的に出現させる表示制御ステップと、を備える、情報表示方法が提供される。
【０００９】
また本開示によれば、コンピュータに、コンテンツを直接操作するプレイヤーによって操作される共有コンテンツと同一の内容を前記プレイヤー側とリアルタイムに表示するコンテンツ表示ステップと、前記コンテンツ表示ステップが前記プレイヤー側とリアルタイムに共有して表示する前記コンテンツの所定の領域に、前記プレイヤーの操作を閲覧するのみの自装置及び他装置から送信されるコメントを所定の規則に基づいて規則的に出現させる表示制御ステップと、を実行させる、コンピュータプログラムが提供される。
【発明の効果】
【００１０】
以上説明したように本開示によれば、複数のユーザによる同一のＷｅｂページの閲覧及び操作の様子を閲覧するだけのユーザからのフィードバックによって円滑なコミュニケーションが実現可能な、新規かつ改良された情報処理装置、情報処理方法及びコンピュータプログラムを提供することができる。
【図面の簡単な説明】
【００１１】
【図１】本開示の一実施形態に係るコンテンツ共有システム１の全体構成を示す説明図である。
【図２】本開示の一実施形態に係るコンテンツ共有システム１を構成する各装置の概要を示す説明図である。
【図３】本開示の一実施形態に係るプレイヤー側の情報処理装置１００ａの機能構成を示す説明図である。
【図４】本開示の一実施形態に係るシステムサーバ２０の機能構成を示す説明図である。
【図５】本開示の一実施形態に係るオーディエンス側の情報処理装置２００ａの機能構成を示す説明図である。
【図６】コンテンツスクリプト１５５とブラウザ拡張アプリ１４０が実行する処理を示す流れ図である。
【図７】リレーサーバ２３が実行する処理を示す流れ図である。
【図８】専用Ｗｅｂアプリ２４０が実行する処理を示す流れ図である。
【図９】フレームとマウスカーソル位置の座標との関係の一例を示す説明図である。
【図１０】リレーサーバ２３から受信するカーソル位置と、専用Ｗｅｂアプリ２４０上でのカーソル位置との関係を示す説明図である。
【図１１】専用Ｗｅｂアプリ２４０でのレンダリング処理を示す説明図である。
【図１２】プレイヤーが情報処理装置１００ａで操作するカーソルを既存Ｗｅｂページ１５０の上に描画する様子を示す説明図である。
【図１３】プレイヤー側の情報処理装置１００ａの動作を示す流れ図である。
【図１４】プレイヤー側の情報処理装置に表示されるＷｅｂブラウザ１３０のユーザインタフェース３００を示す説明図である。
【図１５】プレイヤー側の情報処理装置に表示されるＷｅｂブラウザ１３０のユーザインタフェース３００を示す説明図である。
【図１６】オーディエンス側の情報処理装置に表示されるＷｅｂブラウザ２３０のユーザインタフェース４００を示す説明図である。
【図１７】オーディエンス側の情報処理装置に表示されるＷｅｂブラウザ２３０のユーザインタフェース４００を示す説明図である。
【図１８】オーディエンス側の情報処理装置に表示されるＷｅｂブラウザ２３０のユーザインタフェース４００を示す説明図である。
【図１９】オーディエンス側の情報処理装置に表示されるＷｅｂブラウザ２３０のユーザインタフェース４００を示す説明図である。
【図２０】オーディエンス側の情報処理装置に表示されるＷｅｂブラウザ２３０のユーザインタフェース４００を示す説明図である。
【図２１】オーディエンス側の情報処理装置に表示されるＷｅｂブラウザ２３０のユーザインタフェース４００を示す説明図である。
【図２２】オーディエンス側の情報処理装置に表示されるＷｅｂブラウザ２３０のユーザインタフェース４００を示す説明図である。
【図２３】オーディエンス側の情報処理装置に表示されるＷｅｂブラウザ２３０のユーザインタフェース４００を示す説明図である。
【図２４】オーディエンスから送られたコメントの表示の概要を示す説明図である。
【図２５】オーディエンスから送られたコメントの表示の概要を示す説明図である。
【図２６】オーディエンス情報表示領域４２０へのオーディエンスアイコンの表示を示す説明図である。
【図２７】オーディエンス情報表示領域４２０へのオーディエンスアイコンの表示を示す説明図である。
【図２８】オーディエンス情報表示領域４２０へのオーディエンスアイコンの表示を示す説明図である。
【図２９】オーディエンス情報表示領域４２０へのオーディエンスアイコンの表示を示す説明図である。
【図３０】オーディエンス情報表示領域４２０へのオーディエンスアイコンの表示を示す説明図である。
【図３１】オーディエンス情報表示領域４２０へのオーディエンスアイコンの表示を示す説明図である。
【図３２】オーディエンス情報表示領域４２０へのオーディエンスアイコンの表示を示す説明図である。
【図３３】オーディエンス情報表示領域４２０へのオーディエンスアイコンの表示を示す説明図である。
【図３４】オーディエンス情報表示領域４２０へのオーディエンスアイコンの表示を示す説明図である。
【図３５】オーディエンスから送られたコメントの表示の概要を示す説明図である。
【図３６】オーディエンス情報表示領域４２０へのオーディエンスアイコンの表示を示す説明図である。
【図３７】オーディエンス情報表示領域４２０へのオーディエンスアイコンの表示を示す説明図である。
【図３８】オーディエンス情報表示領域４２０へのオーディエンスアイコンの表示を示す説明図である。
【図３９】オーディエンス情報表示領域４２０へのオーディエンスアイコンの表示を示す説明図である。
【図４０】オーディエンス情報表示領域４２０へのオーディエンスアイコンの表示を示す説明図である。
【図４１】オーディエンス情報表示領域４２０へのオーディエンスアイコンの表示を示す説明図である。
【図４２】オーディエンス情報表示領域４２０へのオーディエンスアイコンの表示を示す説明図である。
【図４３】オーディエンス情報表示領域４２０へのオーディエンスアイコンの表示を示す説明図である。
【図４４】オーディエンス情報表示領域４２０へのオーディエンスアイコンの表示を示す説明図である。
【図４５】オーディエンスからのコメントの表示処理の概要を示す説明図である。
【図４６】オーディエンス側の情報処理装置に表示されるＷｅｂブラウザ２３０のユーザインタフェース４００を示す説明図である。
【図４７】オーディエンス側の情報処理装置に表示されるＷｅｂブラウザ２３０のユーザインタフェース４００を示す説明図である。
【図４８】オーディエンス側の情報処理装置に表示されるＷｅｂブラウザ２３０のユーザインタフェース４００を示す説明図である。
【図４９】オーディエンス側の情報処理装置に表示されるＷｅｂブラウザ２３０のユーザインタフェース４００を示す説明図である。
【図５０】オーディエンス側の情報処理装置に表示されるＷｅｂブラウザ２３０のユーザインタフェース４００を示す説明図である。
【図５１】オーディエンス側の情報処理装置に表示されるＷｅｂブラウザ２３０のユーザインタフェース４００を示す説明図である。
【図５２】本開示の一実施形態にかかるコンテンツ共有システム１を用いたネットイベントの一例を示す説明図である。
【図５３】本開示の一実施形態にかかるコンテンツ共有システム１を用いたネットイベントの一例を示す説明図である。
【図５４】本開示の一実施形態にかかるコンテンツ共有システム１を用いたネットイベントの一例を示す説明図である。
【発明を実施するための形態】
【００１２】
以下に添付図面を参照しながら、本開示の好適な実施の形態について詳細に説明する。なお、本明細書及び図面において、実質的に同一の機能構成を有する構成要素については、同一の符号を付することにより重複説明を省略する。
【００１３】
なお、説明は以下の順序で行うものとする。
＜１．本開示の一実施形態＞
［１−１．コンテンツ共有システムの全体構成例］
［１−２．各装置の概要］
［１−３．各装置の動作］
［１−４．ユーザインタフェース例］
＜２．まとめ＞
【００１４】
＜１．本開示の一実施形態＞
［１−１．コンテンツ共有システムの全体構成例］
まず、本開示の一実施形態に係るコンテンツ共有システムの全体構成について説明する。図１は、本開示の一実施形態に係るコンテンツ共有システム１の全体構成を示す説明図である。以下、図１を用いて本開示の一実施形態に係るコンテンツ共有システム１の全体構成について説明する。
【００１５】
図１に示した本開示の一実施形態に係るコンテンツ共有システム１は、本開示のコンテンツの一例である、同一のＷｅｂページを複数の情報処理装置でリアルタイムに共有して、複数の情報処理装置で同時に表示することを実現するシステムである。図１に示したように、本開示の一実施形態に係るコンテンツ共有システム１は、システムサーバ２０と、Ｗｅｂサーバ３０と、情報処理装置１００ａ、１００ｂ、２００ａ、２００ｂ、２００ｃ、とが、ネットワーク１０を介して相互に接続されている形態を有する。
【００１６】
ネットワーク１０に接続されている情報処理装置１００ａ、１００ｂ、２００ａ、２００ｂ、２００ｃは、Ｗｅｂサーバ３０が有するＷｅｂページを同時に表示することができる。ネットワーク１０に接続されている各情報処理装置は、同一のＷｅｂページを同時に閲覧するとともに、Ｗｅｂページに対する操作をすることができるものと、表示されるＷｅｂページ自体の操作は出来ずに、他のユーザと、表示される同一のＷｅｂページを同時に閲覧するだけのものに分かれる。以下の説明では前者の情報処理装置を操作するユーザを「プレイヤー」、後者の情報処理装置を操作するユーザを「オーディエンス」と称する。本実施形態では、情報処理装置１００ａ、１００ｂが「プレイヤー」が操作する情報処理装置であり、情報処理装置２００ａ、２００ｂ、２００ｃが「オーディエンス」が操作する情報処理装置である。
【００１７】
プレイヤーが操作する情報処理装置１００ａ、１００ｂは、共有するＷｅｂページを操作するプレイヤーが使用する。情報処理装置１００ａ、１００ｂでは、ブラウザ拡張機能を備えたＷｅｂブラウザが動作しており、そのＷｅｂブラウザには、このコンテンツ共有システム１専用のブラウザ拡張アプリがインストールされている。プレイヤーは、この情報処理装置１００ａ、１００ｂで動作するＷｅｂブラウザで通常通りのＷｅｂページのブラウズを行うことで、閲覧中のＷｅｂページがプレイヤー側とオーディエンス側とでリアルタイムに共有される。このとき共有される既存のＷｅｂページは、既存のＷｅｂページを提供するＷｅｂサーバ３０から直接ロードされる。また、プレイヤーは、この情報処理装置１００ａ、１００ｂでＷｅｂページをブラウズしながら、情報処理装置１００ａ、１００ｂに設けられるマイクに向かって発言することで、その発言の内容が他のプレイヤー及びオーディエンスが操作する情報処理装置から出力される。
【００１８】
オーディエンスが操作する情報処理装置２００ａ、２００ｂ、２００ｃは、プレイヤーによって操作されるＷｅｂページを同時に閲覧するだけのオーディエンスが使用する。オーディエンスが操作する情報処理装置２００ａ、２００ｂ、２００ｃでは、Ｗｅｂブラウザが動作している。オーディエンスは、このＷｅｂブラウザで特定のＵＲＬを入力し、このシステム専用のＷｅｂアプリをＷｅｂブラウザにロードし、Ｗｅｂページを表示させる。この専用Ｗｅｂアプリは、プレイヤーによって閲覧中のＷｅｂページが操作される様子を、オーディエンスが操作する情報処理装置２００ａ、２００ｂ、２００ｃに対してリアルタイムに表示する。このとき共有される既存のＷｅｂページは、既存のＷｅｂページを提供するＷｅｂサーバ３０から直接ロードされる。
【００１９】
システムサーバ２０は、同一のＷｅｂページを、ネットワーク１０に接続されている複数の情報処理装置の間で共有して表示させるためのサーバである。システムサーバ２０の構成は後述するが、プレイヤーの操作内容をプレイヤーが操作する情報処理装置１００ａ、１００ｂから受け取り、そのプレイヤーの操作内容を、オーディエンスが操作する情報処理装置２００ａ、２００ｂ、２００ｃに表示させるために、情報処理装置２００ａ、２００ｂ、２００ｃに伝送する。またシステムサーバ２０は、オーディエンスが操作する情報処理装置２００ａ、２００ｂ、２００ｃへ、専用Ｗｅｂアプリを提供するＷｅｂアプリケーションサーバ機能も有する。なお、上述した２つの機能は、本実施形態のように１つの機器に設けても良く、別々の機器に設けても良い。
【００２０】
なお、図１では、プレイヤーが操作する情報処理装置を２つ、オーディエンスが操作する情報処理装置を３つ図示したが、本技術はかかる例に限定されない。本技術では、プレイヤーが操作する情報処理装置は複数であれば３つ以上であってもよく、オーディエンスが操作する情報処理装置は１つ以上であればよい。また、それぞれの情報処理装置は、プレイヤー及びオーディエンスのいずれもが操作するものであってもよい。
【００２１】
なお、図１では、プレイヤーが操作する情報処理装置１００ａ、１００ｂ及びオーディエンスが操作する情報処理装置２００ａ、２００ｂ、２００ｃは、いずれもノートブック型のパーソナルコンピュータとして図示したが、本開示はかかる例に限定されない。すなわち、Ｗｅｂサーバ３０からＷｅｂページをロードして表示できるものであれば、以下で説明する技術を同様に適用可能である。
【００２２】
以上、図１を用いて本開示の一実施形態に係るコンテンツ共有システム１の全体構成について説明した。次に、本開示の一実施形態に係るコンテンツ共有システム１を構成する各装置の概要を説明する。
【００２３】
［１−２．各装置の概要］
図２は、本開示の一実施形態に係るコンテンツ共有システム１を構成する各装置の概要を示す説明図である。以下、図２を用いて、本開示の一実施形態に係るコンテンツ共有システム１を構成する各装置の概要について説明する。
【００２４】
図２では、プレイヤーが操作する情報処理装置として情報処理装置１００ａを、オーディエンスが操作する情報処理装置として情報処理装置２００ａを図示している。
【００２５】
図２に示したように、情報処理装置１００ａは、ＣＰＵ、ＲＯＭ、ＲＡＭ、キーボード、マウス、マイク、スピーカ、ディスプレイ等で構成されるハードウェア１１０と、ハードウェア１１０によって実行されるＯＳ（Ｏｐｅｒａｔｉｎｇ Ｓｙｓｔｅｍ）１２０と、ＯＳ１２０によって実行されるＷｅｂブラウザ１３０と、を含んで構成される。
【００２６】
Ｗｅｂブラウザ１３０には、コンテンツ共有システム１専用のブラウザ拡張アプリ１４０がインストールされる。Ｗｅｂブラウザ１３０は、既存のＷｅｂページを提供するＷｅｂサーバ３０から直接ロードされる既存Ｗｅｂページ１５０を表示する。
【００２７】
ブラウザ拡張アプリ１４０は、その一部であるコンテンツスクリプトを、既存Ｗｅｂページ１５０に送り込む。このコンテンツスクリプトは、プレイヤー側の情報処理装置とオーディエンス側の情報処理装置とで同一のＷｅｂページをリアルタイムに共有するために、ユーザによるイベントの監視と、共有に必要なデータの取得を行っている。
【００２８】
図２に示したように、システムサーバ２０は、ＣＰＵ、ＲＯＭ、ＲＡＭ、キーボード、マウス、ディスプレイ等で構成されるハードウェア２１と、ハードウェア２１によって実行されるＯＳ２２と、ＯＳ２２によって実行されるリレーサーバ２３及び専用Ｗｅｂアプリサーバ２４と、を含んで構成される。
【００２９】
リレーサーバ２３は、プレイヤー側の情報処理装置１００ａで動作するブラウザ拡張アプリ１４０と、オーディエンス側の情報処理装置２００ａで動作する専用Ｗｅｂアプリ２４０との間でやり取りされるメッセージを交換する機能を有する。
【００３０】
このリレーサーバ２３は主に２つの機能を有する。１つ目の機能は、リレーサーバ２３に接続中のプレイヤーとオーディエンスの管理である。プレイヤーやオーディエンスは、リレーサーバ２３に対して、ＨＴＭＬ５のＷｅｂＳｏｃｋｅｔやＸｍｌＨｔｔｐＲｅｑｕｅｓｔを応用したＣｏｍｅｔ等の技術を用いてコネクションを張る。プレイヤー側の情報処理装置１００ａから届いたメッセージを他のプレイヤーやオーディエンス側の情報処理装置２００ａにリアルタイムに転送するためには、これらコネクションをデータベース等で管理することが重要であるからである。
【００３１】
もう１つの機能は、ブラウザ拡張アプリ１４０から受信したＵＲＬ、レンダリングサイズ、スクロール位置、カーソル位置等の情報を、上述の、コネクションを管理するデータベースに登録されている、オーディエンス側の情報処理装置２００ａで動作する専用Ｗｅｂアプリ２４０や、送信元の情報処理装置以外のブラウザ拡張アプリへ転送する機能である。
【００３２】
専用Ｗｅｂアプリサーバ２４は、オーディエンス側の情報処理装置２００ａで動作する専用Ｗｅｂアプリを格納する。専用Ｗｅｂアプリサーバ２４は、オーディエンス側の情報処理装置２００ａの求めに応じて、専用Ｗｅｂアプリサーバ２４に格納される専用Ｗｅｂアプリを情報処理装置２００ａへ提供する。専用Ｗｅｂアプリサーバ２４からの専用Ｗｅｂアプリの提供は、情報処理装置２００ａで実行されるＷｅｂブラウザ２３０から特定のＵＲＬにアクセスすることで行われる。
【００３３】
図２に示したように、情報処理装置２００ａは、ＣＰＵ、ＲＯＭ、ＲＡＭ、キーボード、マウス、マイク、スピーカ、ディスプレイ等で構成されるハードウェア２１０と、ハードウェア２１０によって実行されるＯＳ２２０と、ＯＳ２２０によって実行されるＷｅｂブラウザ２３０と、を含んで構成される。
【００３４】
上述したように、情報処理装置２００ａで実行されるＷｅｂブラウザ２３０から特定のＵＲＬにアクセスすると、プレイヤーが閲覧及び操作するＷｅｂページをリアルタイムに共有するための専用Ｗｅｂアプリを、専用Ｗｅｂアプリサーバ２４からロードする。Ｗｅｂブラウザ２３０は、ロードした専用Ｗｅｂアプリ２４０で、プレイヤーが閲覧及び操作する既存Ｗｅｂページ１５０を表示することで、プレイヤーによって閲覧中のＷｅｂページが操作される様子をリアルタイムに表示する。
【００３５】
本開示の一実施形態に係るコンテンツ共有システム１を構成する各装置が、このような構成を有することにより、プレイヤー側の情報処理装置で表示されているＷｅｂページの内容が、同時にオーディエンス側の情報処理装置にも表示される。
【００３６】
以上、図２を用いて、本開示の一実施形態に係るコンテンツ共有システム１を構成する各装置の概要について説明した。次に、本開示の一実施形態に係るコンテンツ共有システム１を構成する、プレイヤー側の情報処理装置の機能構成について説明する。
【００３７】
図３は、本開示の一実施形態に係るプレイヤー側の情報処理装置１００ａの機能構成を示す説明図である。以下、図３を用いて、プレイヤー側の情報処理装置１００ａの機能構成について説明する。
【００３８】
上述したように、情報処理装置１００ａは、ＣＰＵ、ＲＯＭ、ＲＡＭ、キーボード、マウス、マイク、ディスプレイ等で構成されるハードウェア１１０と、ハードウェア１１０によって実行されるＯＳ１２０と、ＯＳ１２０によって実行されるＷｅｂブラウザ１３０と、を含んで構成される。
【００３９】
ハードウェア１１０は通信モジュール１１１を含む。通信モジュール１１１は、後述のブラウザ拡張アプリ１４０とリレーサーバ２３との間の通信を実行する。ＯＳ１２０は、ユーザのキーボード入力や画面出力といった入出力機能、ディスクやメモリの管理機能その他の、複数アプリケーションソフトから共通して利用される基本的な機能を提供し、情報処理装置１００ａを管理するソフトウェアである。
【００４０】
Ｗｅｂブラウザ１３０は、ＯＳ１２０により実行される、Ｗｅｂページを表示するためのソフトウェアである。Ｗｅｂブラウザ１３０は、ＨＴＭＬエンジン１３１と、スクリプト言語処理エンジン１３２と、ブラウザ拡張アプリ実行エンジン１３３と、描画処理エンジン１３４と、プロトコルスタック１３５と、を含んで構成される。
【００４１】
ＨＴＭＬエンジン１３１は、Ｗｅｂサーバ３０から送られる、ＨＴＭＬ言語によって作られた既存Ｗｅｂページ１５０について、Ｗｅｂサーバ３０から送られてきたＨＴＭＬ言語を解析する。ＨＴＭＬエンジン１３１により、既存Ｗｅｂページ１５０に記述されているＨＴＭＬ言語が解析されると、解析結果は、描画処理エンジン１３４により画像として出力される。Ｗｅｂサーバ３０から送られる既存Ｗｅｂページ１５０は、既存Ｗｅｂページのコンテンツ１５１を含む。既存Ｗｅｂページのコンテンツ１５１は、コンテンツの内容が記述されたＨＴＭＬ文書１５２と、コンテンツのレイアウトを定義するスタイルシート１５３と、コンテンツの動作を定義するスクリプト１５４と、を含んで構成される。
【００４２】
スクリプト言語処理エンジン１３２は、Ｗｅｂサーバ３０から送られる、ＨＴＭＬ言語によって作られたＷｅｂページに埋め込まれるスクリプト言語を解釈し、スクリプトを実行する。本実施形態では、スクリプト言語処理エンジン１３２は、Ｗｅｂサーバ３０から送られてきたＷｅｂページに、Ｗｅｂブラウザ１３０にインストールされるブラウザ拡張アプリ１４０が埋め込むコンテンツスクリプト１５５の内容を解釈し、スクリプトを実行する。
【００４３】
ブラウザ拡張アプリ実行エンジン１３３は、Ｗｅｂブラウザ１３０にインストールされるブラウザ拡張アプリ１４０を実行する。本実施形態では、ブラウザ拡張アプリ実行エンジン１３３は、コンテンツスクリプト１５５とブラウザ拡張アプリ１４０との間でデータの授受を実行する。ブラウザ拡張アプリ１４０は、例えばＷｅｂブラウザ１３０が所定のＵＲＬにアクセスすることで情報処理装置１００ａにインストールされ、Ｗｅｂブラウザ１３０の実行時にＷｅｂブラウザ１３０と共に実行される。
【００４４】
描画処理エンジン１３４は、ＨＴＭＬ言語によって作られたＷｅｂページの、ＨＴＭＬエンジン１３１による解析結果に基づいて画像として出力するための描画処理を実行する。プロトコルスタック１３５は、ネットワーク機能を提供するためのソフトウェア群であり、プロトコルスタック１３５によりＷｅｂブラウザ１３０はＷｅｂサーバ３０からＷｅｂページを取得したり、リレーサーバ２３にＷｅｂブラウザ１３０の状態を送信したりすることができる。
【００４５】
プレイヤー側の情報処理装置１００ａにおいて、プレイヤーが閲覧中のＷｅｂページをリアルタイムに共有するには、常にプレイヤーによるＷｅｂページの閲覧状況を監視し、状況の変化に応じて共有に必要なデータをリレーサーバ２３へ送信することが求められる。共有に必要なデータとは、次の４種類である。
（１）閲覧中のＷｅｂページのＵＲＬ
（２）閲覧中のＷｅｂページ全体のレンダリングサイズ
（３）閲覧中のＷｅｂページのスクロール位置
（４）Ｗｅｂページ全体のレンダリング領域の左上隅からのマウスカーソルの位置
【００４６】
これらのデータの多くは、Ｗｅｂブラウザ１３０を用いて閲覧中の既存Ｗｅｂページ１５０からのみアクセス可能である。そのため、これらのデータを監視・取得するには、本システム専用のプログラムが、既存Ｗｅｂページ１５０にアクセスできなければならない。ところが、通常、Ｗｅｂブラウザには“Ｓａｍｅ Ｏｒｉｇｉｎ Ｐｏｌｉｃｙ”というセキュリティ確保の仕組みが備わっている。この仕組みは、あるドメインのＷｅｂページから別のドメインのＷｅｂページにアクセスできないというものある。
【００４７】
そのため、本実施形態にかかるコンテンツ共有システム１は、Ｗｅｂブラウザ１３０の拡張機能を利用して、このセキュリティの壁を乗り越えている。つまり、Ｗｅｂブラウザ１３０の拡張機能の枠組みの中で動作するブラウザ拡張アプリ１４０が、既存Ｗｅｂページ１５０を監視し、共有に必要なデータを取得して、リレーサーバ２３へ送信している。実際には、ブラウザ拡張アプリ１４０が、既存Ｗｅｂページ１５０を直接監視するのではなく、代わりにブラウザ拡張アプリ１４０の一部であるコンテンツスクリプト１５５を既存Ｗｅｂページ１５０内に送り込む。そして、このコンテンツスクリプト１５５が、プレイヤーによる操作の監視と、他のプレイヤーやオーディエンスとの間で共有に必要なデータの取得を行っている。
【００４８】
ブラウザ拡張アプリ１４０は、スクリプト管理部１４１と、通信部１４２と、を含む。スクリプト管理部１４１は、Ｗｅｂブラウザ１３０が表示する既存Ｗｅｂページ１５０を直接操作するプレイヤーによる、該プレイヤーの既存Ｗｅｂページ１５０に対する操作を監視するコンテンツスクリプト１５５を既存Ｗｅｂページ１５０に送り込むとともに、既存Ｗｅｂページ１５０に送り込んだコンテンツスクリプト１５５と、ブラウザ拡張アプリ実行エンジン１３３を介して通信する。通信部１４２は、コンテンツスクリプト１５５が検出したプレイヤーの操作の内容を受け取って、通信モジュール１１１を介してその内容をリレーサーバ２３に送信する。
【００４９】
以上、図３を用いて、本開示の一実施形態に係るコンテンツ共有システム１を構成する、プレイヤー側の情報処理装置１００ａの機能構成について説明した。次に、本開示の一実施形態に係るコンテンツ共有システム１を構成する、システムサーバ２０の機能構成について説明する。
【００５０】
図４は、本開示の一実施形態に係るコンテンツ共有システム１を構成するシステムサーバ２０の機能構成を示す説明図である。以下、図４を用いて本開示の一実施形態に係るコンテンツ共有システム１を構成するシステムサーバ２０の機能構成について説明する。
【００５１】
図４に示したように、システムサーバ２０は、ＣＰＵ、ＲＯＭ、ＲＡＭ、キーボード、マウス、マイク、ディスプレイ等で構成されるハードウェア２１と、ハードウェア２１によって実行されるＯＳ２２と、ＯＳ２２によって実行されるリレーサーバ２３及び専用Ｗｅｂアプリサーバ２４と、を含んで構成される。
【００５２】
ハードウェア２１は通信モジュール２５を含む。通信モジュール２５は、リレーサーバ２３と、情報処理装置１００ａで実行されるブラウザ拡張アプリ１４０との間の通信、及び、リレーサーバ２３と、情報処理装置２００ａで実行される専用Ｗｅｂアプリ２４０を実行する。
【００５３】
プレイヤー側の機器である情報処理装置１００ａのブラウザ拡張アプリ１４０と、オーディエンス側の機器である情報処理装置２００ａの専用Ｗｅｂアプリ２４０との間でやりとりされるメッセージの交換を行うリレーサーバ２３は、接続管理部２８と、転送部２９と、を含む。接続管理部２８は、上述したような、リレーサーバ２３に接続中のプレイヤーとオーディエンスの管理を行う。転送部２９は、上述したような、ブラウザ拡張アプリ１４０から受信した閲覧中の既存ＷｅｂページのＵＲＬ、レンダリングサイズ、スクロール位置、カーソル位置を、リレーサーバ２３に登録されている専用Ｗｅｂアプリ２４０や、送信元以外のブラウザ拡張アプリ１４０へ転送する。
【００５４】
専用Ｗｅｂアプリサーバ２４は、上述したように、オーディエンス側の情報処理装置２００ａで動作する専用Ｗｅｂアプリを格納する。専用Ｗｅｂアプリサーバ２４からの専用Ｗｅｂアプリの提供は、情報処理装置２００ａで実行されるＷｅｂブラウザ２３０から特定のＵＲＬにアクセスすることで行われる。
【００５５】
以上、図４を用いて本開示の一実施形態に係るコンテンツ共有システム１を構成するシステムサーバ２０の機能構成について説明した。次に、本開示の一実施形態に係るコンテンツ共有システム１を構成する、オーディエンス側の情報処理装置２００ａの機能構成について説明する。
【００５６】
図５は、本開示の一実施形態に係るコンテンツ共有システム１を構成する、オーディエンス側の情報処理装置２００ａの機能構成を示す説明図である。
【００５７】
図５に示したように、オーディエンス側の情報処理装置２００ａは、ＣＰＵ、ＲＯＭ、ＲＡＭ、キーボード、マウス、マイク、ディスプレイ等で構成されるハードウェア２１０と、ハードウェア２１０によって実行されるＯＳ２２０と、ＯＳ２２０によって実行されるＷｅｂブラウザ２３０と、を含んで構成される。
【００５８】
ハードウェア２１０は通信モジュール２１１を含む。通信モジュール２１１は、後述の専用Ｗｅｂアプリ２４０とリレーサーバ２３との間の通信を実行する。ＯＳ２２０は、ユーザのキーボード入力や画面出力といった入出力機能、ディスクやメモリの管理機能その他の、複数アプリケーションソフトから共通して利用される基本的な機能を提供し、情報処理装置２００ａを管理するソフトウェアである。
【００５９】
Ｗｅｂブラウザ２３０は、ＯＳ２２０により実行される、Ｗｅｂページを表示するためのソフトウェアである。Ｗｅｂブラウザ２３０は、ＨＴＭＬエンジン２３１と、スクリプト言語処理エンジン２３２と、描画処理エンジン２３４と、プロトコルスタック２３５と、を含んで構成される。
【００６０】
ＨＴＭＬエンジン２３１は、Ｗｅｂサーバ３０から送られる、ＨＴＭＬ言語によって作られた既存Ｗｅｂページ１５０について、送られてきたＨＴＭＬ言語を解析する。ＨＴＭＬエンジン２３１によりＨＴＭＬ言語が解析されると、解析結果は、描画処理エンジン２３４により画像として出力される。Ｗｅｂサーバ３０から送られる既存Ｗｅｂページ２５０は、既存Ｗｅｂページのコンテンツ２５１を含む。既存Ｗｅｂページのコンテンツ２５１は、コンテンツの内容が記述されたＨＴＭＬ文書２５２と、コンテンツのレイアウトを定義するスタイルシート２５３と、コンテンツの動作を定義するスクリプト２５４と、を含んで構成される。
【００６１】
スクリプト言語処理エンジン２３２は、Ｗｅｂサーバ３０から送られる、ＨＴＭＬ言語によって作られたＷｅｂページに埋め込まれるスクリプト言語を解釈し、スクリプトを実行する。本実施形態では、スクリプト言語処理エンジン２３２は、Ｗｅｂサーバ３０から送られてきた既存Ｗｅｂページ１５０のスクリプト１５５の内容を解釈し、スクリプト１５５に記述された処理を実行する。
【００６２】
描画処理エンジン２３４は、ＨＴＭＬ言語によって作られたＷｅｂページの、ＨＴＭＬエンジン２３１による解析結果に基づいて画像として出力するための描画処理を実行する。プロトコルスタック２３５は、ネットワーク機能を提供するためのソフトウェア群であり、プロトコルスタック２３５によりＷｅｂブラウザ２３０はＷｅｂサーバ３０からＷｅｂページを取得したり、リレーサーバ２３と専用Ｗｅｂアプリ２４０との間の通信を実行したりすることができる。
【００６３】
Ｗｅｂページをプレイヤー側とオーディエンス側とでリアルタイムに共有するためには、オーディエンス側の情報処理装置２００ａで、Ｗｅｂブラウザ２３０上で動作する専用Ｗｅｂアプリ２４０を、専用Ｗｅｂアプリサーバ２４から取得する。専用Ｗｅｂアプリ２４０は、プレイヤーによる既存Ｗｅｂページ１５０の閲覧や操作の状況を表示することはできるが、オーディエンスによる当該Ｗｅｂページに対する操作は受け付けない。
【００６４】
専用Ｗｅｂアプリ２４０は、プレイヤーによる既存Ｗｅｂページ１５０の閲覧や操作の状況をリアルタイムに情報処理装置２００ａで表示するためのスクリプト２６０を含んで構成される。スクリプト２６０は、リレーサーバ２３との間で通信を実行し、プレイヤー側の情報処理装置１００ａにおいて、プレイヤーが閲覧中のＷｅｂページを情報処理装置２００ａでリアルタイムに共有する。
【００６５】
スクリプト２６０は、専用Ｗｅｂアプリ２４０に含まれ、リレーサーバ２３との間で通信を実行し、当該通信により得られる情報を用いて、プレイヤー側の情報処理装置１００ａと連動したレンダリング条件の反映処理及びカーソル位置の更新処理を実行する。スクリプト２６０が、プレイヤー側の情報処理装置１００ａと連動したレンダリング条件の反映処理及びカーソル位置の更新処理を実行することで、オーディエンス側の情報処理装置２００ａは、プレイヤーが操作する既存Ｗｅｂページの画面を、プレイヤー側と同じように画面に表示することができる。
【００６６】
スクリプト２６０は、コンテンツ更新部２６１と、通信部２６２と、を含む。通信部２６２は、リレーサーバ２３から、既存Ｗｅｂページ１５０を直接操作するプレイヤーによる、該プレイヤーの既存Ｗｅｂページ１５０に対する操作の内容を受信する。コンテンツ更新部２６１は、通信部２６２が受信したプレイヤーによる操作内容を、プレイヤー側の情報処理装置で表示される既存Ｗｅｂページ１５０と同一の既存Ｗｅｂページ１５０の表示に反映させる。
【００６７】
以上、本開示の一実施形態に係るコンテンツ共有システム１を構成する、オーディエンス側の情報処理装置２００ａの機能構成について説明した。次に、本開示の一実施形態に係るコンテンツ共有システム１を構成する各装置の動作について説明する。
【００６８】
［１−３．各装置の動作］
まず、プレイヤー側の情報処理装置１００ａの動作について説明する。図６は、プレイヤー側の情報処理装置１００ａの動作を示す流れ図であり、コンテンツスクリプト１５５とブラウザ拡張アプリ１４０が実行する処理を示す流れ図である。
【００６９】
ブラウザ拡張アプリ１４０は、常にＷｅｂブラウザのウィンドウや、Ｗｅｂブラウザがタブブラウザである場合、表示中のタブのＵＲＬの変化を見張っている。そして、ＵＲＬの変化イベントを検出すると（ステップＳ１２４）、新しいＵＲＬの情報をリレーサーバ２３へ送信する（ステップＳ１２６）とともに、新たにロードされた既存Ｗｅｂページ１５０へ、コンテンツスクリプト１５５を送り込む（ステップＳ１２５）。既存Ｗｅｂページ１５０が子フレームを含む場合は、それぞれの子フレームにロードされる既存Ｗｅｂページにもコンテンツスクリプト１５５を送り込む。
【００７０】
既存Ｗｅｂページ１５０へのコンテンツのロードが完了（ステップＳ１０１）し、ブラウザ拡張アプリ１４０が、既存Ｗｅｂページ１５０にコンテンツスクリプト１５５を送り込むと、ロードされたコンテンツスクリプト１５５は、まずブラウザ拡張アプリ１４０とのセッションを確立し（ステップＳ１０２）、マウスカーソル位置の監視や、子フレーム位置の問い合わせ待ちを開始する。マウスカーソル位置の監視は、例えば次のようにJavaScript（登録商標）でdocumentオブジェクトのmousemoveイベントを監視することで実現する。
【００７１】
document.addEventListener('mousemove', function(event){
var x_cursor = event.pageX;
var y_cursor = event.pageY;
}, true);
【００７２】
ページのロード先がトップレベルのフレームの場合は、コンテンツスクリプト１５５は、Ｗｅｂページ全体のレンダリングサイズとスクロール位置を取得し、ブラウザ拡張アプリ１４０経由でリレーサーバ２３へ送信する（ステップＳ１０３、Ｓ１０４、Ｓ１２７）。またコンテンツスクリプト１５５は、Ｗｅｂページ全体のレンダリングサイズやスクロール位置の監視を開始する。コンテンツスクリプト１５５による、Ｗｅｂページ全体のレンダリングサイズの監視は、windowオブジェクトのresizeイベントや、定期的に実行されるタイマーイベントのタイミングでのチェックによって実現する。
【００７３】
タイマーによってレンダリングサイズの変化を監視するには、コンテンツスクリプト１５５はタイマー登録を行い（ステップＳ１０５）、タイマーイベントを待機し（ステップＳ１０６）、Ｗｅｂページ全体のレンダリングサイズを取得する（ステップＳ１０７）。コンテンツスクリプト１５５は、サイズの変化があったかどうかを判断し（ステップＳ１０８）、サイズの変化があった場合は、コンテンツスクリプト１５５は、Ｗｅｂページ全体のレンダリングサイズをブラウザ拡張アプリ１４０経由でリレーサーバ２３へ送信する（ステップＳ１０９、Ｓ１２７）。Ｗｅｂページ全体のレンダリングサイズの取得は、例えば次のようなスクリプトで実現する。
【００７４】
width = Math.max.apply(null, [
document.body.clientWidth,
document.body.scrollWidth,
document.documentElement.scrollWidth,
document.documentElement.clientWidth
]);
height = Math.max.apply(null, [
document.body.clientHeight,
document.body.scrollHeight,
document.documentElement.scrollHeight,
document.documentElement.clientHeight
]);
【００７５】
コンテンツスクリプト１５５は、スクロールイベントの発生を待機し（ステップＳ１１０）、スクロールイベントが発生すればスクロール位置を取得する（ステップＳ１１１）。コンテンツスクリプト１５５は、スクロール位置を取得した結果、スクロール位置が変化したかどうかを判断し（ステップＳ１１２）、スクロール位置が変化していれば、そのスクロール位置をブラウザ拡張アプリ１４０経由でリレーサーバ２３へ送信する（ステップＳ１１３、Ｓ１２７）。スクロール位置の監視は、例えば次のようなスクリプトでdocumentオブジェクトのscrollイベントを監視することで実現する。
【００７６】
document.addEventListener('scroll', function(event){
var scrollLeft = document.body.scrollLeft;
var scrollTop = document.body.scrollTop;
}, true);
【００７７】
またコンテンツスクリプト１５５は、マウスイベントの発生を待機し（ステップＳ１１４）、マウスイベントが発生するとカーソル位置を取得する（ステップＳ１１５）。コンテンツスクリプト１５５は、カーソル位置を取得した結果、スクロール位置が変化したかどうかを判断し（ステップＳ１１６）、カーソル位置が変化していれば、そのカーソル位置をブラウザ拡張アプリ１４０経由でリレーサーバ２３へ送信する（ステップＳ１１７）。
【００７８】
コンテンツスクリプト１５５は、Ｗｅｂページ全体のレンダリングサイズやスクロール位置、マウスカーソル位置の監視を行う。そして、これらの情報の変化を検出した場合は、コンテンツスクリプト１５５はそれぞれの値を取得し、取得した値をブラウザ拡張アプリ１４０へと送信する。
【００７９】
ブラウザ拡張アプリ１４０は、コンテンツスクリプト１５５から受信した、Ｗｅｂページ全体のレンダリングサイズやスクロール位置を、そのままリレーサーバ２３へと送信する。しかし、ブラウザ拡張アプリ１４０は、コンテンツスクリプト１５５から受信したマウスカーソル位置は、リレーサーバ２３へと送信する前に座標変換処理が必要になる場合がある。なぜなら、トップレベルフレームではなく子フレームに埋め込まれたコンテンツスクリプト１５５からマウスカーソル位置の情報を受信した場合、そのマウスカーソル位置は、子フレームの左上隅からの座標であって、トップレベルフレームの左上隅からの座標ではないためである。
【００８０】
図９は、フレームとマウスカーソル位置の座標との関係の一例を示す説明図である。図９に示すように、フレーム“frame2”上でマウスカーソルが動いた時、フレーム“frame2”のコンテンツスクリプト１５５から受信するマウスカーソル位置は（x_cursor, y_cursor）である。これをトップレベルフレームの左上隅からの座標（x_out, y_out）に変換するため、ブラウザ拡張アプリ１４０は、フレーム“frame2”の、フレーム“frame1”内でのオフセット位置（x_offset2, y_offset2）と、フレーム“frame1”のトップレベルフレーム内でのオフセット位置（x_offset1,
y_offset1）を取得し、フレーム“frame2”のコンテンツスクリプト１５５からマウスカーソル位置（x_cursor, y_cursor）に加算する。それぞれの子フレームのオフセット位置は、親フレームにロードされているＷｅｂページ内からのみアクセス可能である。従って、ブラウザ拡張アプリ１４０は、フレーム名やフレームのＵＲＬをキーにして、親フレームのコンテンツスクリプト１５５にオフセット位置の問い合わせを行う。
【００８１】
ブラウザ拡張アプリ１４０は、コンテンツスクリプト１５５から送信されたカーソル位置の情報が、トップレベルフレームからのものかどうかを判断する（ステップＳ１２２）。トップレベルフレームからのものであれば、ブラウザ拡張アプリ１４０はカーソル位置の情報をリレーサーバ２３へ送信する（ステップＳ１２７）が、トップレベルフレームからのものでなければ、ブラウザ拡張アプリ１４０はフレーム位置の問い合わせを他フレームのコンテンツスクリプト１５５へ送信する（ステップＳ１２３）。
【００８２】
コンテンツスクリプト１５５は、ブラウザ拡張アプリ１４０からの子フレーム位置の問い合わせを待機し（ステップＳ１１８）、該当の子フレームを含んでいるかどうかを判断し（ステップＳ１１９）、該当の子フレームを含んでいる場合には、子フレームのオフセット位置の取得及びブラウザ拡張アプリ１４０への送信を行う（ステップＳ１２０）。子フレームのオフセット位置の情報をコンテンツスクリプト１５５から受け取ったブラウザ拡張アプリ１４０は、子フレームのオフセット位置をカーソル位置に加算する（ステップＳ１２１）。
【００８３】
カーソル位置の取得及び子フレームのオフセット位置の取得を、トップレベルのフレームになるまで繰り返すことで、上記ステップＳ１１５でコンテンツスクリプト１５５が取得したカーソル位置の情報は、トップレベルのフレームにおけるカーソル位置に変換されることになる。
【００８４】
なおブラウザ拡張アプリ１４０は、どのプレイヤーによる操作かを識別できるように、リレーサーバ２３に送信するデータに、プレイヤーを一意に識別できる情報（例えば、システムへのログインＩＤ等）を付加する。
【００８５】
以上、プレイヤー側の情報処理装置１００ａの動作について説明した。次に、リレーサーバ２３の動作について説明する。
【００８６】
図７は、リレーサーバ２３の動作を示す流れ図である。以下、図７を用いてリレーサーバ２３の動作について説明する。
【００８７】
リレーサーバ２３は、プレイヤー及びオーディエンスの登録管理、及び、プレイヤー側の情報処理装置から送信される、ＵＲＬ、レンダリングサイズ、スクロール位置、カーソル位置の情報を、送信元以外の情報処理装置に対して送信する役割を有する。
【００８８】
プレイヤー側のブラウザ拡張アプリ１４０からコンテンツ共有システム１への登録が要求され、ブラウザ拡張アプリ１４０とリレーサーバ２３との間の接続が開始されると（ステップＳ２０１）、リレーサーバ２３は、管理データベース３１にブラウザ拡張アプリ１４０の情報を登録する（ステップＳ２０２）。同様に、オーディエンス側の専用Ｗｅｂアプリ２４０からコンテンツ共有システム１への登録が要求され、専用Ｗｅｂアプリ２４０とリレーサーバ２３との間の接続が開始されると（ステップＳ２０３）、リレーサーバ２３は、管理データベース３１に専用Ｗｅｂアプリ２４０の情報を登録する（ステップＳ２０４）。
【００８９】
一方、ブラウザ拡張アプリ１４０とリレーサーバ２３との間の接続が終了されると（ステップＳ２０５）、リレーサーバ２３は、管理データベース３１からブラウザ拡張アプリ１４０の情報を削除する（ステップＳ２０６）。同様に、オーディエンス側の専用Ｗｅｂアプリ２４０とリレーサーバ２３との間の接続が終了されると（ステップＳ２０７）、リレーサーバ２３は、管理データベース３１からその専用Ｗｅｂアプリ２４０の情報を削除する（ステップＳ２０８）。
【００９０】
プレイヤー側のブラウザ拡張アプリ１４０からＵＲＬの情報（ステップＳ２１１）、レンダリングサイズの情報（ステップＳ２１２）、スクロール位置の情報（ステップＳ２１３）、カーソル位置の情報（ステップＳ２１４）をそれぞれ受信すると、リレーサーバ２３は、管理データベース３１から、接続中のアプリの情報を取得する（ステップＳ２１５）。そしてリレーサーバ２３は、取得したアプリに対し、それぞれ、ＵＲＬの情報（ステップＳ２１６）、レンダリングサイズの情報（ステップＳ２１７）、スクロール位置の情報（ステップＳ２１８）、カーソル位置の情報（ステップＳ２１９）を送信する。
【００９１】
ここでリレーサーバ２３は、ＵＲＬの情報、レンダリングサイズの情報、スクロール位置の情報、カーソル位置の情報を送信する際には、送信元以外の全ての接続中のアプリへ情報を送信する。これにより、あるプレイヤーが操作した内容は、その他の全てのプレイヤー側及びオーディエンス側の情報処理装置にリアルタイムに反映される。
【００９２】
以上、図７を用いてリレーサーバ２３の動作について説明した。次にオーディエンス側の情報処理装置２００ａの動作について説明する。
【００９３】
図８は、オーディエンス側の情報処理装置２００ａの動作について説明する流れ図であり、専用Ｗｅｂアプリ２４０の動作を示すものである。以下、図８を用いてオーディエンス側の情報処理装置２００ａの動作について説明する。
【００９４】
オーディエンス側の情報処理装置２００ａのＷｅｂブラウザ２３０上で実行される専用Ｗｅｂアプリ２４０は、プレイヤーが閲覧中のＷｅｂページが、プレイヤーによって操作される様子を、オーディエンス側の情報処理装置２００ａにリアルタイムに表示する。プレイヤーとオーディエンスとで共有される既存Ｗｅｂページ１５０は、既存Ｗｅｂページ１５０を提供するＷｅｂサーバ３０から専用Ｗｅｂアプリ２４０内のiframeに直接ロードされる。例えば、本実施形態では、既存Webページ用のiframeを次のように定義したとする。
【００９５】
<iframe id="shared_page"></iframe>
【００９６】
専用Ｗｅｂアプリ２４０は、リレーサーバ２３からＵＲＬ情報(url)を受信した場合（ステップＳ３０１）、例えばJavaScriptで次のような処理を記述すると、そのＵＲＬのＷｅｂページをiframe内に表示（ステップＳ３０２）することが出来る。
【００９７】
document.getElementById('shared_page').src = url;
【００９８】
また、専用Ｗｅｂアプリ２４０上で、プレイヤーとオーディエンスとで、マウスカーソルが既存Ｗｅｂページ１５０の同じ位置を指し示すためには、既存Ｗｅｂページ１５０のレンダリング結果が同じになる必要がある。そのため、既存Ｗｅｂページ１５０用のiframeのサイズを、既存Ｗｅｂページ１５０全体のレンダリングサイズに合わせることで、プレイヤー側でのレンダリング結果と同じにする。
【００９９】
専用Ｗｅｂアプリ２４０は、リレーサーバ２３からレンダリングサイズ（width, height）を受信すると（ステップＳ３０３）、例えばJavaScriptで次のような処理を記述することで、既存Ｗｅｂページ１５０を表示するiframeのサイズを変更（ステップＳ３０４）し、既存Ｗｅｂページ１５０のレンダリング結果をプレイヤー側と一致させることが出来る。
【０１００】
var node = document.getElementById('shared_page');
node.width = width;
node.height = height;
【０１０１】
オーディエンス側の情報処理装置２００ａで、プレイヤー側での既存Ｗｅｂページ１５０の表示と一致させるには、プレイヤー側の情報処理装置１００ａで実行されたスクロール操作に合わせて、オーディエンス側の情報処理装置２００ａで表示される既存Ｗｅｂページ１５０も、適宜スクロールさせる必要がある。
【０１０２】
図１１は、専用Ｗｅｂアプリ２４０でのレンダリング処理を示す説明図である。図１１に示すように、既存Ｗｅｂページ１５０は、専用Ｗｅｂページ２４０内に全体が見える形でレンダリングされている。従って、専用Ｗｅｂアプリ２４０自体をスクロールし、Ｖｉｅｗｐｏｒｔ（描画領域）を移動させることで、既存Ｗｅｂページ１５０もスクロールされたように見える。専用Ｗｅｂアプリ２４０がリレーサーバ２３からスクロール位置（left, top）を受信した場合（ステップＳ３０５）、専用Ｗｅｂアプリ２４０は、既存Ｗｅｂページ１５０を表示するiframeの位置をスクロール位置に加算し（ステップＳ３０６）、加算結果に基づいてスクロール位置を更新する（ステップＳ３０７）。例えばJavaScriptで次のような処理を記述することで、既存Ｗｅｂページ１５０の表示をプレイヤー側と一致させることが出来る。
【０１０３】
window.scrollTo(left + x_offset, top + y_offset);
【０１０４】
プレイヤーが情報処理装置１００ａで操作するカーソルは、既存Ｗｅｂページ１５０内に描画するのではなく、既存Ｗｅｂページ１５０の上に描画する。専用Ｗｅｂアプリ２４０がリレーサーバ２３からカーソル位置（x_in, y_in）を受信した場合（ステップＳ３０８）、専用Ｗｅｂアプリ２４０は、既存Ｗｅｂページ１５０を表示するiframeの位置をカーソル位置に加算し（ステップＳ３０９）、加算結果に基づいてカーソルを表現するＤＯＭ（Ｄｏｃｕｍｅｎｔ Ｏｂｊｅｃｔ Ｍｏｄｅｌ）オブジェクトの位置を更新する（ステップＳ３１０）。図１２は、プレイヤーが情報処理装置１００ａで操作するカーソルを既存Ｗｅｂページ１５０の上に描画する様子を示す説明図である。図１２に示すように、既存Ｗｅｂページ１５０の上にカーソル表示用のレイヤを配置し、当該レイヤにカーソルを描画して重ね合わせることで、プレイヤーが情報処理装置１００ａで操作するカーソルの既存Ｗｅｂページ１５０の上への描画を表現する。
【０１０５】
図１０は、リレーサーバ２３から受信するカーソル位置と、専用Ｗｅｂアプリ２４０上でのカーソル位置との関係を示す説明図である。図１０に示すように、専用Ｗｅｂアプリ２４０がリレーサーバ２３から受信したカーソル位置は、既存Ｗｅｂページ１５０を表示するiframeの左上隅からの座標である。従って、専用Ｗｅｂアプリ２４０は、iframeのオフセット分を加えた上で、プレイヤーが情報処理装置１００ａで操作するカーソルをカーソルレイヤに描画する。プレイヤーが情報処理装置１００ａで操作するカーソルは、Ｗｅｂブラウザ２３０にカーソルのイメージを張ることで描画してもよいし、Ｃａｎｖａｓ等のブラウザ上に図を描くために策定された仕様に基づいて描画してもよい。
【０１０６】
以上、オーディエンス側の情報処理装置２００ａの動作について説明した。次に、コンテンツ共有システム１に参加するプレイヤーが複数存在する場合の表示処理について説明する。
【０１０７】
コンテンツ共有システム１に参加するプレイヤーが複数存在する場合は、プレイヤー側の情報処理装置同士でも、既存Ｗｅｂページの閲覧状況を共有する。図１３は、プレイヤー側の情報処理装置１００ａの動作を示す流れ図であり、プレイヤー側の情報処理装置１００ａで実行されるコンテンツスクリプト１５５とブラウザ拡張アプリ１４０が、リレーサーバ２３経由で他のプレイヤー側の情報処理装置１００ｂから受信する共有に必要なデータの処理の流れを示すものである。
【０１０８】
情報処理装置１００ａのブラウザ拡張アプリ１４０は、リレーサーバ２３から新たなＵＲＬの情報を受信した場合は（ステップＳ４０１）、Ｗｅｂブラウザ１３０のウィンドウやタブで表示するＵＲＬを変更し、新しいＷｅｂページをＷｅｂサーバ３０からロードする（ステップＳ４０２）とともに、ロードしたＷｅｂページにコンテンツスクリプト１５５をロードする（ステップＳ４０３）。コンテンツスクリプト１５５は、図６に示した動作を実行するとともに、プレイヤーによるスクロール位置やカーソル位置の変更に伴うイベントの受信待ちを行う。
【０１０９】
情報処理装置１００ａのブラウザ拡張アプリ１４０は、リレーサーバ２３からレンダリングサイズを受信した場合は（ステップＳ４０５）、既存Ｗｅｂページのレンダリング結果が同じになるように、Ｗｅｂブラウザ１３０のウィンドウのサイズをレンダリングサイズの横幅に合わせて変更する（ステップＳ４０６）。
【０１１０】
情報処理装置１００ａのブラウザ拡張アプリ１４０は、リレーサーバ２３からスクロール位置を受信した場合は（ステップＳ４０７）、トップレベルフレームに送り込まれたコンテンツスクリプト１５５に、スクロール位置を送信する（ステップＳ４０８）。スクロール位置の受信待ち状態にあるコンテンツスクリプト１５５は（ステップＳ４０９）、ブラウザ拡張アプリ１４０からスクロール位置の情報を受信すると、既存Ｗｅｂページ１５０のスクロール位置を更新する（ステップＳ４１０）。コンテンツスクリプト１５５は、スクロール位置（left, top）をブラウザ拡張アプリ１４０から受信した場合、例えばJavaScriptで次のような処理を記述すれば良い。
【０１１１】
window.scrollTo(left, top);
【０１１２】
情報処理装置１００ａのブラウザ拡張アプリ１４０は、リレーサーバ２３からカーソル位置を受信した場合は（ステップＳ４１１）、トップレベルフレームに送り込まれたコンテンツスクリプト１５５に、カーソル位置を送信する（ステップＳ４１２）。カーソル位置の受信待ち状態にあるコンテンツスクリプト１５５は（ステップＳ４１３）、カーソル位置を受信すると、既存Ｗｅｂページ内にカーソルを描画する（ステップＳ４１４）。カーソル描画はイメージを張ることで描画してもよいし、Ｃａｎｖａｓ等のブラウザ上に図を描くために策定された仕様に基づいて描画してもよい。なお、カーソルを描画する際には、コンテンツスクリプト１５５は、既存Ｗｅｂページ１５０の上に描画されるように、ＣＳＳ（Ｃａｓｃａｄｉｎｇ Ｓｔｙｌｅ Ｓｈｅｅｔｓ）のz-index等で描画位置を調整する。
【０１１３】
このように、プレイヤー側の情報処理装置１００ａの操作内容をリレーサーバ２３に伝送し、リレーサーバ２３は、接続元以外のプレイヤー及びオーディエンスに対して操作内容を転送することで、プレイヤー側の情報処理装置１００ａ、１００ｂと、オーディエンス側の情報処理装置２００ａ、２００ｂ、２００ｃとの間で、同一のＷｅｂページの表示をリアルタイムに共有させることができる。そして、プレイヤー側の情報処理装置で、既存Ｗｅｂページ１５０に対して操作された内容は、リレーサーバ２３を介して、操作が実行された装置以外のプレイヤー側及びオーディエンス側の情報処理装置に送信される。これにより、プレイヤー側の情報処理装置で既存Ｗｅｂページ１５０に対して操作された内容が、他の情報処理装置に即座に反映されることになり、プレイヤーによる既存Ｗｅｂページ１５０に対する操作内容を他のプレイヤー側及びオーディエンス側の情報処理装置でも表示することができる。
【０１１４】
以上、本開示の一実施形態に係るコンテンツ共有システム１を構成する各装置の動作について説明した。次に、本開示の一実施形態に係るコンテンツ共有システム１を構成する、プレイヤー側の情報処理装置１００ａ及びオーディエンス側の情報処理装置２００ａに表示されるＷｅｂブラウザのユーザインタフェースについて説明する。
【０１１５】
［１−４．ユーザインタフェース例］
まず、プレイヤー側の情報処理装置に表示されるＷｅｂブラウザのユーザインタフェース例について説明する。図１４は、プレイヤー側の情報処理装置に表示されるＷｅｂブラウザ１３０のユーザインタフェース３００を示す説明図である。プレイヤー側の情報処理装置（例えば情報処理装置１００ａ）に表示されるＷｅｂブラウザ１３０のユーザインタフェースは、ブラウザ拡張アプリ１４０によって実現される。
【０１１６】
Ｗｅｂブラウザ１３０のユーザインタフェース３００は、タブ３０１ａ、３０１ｂ、３０１ｃと、共有切り替えボタン３０２と、プレイヤーアイコン３１１ａ、３１１ｂ、３１１ｃと、オーディエンス情報表示領域３２０と、を含んで構成される。オーディエンス情報表示領域３２０には、オーディエンスアイコン３２１ａ、３２１ｂ、３２１ｃ、３２１ｄ、３２１ｅと、オーディエンスからのフィードバック情報３２２と、が表示される。なお、本技術においては、タブの数は３つに限定されるものではないことは言うまでもない。
【０１１７】
プレイヤーアイコン３１１ａ、３１１ｂ、３１１ｃは、各プレイヤーのマウスカーソルである。プレイヤーアイコン３１１ａ、３１１ｂ、３１１ｃとして、それぞれのプレイヤーを識別するための画像と、ユーザ名（図１４では“ｕｓｅｒ ｎａｍｅ”と表記）とが表示される。プレイヤーアイコン３１１ａ、３１１ｂ、３１１ｃは、それぞれのプレイヤーが情報処理装置を用いて（例えば、マウスで操作したり、画面をタッチしたりするなどして）Ｗｅｂブラウザ１３０上で移動させることができる。各プレイヤーは、プレイヤー側の情報処理装置で実行されるＷｅｂブラウザ１３０を操作することで、上述したように、リレーサーバ２３経由で、自らの操作を他のプレイヤーやオーディエンスが操作する情報処理装置との間でリアルタイムに共有することができる。
【０１１８】
共有切り替えボタン３０２は、他のプレイヤーやオーディエンスとの間の共有のオン・オフを切り替えるためのボタンである。プレイヤーが共有切り替えボタン３０２を操作して共有をオフにすると、当該ウィンドウやタブでのプレイヤーの操作は、他のプレイヤーやオーディエンスには反映されなくなる。
【０１１９】
プレイヤーの操作に対して、オーディエンス側の情報処理装置２００ａ〜２００ｃを用いてオーディエンスから反応があると、その反応がオーディエンス情報表示領域３２０に表示される。オーディエンスからの反応としては、オーディエンスアイコン３２１ａ〜３２１ｅとともに表示される、オーディエンスが入力した文字情報であったり、後述する、オーディエンスからの拍手や笑いを意味するボタンの押下であったりする。
【０１２０】
このように、プレイヤーがＷｅｂページへの操作を行うエリアとは別に、オーディエンスからのコメントやフィードバック表示のエリアを設けることで、各プレイヤーは、オーディエンスからのコメントやフィードバックを閲覧しながら、Ｗｅｂページの操作を行うことができる。
【０１２１】
オーディエンス情報表示領域３２０へのオーディエンスアイコン３２１ａ〜３２１ｅの表示手法は様々なバリエーションが考えられる。オーディエンス情報表示領域３２０へのオーディエンスアイコン３２１ａ〜３２１ｅの表示手法については後に詳述する。
【０１２２】
図１４では、プレイヤー側の情報処理装置１００ａに表示されるＷｅｂブラウザ１３０のユーザインタフェース３００として、オーディエンス情報表示領域３２０がユーザインタフェース３００の下部領域に表示されているものを示したが、本開示はかかる例に限定されない。また、オーディエンスがプレイヤーへのフィードバックのために文章を入力した際の、オーディエンス情報表示領域３２０へのオーディエンスアイコン３２１ａ〜３２１ｅの表示手法は特定のものに限定されないことは言うまでもないが、例えば画面の下の方から上に向かって現れるように表示しても良く、Ｗｅｂブラウザ１３０にフェードインするように表示しても良い。
【０１２３】
図１５は、プレイヤー側の情報処理装置１００ａに表示されるＷｅｂブラウザ１３０のユーザインタフェース３００を示す説明図である。
【０１２４】
図１５に示したユーザインタフェース３００は、オーディエンス情報表示領域３２０がユーザインタフェース３００の右側に表示されている。オーディエンス情報表示領域３２０には、オーディエンスからの反応がリアルタイムに表示される点は図１４に示したものと変わらないが、図１５に示したユーザインタフェース３００では、オーディエンス情報表示領域３２０には、オーディエンスからの反応が、オーディエンスコメント表示領域３２３に時系列で表示される。オーディエンスコメント表示領域３２３には、コメントを返したユーザ名（図１５では“ｕｓｅｒ１”〜“ｕｓｅｒ９”で表記）及びコメント（図１５では“ｕｓｅｒ ｃｏｍｍｅｎｔ”で表記）が表示される。また、オーディエンス情報表示領域３２０には、オーディエンスコメント表示領域３２３とは別に、オーディエンスから、後述の拍手ボタン４３２と、笑いボタン４３３が押された数または頻度を表示するための、笑い情報表示領域３２４及び拍手情報表示領域３２５が設けられている。
【０１２５】
このように、オーディエンスからのコメントを時系列でオーディエンス情報表示領域３２０に表示することで、各プレイヤーは、話題にすべきコメントをチェックすることができる。
【０１２６】
以上、プレイヤー側の情報処理装置に表示されるＷｅｂブラウザのユーザインタフェース例について説明した。次に、オーディエンス側の情報処理装置に表示されるＷｅｂブラウザのユーザインタフェース例について説明する。
【０１２７】
図１６は、オーディエンス側の情報処理装置に表示されるＷｅｂブラウザ２３０のユーザインタフェース４００を示す説明図である。オーディエンス側の情報処理装置（例えば、情報処理装置２００ａ）に表示されるＷｅｂブラウザ２３０のユーザインタフェース４００は、専用Ｗｅｂアプリ２４０によって実現される。
【０１２８】
オーディエンス側の情報処理装置に表示されるＷｅｂブラウザ２３０のユーザインタフェース４００は、タブ４０１ａと、プレイヤーアイコン４１１ａ、４１１ｂ、４１１ｃと、オーディエンス情報表示領域４２０と、を含んで構成される。オーディエンス情報表示領域３２０には、オーディエンスアイコン４２１ａ、４２１ｂ、４２１ｃ、４２１ｄ、４２１ｅと、オーディエンスからのフィードバック情報４２２と、テキストボックス４３１と、拍手ボタン４３２と、笑いボタン４３３と、が表示される。
【０１２９】
プレイヤーアイコン４１１ａ、４１１ｂ、４１１ｃは、各プレイヤーのマウスカーソルである。各プレイヤーが、プレイヤー側の情報処理装置で実行されるＷｅｂブラウザ１３０を操作すると、上述したようにリレーサーバ２３経由でその操作の内容がリアルタイムにオーディエンス側の情報処理装置に反映される。これにより、オーディエンスはプレイヤー操作をリアルタイムに共有することができる。
【０１３０】
プレイヤーの操作に対して、オーディエンス側の情報処理装置２００ａ〜２００ｃを用いてオーディエンスから反応があると、その反応がオーディエンス情報表示領域４２０に表示される。オーディエンスからの反応としては、オーディエンスアイコン４２１ａ〜４２１ｅとともに表示される、オーディエンスアイコン４２１ａ〜４２１ｅには、コメントを返したユーザ名（図１６では“ｕｓｅｒ１”〜“ｕｓｅｒ５”で表記）及びコメント（図１６では“Ｕｓｅｒ Ｃｏｍｍｅｎｔ”で表記）が表示される。オーディエンス情報表示領域４２０に表示される情報は、オーディエンスがテキストボックス４３１に入力した文字情報であったり、後述する、オーディエンスからの拍手や笑いを意味する拍手ボタン４３２や笑いボタン４３３の押下に伴う表示であったりする。
【０１３１】
テキストボックス４３１、拍手ボタン４３２及び笑いボタン４３３は、Ｗｅｂブラウザ２３０上に一体となって表示されていてもよい。テキストボックス４３１、拍手ボタン４３２及び笑いボタン４３３は、当該オーディエンスが操作するＷｅｂブラウザ２３０にのみ表示されるものである。テキストボックス４３１、拍手ボタン４３２及び笑いボタン４３３は、オーディエンスがプレイヤー操作に対して反応を返すためのものであるが、オーディエンスがプレイヤー操作に対して反応を返さない場合であってもＷｅｂブラウザ２３０上に常時表示されていると、プレイヤー操作の閲覧の邪魔になる。従って、これらテキストボックス４３１、拍手ボタン４３２及び笑いボタン４３３は、画面表示を消せるようにすることが望ましい。
【０１３２】
図１７は、オーディエンス側の情報処理装置に表示されるＷｅｂブラウザ２３０のユーザインタフェース４００を示す説明図であり、テキストボックス４３１、拍手ボタン４３２及び笑いボタン４３３が画面上から消えている状態を示す説明図である。このように、オーディエンスがプレイヤー操作に対して反応を返さない場合は、テキストボックス４３１、拍手ボタン４３２及び笑いボタン４３３を画面上から消すことで、プレイヤー操作の閲覧の妨げとならない。
【０１３３】
その後、オーディエンスがマウスカーソル４４０を操作して、テキストボックス４３１、拍手ボタン４３２及び笑いボタン４３３が表示されるエリアにマウスカーソル４４０を移動させると、テキストボックス４３１、拍手ボタン４３２及び笑いボタン４３３がＷｅｂブラウザ２３０に表示される。図１８は、オーディエンス側の情報処理装置に表示されるＷｅｂブラウザ２３０のユーザインタフェース４００を示す説明図であり、マウスカーソル４４０の移動によってテキストボックス４３１、拍手ボタン４３２及び笑いボタン４３３がＷｅｂブラウザ２３０に表示された状態を示す説明図である。
【０１３４】
図１８に示したように、オーディエンスがマウスカーソル４４０を操作する他に、例えば、オーディエンスがプレイヤーに対して反応を返す際にキーボードを操作すると、テキストボックス４３１、拍手ボタン４３２及び笑いボタン４３３がＷｅｂブラウザ２３０表示されるようにしてもよい。
【０１３５】
図１９は、オーディエンス側の情報処理装置に表示されるＷｅｂブラウザ２３０のユーザインタフェース４００を示す説明図であり、オーディエンスのキーボードの操作（例えば、スペースキーやＥｎｔｅｒキーの押下）によってテキストボックス４３１、拍手ボタン４３２及び笑いボタン４３３がＷｅｂブラウザ２３０に表示された状態を示す説明図である。図１９に示したユーザインタフェース４００は、図１８とは、異なり、マウスカーソル４４０がテキストボックス４３１、拍手ボタン４３２及び笑いボタン４３３が表示されるエリアに存在しないが、テキストボックス４３１、拍手ボタン４３２及び笑いボタン４３３がＷｅｂブラウザ２３０に表示されている。
【０１３６】
オーディエンスが、プレイヤーに対して反応を返すために、テキストボックス４３１に文章を入力し、入力を確定させると、その文章は、当該プレイヤーのアイコンとともにオーディエンス情報表示領域４２０に表示される。図２０は、オーディエンス側の情報処理装置に表示されるＷｅｂブラウザ２３０のユーザインタフェース４００を示す説明図であり、オーディエンスからの文章入力により、オーディエンス情報表示領域４２０にオーディエンスアイコン４２１ａが、オーディエンスが入力した文章と共に表示されている様子を示したものである。
【０１３７】
このオーディエンス情報表示領域４２０に表示されるオーディエンスアイコン４２１ａは、リレーサーバ２３によって、他のプレイヤー及びオーディエンスのＷｅｂブラウザにも表示される。従って、プレイヤーに対するあるオーディエンスの反応は、プレイヤーのみならずオーディエンスもＷｅｂブラウザを見て確認することができる。
【０１３８】
オーディエンス情報表示領域４２０へのオーディエンスアイコン４２１ａの表示手法は特定のものに限定されないことは言うまでもないが、例えば画面の下の方から上に向かって現れるように表示しても良く、Ｗｅｂブラウザ２３０にフェードインするように表示しても良い。
【０１３９】
オーディエンスによるテキストの入力が完了すると、テキストボックス４３１、拍手ボタン４３２及び笑いボタン４３３をＷｅｂブラウザ２３０から消去させるようにしてもよい。図２１は、オーディエンス側の情報処理装置に表示されるＷｅｂブラウザ２３０のユーザインタフェース４００を示す説明図であり、オーディエンスの文章入力の確定により、テキストボックス４３１、拍手ボタン４３２及び笑いボタン４３３をＷｅｂブラウザ２３０から消去させた状態を示すものである。このように、オーディエンスの文章入力の確定により、テキストボックス４３１、拍手ボタン４３２及び笑いボタン４３３をＷｅｂブラウザ２３０から消去させることで、プレイヤーによるＷｅｂページの操作の閲覧の妨げとなることを防ぐことができる。
【０１４０】
テキストボックス４３１、拍手ボタン４３２及び笑いボタン４３３の表示位置は、例えば、マウスでドラッグさせることで、Ｗｅｂブラウザ２３０の任意の場所に移動できるようにしてもよい。図２２は、オーディエンス側の情報処理装置に表示されるＷｅｂブラウザ２３０のユーザインタフェース４００を示す説明図であり、マウスでドラッグさせることで、テキストボックス４３１、拍手ボタン４３２及び笑いボタン４３３の表示位置を移動させている状態を示すものである。このようにテキストボックス４３１、拍手ボタン４３２及び笑いボタン４３３の表示位置を任意の位置に移動させることで、プレイヤーによるＷｅｂページの操作の閲覧の妨げとなることを防ぐことができる。
【０１４１】
続いて、オーディエンス情報表示領域４２０へのオーディエンス情報の表示手法の一例について説明する。図２３は、オーディエンス側の情報処理装置に表示されるＷｅｂブラウザ２３０のユーザインタフェース４００を示す説明図である。オーディエンス情報表示領域４２０にオーディエンスアイコン４２１ａ〜４２１ｅを表示させ、リレーサーバ２３を介して、オーディエンスが入力した文章を、プレイヤーとオーディエンスとで共有することができる。
【０１４２】
このオーディエンス情報表示領域４２０へのオーディエンス情報の表示は、あるルールに基づいて行われるようにしても良い。以下では、一つのルールを例に挙げてオーディエンス情報表示領域４２０へのオーディエンス情報の表示について説明する。
【０１４３】
例えば、Ｗｅｂブラウザ２３０のユーザインタフェース４００におけるオーディエンス情報表示領域４２０には、オーディエンスアイコンを９つ表示できるようにする。表示位置は、左から順に１〜９とする。そして、オーディエンスアイコンを、まずは奇数番の表示位置に左から順に表示させ、５番の位置にオーディエンスアイコンを表示させると、次に偶数番の表示位置に左から順に表示させる。そして８番の位置にオーディエンスアイコンを表示させると、また奇数番の表示位置に左から順に表示させる。このようにオーディエンスアイコンを表示させることで、オーディエンスアイコンの視認性を高めることができ、オーディエンスからのコメントを規則的に出現させることで、プレイヤー及びオーディエンスは、可読時間を確保しながら、より多くのユーザーコメントを同時に表示できる。また、個々の表示環境によりウィンドウサイズが異なる場合でも、オーディエンスからのコメントの出現タイミングや相対位置を変化させずに済む。
【０１４４】
図２４は、オーディエンスから送られたコメントの表示の概要を示す説明図である。オーディエンスからのコメントは、リレーサーバ２３にキューとして一旦蓄えられ、オーディエンスによって入力された順に、オーディエンス情報表示領域４２０へ、上述のルールに基づいて表示させる。すなわち、最初のオーディエンスアイコンは図２４のオーディエンス情報表示領域４２０の１番に表示させ、以後３番、５番、７番、９番の順に表示させる。オーディエンスアイコンが９番に表示されると、続いて２番、４番、６番、８番の順に表示させる。オーディエンスアイコンが８番に表示されると、また１番に表示させる。
【０１４５】
詳しい説明は後述するが、オーディエンスアイコンは一度表示されると、徐々に表示を薄くさせてもよい。例えば、図２４を用いて説明すると、１番にオーディエンスアイコンを表示させた後は、時間と共にその表示を薄くさせ、オーディエンスアイコンが２番に表示されるまでに、１番に表示させたオーディエンスアイコンは画面から完全に消去させるようにしてもよい。これにより、オーディエンスアイコン同士が同じ濃さで表示されることがなくなり、オーディエンスのコメントの可読性を高めることができる。
【０１４６】
なお、図２４ではオーディエンス情報表示領域４２０への表示についてのみを図示したが、もちろん、プレイヤー側のＷｅｂブラウザ１３０に表示されるオーディエンス情報表示領域３２０にも、同じ手法を適用することは言うまでもない。
【０１４７】
図２５は、オーディエンスから送られたコメントの表示の概要を示す説明図であり、最初のオーディエンスアイコンを、図２４のオーディエンス情報表示領域４２０の１番に表示させた状態を模式的に示したものである。
【０１４８】
図２６〜図３４は、オーディエンス側の情報処理装置に表示されるＷｅｂブラウザ２３０のユーザインタフェース４００の内、オーディエンス情報表示領域４２０を抜き出して示す説明図である。図２６は、図２４のオーディエンス情報表示領域４２０の１番に、オーディエンスアイコン４２１ａを表示させた状態を示したものである。
【０１４９】
図２４のオーディエンス情報表示領域４２０の１番に、オーディエンスアイコン４２１ａを表示させると、続いて、オーディエンス情報表示領域４２０の３番に、オーディエンスアイコン４２１ｂを表示させる。図２７は、図２４のオーディエンス情報表示領域４２０の３番に、オーディエンスアイコン４２１ｂを表示させた状態を示したものである。この際に、先に表示したオーディエンスアイコン４２１ａは徐々に濃度が薄くなるように表示させる。
【０１５０】
続いて、オーディエンス情報表示領域４２０の５番に、オーディエンスアイコン４２１ｂを表示させる。図２８は、図２４のオーディエンス情報表示領域４２０の５番に、オーディエンスアイコン４２１ｃを表示させた状態を示したものである。同様に、先に表示したオーディエンスアイコン４２１ａ、４２１ｂは徐々に濃度が薄くなるように表示させる。
【０１５１】
続いて、オーディエンス情報表示領域４２０の７番に、オーディエンスアイコン４２１ｂを表示させる。図２９は、図２４のオーディエンス情報表示領域４２０の７番に、オーディエンスアイコン４２１ｄを表示させた状態を示したものである。同様に、先に表示したオーディエンスアイコン４２１ａ、４２１ｂ、４２１ｃは徐々に濃度が薄くなるように表示させる。
【０１５２】
続いて、オーディエンス情報表示領域４２０の９番に、オーディエンスアイコン４２１ｂを表示させる。図３０は、図２４のオーディエンス情報表示領域４２０の９番に、オーディエンスアイコン４２１ｅを表示させた状態を示したものである。同様に、先に表示したオーディエンスアイコン４２１ａ、４２１ｂ、４２１ｃ、４２１ｄは徐々に濃度が薄くなるように表示させる。
【０１５３】
オーディエンス情報表示領域４２０の９番に、オーディエンスアイコン４２１ｅが表示される頃になると、最初に表示されたオーディエンスアイコン４２１ａの濃度がかなり薄くなっている。次にオーディエンス情報表示領域４２０の２番にオーディエンスアイコンが表示されると、最初に表示されたオーディエンスアイコン４２１ａは画面から完全に消える。
【０１５４】
続いて、オーディエンス情報表示領域４２０の２番に、オーディエンスアイコン４２１ｆを表示させる。図３１は、図２４のオーディエンス情報表示領域４２０の２番に、オーディエンスアイコン４２１ｆを表示させた状態を示したものである。同様に、先に表示したオーディエンスアイコン４２１ｂ、４２１ｃ、４２１ｄ、４２１ｅは徐々に濃度が薄くなるように表示させる。また、最初に表示されたオーディエンスアイコン４２１ａは画面から完全に消えてしまっている。
【０１５５】
続いて、オーディエンス情報表示領域４２０の４番に、オーディエンスアイコン４２１ｇを表示させる。図３１は、図２４のオーディエンス情報表示領域４２０の４番に、オーディエンスアイコン４２１ｇを表示させた状態を示したものである。同様に、先に表示したオーディエンスアイコン４２１ｃ、４２１ｄ、４２１ｅ、４２１ｆは徐々に濃度が薄くなるように表示させる。また、オーディエンスアイコン４２１ｂは画面から完全に消えてしまっている。
【０１５６】
続いて、オーディエンス情報表示領域４２０の６番に、オーディエンスアイコン４２１ｈを表示させる。図３２は、図２４のオーディエンス情報表示領域４２０の６番に、オーディエンスアイコン４２１ｈを表示させた状態を示したものである。同様に、先に表示したオーディエンスアイコン４２１ｄ、４２１ｅ、４２１ｆ、４２１ｇは徐々に濃度が薄くなるように表示させる。また、オーディエンスアイコン４２１ｃは画面から完全に消えてしまっている。
【０１５７】
続いて、オーディエンス情報表示領域４２０の８番に、オーディエンスアイコン４２１ｈを表示させる。図３３は、図２４のオーディエンス情報表示領域４２０の８番に、オーディエンスアイコン４２１ｉを表示させた状態を示したものである。同様に、先に表示したオーディエンスアイコン４２１ｅ、４２１ｆ、４２１ｇ、４２１ｈは徐々に濃度が薄くなるように表示させる。また、オーディエンスアイコン４２１ｄは画面から完全に消えてしまっている。
【０１５８】
図２４のオーディエンス情報表示領域４２０の８番に、オーディエンスアイコン４２１ｉを表示させると、最初にオーディエンスアイコン４２１ａを表示させた図２４のオーディエンス情報表示領域４２０の１番に、再びオーディエンスアイコンを表示させる。このようにオーディエンスアイコンをサイクリックに表示させることで、プレイヤー及びオーディエンスに対して、オーディエンスからのコメントの可読時間を確保しながら、より多くのオーディエンスコメントを同時に表示することができる。
【０１５９】
Ｗｅｂブラウザのウィンドウサイズが変わっても、オーディエンスアイコンの表示の規則性は変化させない。図３５は、オーディエンスからのコメント表示の概要を示す説明図であり、最初のオーディエンスアイコンを、図２４のオーディエンス情報表示領域４２０の１番に表示させた状態を模式的に示したものである。また図３５は、図２５に比べてＷｅｂブラウザ２３０の横幅が広くなっている。以下、図３６〜図４４についても同様である。
【０１６０】
図３６〜図４４は、オーディエンス側の情報処理装置に表示されるＷｅｂブラウザ２３０のユーザインタフェース４００の内、オーディエンス情報表示領域４２０を抜き出して示す説明図である。図３６は、図２４のオーディエンス情報表示領域４２０の１番に、オーディエンスアイコン４２１ａを表示させた状態を示したものである。
【０１６１】
以下、図２６〜図３４に示したオーディエンス情報表示領域４２０へのオーディエンスアイコン４２１ａ〜４２１ｉの表示と同様に、１番→３番→５番→７番→９番→２番→４番→６番→８番の順で、オーディエンス情報表示領域４２０へオーディエンスアイコン４２１ａ〜４２１ｉを順次表示させる。このように、オーディエンスアイコンをサイクリックに表示させることで、プレイヤー及びオーディエンスに対して、オーディエンスからのコメントの可読時間を確保しながら、より多くのオーディエンスコメントを同時に表示することができる。また、個々の表示環境によりウィンドウサイズが異なる場合でも、オーディエンスコメントの出現タイミングや相対位置を変化させずに、オーディエンスコメントをプレイヤーとオーディエンスとの間で共有することができる。
【０１６２】
以上、オーディエンス情報表示領域４２０へのオーディエンス情報の表示手法の一例について説明した。もちろん、オーディエンス情報表示領域４２０へのオーディエンス情報の表示手法は上述の例に限定されないことは言うまでもない。例えば、上述の説明では左から順に規則的にオーディエンスアイコンを表示させていたが、右から順に規則的にオーディエンスアイコンを表示させるようにしても良い。
【０１６３】
オーディエンス情報表示領域４２０へのオーディエンス情報は、その他にも様々な手法を用いることができる。例えば、同一のオーディエンスからのコメントは常に同じ位置に表示するようにしてもよい。また例えば、コメントを数多く送信するオーディエンスからのオーディエンス情報は、オーディエンス情報表示領域４２０の固定の場所に優先的に表示するようにしてもよい。
【０１６４】
次に、オーディエンスからのコメントの集中による混雑を回避する処理の一例について説明する。オーディエンスの数が増加すると、一度に多数のオーディエンスからコメントが送られることが考えられる。そのオーディエンスからのコメントを全て表示させると、オーディエンスからのコメントの鮮度が失われ、コメントが画面に表示される頃には、プレイヤーは全く別の話題に移っている場合が考えられる。そのため、混雑を回避する処理として、リレーサーバ２３は、オーディエンスからのコメントを表示する前の段階に、一定時間にメッセージを送り出すキューを設け、そのキューで順番待ち数を計測する。そして、計測された順番待ち数が指定した閾値を超えた場合、リレーサーバ２３はオーディエンスからのコメント送信を禁止して、オーディエンスからのコメントを受け付けないようにしてもよい。
【０１６５】
図４５は、オーディエンスからのコメントの表示処理の概要を示す説明図である。図４５には、オーディエンスから送信されたコメントは、リレーサーバ２３上のキューに一旦蓄えられ、送信された順に、上述の表示手法によってオーディエンス情報表示領域４２０に表示される。しかし、順番待ち数が所定の閾値ｑに達すると、リレーサーバ２３は、それ以上のコメントの入力は受け付けなくする。コメントの入力を受け付けなくする手法として、例えば、オーディエンスによってテキストボックス４３１にコメントが入力され、コメントが確定されても、混雑中である旨のメッセージ（例えば、「混雑しているため、コメントできません。」など）を、コメントを入力したオーディエンスが操作しているＷｅｂブラウザ上に表示されるテキストボックス４３１に表示させる。
【０１６６】
図４６は、オーディエンス側の情報処理装置に表示されるＷｅｂブラウザ２３０のユーザインタフェース４００を示す説明図であり、リレーサーバ２３上のキューに蓄えられている順番待ち数が所定の閾値ｑに達している場合に、オーディエンスがコメントをテキストボックス４３１に入力し、入力したコメントを確定しようとしている状態を示したものである。
【０１６７】
この状態で、オーディエンスがコメントをテキストボックス４３１に入力し、入力したコメントを確定させても、リレーサーバ２３上のキューに蓄えられている順番待ち数が所定の閾値ｑに達しているので、リレーサーバ２３はコメントの受け付けを禁止し、混雑中である旨のメッセージを、コメントを入力したオーディエンスが操作しているＷｅｂブラウザ上に表示されるテキストボックス４３１に表示させる。
【０１６８】
図４７は、オーディエンス側の情報処理装置に表示されるＷｅｂブラウザ２３０のユーザインタフェース４００を示す説明図であり、図４６に示した状態から、オーディエンスがテキストボックス４３１に入力したコメントを確定させた状態に遷移した様子を示すものである。図４７では、混雑中である旨のメッセージがテキストボックス４３１に表示されている。そして、エラーメッセージがテキストボックス４３１に表示されてから所定の時間が経過すると、エラーメッセージをテキストボックス４３１から消去させ、入力待機状態に戻す。これにより、オーディエンスは、多数のコメントが集中していることを把握し、所定の時間経過後に、再びコメントを入力することができる。
【０１６９】
プレイヤーの発言やＷｅｂページへの操作に対する、拍手や笑いなどの感情要素は、オーディエンス側のＷｅｂブラウザ２３０に表示される拍手ボタン４３２や笑いボタン４３３の押下により、参加者へ発信できる。また、全オーディエンス参加者の一定時間内の拍手ボタン４３２や笑いボタン４３３の押下量をフィードバック表示や、サウンド効果で表現することで、イベントの場の雰囲気の盛り上がりを参加者が知ることができる。
【０１７０】
オーディエンスによる拍手ボタン４３２や笑いボタン４３３の押下により、全オーディエンスのフィードバック量Ｆを集計する。フィードバック量Ｆは、全オーディエンスによるアクション数を所定の時間Ｔで除して集計する。すなわち、フィードバック量Ｆ＝アクション数／Ｔである。
【０１７１】
そして、このように算出したフィードバックＦに応じて、オーディエンス情報表示領域３２０、４２０に表示させるエフェクトの量を変化させる。例えば、エフェクトとして視覚効果を用いる場合は、視覚効果の量としてパーティクル出現頻度を変化させ、音声効果を用いる場合は、音声効果の量として、量に応じたＳＥ（サウンドエフェクト）の種類を変化させる。
【０１７２】
プレイヤーの数が増えると、どのプレイヤーが発言しているのかを把握することが困難になる場合が考えられる。そのため、どのプレイヤーが発言しているのか、またどのプレイヤーがマウスを操作しているのかを、容易に判別する仕組みを設けることが望ましい。
【０１７３】
例えば、どのプレイヤーが話しているのかを判別するためには、プレイヤーのマイク音量を手掛かりに、プレイヤーアイコンの表現を変化させることで、どのプレイヤーが話しているかを判別できるようにしてもよい。また、どのプレイヤーが操作をしているかを半ベルするためには、プレイヤーのマウス操作（移動・クリック・ドラックなど）をトリガとして、プレイヤーアイコン表現を変化させることで、どのプレイヤーが操作をしているかを判別できるようにしてもよい。
【０１７４】
オーディエンス側のＷｅｂブラウザ２３０に表示される、プレイヤーによって提示されたＷｅｂサイトを、オーディエンスの操作によって別ウィンドウまたは別タブに表示するようにしてもよい。例えば、オーディエンス側のＷｅｂブラウザ２３０の、テキストボックス４３１、拍手ボタン４３２、笑いボタン４３３が表示されている領域以外の領域のクリックにより、表示中のＷｅｂページを別ウィンドウまたは別タブに表示するようにしてもよい。
【０１７５】
図４８は、オーディエンス側の情報処理装置に表示されるＷｅｂブラウザ２３０のユーザインタフェース４００を示す説明図であり、プレイヤーによって提示されたＷｅｂページが、オーディエンスのマウスカーソル４４０の操作により、別タブに表示されようとしている状態を示したものである。オーディエンスが、例えばマウスカーソル４４０を、テキストボックス４３１、拍手ボタン４３２、笑いボタン４３３が表示されていない領域に移動させて、マウスをクリックすると、タブ４０１ａで表示中のＷｅｂページを、別のタブに表示させる。
【０１７６】
図４９は、オーディエンス側の情報処理装置に表示されるＷｅｂブラウザ２３０のユーザインタフェース４００を示す説明図であり、図４８に示した状態から、プレイヤーによって提示されたＷｅｂサイトが、オーディエンスによるマウスカーソル４４０の操作により、タブ４０１ａとは別のタブ４０１ｂに表示されている状態に移行した様子を示したものである。このように、プレイヤーによって提示されたＷｅｂページを、オーディエンスによるマウスカーソル４４０の操作により、別のウィンドウやタブに表示させることで、当該オーディエンスは、後で改めてそのプレイヤーによって提示されたＷｅｂページの内容を確認することが可能になる。
【０１７７】
図５０は、オーディエンス側の情報処理装置に表示されるＷｅｂブラウザ２３０のユーザインタフェース４００を示す説明図であり、プレイヤーによって提示されたＷｅｂサイトに表示されているバナーに対する、オーディエンスのマウスカーソル４４０の操作により、別タブに表示されようとしている状態を示したものである。オーディエンスが、プレイヤーによって提示されたＷｅｂサイト中のバナー表示領域４５０に表示されているバナーをクリックすることで、当該バナーのリンク先のＷｅｂページを、別のタブに表示させる。
【０１７８】
図５１は、オーディエンス側の情報処理装置に表示されるＷｅｂブラウザ２３０のユーザインタフェース４００を示す説明図であり、図５０に示した状態から、プレイヤーによって提示されたＷｅｂページのバナーに対するオーディエンスのマウスカーソル４４０の操作により、当該バナーのリンク先のＷｅｂページが、タブ４０１ａとは別のタブ４０１ｂに表示されている状態に移行したものを示したものである。このように、プレイヤーによって提示されたＷｅｂページのバナーのリンク先のＷｅｂページを別のウィンドウやタブに表示させることで、当該オーディエンスは、後で改めてそのＷｅｂページの内容を確認することが可能になる。
【０１７９】
このような本開示の一実施形態にかかるコンテンツ共有システム１を用いることで、インターネットを用いた様々なイベントを実現することができる。以下では、そのようなイベントの一例として、インターネットによる新製品のセミナーの実施例について説明する。
【０１８０】
図５２は、本開示の一実施形態にかかるコンテンツ共有システム１を用いたネットイベントの一例を示す説明図であり、新商品のセミナーイベントの概要について示したものである。例えば、新製品を特集するＷｅｂページが複数開設され、それぞれのＷｅｂページの訪問者や、当該Ｗｅｂページの滞留時間をＷｅｂページの開設者が監視し、Ｗｅｂページの開設者や管理者は、あるＷｅｂページの訪問者や、当該Ｗｅｂページの滞留時間が所定の値に達すると、それぞれのＷｅｂページに対して、当該製品のセミナーイベントを開始する旨を通知する。図５２では、新製品Ａ、Ｂ、Ｃをそれぞれ特集するＷｅｂページが開設され、新製品Ｂを特集するＷｅｂページを５人訪問している状態が図示されている。なおＷｅｂページの訪問者や、当該Ｗｅｂページの滞留時間の監視方法は特定の方法に限定されないことは言うまでもない。
【０１８１】
図５３は、本開示の一実施形態にかかるコンテンツ共有システム１を用いたネットイベントの一例を示す説明図であり、Ｗｅｂページの訪問者や、当該Ｗｅｂページの滞留時間をＷｅｂページの開設者や管理者が監視している状態を示すものである。Ｗｅｂページの開設者や管理者は、Ｗｅｂページの訪問者や、当該Ｗｅｂページの滞留時間が所定の値に達すると、それぞれのＷｅｂページに対して、当該製品のセミナーイベントを開始する旨を通知する。
【０１８２】
図５４は、本開示の一実施形態にかかるコンテンツ共有システム１を用いたネットイベントの一例を示す説明図であり、Ｗｅｂページの開設者や管理者が、Ｗｅｂページの訪問者のＷｅｂブラウザに対して、セミナーイベントの開始を通知している状態を示すものである。そしてＷｅｂページの訪問者が、セミナーイベントに参加すると、Ｗｅｂページの開設者や管理者がプレイヤー、Ｗｅｂページの訪問者がオーディエンスの関係となり、プレイヤーによるＷｅｂブラウザを用いた新製品の説明を、オーディエンスが閲覧することができる。
【０１８３】
なお、セミナーイベントへの入り口は、他のＷｅｂページや他のネットサービスにリンクしてもよい。共有するＷｅｂページが変化しても、インターネットによるセミナーイベントのＵＲＬを固定することができる。
【０１８４】
本開示の一実施形態にかかるコンテンツ共有システム１を用いることで、Ｗｅｂページを用いた様々なイベントを提供することができる。例えば、上述したような、商品についてのセミナーイベントの開催の他に、複数のプレイヤーによる注目すべきＷｅｂページの紹介、アーティストのプロモーションイベントなどに、本開示の一実施形態にかかるコンテンツ共有システム１を活用することが出来る。
【０１８５】
なお、上述の説明では、共有するコンテンツとしてインターネット上のＷｅｂページを例に挙げて説明したが、共有するコンテンツは係る例に限定されない。すなわち、共有するコンテンツとしては、映像コンテンツ、画像コンテンツ、文書データなどであってもよく、これらのコンテンツをＷｅｂブラウザで表示させることで、プレイヤーとオーディエンスとの間でコンテンツを共有して表示させるようにしてもよい。
【０１８６】
また上述の説明では、笑いや拍手という感情的な反応をオーディエンスから返すために、拍手ボタン４３２や笑いボタン４３３をＷｅｂブラウザ２３０に表示させていたが、本技術はかかる例に限定されない、例えば、オーディエンスが操作する情報処理装置が携帯型の端末であり、当該端末に加速度センサや傾きセンサなどが備わっている場合に、情報処理装置を傾けたり動かしたりすることで、笑いや拍手という感情的な反応をオーディエンスから返させるようにしてもよい。
【０１８７】
＜２．まとめ＞
以上説明したように、本開示の一実施形態にかかるコンテンツ共有システム１により、話題のＷｅｂページを見ながら複数の人間でチャットをするといったコミュニケーションが、Ｗｅｂブラウザだけで実現可能になる。オーディエンス側は、特別なアプリケーションのインストールを必要とすることなく、Ｗｅｂブラウザで特定のＷｅｂページを開くだけでコミュニケーションに参加可能であり、オーディエンスを特定の機器に縛ることなく、またＷｅｂブラウザのウィンドウサイズがばらばらであっても、表示内容を他のオーディエンスやプレイヤーとの間で正しく共有できる。
【０１８８】
また本開示の一実施形態にかかるコンテンツ共有システム１では、オーディエンスからのコメントを上述したようにサイクリックに表示することで、文書や映像などの共有コンテンツの視認性や話題の鮮度を損なうことなく意思疎通を行うことができるとともに、より多くのコメントを同時に表示でき、個々の表示環境によりウィンドウサイズが異なる場合でも、コメントの出現タイミングや相対位置を変化させないので、円滑なコミュニケーションが図れる。また、オーディエンスが拍手や笑いといった感情的な反応を返すために、これらの感情的な反応を返すためのユーザインタフェースを設けることで、オーディエンスから発信されるメッセージの数を増やさずに、オーディエンスからのより早い意思発信が可能となる。
【０１８９】
なお、本明細書において説明した各装置による一連の制御処理は、ソフトウェア、ハードウェア、及びソフトウェアとハードウェアとの組合せのいずれを用いて実現されてもよい。ソフトウェアを構成するプログラムは、例えば、各装置の内部又は外部に設けられるコンピュータ読取可能な記録媒体に予め格納される。そして、各プログラムは、例えば、実行時にＲＡＭ（Ｒａｎｄｏｍ Ａｃｃｅｓｓ Ｍｅｍｏｒｙ）に読み込まれ、ＣＰＵ（Ｃｅｎｔｒａｌ Ｐｒｏｃｅｓｓｉｎｇ Ｕｎｉｔ）などのプロセッサにより実行される。
【０１９０】
以上、添付図面を参照しながら本開示の好適な実施形態について詳細に説明したが、本開示はかかる例に限定されない。本開示の属する技術の分野における通常の知識を有する者であれば、特許請求の範囲に記載された技術的思想の範疇内において、各種の変更例または修正例に想到し得ることは明らかであり、これらについても、当然に本開示の技術的範囲に属するものと了解される。
【０１９１】
なお、本技術は以下のような構成も取ることができる。
（１）
コンテンツを直接操作するプレイヤーによって操作されるコンテンツと同一の内容を前記プレイヤー側とリアルタイムに共有して表示するコンテンツ表示部と、
前記コンテンツ表示部が前記プレイヤー側とリアルタイムに共有して表示する前記コンテンツの所定の領域に、前記プレイヤーの操作を閲覧するのみの自装置及び他装置から送信されるコメントを所定の規則に基づいて規則的に出現させる表示制御部と、
を備える、情報表示装置。
（２）
前記表示制御部は自装置及び他装置から送信されるコメントを、水平方向に１メッセージ分間隔をあけて順番に出現させる、前記（１）に記載の情報処理装置。
（３）
前記表示制御部は、前記コンテンツ表示部が表示する前記共有コンテンツのウィンドウサイズが変化しても前記規則を変化させない、前記（１）または（２）に記載の情報処理装置。
（４）
前記表示制御部は、前記コンテンツ表示部が表示する前記共有コンテンツに重ねてプレイヤーにフィードバックを返すフィードバック入力部を表示させる、前記（１）から（３）のいずれかに記載の情報処理装置。
（５）
前記表示制御部は、前記フィードバック入力部に、感情的表現をフィードバックとして返すためのものを表示させる、前記（４）に記載の情報処理装置。
（６）
前記表示制御部は、他のプレイヤーからコメントが所定数以上送信されている場合に、前記フィードバック入力部に入力されたコメントが確定された時点で、コメントが送信できない旨を前記フィードバック入力部に表示する、前記（１）から（５）のいずれかに記載の情報処理装置。
（７）
前記表示制御部は、自装置からのものを含めた感情的表現によるフィードバックの頻度を、前記所定の領域への図柄の表示頻度により制御する、前記（１）から（６）のいずれかにに記載の情報処理装置。
（８）
前記表示制御部は、所定の条件を満たすユーザが操作する装置から送信されるコメントを、前記所定の領域の決まった位置に表示させる、前記（１）から（７）のいずれかにに記載の情報処理装置。
（９）
前記所定の条件は、コメントの送信回数が所定量以上である、前記（８）のいずれかにに記載の情報処理装置。
（１０）
コンテンツを直接操作するプレイヤーによって操作される共有コンテンツと同一の内容を前記プレイヤー側とリアルタイムに表示するコンテンツ表示ステップと、
前記コンテンツ表示ステップが前記プレイヤー側とリアルタイムに共有して表示する前記コンテンツの所定の領域に、前記プレイヤーの操作を閲覧するのみの自装置及び他装置から送信されるコメントを所定の規則に基づいて規則的に出現させる表示制御ステップと、
を備える、情報表示方法。
（１１）
コンピュータに、
コンテンツを直接操作するプレイヤーによって操作される共有コンテンツと同一の内容を前記プレイヤー側とリアルタイムに表示するコンテンツ表示ステップと、
前記コンテンツ表示ステップが前記プレイヤー側とリアルタイムに共有して表示する前記コンテンツの所定の領域に、前記プレイヤーの操作を閲覧するのみの自装置及び他装置から送信されるコメントを所定の規則に基づいて規則的に出現させる表示制御ステップと、
を実行させる、コンピュータプログラム。
【符号の説明】
【０１９２】
１ コンテンツ共有システム
１０ ネットワーク
２０ システムサーバ
３０ Ｗｅｂサーバ
３１ 管理データベース
１００ａ、１００ｂ、２００ａ、２００ｂ、２００ｃ 情報処理装置
１１０ ハードウェア
１２０ ＯＳ（Ｏｐｅｒａｔｉｎｇ Ｓｙｓｔｅｍ）
１３０ Ｗｅｂブラウザ
１４０ ブラウザ拡張アプリ
１４１ スクリプト管理部
１４２ 通信部
２１０ ハードウェア
２２０ ＯＳ（Ｏｐｅｒａｔｉｎｇ Ｓｙｓｔｅｍ）
２３０ Ｗｅｂブラウザ
２４０ 専用Ｗｅｂアプリ
２６０ スクリプト
２６１ コンテンツ更新部
２６２ 通信部
【技術分野】
【０００１】
本開示は、情報処理装置、情報処理方法及びコンピュータプログラムに関する。
【背景技術】
【０００２】
複数のユーザによって同一のコンテンツ（例えば、インターネット上のＷｅｂページ）を、当該コンテンツを表示するためのアプリケーション（例えば、Ｗｅｂブラウザ）で同時に閲覧する技術がある（例えば、特許文献１等参照）。ここで、ＷｅｂページとＷｅｂブラウザの関係を例にとれば、この技術では、あるユーザがＷｅｂページ上のリンクを選択したり、Ｗｅｂブラウザをスクロールさせたりしても、他のユーザのＷｅｂブラウザに同じように反映される。この技術により、複数のユーザが同じように、Ｗｅｂページを同時に閲覧できる。
【先行技術文献】
【特許文献】
【０００３】
【特許文献１】特開２０１１−７０５１１号公報
【発明の概要】
【発明が解決しようとする課題】
【０００４】
この技術を応用して、複数のユーザによる同一のＷｅｂページの閲覧及び操作の様子を、閲覧するだけのユーザという概念を用意する。複数のＷｅｂブラウザ間でＷｅｂページの閲覧をリアルタイムに共有する技術である。この共有では、同じＵＲＬのＷｅｂページを表示することに加えて、スクロールやマウスカーソルもリアルタイムに共有できる。この技術により、複数のユーザで話題のＷｅｂページを題材にチャットをするといったコミュニケーションが、Ｗｅｂブラウザだけで実現可能になる。
【０００５】
複数のユーザによる同一のＷｅｂページの閲覧及び操作の様子を閲覧するだけのユーザからは必要に応じてフィードバックが返される。しかし、そのフィードバックが無秩序に画面上に表示されると、かえって円滑なコミュニケーションの妨げとなってしまう。
【０００６】
そこで、本開示は、上記問題に鑑みてなされたものであり、本開示の目的とするところは、複数のユーザによる同一のＷｅｂページの閲覧及び操作の様子を閲覧するだけのユーザからのフィードバックによって円滑なコミュニケーションが実現可能な、新規かつ改良された情報処理装置、情報処理方法及びコンピュータプログラムを提供することにある。
【課題を解決するための手段】
【０００７】
本開示によれば、コンテンツを直接操作するプレイヤーによって操作されるコンテンツと同一の内容を前記プレイヤー側とリアルタイムに共有して表示するコンテンツ表示部と、前記コンテンツ表示部が前記プレイヤー側とリアルタイムに共有して表示する前記コンテンツの所定の領域に、前記プレイヤーの操作を閲覧するのみの自装置及び他装置から送信されるコメントを所定の規則に基づいて規則的に出現させる表示制御部と、を備える、情報表示装置が提供される。
【０００８】
また本開示によれば、コンテンツを直接操作するプレイヤーによって操作される共有コンテンツと同一の内容を前記プレイヤー側とリアルタイムに表示するコンテンツ表示ステップと、前記コンテンツ表示ステップが前記プレイヤー側とリアルタイムに共有して表示する前記コンテンツの所定の領域に、前記プレイヤーの操作を閲覧するのみの自装置及び他装置から送信されるコメントを所定の規則に基づいて規則的に出現させる表示制御ステップと、を備える、情報表示方法が提供される。
【０００９】
また本開示によれば、コンピュータに、コンテンツを直接操作するプレイヤーによって操作される共有コンテンツと同一の内容を前記プレイヤー側とリアルタイムに表示するコンテンツ表示ステップと、前記コンテンツ表示ステップが前記プレイヤー側とリアルタイムに共有して表示する前記コンテンツの所定の領域に、前記プレイヤーの操作を閲覧するのみの自装置及び他装置から送信されるコメントを所定の規則に基づいて規則的に出現させる表示制御ステップと、を実行させる、コンピュータプログラムが提供される。
【発明の効果】
【００１０】
以上説明したように本開示によれば、複数のユーザによる同一のＷｅｂページの閲覧及び操作の様子を閲覧するだけのユーザからのフィードバックによって円滑なコミュニケーションが実現可能な、新規かつ改良された情報処理装置、情報処理方法及びコンピュータプログラムを提供することができる。
【図面の簡単な説明】
【００１１】
【図１】本開示の一実施形態に係るコンテンツ共有システム１の全体構成を示す説明図である。
【図２】本開示の一実施形態に係るコンテンツ共有システム１を構成する各装置の概要を示す説明図である。
【図３】本開示の一実施形態に係るプレイヤー側の情報処理装置１００ａの機能構成を示す説明図である。
【図４】本開示の一実施形態に係るシステムサーバ２０の機能構成を示す説明図である。
【図５】本開示の一実施形態に係るオーディエンス側の情報処理装置２００ａの機能構成を示す説明図である。
【図６】コンテンツスクリプト１５５とブラウザ拡張アプリ１４０が実行する処理を示す流れ図である。
【図７】リレーサーバ２３が実行する処理を示す流れ図である。
【図８】専用Ｗｅｂアプリ２４０が実行する処理を示す流れ図である。
【図９】フレームとマウスカーソル位置の座標との関係の一例を示す説明図である。
【図１０】リレーサーバ２３から受信するカーソル位置と、専用Ｗｅｂアプリ２４０上でのカーソル位置との関係を示す説明図である。
【図１１】専用Ｗｅｂアプリ２４０でのレンダリング処理を示す説明図である。
【図１２】プレイヤーが情報処理装置１００ａで操作するカーソルを既存Ｗｅｂページ１５０の上に描画する様子を示す説明図である。
【図１３】プレイヤー側の情報処理装置１００ａの動作を示す流れ図である。
【図１４】プレイヤー側の情報処理装置に表示されるＷｅｂブラウザ１３０のユーザインタフェース３００を示す説明図である。
【図１５】プレイヤー側の情報処理装置に表示されるＷｅｂブラウザ１３０のユーザインタフェース３００を示す説明図である。
【図１６】オーディエンス側の情報処理装置に表示されるＷｅｂブラウザ２３０のユーザインタフェース４００を示す説明図である。
【図１７】オーディエンス側の情報処理装置に表示されるＷｅｂブラウザ２３０のユーザインタフェース４００を示す説明図である。
【図１８】オーディエンス側の情報処理装置に表示されるＷｅｂブラウザ２３０のユーザインタフェース４００を示す説明図である。
【図１９】オーディエンス側の情報処理装置に表示されるＷｅｂブラウザ２３０のユーザインタフェース４００を示す説明図である。
【図２０】オーディエンス側の情報処理装置に表示されるＷｅｂブラウザ２３０のユーザインタフェース４００を示す説明図である。
【図２１】オーディエンス側の情報処理装置に表示されるＷｅｂブラウザ２３０のユーザインタフェース４００を示す説明図である。
【図２２】オーディエンス側の情報処理装置に表示されるＷｅｂブラウザ２３０のユーザインタフェース４００を示す説明図である。
【図２３】オーディエンス側の情報処理装置に表示されるＷｅｂブラウザ２３０のユーザインタフェース４００を示す説明図である。
【図２４】オーディエンスから送られたコメントの表示の概要を示す説明図である。
【図２５】オーディエンスから送られたコメントの表示の概要を示す説明図である。
【図２６】オーディエンス情報表示領域４２０へのオーディエンスアイコンの表示を示す説明図である。
【図２７】オーディエンス情報表示領域４２０へのオーディエンスアイコンの表示を示す説明図である。
【図２８】オーディエンス情報表示領域４２０へのオーディエンスアイコンの表示を示す説明図である。
【図２９】オーディエンス情報表示領域４２０へのオーディエンスアイコンの表示を示す説明図である。
【図３０】オーディエンス情報表示領域４２０へのオーディエンスアイコンの表示を示す説明図である。
【図３１】オーディエンス情報表示領域４２０へのオーディエンスアイコンの表示を示す説明図である。
【図３２】オーディエンス情報表示領域４２０へのオーディエンスアイコンの表示を示す説明図である。
【図３３】オーディエンス情報表示領域４２０へのオーディエンスアイコンの表示を示す説明図である。
【図３４】オーディエンス情報表示領域４２０へのオーディエンスアイコンの表示を示す説明図である。
【図３５】オーディエンスから送られたコメントの表示の概要を示す説明図である。
【図３６】オーディエンス情報表示領域４２０へのオーディエンスアイコンの表示を示す説明図である。
【図３７】オーディエンス情報表示領域４２０へのオーディエンスアイコンの表示を示す説明図である。
【図３８】オーディエンス情報表示領域４２０へのオーディエンスアイコンの表示を示す説明図である。
【図３９】オーディエンス情報表示領域４２０へのオーディエンスアイコンの表示を示す説明図である。
【図４０】オーディエンス情報表示領域４２０へのオーディエンスアイコンの表示を示す説明図である。
【図４１】オーディエンス情報表示領域４２０へのオーディエンスアイコンの表示を示す説明図である。
【図４２】オーディエンス情報表示領域４２０へのオーディエンスアイコンの表示を示す説明図である。
【図４３】オーディエンス情報表示領域４２０へのオーディエンスアイコンの表示を示す説明図である。
【図４４】オーディエンス情報表示領域４２０へのオーディエンスアイコンの表示を示す説明図である。
【図４５】オーディエンスからのコメントの表示処理の概要を示す説明図である。
【図４６】オーディエンス側の情報処理装置に表示されるＷｅｂブラウザ２３０のユーザインタフェース４００を示す説明図である。
【図４７】オーディエンス側の情報処理装置に表示されるＷｅｂブラウザ２３０のユーザインタフェース４００を示す説明図である。
【図４８】オーディエンス側の情報処理装置に表示されるＷｅｂブラウザ２３０のユーザインタフェース４００を示す説明図である。
【図４９】オーディエンス側の情報処理装置に表示されるＷｅｂブラウザ２３０のユーザインタフェース４００を示す説明図である。
【図５０】オーディエンス側の情報処理装置に表示されるＷｅｂブラウザ２３０のユーザインタフェース４００を示す説明図である。
【図５１】オーディエンス側の情報処理装置に表示されるＷｅｂブラウザ２３０のユーザインタフェース４００を示す説明図である。
【図５２】本開示の一実施形態にかかるコンテンツ共有システム１を用いたネットイベントの一例を示す説明図である。
【図５３】本開示の一実施形態にかかるコンテンツ共有システム１を用いたネットイベントの一例を示す説明図である。
【図５４】本開示の一実施形態にかかるコンテンツ共有システム１を用いたネットイベントの一例を示す説明図である。
【発明を実施するための形態】
【００１２】
以下に添付図面を参照しながら、本開示の好適な実施の形態について詳細に説明する。なお、本明細書及び図面において、実質的に同一の機能構成を有する構成要素については、同一の符号を付することにより重複説明を省略する。
【００１３】
なお、説明は以下の順序で行うものとする。
＜１．本開示の一実施形態＞
［１−１．コンテンツ共有システムの全体構成例］
［１−２．各装置の概要］
［１−３．各装置の動作］
［１−４．ユーザインタフェース例］
＜２．まとめ＞
【００１４】
＜１．本開示の一実施形態＞
［１−１．コンテンツ共有システムの全体構成例］
まず、本開示の一実施形態に係るコンテンツ共有システムの全体構成について説明する。図１は、本開示の一実施形態に係るコンテンツ共有システム１の全体構成を示す説明図である。以下、図１を用いて本開示の一実施形態に係るコンテンツ共有システム１の全体構成について説明する。
【００１５】
図１に示した本開示の一実施形態に係るコンテンツ共有システム１は、本開示のコンテンツの一例である、同一のＷｅｂページを複数の情報処理装置でリアルタイムに共有して、複数の情報処理装置で同時に表示することを実現するシステムである。図１に示したように、本開示の一実施形態に係るコンテンツ共有システム１は、システムサーバ２０と、Ｗｅｂサーバ３０と、情報処理装置１００ａ、１００ｂ、２００ａ、２００ｂ、２００ｃ、とが、ネットワーク１０を介して相互に接続されている形態を有する。
【００１６】
ネットワーク１０に接続されている情報処理装置１００ａ、１００ｂ、２００ａ、２００ｂ、２００ｃは、Ｗｅｂサーバ３０が有するＷｅｂページを同時に表示することができる。ネットワーク１０に接続されている各情報処理装置は、同一のＷｅｂページを同時に閲覧するとともに、Ｗｅｂページに対する操作をすることができるものと、表示されるＷｅｂページ自体の操作は出来ずに、他のユーザと、表示される同一のＷｅｂページを同時に閲覧するだけのものに分かれる。以下の説明では前者の情報処理装置を操作するユーザを「プレイヤー」、後者の情報処理装置を操作するユーザを「オーディエンス」と称する。本実施形態では、情報処理装置１００ａ、１００ｂが「プレイヤー」が操作する情報処理装置であり、情報処理装置２００ａ、２００ｂ、２００ｃが「オーディエンス」が操作する情報処理装置である。
【００１７】
プレイヤーが操作する情報処理装置１００ａ、１００ｂは、共有するＷｅｂページを操作するプレイヤーが使用する。情報処理装置１００ａ、１００ｂでは、ブラウザ拡張機能を備えたＷｅｂブラウザが動作しており、そのＷｅｂブラウザには、このコンテンツ共有システム１専用のブラウザ拡張アプリがインストールされている。プレイヤーは、この情報処理装置１００ａ、１００ｂで動作するＷｅｂブラウザで通常通りのＷｅｂページのブラウズを行うことで、閲覧中のＷｅｂページがプレイヤー側とオーディエンス側とでリアルタイムに共有される。このとき共有される既存のＷｅｂページは、既存のＷｅｂページを提供するＷｅｂサーバ３０から直接ロードされる。また、プレイヤーは、この情報処理装置１００ａ、１００ｂでＷｅｂページをブラウズしながら、情報処理装置１００ａ、１００ｂに設けられるマイクに向かって発言することで、その発言の内容が他のプレイヤー及びオーディエンスが操作する情報処理装置から出力される。
【００１８】
オーディエンスが操作する情報処理装置２００ａ、２００ｂ、２００ｃは、プレイヤーによって操作されるＷｅｂページを同時に閲覧するだけのオーディエンスが使用する。オーディエンスが操作する情報処理装置２００ａ、２００ｂ、２００ｃでは、Ｗｅｂブラウザが動作している。オーディエンスは、このＷｅｂブラウザで特定のＵＲＬを入力し、このシステム専用のＷｅｂアプリをＷｅｂブラウザにロードし、Ｗｅｂページを表示させる。この専用Ｗｅｂアプリは、プレイヤーによって閲覧中のＷｅｂページが操作される様子を、オーディエンスが操作する情報処理装置２００ａ、２００ｂ、２００ｃに対してリアルタイムに表示する。このとき共有される既存のＷｅｂページは、既存のＷｅｂページを提供するＷｅｂサーバ３０から直接ロードされる。
【００１９】
システムサーバ２０は、同一のＷｅｂページを、ネットワーク１０に接続されている複数の情報処理装置の間で共有して表示させるためのサーバである。システムサーバ２０の構成は後述するが、プレイヤーの操作内容をプレイヤーが操作する情報処理装置１００ａ、１００ｂから受け取り、そのプレイヤーの操作内容を、オーディエンスが操作する情報処理装置２００ａ、２００ｂ、２００ｃに表示させるために、情報処理装置２００ａ、２００ｂ、２００ｃに伝送する。またシステムサーバ２０は、オーディエンスが操作する情報処理装置２００ａ、２００ｂ、２００ｃへ、専用Ｗｅｂアプリを提供するＷｅｂアプリケーションサーバ機能も有する。なお、上述した２つの機能は、本実施形態のように１つの機器に設けても良く、別々の機器に設けても良い。
【００２０】
なお、図１では、プレイヤーが操作する情報処理装置を２つ、オーディエンスが操作する情報処理装置を３つ図示したが、本技術はかかる例に限定されない。本技術では、プレイヤーが操作する情報処理装置は複数であれば３つ以上であってもよく、オーディエンスが操作する情報処理装置は１つ以上であればよい。また、それぞれの情報処理装置は、プレイヤー及びオーディエンスのいずれもが操作するものであってもよい。
【００２１】
なお、図１では、プレイヤーが操作する情報処理装置１００ａ、１００ｂ及びオーディエンスが操作する情報処理装置２００ａ、２００ｂ、２００ｃは、いずれもノートブック型のパーソナルコンピュータとして図示したが、本開示はかかる例に限定されない。すなわち、Ｗｅｂサーバ３０からＷｅｂページをロードして表示できるものであれば、以下で説明する技術を同様に適用可能である。
【００２２】
以上、図１を用いて本開示の一実施形態に係るコンテンツ共有システム１の全体構成について説明した。次に、本開示の一実施形態に係るコンテンツ共有システム１を構成する各装置の概要を説明する。
【００２３】
［１−２．各装置の概要］
図２は、本開示の一実施形態に係るコンテンツ共有システム１を構成する各装置の概要を示す説明図である。以下、図２を用いて、本開示の一実施形態に係るコンテンツ共有システム１を構成する各装置の概要について説明する。
【００２４】
図２では、プレイヤーが操作する情報処理装置として情報処理装置１００ａを、オーディエンスが操作する情報処理装置として情報処理装置２００ａを図示している。
【００２５】
図２に示したように、情報処理装置１００ａは、ＣＰＵ、ＲＯＭ、ＲＡＭ、キーボード、マウス、マイク、スピーカ、ディスプレイ等で構成されるハードウェア１１０と、ハードウェア１１０によって実行されるＯＳ（Ｏｐｅｒａｔｉｎｇ Ｓｙｓｔｅｍ）１２０と、ＯＳ１２０によって実行されるＷｅｂブラウザ１３０と、を含んで構成される。
【００２６】
Ｗｅｂブラウザ１３０には、コンテンツ共有システム１専用のブラウザ拡張アプリ１４０がインストールされる。Ｗｅｂブラウザ１３０は、既存のＷｅｂページを提供するＷｅｂサーバ３０から直接ロードされる既存Ｗｅｂページ１５０を表示する。
【００２７】
ブラウザ拡張アプリ１４０は、その一部であるコンテンツスクリプトを、既存Ｗｅｂページ１５０に送り込む。このコンテンツスクリプトは、プレイヤー側の情報処理装置とオーディエンス側の情報処理装置とで同一のＷｅｂページをリアルタイムに共有するために、ユーザによるイベントの監視と、共有に必要なデータの取得を行っている。
【００２８】
図２に示したように、システムサーバ２０は、ＣＰＵ、ＲＯＭ、ＲＡＭ、キーボード、マウス、ディスプレイ等で構成されるハードウェア２１と、ハードウェア２１によって実行されるＯＳ２２と、ＯＳ２２によって実行されるリレーサーバ２３及び専用Ｗｅｂアプリサーバ２４と、を含んで構成される。
【００２９】
リレーサーバ２３は、プレイヤー側の情報処理装置１００ａで動作するブラウザ拡張アプリ１４０と、オーディエンス側の情報処理装置２００ａで動作する専用Ｗｅｂアプリ２４０との間でやり取りされるメッセージを交換する機能を有する。
【００３０】
このリレーサーバ２３は主に２つの機能を有する。１つ目の機能は、リレーサーバ２３に接続中のプレイヤーとオーディエンスの管理である。プレイヤーやオーディエンスは、リレーサーバ２３に対して、ＨＴＭＬ５のＷｅｂＳｏｃｋｅｔやＸｍｌＨｔｔｐＲｅｑｕｅｓｔを応用したＣｏｍｅｔ等の技術を用いてコネクションを張る。プレイヤー側の情報処理装置１００ａから届いたメッセージを他のプレイヤーやオーディエンス側の情報処理装置２００ａにリアルタイムに転送するためには、これらコネクションをデータベース等で管理することが重要であるからである。
【００３１】
もう１つの機能は、ブラウザ拡張アプリ１４０から受信したＵＲＬ、レンダリングサイズ、スクロール位置、カーソル位置等の情報を、上述の、コネクションを管理するデータベースに登録されている、オーディエンス側の情報処理装置２００ａで動作する専用Ｗｅｂアプリ２４０や、送信元の情報処理装置以外のブラウザ拡張アプリへ転送する機能である。
【００３２】
専用Ｗｅｂアプリサーバ２４は、オーディエンス側の情報処理装置２００ａで動作する専用Ｗｅｂアプリを格納する。専用Ｗｅｂアプリサーバ２４は、オーディエンス側の情報処理装置２００ａの求めに応じて、専用Ｗｅｂアプリサーバ２４に格納される専用Ｗｅｂアプリを情報処理装置２００ａへ提供する。専用Ｗｅｂアプリサーバ２４からの専用Ｗｅｂアプリの提供は、情報処理装置２００ａで実行されるＷｅｂブラウザ２３０から特定のＵＲＬにアクセスすることで行われる。
【００３３】
図２に示したように、情報処理装置２００ａは、ＣＰＵ、ＲＯＭ、ＲＡＭ、キーボード、マウス、マイク、スピーカ、ディスプレイ等で構成されるハードウェア２１０と、ハードウェア２１０によって実行されるＯＳ２２０と、ＯＳ２２０によって実行されるＷｅｂブラウザ２３０と、を含んで構成される。
【００３４】
上述したように、情報処理装置２００ａで実行されるＷｅｂブラウザ２３０から特定のＵＲＬにアクセスすると、プレイヤーが閲覧及び操作するＷｅｂページをリアルタイムに共有するための専用Ｗｅｂアプリを、専用Ｗｅｂアプリサーバ２４からロードする。Ｗｅｂブラウザ２３０は、ロードした専用Ｗｅｂアプリ２４０で、プレイヤーが閲覧及び操作する既存Ｗｅｂページ１５０を表示することで、プレイヤーによって閲覧中のＷｅｂページが操作される様子をリアルタイムに表示する。
【００３５】
本開示の一実施形態に係るコンテンツ共有システム１を構成する各装置が、このような構成を有することにより、プレイヤー側の情報処理装置で表示されているＷｅｂページの内容が、同時にオーディエンス側の情報処理装置にも表示される。
【００３６】
以上、図２を用いて、本開示の一実施形態に係るコンテンツ共有システム１を構成する各装置の概要について説明した。次に、本開示の一実施形態に係るコンテンツ共有システム１を構成する、プレイヤー側の情報処理装置の機能構成について説明する。
【００３７】
図３は、本開示の一実施形態に係るプレイヤー側の情報処理装置１００ａの機能構成を示す説明図である。以下、図３を用いて、プレイヤー側の情報処理装置１００ａの機能構成について説明する。
【００３８】
上述したように、情報処理装置１００ａは、ＣＰＵ、ＲＯＭ、ＲＡＭ、キーボード、マウス、マイク、ディスプレイ等で構成されるハードウェア１１０と、ハードウェア１１０によって実行されるＯＳ１２０と、ＯＳ１２０によって実行されるＷｅｂブラウザ１３０と、を含んで構成される。
【００３９】
ハードウェア１１０は通信モジュール１１１を含む。通信モジュール１１１は、後述のブラウザ拡張アプリ１４０とリレーサーバ２３との間の通信を実行する。ＯＳ１２０は、ユーザのキーボード入力や画面出力といった入出力機能、ディスクやメモリの管理機能その他の、複数アプリケーションソフトから共通して利用される基本的な機能を提供し、情報処理装置１００ａを管理するソフトウェアである。
【００４０】
Ｗｅｂブラウザ１３０は、ＯＳ１２０により実行される、Ｗｅｂページを表示するためのソフトウェアである。Ｗｅｂブラウザ１３０は、ＨＴＭＬエンジン１３１と、スクリプト言語処理エンジン１３２と、ブラウザ拡張アプリ実行エンジン１３３と、描画処理エンジン１３４と、プロトコルスタック１３５と、を含んで構成される。
【００４１】
ＨＴＭＬエンジン１３１は、Ｗｅｂサーバ３０から送られる、ＨＴＭＬ言語によって作られた既存Ｗｅｂページ１５０について、Ｗｅｂサーバ３０から送られてきたＨＴＭＬ言語を解析する。ＨＴＭＬエンジン１３１により、既存Ｗｅｂページ１５０に記述されているＨＴＭＬ言語が解析されると、解析結果は、描画処理エンジン１３４により画像として出力される。Ｗｅｂサーバ３０から送られる既存Ｗｅｂページ１５０は、既存Ｗｅｂページのコンテンツ１５１を含む。既存Ｗｅｂページのコンテンツ１５１は、コンテンツの内容が記述されたＨＴＭＬ文書１５２と、コンテンツのレイアウトを定義するスタイルシート１５３と、コンテンツの動作を定義するスクリプト１５４と、を含んで構成される。
【００４２】
スクリプト言語処理エンジン１３２は、Ｗｅｂサーバ３０から送られる、ＨＴＭＬ言語によって作られたＷｅｂページに埋め込まれるスクリプト言語を解釈し、スクリプトを実行する。本実施形態では、スクリプト言語処理エンジン１３２は、Ｗｅｂサーバ３０から送られてきたＷｅｂページに、Ｗｅｂブラウザ１３０にインストールされるブラウザ拡張アプリ１４０が埋め込むコンテンツスクリプト１５５の内容を解釈し、スクリプトを実行する。
【００４３】
ブラウザ拡張アプリ実行エンジン１３３は、Ｗｅｂブラウザ１３０にインストールされるブラウザ拡張アプリ１４０を実行する。本実施形態では、ブラウザ拡張アプリ実行エンジン１３３は、コンテンツスクリプト１５５とブラウザ拡張アプリ１４０との間でデータの授受を実行する。ブラウザ拡張アプリ１４０は、例えばＷｅｂブラウザ１３０が所定のＵＲＬにアクセスすることで情報処理装置１００ａにインストールされ、Ｗｅｂブラウザ１３０の実行時にＷｅｂブラウザ１３０と共に実行される。
【００４４】
描画処理エンジン１３４は、ＨＴＭＬ言語によって作られたＷｅｂページの、ＨＴＭＬエンジン１３１による解析結果に基づいて画像として出力するための描画処理を実行する。プロトコルスタック１３５は、ネットワーク機能を提供するためのソフトウェア群であり、プロトコルスタック１３５によりＷｅｂブラウザ１３０はＷｅｂサーバ３０からＷｅｂページを取得したり、リレーサーバ２３にＷｅｂブラウザ１３０の状態を送信したりすることができる。
【００４５】
プレイヤー側の情報処理装置１００ａにおいて、プレイヤーが閲覧中のＷｅｂページをリアルタイムに共有するには、常にプレイヤーによるＷｅｂページの閲覧状況を監視し、状況の変化に応じて共有に必要なデータをリレーサーバ２３へ送信することが求められる。共有に必要なデータとは、次の４種類である。
（１）閲覧中のＷｅｂページのＵＲＬ
（２）閲覧中のＷｅｂページ全体のレンダリングサイズ
（３）閲覧中のＷｅｂページのスクロール位置
（４）Ｗｅｂページ全体のレンダリング領域の左上隅からのマウスカーソルの位置
【００４６】
これらのデータの多くは、Ｗｅｂブラウザ１３０を用いて閲覧中の既存Ｗｅｂページ１５０からのみアクセス可能である。そのため、これらのデータを監視・取得するには、本システム専用のプログラムが、既存Ｗｅｂページ１５０にアクセスできなければならない。ところが、通常、Ｗｅｂブラウザには“Ｓａｍｅ Ｏｒｉｇｉｎ Ｐｏｌｉｃｙ”というセキュリティ確保の仕組みが備わっている。この仕組みは、あるドメインのＷｅｂページから別のドメインのＷｅｂページにアクセスできないというものある。
【００４７】
そのため、本実施形態にかかるコンテンツ共有システム１は、Ｗｅｂブラウザ１３０の拡張機能を利用して、このセキュリティの壁を乗り越えている。つまり、Ｗｅｂブラウザ１３０の拡張機能の枠組みの中で動作するブラウザ拡張アプリ１４０が、既存Ｗｅｂページ１５０を監視し、共有に必要なデータを取得して、リレーサーバ２３へ送信している。実際には、ブラウザ拡張アプリ１４０が、既存Ｗｅｂページ１５０を直接監視するのではなく、代わりにブラウザ拡張アプリ１４０の一部であるコンテンツスクリプト１５５を既存Ｗｅｂページ１５０内に送り込む。そして、このコンテンツスクリプト１５５が、プレイヤーによる操作の監視と、他のプレイヤーやオーディエンスとの間で共有に必要なデータの取得を行っている。
【００４８】
ブラウザ拡張アプリ１４０は、スクリプト管理部１４１と、通信部１４２と、を含む。スクリプト管理部１４１は、Ｗｅｂブラウザ１３０が表示する既存Ｗｅｂページ１５０を直接操作するプレイヤーによる、該プレイヤーの既存Ｗｅｂページ１５０に対する操作を監視するコンテンツスクリプト１５５を既存Ｗｅｂページ１５０に送り込むとともに、既存Ｗｅｂページ１５０に送り込んだコンテンツスクリプト１５５と、ブラウザ拡張アプリ実行エンジン１３３を介して通信する。通信部１４２は、コンテンツスクリプト１５５が検出したプレイヤーの操作の内容を受け取って、通信モジュール１１１を介してその内容をリレーサーバ２３に送信する。
【００４９】
以上、図３を用いて、本開示の一実施形態に係るコンテンツ共有システム１を構成する、プレイヤー側の情報処理装置１００ａの機能構成について説明した。次に、本開示の一実施形態に係るコンテンツ共有システム１を構成する、システムサーバ２０の機能構成について説明する。
【００５０】
図４は、本開示の一実施形態に係るコンテンツ共有システム１を構成するシステムサーバ２０の機能構成を示す説明図である。以下、図４を用いて本開示の一実施形態に係るコンテンツ共有システム１を構成するシステムサーバ２０の機能構成について説明する。
【００５１】
図４に示したように、システムサーバ２０は、ＣＰＵ、ＲＯＭ、ＲＡＭ、キーボード、マウス、マイク、ディスプレイ等で構成されるハードウェア２１と、ハードウェア２１によって実行されるＯＳ２２と、ＯＳ２２によって実行されるリレーサーバ２３及び専用Ｗｅｂアプリサーバ２４と、を含んで構成される。
【００５２】
ハードウェア２１は通信モジュール２５を含む。通信モジュール２５は、リレーサーバ２３と、情報処理装置１００ａで実行されるブラウザ拡張アプリ１４０との間の通信、及び、リレーサーバ２３と、情報処理装置２００ａで実行される専用Ｗｅｂアプリ２４０を実行する。
【００５３】
プレイヤー側の機器である情報処理装置１００ａのブラウザ拡張アプリ１４０と、オーディエンス側の機器である情報処理装置２００ａの専用Ｗｅｂアプリ２４０との間でやりとりされるメッセージの交換を行うリレーサーバ２３は、接続管理部２８と、転送部２９と、を含む。接続管理部２８は、上述したような、リレーサーバ２３に接続中のプレイヤーとオーディエンスの管理を行う。転送部２９は、上述したような、ブラウザ拡張アプリ１４０から受信した閲覧中の既存ＷｅｂページのＵＲＬ、レンダリングサイズ、スクロール位置、カーソル位置を、リレーサーバ２３に登録されている専用Ｗｅｂアプリ２４０や、送信元以外のブラウザ拡張アプリ１４０へ転送する。
【００５４】
専用Ｗｅｂアプリサーバ２４は、上述したように、オーディエンス側の情報処理装置２００ａで動作する専用Ｗｅｂアプリを格納する。専用Ｗｅｂアプリサーバ２４からの専用Ｗｅｂアプリの提供は、情報処理装置２００ａで実行されるＷｅｂブラウザ２３０から特定のＵＲＬにアクセスすることで行われる。
【００５５】
以上、図４を用いて本開示の一実施形態に係るコンテンツ共有システム１を構成するシステムサーバ２０の機能構成について説明した。次に、本開示の一実施形態に係るコンテンツ共有システム１を構成する、オーディエンス側の情報処理装置２００ａの機能構成について説明する。
【００５６】
図５は、本開示の一実施形態に係るコンテンツ共有システム１を構成する、オーディエンス側の情報処理装置２００ａの機能構成を示す説明図である。
【００５７】
図５に示したように、オーディエンス側の情報処理装置２００ａは、ＣＰＵ、ＲＯＭ、ＲＡＭ、キーボード、マウス、マイク、ディスプレイ等で構成されるハードウェア２１０と、ハードウェア２１０によって実行されるＯＳ２２０と、ＯＳ２２０によって実行されるＷｅｂブラウザ２３０と、を含んで構成される。
【００５８】
ハードウェア２１０は通信モジュール２１１を含む。通信モジュール２１１は、後述の専用Ｗｅｂアプリ２４０とリレーサーバ２３との間の通信を実行する。ＯＳ２２０は、ユーザのキーボード入力や画面出力といった入出力機能、ディスクやメモリの管理機能その他の、複数アプリケーションソフトから共通して利用される基本的な機能を提供し、情報処理装置２００ａを管理するソフトウェアである。
【００５９】
Ｗｅｂブラウザ２３０は、ＯＳ２２０により実行される、Ｗｅｂページを表示するためのソフトウェアである。Ｗｅｂブラウザ２３０は、ＨＴＭＬエンジン２３１と、スクリプト言語処理エンジン２３２と、描画処理エンジン２３４と、プロトコルスタック２３５と、を含んで構成される。
【００６０】
ＨＴＭＬエンジン２３１は、Ｗｅｂサーバ３０から送られる、ＨＴＭＬ言語によって作られた既存Ｗｅｂページ１５０について、送られてきたＨＴＭＬ言語を解析する。ＨＴＭＬエンジン２３１によりＨＴＭＬ言語が解析されると、解析結果は、描画処理エンジン２３４により画像として出力される。Ｗｅｂサーバ３０から送られる既存Ｗｅｂページ２５０は、既存Ｗｅｂページのコンテンツ２５１を含む。既存Ｗｅｂページのコンテンツ２５１は、コンテンツの内容が記述されたＨＴＭＬ文書２５２と、コンテンツのレイアウトを定義するスタイルシート２５３と、コンテンツの動作を定義するスクリプト２５４と、を含んで構成される。
【００６１】
スクリプト言語処理エンジン２３２は、Ｗｅｂサーバ３０から送られる、ＨＴＭＬ言語によって作られたＷｅｂページに埋め込まれるスクリプト言語を解釈し、スクリプトを実行する。本実施形態では、スクリプト言語処理エンジン２３２は、Ｗｅｂサーバ３０から送られてきた既存Ｗｅｂページ１５０のスクリプト１５５の内容を解釈し、スクリプト１５５に記述された処理を実行する。
【００６２】
描画処理エンジン２３４は、ＨＴＭＬ言語によって作られたＷｅｂページの、ＨＴＭＬエンジン２３１による解析結果に基づいて画像として出力するための描画処理を実行する。プロトコルスタック２３５は、ネットワーク機能を提供するためのソフトウェア群であり、プロトコルスタック２３５によりＷｅｂブラウザ２３０はＷｅｂサーバ３０からＷｅｂページを取得したり、リレーサーバ２３と専用Ｗｅｂアプリ２４０との間の通信を実行したりすることができる。
【００６３】
Ｗｅｂページをプレイヤー側とオーディエンス側とでリアルタイムに共有するためには、オーディエンス側の情報処理装置２００ａで、Ｗｅｂブラウザ２３０上で動作する専用Ｗｅｂアプリ２４０を、専用Ｗｅｂアプリサーバ２４から取得する。専用Ｗｅｂアプリ２４０は、プレイヤーによる既存Ｗｅｂページ１５０の閲覧や操作の状況を表示することはできるが、オーディエンスによる当該Ｗｅｂページに対する操作は受け付けない。
【００６４】
専用Ｗｅｂアプリ２４０は、プレイヤーによる既存Ｗｅｂページ１５０の閲覧や操作の状況をリアルタイムに情報処理装置２００ａで表示するためのスクリプト２６０を含んで構成される。スクリプト２６０は、リレーサーバ２３との間で通信を実行し、プレイヤー側の情報処理装置１００ａにおいて、プレイヤーが閲覧中のＷｅｂページを情報処理装置２００ａでリアルタイムに共有する。
【００６５】
スクリプト２６０は、専用Ｗｅｂアプリ２４０に含まれ、リレーサーバ２３との間で通信を実行し、当該通信により得られる情報を用いて、プレイヤー側の情報処理装置１００ａと連動したレンダリング条件の反映処理及びカーソル位置の更新処理を実行する。スクリプト２６０が、プレイヤー側の情報処理装置１００ａと連動したレンダリング条件の反映処理及びカーソル位置の更新処理を実行することで、オーディエンス側の情報処理装置２００ａは、プレイヤーが操作する既存Ｗｅｂページの画面を、プレイヤー側と同じように画面に表示することができる。
【００６６】
スクリプト２６０は、コンテンツ更新部２６１と、通信部２６２と、を含む。通信部２６２は、リレーサーバ２３から、既存Ｗｅｂページ１５０を直接操作するプレイヤーによる、該プレイヤーの既存Ｗｅｂページ１５０に対する操作の内容を受信する。コンテンツ更新部２６１は、通信部２６２が受信したプレイヤーによる操作内容を、プレイヤー側の情報処理装置で表示される既存Ｗｅｂページ１５０と同一の既存Ｗｅｂページ１５０の表示に反映させる。
【００６７】
以上、本開示の一実施形態に係るコンテンツ共有システム１を構成する、オーディエンス側の情報処理装置２００ａの機能構成について説明した。次に、本開示の一実施形態に係るコンテンツ共有システム１を構成する各装置の動作について説明する。
【００６８】
［１−３．各装置の動作］
まず、プレイヤー側の情報処理装置１００ａの動作について説明する。図６は、プレイヤー側の情報処理装置１００ａの動作を示す流れ図であり、コンテンツスクリプト１５５とブラウザ拡張アプリ１４０が実行する処理を示す流れ図である。
【００６９】
ブラウザ拡張アプリ１４０は、常にＷｅｂブラウザのウィンドウや、Ｗｅｂブラウザがタブブラウザである場合、表示中のタブのＵＲＬの変化を見張っている。そして、ＵＲＬの変化イベントを検出すると（ステップＳ１２４）、新しいＵＲＬの情報をリレーサーバ２３へ送信する（ステップＳ１２６）とともに、新たにロードされた既存Ｗｅｂページ１５０へ、コンテンツスクリプト１５５を送り込む（ステップＳ１２５）。既存Ｗｅｂページ１５０が子フレームを含む場合は、それぞれの子フレームにロードされる既存Ｗｅｂページにもコンテンツスクリプト１５５を送り込む。
【００７０】
既存Ｗｅｂページ１５０へのコンテンツのロードが完了（ステップＳ１０１）し、ブラウザ拡張アプリ１４０が、既存Ｗｅｂページ１５０にコンテンツスクリプト１５５を送り込むと、ロードされたコンテンツスクリプト１５５は、まずブラウザ拡張アプリ１４０とのセッションを確立し（ステップＳ１０２）、マウスカーソル位置の監視や、子フレーム位置の問い合わせ待ちを開始する。マウスカーソル位置の監視は、例えば次のようにJavaScript（登録商標）でdocumentオブジェクトのmousemoveイベントを監視することで実現する。
【００７１】
document.addEventListener('mousemove', function(event){
var x_cursor = event.pageX;
var y_cursor = event.pageY;
}, true);
【００７２】
ページのロード先がトップレベルのフレームの場合は、コンテンツスクリプト１５５は、Ｗｅｂページ全体のレンダリングサイズとスクロール位置を取得し、ブラウザ拡張アプリ１４０経由でリレーサーバ２３へ送信する（ステップＳ１０３、Ｓ１０４、Ｓ１２７）。またコンテンツスクリプト１５５は、Ｗｅｂページ全体のレンダリングサイズやスクロール位置の監視を開始する。コンテンツスクリプト１５５による、Ｗｅｂページ全体のレンダリングサイズの監視は、windowオブジェクトのresizeイベントや、定期的に実行されるタイマーイベントのタイミングでのチェックによって実現する。
【００７３】
タイマーによってレンダリングサイズの変化を監視するには、コンテンツスクリプト１５５はタイマー登録を行い（ステップＳ１０５）、タイマーイベントを待機し（ステップＳ１０６）、Ｗｅｂページ全体のレンダリングサイズを取得する（ステップＳ１０７）。コンテンツスクリプト１５５は、サイズの変化があったかどうかを判断し（ステップＳ１０８）、サイズの変化があった場合は、コンテンツスクリプト１５５は、Ｗｅｂページ全体のレンダリングサイズをブラウザ拡張アプリ１４０経由でリレーサーバ２３へ送信する（ステップＳ１０９、Ｓ１２７）。Ｗｅｂページ全体のレンダリングサイズの取得は、例えば次のようなスクリプトで実現する。
【００７４】
width = Math.max.apply(null, [
document.body.clientWidth,
document.body.scrollWidth,
document.documentElement.scrollWidth,
document.documentElement.clientWidth
]);
height = Math.max.apply(null, [
document.body.clientHeight,
document.body.scrollHeight,
document.documentElement.scrollHeight,
document.documentElement.clientHeight
]);
【００７５】
コンテンツスクリプト１５５は、スクロールイベントの発生を待機し（ステップＳ１１０）、スクロールイベントが発生すればスクロール位置を取得する（ステップＳ１１１）。コンテンツスクリプト１５５は、スクロール位置を取得した結果、スクロール位置が変化したかどうかを判断し（ステップＳ１１２）、スクロール位置が変化していれば、そのスクロール位置をブラウザ拡張アプリ１４０経由でリレーサーバ２３へ送信する（ステップＳ１１３、Ｓ１２７）。スクロール位置の監視は、例えば次のようなスクリプトでdocumentオブジェクトのscrollイベントを監視することで実現する。
【００７６】
document.addEventListener('scroll', function(event){
var scrollLeft = document.body.scrollLeft;
var scrollTop = document.body.scrollTop;
}, true);
【００７７】
またコンテンツスクリプト１５５は、マウスイベントの発生を待機し（ステップＳ１１４）、マウスイベントが発生するとカーソル位置を取得する（ステップＳ１１５）。コンテンツスクリプト１５５は、カーソル位置を取得した結果、スクロール位置が変化したかどうかを判断し（ステップＳ１１６）、カーソル位置が変化していれば、そのカーソル位置をブラウザ拡張アプリ１４０経由でリレーサーバ２３へ送信する（ステップＳ１１７）。
【００７８】
コンテンツスクリプト１５５は、Ｗｅｂページ全体のレンダリングサイズやスクロール位置、マウスカーソル位置の監視を行う。そして、これらの情報の変化を検出した場合は、コンテンツスクリプト１５５はそれぞれの値を取得し、取得した値をブラウザ拡張アプリ１４０へと送信する。
【００７９】
ブラウザ拡張アプリ１４０は、コンテンツスクリプト１５５から受信した、Ｗｅｂページ全体のレンダリングサイズやスクロール位置を、そのままリレーサーバ２３へと送信する。しかし、ブラウザ拡張アプリ１４０は、コンテンツスクリプト１５５から受信したマウスカーソル位置は、リレーサーバ２３へと送信する前に座標変換処理が必要になる場合がある。なぜなら、トップレベルフレームではなく子フレームに埋め込まれたコンテンツスクリプト１５５からマウスカーソル位置の情報を受信した場合、そのマウスカーソル位置は、子フレームの左上隅からの座標であって、トップレベルフレームの左上隅からの座標ではないためである。
【００８０】
図９は、フレームとマウスカーソル位置の座標との関係の一例を示す説明図である。図９に示すように、フレーム“frame2”上でマウスカーソルが動いた時、フレーム“frame2”のコンテンツスクリプト１５５から受信するマウスカーソル位置は（x_cursor, y_cursor）である。これをトップレベルフレームの左上隅からの座標（x_out, y_out）に変換するため、ブラウザ拡張アプリ１４０は、フレーム“frame2”の、フレーム“frame1”内でのオフセット位置（x_offset2, y_offset2）と、フレーム“frame1”のトップレベルフレーム内でのオフセット位置（x_offset1,
y_offset1）を取得し、フレーム“frame2”のコンテンツスクリプト１５５からマウスカーソル位置（x_cursor, y_cursor）に加算する。それぞれの子フレームのオフセット位置は、親フレームにロードされているＷｅｂページ内からのみアクセス可能である。従って、ブラウザ拡張アプリ１４０は、フレーム名やフレームのＵＲＬをキーにして、親フレームのコンテンツスクリプト１５５にオフセット位置の問い合わせを行う。
【００８１】
ブラウザ拡張アプリ１４０は、コンテンツスクリプト１５５から送信されたカーソル位置の情報が、トップレベルフレームからのものかどうかを判断する（ステップＳ１２２）。トップレベルフレームからのものであれば、ブラウザ拡張アプリ１４０はカーソル位置の情報をリレーサーバ２３へ送信する（ステップＳ１２７）が、トップレベルフレームからのものでなければ、ブラウザ拡張アプリ１４０はフレーム位置の問い合わせを他フレームのコンテンツスクリプト１５５へ送信する（ステップＳ１２３）。
【００８２】
コンテンツスクリプト１５５は、ブラウザ拡張アプリ１４０からの子フレーム位置の問い合わせを待機し（ステップＳ１１８）、該当の子フレームを含んでいるかどうかを判断し（ステップＳ１１９）、該当の子フレームを含んでいる場合には、子フレームのオフセット位置の取得及びブラウザ拡張アプリ１４０への送信を行う（ステップＳ１２０）。子フレームのオフセット位置の情報をコンテンツスクリプト１５５から受け取ったブラウザ拡張アプリ１４０は、子フレームのオフセット位置をカーソル位置に加算する（ステップＳ１２１）。
【００８３】
カーソル位置の取得及び子フレームのオフセット位置の取得を、トップレベルのフレームになるまで繰り返すことで、上記ステップＳ１１５でコンテンツスクリプト１５５が取得したカーソル位置の情報は、トップレベルのフレームにおけるカーソル位置に変換されることになる。
【００８４】
なおブラウザ拡張アプリ１４０は、どのプレイヤーによる操作かを識別できるように、リレーサーバ２３に送信するデータに、プレイヤーを一意に識別できる情報（例えば、システムへのログインＩＤ等）を付加する。
【００８５】
以上、プレイヤー側の情報処理装置１００ａの動作について説明した。次に、リレーサーバ２３の動作について説明する。
【００８６】
図７は、リレーサーバ２３の動作を示す流れ図である。以下、図７を用いてリレーサーバ２３の動作について説明する。
【００８７】
リレーサーバ２３は、プレイヤー及びオーディエンスの登録管理、及び、プレイヤー側の情報処理装置から送信される、ＵＲＬ、レンダリングサイズ、スクロール位置、カーソル位置の情報を、送信元以外の情報処理装置に対して送信する役割を有する。
【００８８】
プレイヤー側のブラウザ拡張アプリ１４０からコンテンツ共有システム１への登録が要求され、ブラウザ拡張アプリ１４０とリレーサーバ２３との間の接続が開始されると（ステップＳ２０１）、リレーサーバ２３は、管理データベース３１にブラウザ拡張アプリ１４０の情報を登録する（ステップＳ２０２）。同様に、オーディエンス側の専用Ｗｅｂアプリ２４０からコンテンツ共有システム１への登録が要求され、専用Ｗｅｂアプリ２４０とリレーサーバ２３との間の接続が開始されると（ステップＳ２０３）、リレーサーバ２３は、管理データベース３１に専用Ｗｅｂアプリ２４０の情報を登録する（ステップＳ２０４）。
【００８９】
一方、ブラウザ拡張アプリ１４０とリレーサーバ２３との間の接続が終了されると（ステップＳ２０５）、リレーサーバ２３は、管理データベース３１からブラウザ拡張アプリ１４０の情報を削除する（ステップＳ２０６）。同様に、オーディエンス側の専用Ｗｅｂアプリ２４０とリレーサーバ２３との間の接続が終了されると（ステップＳ２０７）、リレーサーバ２３は、管理データベース３１からその専用Ｗｅｂアプリ２４０の情報を削除する（ステップＳ２０８）。
【００９０】
プレイヤー側のブラウザ拡張アプリ１４０からＵＲＬの情報（ステップＳ２１１）、レンダリングサイズの情報（ステップＳ２１２）、スクロール位置の情報（ステップＳ２１３）、カーソル位置の情報（ステップＳ２１４）をそれぞれ受信すると、リレーサーバ２３は、管理データベース３１から、接続中のアプリの情報を取得する（ステップＳ２１５）。そしてリレーサーバ２３は、取得したアプリに対し、それぞれ、ＵＲＬの情報（ステップＳ２１６）、レンダリングサイズの情報（ステップＳ２１７）、スクロール位置の情報（ステップＳ２１８）、カーソル位置の情報（ステップＳ２１９）を送信する。
【００９１】
ここでリレーサーバ２３は、ＵＲＬの情報、レンダリングサイズの情報、スクロール位置の情報、カーソル位置の情報を送信する際には、送信元以外の全ての接続中のアプリへ情報を送信する。これにより、あるプレイヤーが操作した内容は、その他の全てのプレイヤー側及びオーディエンス側の情報処理装置にリアルタイムに反映される。
【００９２】
以上、図７を用いてリレーサーバ２３の動作について説明した。次にオーディエンス側の情報処理装置２００ａの動作について説明する。
【００９３】
図８は、オーディエンス側の情報処理装置２００ａの動作について説明する流れ図であり、専用Ｗｅｂアプリ２４０の動作を示すものである。以下、図８を用いてオーディエンス側の情報処理装置２００ａの動作について説明する。
【００９４】
オーディエンス側の情報処理装置２００ａのＷｅｂブラウザ２３０上で実行される専用Ｗｅｂアプリ２４０は、プレイヤーが閲覧中のＷｅｂページが、プレイヤーによって操作される様子を、オーディエンス側の情報処理装置２００ａにリアルタイムに表示する。プレイヤーとオーディエンスとで共有される既存Ｗｅｂページ１５０は、既存Ｗｅｂページ１５０を提供するＷｅｂサーバ３０から専用Ｗｅｂアプリ２４０内のiframeに直接ロードされる。例えば、本実施形態では、既存Webページ用のiframeを次のように定義したとする。
【００９５】
<iframe id="shared_page"></iframe>
【００９６】
専用Ｗｅｂアプリ２４０は、リレーサーバ２３からＵＲＬ情報(url)を受信した場合（ステップＳ３０１）、例えばJavaScriptで次のような処理を記述すると、そのＵＲＬのＷｅｂページをiframe内に表示（ステップＳ３０２）することが出来る。
【００９７】
document.getElementById('shared_page').src = url;
【００９８】
また、専用Ｗｅｂアプリ２４０上で、プレイヤーとオーディエンスとで、マウスカーソルが既存Ｗｅｂページ１５０の同じ位置を指し示すためには、既存Ｗｅｂページ１５０のレンダリング結果が同じになる必要がある。そのため、既存Ｗｅｂページ１５０用のiframeのサイズを、既存Ｗｅｂページ１５０全体のレンダリングサイズに合わせることで、プレイヤー側でのレンダリング結果と同じにする。
【００９９】
専用Ｗｅｂアプリ２４０は、リレーサーバ２３からレンダリングサイズ（width, height）を受信すると（ステップＳ３０３）、例えばJavaScriptで次のような処理を記述することで、既存Ｗｅｂページ１５０を表示するiframeのサイズを変更（ステップＳ３０４）し、既存Ｗｅｂページ１５０のレンダリング結果をプレイヤー側と一致させることが出来る。
【０１００】
var node = document.getElementById('shared_page');
node.width = width;
node.height = height;
【０１０１】
オーディエンス側の情報処理装置２００ａで、プレイヤー側での既存Ｗｅｂページ１５０の表示と一致させるには、プレイヤー側の情報処理装置１００ａで実行されたスクロール操作に合わせて、オーディエンス側の情報処理装置２００ａで表示される既存Ｗｅｂページ１５０も、適宜スクロールさせる必要がある。
【０１０２】
図１１は、専用Ｗｅｂアプリ２４０でのレンダリング処理を示す説明図である。図１１に示すように、既存Ｗｅｂページ１５０は、専用Ｗｅｂページ２４０内に全体が見える形でレンダリングされている。従って、専用Ｗｅｂアプリ２４０自体をスクロールし、Ｖｉｅｗｐｏｒｔ（描画領域）を移動させることで、既存Ｗｅｂページ１５０もスクロールされたように見える。専用Ｗｅｂアプリ２４０がリレーサーバ２３からスクロール位置（left, top）を受信した場合（ステップＳ３０５）、専用Ｗｅｂアプリ２４０は、既存Ｗｅｂページ１５０を表示するiframeの位置をスクロール位置に加算し（ステップＳ３０６）、加算結果に基づいてスクロール位置を更新する（ステップＳ３０７）。例えばJavaScriptで次のような処理を記述することで、既存Ｗｅｂページ１５０の表示をプレイヤー側と一致させることが出来る。
【０１０３】
window.scrollTo(left + x_offset, top + y_offset);
【０１０４】
プレイヤーが情報処理装置１００ａで操作するカーソルは、既存Ｗｅｂページ１５０内に描画するのではなく、既存Ｗｅｂページ１５０の上に描画する。専用Ｗｅｂアプリ２４０がリレーサーバ２３からカーソル位置（x_in, y_in）を受信した場合（ステップＳ３０８）、専用Ｗｅｂアプリ２４０は、既存Ｗｅｂページ１５０を表示するiframeの位置をカーソル位置に加算し（ステップＳ３０９）、加算結果に基づいてカーソルを表現するＤＯＭ（Ｄｏｃｕｍｅｎｔ Ｏｂｊｅｃｔ Ｍｏｄｅｌ）オブジェクトの位置を更新する（ステップＳ３１０）。図１２は、プレイヤーが情報処理装置１００ａで操作するカーソルを既存Ｗｅｂページ１５０の上に描画する様子を示す説明図である。図１２に示すように、既存Ｗｅｂページ１５０の上にカーソル表示用のレイヤを配置し、当該レイヤにカーソルを描画して重ね合わせることで、プレイヤーが情報処理装置１００ａで操作するカーソルの既存Ｗｅｂページ１５０の上への描画を表現する。
【０１０５】
図１０は、リレーサーバ２３から受信するカーソル位置と、専用Ｗｅｂアプリ２４０上でのカーソル位置との関係を示す説明図である。図１０に示すように、専用Ｗｅｂアプリ２４０がリレーサーバ２３から受信したカーソル位置は、既存Ｗｅｂページ１５０を表示するiframeの左上隅からの座標である。従って、専用Ｗｅｂアプリ２４０は、iframeのオフセット分を加えた上で、プレイヤーが情報処理装置１００ａで操作するカーソルをカーソルレイヤに描画する。プレイヤーが情報処理装置１００ａで操作するカーソルは、Ｗｅｂブラウザ２３０にカーソルのイメージを張ることで描画してもよいし、Ｃａｎｖａｓ等のブラウザ上に図を描くために策定された仕様に基づいて描画してもよい。
【０１０６】
以上、オーディエンス側の情報処理装置２００ａの動作について説明した。次に、コンテンツ共有システム１に参加するプレイヤーが複数存在する場合の表示処理について説明する。
【０１０７】
コンテンツ共有システム１に参加するプレイヤーが複数存在する場合は、プレイヤー側の情報処理装置同士でも、既存Ｗｅｂページの閲覧状況を共有する。図１３は、プレイヤー側の情報処理装置１００ａの動作を示す流れ図であり、プレイヤー側の情報処理装置１００ａで実行されるコンテンツスクリプト１５５とブラウザ拡張アプリ１４０が、リレーサーバ２３経由で他のプレイヤー側の情報処理装置１００ｂから受信する共有に必要なデータの処理の流れを示すものである。
【０１０８】
情報処理装置１００ａのブラウザ拡張アプリ１４０は、リレーサーバ２３から新たなＵＲＬの情報を受信した場合は（ステップＳ４０１）、Ｗｅｂブラウザ１３０のウィンドウやタブで表示するＵＲＬを変更し、新しいＷｅｂページをＷｅｂサーバ３０からロードする（ステップＳ４０２）とともに、ロードしたＷｅｂページにコンテンツスクリプト１５５をロードする（ステップＳ４０３）。コンテンツスクリプト１５５は、図６に示した動作を実行するとともに、プレイヤーによるスクロール位置やカーソル位置の変更に伴うイベントの受信待ちを行う。
【０１０９】
情報処理装置１００ａのブラウザ拡張アプリ１４０は、リレーサーバ２３からレンダリングサイズを受信した場合は（ステップＳ４０５）、既存Ｗｅｂページのレンダリング結果が同じになるように、Ｗｅｂブラウザ１３０のウィンドウのサイズをレンダリングサイズの横幅に合わせて変更する（ステップＳ４０６）。
【０１１０】
情報処理装置１００ａのブラウザ拡張アプリ１４０は、リレーサーバ２３からスクロール位置を受信した場合は（ステップＳ４０７）、トップレベルフレームに送り込まれたコンテンツスクリプト１５５に、スクロール位置を送信する（ステップＳ４０８）。スクロール位置の受信待ち状態にあるコンテンツスクリプト１５５は（ステップＳ４０９）、ブラウザ拡張アプリ１４０からスクロール位置の情報を受信すると、既存Ｗｅｂページ１５０のスクロール位置を更新する（ステップＳ４１０）。コンテンツスクリプト１５５は、スクロール位置（left, top）をブラウザ拡張アプリ１４０から受信した場合、例えばJavaScriptで次のような処理を記述すれば良い。
【０１１１】
window.scrollTo(left, top);
【０１１２】
情報処理装置１００ａのブラウザ拡張アプリ１４０は、リレーサーバ２３からカーソル位置を受信した場合は（ステップＳ４１１）、トップレベルフレームに送り込まれたコンテンツスクリプト１５５に、カーソル位置を送信する（ステップＳ４１２）。カーソル位置の受信待ち状態にあるコンテンツスクリプト１５５は（ステップＳ４１３）、カーソル位置を受信すると、既存Ｗｅｂページ内にカーソルを描画する（ステップＳ４１４）。カーソル描画はイメージを張ることで描画してもよいし、Ｃａｎｖａｓ等のブラウザ上に図を描くために策定された仕様に基づいて描画してもよい。なお、カーソルを描画する際には、コンテンツスクリプト１５５は、既存Ｗｅｂページ１５０の上に描画されるように、ＣＳＳ（Ｃａｓｃａｄｉｎｇ Ｓｔｙｌｅ Ｓｈｅｅｔｓ）のz-index等で描画位置を調整する。
【０１１３】
このように、プレイヤー側の情報処理装置１００ａの操作内容をリレーサーバ２３に伝送し、リレーサーバ２３は、接続元以外のプレイヤー及びオーディエンスに対して操作内容を転送することで、プレイヤー側の情報処理装置１００ａ、１００ｂと、オーディエンス側の情報処理装置２００ａ、２００ｂ、２００ｃとの間で、同一のＷｅｂページの表示をリアルタイムに共有させることができる。そして、プレイヤー側の情報処理装置で、既存Ｗｅｂページ１５０に対して操作された内容は、リレーサーバ２３を介して、操作が実行された装置以外のプレイヤー側及びオーディエンス側の情報処理装置に送信される。これにより、プレイヤー側の情報処理装置で既存Ｗｅｂページ１５０に対して操作された内容が、他の情報処理装置に即座に反映されることになり、プレイヤーによる既存Ｗｅｂページ１５０に対する操作内容を他のプレイヤー側及びオーディエンス側の情報処理装置でも表示することができる。
【０１１４】
以上、本開示の一実施形態に係るコンテンツ共有システム１を構成する各装置の動作について説明した。次に、本開示の一実施形態に係るコンテンツ共有システム１を構成する、プレイヤー側の情報処理装置１００ａ及びオーディエンス側の情報処理装置２００ａに表示されるＷｅｂブラウザのユーザインタフェースについて説明する。
【０１１５】
［１−４．ユーザインタフェース例］
まず、プレイヤー側の情報処理装置に表示されるＷｅｂブラウザのユーザインタフェース例について説明する。図１４は、プレイヤー側の情報処理装置に表示されるＷｅｂブラウザ１３０のユーザインタフェース３００を示す説明図である。プレイヤー側の情報処理装置（例えば情報処理装置１００ａ）に表示されるＷｅｂブラウザ１３０のユーザインタフェースは、ブラウザ拡張アプリ１４０によって実現される。
【０１１６】
Ｗｅｂブラウザ１３０のユーザインタフェース３００は、タブ３０１ａ、３０１ｂ、３０１ｃと、共有切り替えボタン３０２と、プレイヤーアイコン３１１ａ、３１１ｂ、３１１ｃと、オーディエンス情報表示領域３２０と、を含んで構成される。オーディエンス情報表示領域３２０には、オーディエンスアイコン３２１ａ、３２１ｂ、３２１ｃ、３２１ｄ、３２１ｅと、オーディエンスからのフィードバック情報３２２と、が表示される。なお、本技術においては、タブの数は３つに限定されるものではないことは言うまでもない。
【０１１７】
プレイヤーアイコン３１１ａ、３１１ｂ、３１１ｃは、各プレイヤーのマウスカーソルである。プレイヤーアイコン３１１ａ、３１１ｂ、３１１ｃとして、それぞれのプレイヤーを識別するための画像と、ユーザ名（図１４では“ｕｓｅｒ ｎａｍｅ”と表記）とが表示される。プレイヤーアイコン３１１ａ、３１１ｂ、３１１ｃは、それぞれのプレイヤーが情報処理装置を用いて（例えば、マウスで操作したり、画面をタッチしたりするなどして）Ｗｅｂブラウザ１３０上で移動させることができる。各プレイヤーは、プレイヤー側の情報処理装置で実行されるＷｅｂブラウザ１３０を操作することで、上述したように、リレーサーバ２３経由で、自らの操作を他のプレイヤーやオーディエンスが操作する情報処理装置との間でリアルタイムに共有することができる。
【０１１８】
共有切り替えボタン３０２は、他のプレイヤーやオーディエンスとの間の共有のオン・オフを切り替えるためのボタンである。プレイヤーが共有切り替えボタン３０２を操作して共有をオフにすると、当該ウィンドウやタブでのプレイヤーの操作は、他のプレイヤーやオーディエンスには反映されなくなる。
【０１１９】
プレイヤーの操作に対して、オーディエンス側の情報処理装置２００ａ〜２００ｃを用いてオーディエンスから反応があると、その反応がオーディエンス情報表示領域３２０に表示される。オーディエンスからの反応としては、オーディエンスアイコン３２１ａ〜３２１ｅとともに表示される、オーディエンスが入力した文字情報であったり、後述する、オーディエンスからの拍手や笑いを意味するボタンの押下であったりする。
【０１２０】
このように、プレイヤーがＷｅｂページへの操作を行うエリアとは別に、オーディエンスからのコメントやフィードバック表示のエリアを設けることで、各プレイヤーは、オーディエンスからのコメントやフィードバックを閲覧しながら、Ｗｅｂページの操作を行うことができる。
【０１２１】
オーディエンス情報表示領域３２０へのオーディエンスアイコン３２１ａ〜３２１ｅの表示手法は様々なバリエーションが考えられる。オーディエンス情報表示領域３２０へのオーディエンスアイコン３２１ａ〜３２１ｅの表示手法については後に詳述する。
【０１２２】
図１４では、プレイヤー側の情報処理装置１００ａに表示されるＷｅｂブラウザ１３０のユーザインタフェース３００として、オーディエンス情報表示領域３２０がユーザインタフェース３００の下部領域に表示されているものを示したが、本開示はかかる例に限定されない。また、オーディエンスがプレイヤーへのフィードバックのために文章を入力した際の、オーディエンス情報表示領域３２０へのオーディエンスアイコン３２１ａ〜３２１ｅの表示手法は特定のものに限定されないことは言うまでもないが、例えば画面の下の方から上に向かって現れるように表示しても良く、Ｗｅｂブラウザ１３０にフェードインするように表示しても良い。
【０１２３】
図１５は、プレイヤー側の情報処理装置１００ａに表示されるＷｅｂブラウザ１３０のユーザインタフェース３００を示す説明図である。
【０１２４】
図１５に示したユーザインタフェース３００は、オーディエンス情報表示領域３２０がユーザインタフェース３００の右側に表示されている。オーディエンス情報表示領域３２０には、オーディエンスからの反応がリアルタイムに表示される点は図１４に示したものと変わらないが、図１５に示したユーザインタフェース３００では、オーディエンス情報表示領域３２０には、オーディエンスからの反応が、オーディエンスコメント表示領域３２３に時系列で表示される。オーディエンスコメント表示領域３２３には、コメントを返したユーザ名（図１５では“ｕｓｅｒ１”〜“ｕｓｅｒ９”で表記）及びコメント（図１５では“ｕｓｅｒ ｃｏｍｍｅｎｔ”で表記）が表示される。また、オーディエンス情報表示領域３２０には、オーディエンスコメント表示領域３２３とは別に、オーディエンスから、後述の拍手ボタン４３２と、笑いボタン４３３が押された数または頻度を表示するための、笑い情報表示領域３２４及び拍手情報表示領域３２５が設けられている。
【０１２５】
このように、オーディエンスからのコメントを時系列でオーディエンス情報表示領域３２０に表示することで、各プレイヤーは、話題にすべきコメントをチェックすることができる。
【０１２６】
以上、プレイヤー側の情報処理装置に表示されるＷｅｂブラウザのユーザインタフェース例について説明した。次に、オーディエンス側の情報処理装置に表示されるＷｅｂブラウザのユーザインタフェース例について説明する。
【０１２７】
図１６は、オーディエンス側の情報処理装置に表示されるＷｅｂブラウザ２３０のユーザインタフェース４００を示す説明図である。オーディエンス側の情報処理装置（例えば、情報処理装置２００ａ）に表示されるＷｅｂブラウザ２３０のユーザインタフェース４００は、専用Ｗｅｂアプリ２４０によって実現される。
【０１２８】
オーディエンス側の情報処理装置に表示されるＷｅｂブラウザ２３０のユーザインタフェース４００は、タブ４０１ａと、プレイヤーアイコン４１１ａ、４１１ｂ、４１１ｃと、オーディエンス情報表示領域４２０と、を含んで構成される。オーディエンス情報表示領域３２０には、オーディエンスアイコン４２１ａ、４２１ｂ、４２１ｃ、４２１ｄ、４２１ｅと、オーディエンスからのフィードバック情報４２２と、テキストボックス４３１と、拍手ボタン４３２と、笑いボタン４３３と、が表示される。
【０１２９】
プレイヤーアイコン４１１ａ、４１１ｂ、４１１ｃは、各プレイヤーのマウスカーソルである。各プレイヤーが、プレイヤー側の情報処理装置で実行されるＷｅｂブラウザ１３０を操作すると、上述したようにリレーサーバ２３経由でその操作の内容がリアルタイムにオーディエンス側の情報処理装置に反映される。これにより、オーディエンスはプレイヤー操作をリアルタイムに共有することができる。
【０１３０】
プレイヤーの操作に対して、オーディエンス側の情報処理装置２００ａ〜２００ｃを用いてオーディエンスから反応があると、その反応がオーディエンス情報表示領域４２０に表示される。オーディエンスからの反応としては、オーディエンスアイコン４２１ａ〜４２１ｅとともに表示される、オーディエンスアイコン４２１ａ〜４２１ｅには、コメントを返したユーザ名（図１６では“ｕｓｅｒ１”〜“ｕｓｅｒ５”で表記）及びコメント（図１６では“Ｕｓｅｒ Ｃｏｍｍｅｎｔ”で表記）が表示される。オーディエンス情報表示領域４２０に表示される情報は、オーディエンスがテキストボックス４３１に入力した文字情報であったり、後述する、オーディエンスからの拍手や笑いを意味する拍手ボタン４３２や笑いボタン４３３の押下に伴う表示であったりする。
【０１３１】
テキストボックス４３１、拍手ボタン４３２及び笑いボタン４３３は、Ｗｅｂブラウザ２３０上に一体となって表示されていてもよい。テキストボックス４３１、拍手ボタン４３２及び笑いボタン４３３は、当該オーディエンスが操作するＷｅｂブラウザ２３０にのみ表示されるものである。テキストボックス４３１、拍手ボタン４３２及び笑いボタン４３３は、オーディエンスがプレイヤー操作に対して反応を返すためのものであるが、オーディエンスがプレイヤー操作に対して反応を返さない場合であってもＷｅｂブラウザ２３０上に常時表示されていると、プレイヤー操作の閲覧の邪魔になる。従って、これらテキストボックス４３１、拍手ボタン４３２及び笑いボタン４３３は、画面表示を消せるようにすることが望ましい。
【０１３２】
図１７は、オーディエンス側の情報処理装置に表示されるＷｅｂブラウザ２３０のユーザインタフェース４００を示す説明図であり、テキストボックス４３１、拍手ボタン４３２及び笑いボタン４３３が画面上から消えている状態を示す説明図である。このように、オーディエンスがプレイヤー操作に対して反応を返さない場合は、テキストボックス４３１、拍手ボタン４３２及び笑いボタン４３３を画面上から消すことで、プレイヤー操作の閲覧の妨げとならない。
【０１３３】
その後、オーディエンスがマウスカーソル４４０を操作して、テキストボックス４３１、拍手ボタン４３２及び笑いボタン４３３が表示されるエリアにマウスカーソル４４０を移動させると、テキストボックス４３１、拍手ボタン４３２及び笑いボタン４３３がＷｅｂブラウザ２３０に表示される。図１８は、オーディエンス側の情報処理装置に表示されるＷｅｂブラウザ２３０のユーザインタフェース４００を示す説明図であり、マウスカーソル４４０の移動によってテキストボックス４３１、拍手ボタン４３２及び笑いボタン４３３がＷｅｂブラウザ２３０に表示された状態を示す説明図である。
【０１３４】
図１８に示したように、オーディエンスがマウスカーソル４４０を操作する他に、例えば、オーディエンスがプレイヤーに対して反応を返す際にキーボードを操作すると、テキストボックス４３１、拍手ボタン４３２及び笑いボタン４３３がＷｅｂブラウザ２３０表示されるようにしてもよい。
【０１３５】
図１９は、オーディエンス側の情報処理装置に表示されるＷｅｂブラウザ２３０のユーザインタフェース４００を示す説明図であり、オーディエンスのキーボードの操作（例えば、スペースキーやＥｎｔｅｒキーの押下）によってテキストボックス４３１、拍手ボタン４３２及び笑いボタン４３３がＷｅｂブラウザ２３０に表示された状態を示す説明図である。図１９に示したユーザインタフェース４００は、図１８とは、異なり、マウスカーソル４４０がテキストボックス４３１、拍手ボタン４３２及び笑いボタン４３３が表示されるエリアに存在しないが、テキストボックス４３１、拍手ボタン４３２及び笑いボタン４３３がＷｅｂブラウザ２３０に表示されている。
【０１３６】
オーディエンスが、プレイヤーに対して反応を返すために、テキストボックス４３１に文章を入力し、入力を確定させると、その文章は、当該プレイヤーのアイコンとともにオーディエンス情報表示領域４２０に表示される。図２０は、オーディエンス側の情報処理装置に表示されるＷｅｂブラウザ２３０のユーザインタフェース４００を示す説明図であり、オーディエンスからの文章入力により、オーディエンス情報表示領域４２０にオーディエンスアイコン４２１ａが、オーディエンスが入力した文章と共に表示されている様子を示したものである。
【０１３７】
このオーディエンス情報表示領域４２０に表示されるオーディエンスアイコン４２１ａは、リレーサーバ２３によって、他のプレイヤー及びオーディエンスのＷｅｂブラウザにも表示される。従って、プレイヤーに対するあるオーディエンスの反応は、プレイヤーのみならずオーディエンスもＷｅｂブラウザを見て確認することができる。
【０１３８】
オーディエンス情報表示領域４２０へのオーディエンスアイコン４２１ａの表示手法は特定のものに限定されないことは言うまでもないが、例えば画面の下の方から上に向かって現れるように表示しても良く、Ｗｅｂブラウザ２３０にフェードインするように表示しても良い。
【０１３９】
オーディエンスによるテキストの入力が完了すると、テキストボックス４３１、拍手ボタン４３２及び笑いボタン４３３をＷｅｂブラウザ２３０から消去させるようにしてもよい。図２１は、オーディエンス側の情報処理装置に表示されるＷｅｂブラウザ２３０のユーザインタフェース４００を示す説明図であり、オーディエンスの文章入力の確定により、テキストボックス４３１、拍手ボタン４３２及び笑いボタン４３３をＷｅｂブラウザ２３０から消去させた状態を示すものである。このように、オーディエンスの文章入力の確定により、テキストボックス４３１、拍手ボタン４３２及び笑いボタン４３３をＷｅｂブラウザ２３０から消去させることで、プレイヤーによるＷｅｂページの操作の閲覧の妨げとなることを防ぐことができる。
【０１４０】
テキストボックス４３１、拍手ボタン４３２及び笑いボタン４３３の表示位置は、例えば、マウスでドラッグさせることで、Ｗｅｂブラウザ２３０の任意の場所に移動できるようにしてもよい。図２２は、オーディエンス側の情報処理装置に表示されるＷｅｂブラウザ２３０のユーザインタフェース４００を示す説明図であり、マウスでドラッグさせることで、テキストボックス４３１、拍手ボタン４３２及び笑いボタン４３３の表示位置を移動させている状態を示すものである。このようにテキストボックス４３１、拍手ボタン４３２及び笑いボタン４３３の表示位置を任意の位置に移動させることで、プレイヤーによるＷｅｂページの操作の閲覧の妨げとなることを防ぐことができる。
【０１４１】
続いて、オーディエンス情報表示領域４２０へのオーディエンス情報の表示手法の一例について説明する。図２３は、オーディエンス側の情報処理装置に表示されるＷｅｂブラウザ２３０のユーザインタフェース４００を示す説明図である。オーディエンス情報表示領域４２０にオーディエンスアイコン４２１ａ〜４２１ｅを表示させ、リレーサーバ２３を介して、オーディエンスが入力した文章を、プレイヤーとオーディエンスとで共有することができる。
【０１４２】
このオーディエンス情報表示領域４２０へのオーディエンス情報の表示は、あるルールに基づいて行われるようにしても良い。以下では、一つのルールを例に挙げてオーディエンス情報表示領域４２０へのオーディエンス情報の表示について説明する。
【０１４３】
例えば、Ｗｅｂブラウザ２３０のユーザインタフェース４００におけるオーディエンス情報表示領域４２０には、オーディエンスアイコンを９つ表示できるようにする。表示位置は、左から順に１〜９とする。そして、オーディエンスアイコンを、まずは奇数番の表示位置に左から順に表示させ、５番の位置にオーディエンスアイコンを表示させると、次に偶数番の表示位置に左から順に表示させる。そして８番の位置にオーディエンスアイコンを表示させると、また奇数番の表示位置に左から順に表示させる。このようにオーディエンスアイコンを表示させることで、オーディエンスアイコンの視認性を高めることができ、オーディエンスからのコメントを規則的に出現させることで、プレイヤー及びオーディエンスは、可読時間を確保しながら、より多くのユーザーコメントを同時に表示できる。また、個々の表示環境によりウィンドウサイズが異なる場合でも、オーディエンスからのコメントの出現タイミングや相対位置を変化させずに済む。
【０１４４】
図２４は、オーディエンスから送られたコメントの表示の概要を示す説明図である。オーディエンスからのコメントは、リレーサーバ２３にキューとして一旦蓄えられ、オーディエンスによって入力された順に、オーディエンス情報表示領域４２０へ、上述のルールに基づいて表示させる。すなわち、最初のオーディエンスアイコンは図２４のオーディエンス情報表示領域４２０の１番に表示させ、以後３番、５番、７番、９番の順に表示させる。オーディエンスアイコンが９番に表示されると、続いて２番、４番、６番、８番の順に表示させる。オーディエンスアイコンが８番に表示されると、また１番に表示させる。
【０１４５】
詳しい説明は後述するが、オーディエンスアイコンは一度表示されると、徐々に表示を薄くさせてもよい。例えば、図２４を用いて説明すると、１番にオーディエンスアイコンを表示させた後は、時間と共にその表示を薄くさせ、オーディエンスアイコンが２番に表示されるまでに、１番に表示させたオーディエンスアイコンは画面から完全に消去させるようにしてもよい。これにより、オーディエンスアイコン同士が同じ濃さで表示されることがなくなり、オーディエンスのコメントの可読性を高めることができる。
【０１４６】
なお、図２４ではオーディエンス情報表示領域４２０への表示についてのみを図示したが、もちろん、プレイヤー側のＷｅｂブラウザ１３０に表示されるオーディエンス情報表示領域３２０にも、同じ手法を適用することは言うまでもない。
【０１４７】
図２５は、オーディエンスから送られたコメントの表示の概要を示す説明図であり、最初のオーディエンスアイコンを、図２４のオーディエンス情報表示領域４２０の１番に表示させた状態を模式的に示したものである。
【０１４８】
図２６〜図３４は、オーディエンス側の情報処理装置に表示されるＷｅｂブラウザ２３０のユーザインタフェース４００の内、オーディエンス情報表示領域４２０を抜き出して示す説明図である。図２６は、図２４のオーディエンス情報表示領域４２０の１番に、オーディエンスアイコン４２１ａを表示させた状態を示したものである。
【０１４９】
図２４のオーディエンス情報表示領域４２０の１番に、オーディエンスアイコン４２１ａを表示させると、続いて、オーディエンス情報表示領域４２０の３番に、オーディエンスアイコン４２１ｂを表示させる。図２７は、図２４のオーディエンス情報表示領域４２０の３番に、オーディエンスアイコン４２１ｂを表示させた状態を示したものである。この際に、先に表示したオーディエンスアイコン４２１ａは徐々に濃度が薄くなるように表示させる。
【０１５０】
続いて、オーディエンス情報表示領域４２０の５番に、オーディエンスアイコン４２１ｂを表示させる。図２８は、図２４のオーディエンス情報表示領域４２０の５番に、オーディエンスアイコン４２１ｃを表示させた状態を示したものである。同様に、先に表示したオーディエンスアイコン４２１ａ、４２１ｂは徐々に濃度が薄くなるように表示させる。
【０１５１】
続いて、オーディエンス情報表示領域４２０の７番に、オーディエンスアイコン４２１ｂを表示させる。図２９は、図２４のオーディエンス情報表示領域４２０の７番に、オーディエンスアイコン４２１ｄを表示させた状態を示したものである。同様に、先に表示したオーディエンスアイコン４２１ａ、４２１ｂ、４２１ｃは徐々に濃度が薄くなるように表示させる。
【０１５２】
続いて、オーディエンス情報表示領域４２０の９番に、オーディエンスアイコン４２１ｂを表示させる。図３０は、図２４のオーディエンス情報表示領域４２０の９番に、オーディエンスアイコン４２１ｅを表示させた状態を示したものである。同様に、先に表示したオーディエンスアイコン４２１ａ、４２１ｂ、４２１ｃ、４２１ｄは徐々に濃度が薄くなるように表示させる。
【０１５３】
オーディエンス情報表示領域４２０の９番に、オーディエンスアイコン４２１ｅが表示される頃になると、最初に表示されたオーディエンスアイコン４２１ａの濃度がかなり薄くなっている。次にオーディエンス情報表示領域４２０の２番にオーディエンスアイコンが表示されると、最初に表示されたオーディエンスアイコン４２１ａは画面から完全に消える。
【０１５４】
続いて、オーディエンス情報表示領域４２０の２番に、オーディエンスアイコン４２１ｆを表示させる。図３１は、図２４のオーディエンス情報表示領域４２０の２番に、オーディエンスアイコン４２１ｆを表示させた状態を示したものである。同様に、先に表示したオーディエンスアイコン４２１ｂ、４２１ｃ、４２１ｄ、４２１ｅは徐々に濃度が薄くなるように表示させる。また、最初に表示されたオーディエンスアイコン４２１ａは画面から完全に消えてしまっている。
【０１５５】
続いて、オーディエンス情報表示領域４２０の４番に、オーディエンスアイコン４２１ｇを表示させる。図３１は、図２４のオーディエンス情報表示領域４２０の４番に、オーディエンスアイコン４２１ｇを表示させた状態を示したものである。同様に、先に表示したオーディエンスアイコン４２１ｃ、４２１ｄ、４２１ｅ、４２１ｆは徐々に濃度が薄くなるように表示させる。また、オーディエンスアイコン４２１ｂは画面から完全に消えてしまっている。
【０１５６】
続いて、オーディエンス情報表示領域４２０の６番に、オーディエンスアイコン４２１ｈを表示させる。図３２は、図２４のオーディエンス情報表示領域４２０の６番に、オーディエンスアイコン４２１ｈを表示させた状態を示したものである。同様に、先に表示したオーディエンスアイコン４２１ｄ、４２１ｅ、４２１ｆ、４２１ｇは徐々に濃度が薄くなるように表示させる。また、オーディエンスアイコン４２１ｃは画面から完全に消えてしまっている。
【０１５７】
続いて、オーディエンス情報表示領域４２０の８番に、オーディエンスアイコン４２１ｈを表示させる。図３３は、図２４のオーディエンス情報表示領域４２０の８番に、オーディエンスアイコン４２１ｉを表示させた状態を示したものである。同様に、先に表示したオーディエンスアイコン４２１ｅ、４２１ｆ、４２１ｇ、４２１ｈは徐々に濃度が薄くなるように表示させる。また、オーディエンスアイコン４２１ｄは画面から完全に消えてしまっている。
【０１５８】
図２４のオーディエンス情報表示領域４２０の８番に、オーディエンスアイコン４２１ｉを表示させると、最初にオーディエンスアイコン４２１ａを表示させた図２４のオーディエンス情報表示領域４２０の１番に、再びオーディエンスアイコンを表示させる。このようにオーディエンスアイコンをサイクリックに表示させることで、プレイヤー及びオーディエンスに対して、オーディエンスからのコメントの可読時間を確保しながら、より多くのオーディエンスコメントを同時に表示することができる。
【０１５９】
Ｗｅｂブラウザのウィンドウサイズが変わっても、オーディエンスアイコンの表示の規則性は変化させない。図３５は、オーディエンスからのコメント表示の概要を示す説明図であり、最初のオーディエンスアイコンを、図２４のオーディエンス情報表示領域４２０の１番に表示させた状態を模式的に示したものである。また図３５は、図２５に比べてＷｅｂブラウザ２３０の横幅が広くなっている。以下、図３６〜図４４についても同様である。
【０１６０】
図３６〜図４４は、オーディエンス側の情報処理装置に表示されるＷｅｂブラウザ２３０のユーザインタフェース４００の内、オーディエンス情報表示領域４２０を抜き出して示す説明図である。図３６は、図２４のオーディエンス情報表示領域４２０の１番に、オーディエンスアイコン４２１ａを表示させた状態を示したものである。
【０１６１】
以下、図２６〜図３４に示したオーディエンス情報表示領域４２０へのオーディエンスアイコン４２１ａ〜４２１ｉの表示と同様に、１番→３番→５番→７番→９番→２番→４番→６番→８番の順で、オーディエンス情報表示領域４２０へオーディエンスアイコン４２１ａ〜４２１ｉを順次表示させる。このように、オーディエンスアイコンをサイクリックに表示させることで、プレイヤー及びオーディエンスに対して、オーディエンスからのコメントの可読時間を確保しながら、より多くのオーディエンスコメントを同時に表示することができる。また、個々の表示環境によりウィンドウサイズが異なる場合でも、オーディエンスコメントの出現タイミングや相対位置を変化させずに、オーディエンスコメントをプレイヤーとオーディエンスとの間で共有することができる。
【０１６２】
以上、オーディエンス情報表示領域４２０へのオーディエンス情報の表示手法の一例について説明した。もちろん、オーディエンス情報表示領域４２０へのオーディエンス情報の表示手法は上述の例に限定されないことは言うまでもない。例えば、上述の説明では左から順に規則的にオーディエンスアイコンを表示させていたが、右から順に規則的にオーディエンスアイコンを表示させるようにしても良い。
【０１６３】
オーディエンス情報表示領域４２０へのオーディエンス情報は、その他にも様々な手法を用いることができる。例えば、同一のオーディエンスからのコメントは常に同じ位置に表示するようにしてもよい。また例えば、コメントを数多く送信するオーディエンスからのオーディエンス情報は、オーディエンス情報表示領域４２０の固定の場所に優先的に表示するようにしてもよい。
【０１６４】
次に、オーディエンスからのコメントの集中による混雑を回避する処理の一例について説明する。オーディエンスの数が増加すると、一度に多数のオーディエンスからコメントが送られることが考えられる。そのオーディエンスからのコメントを全て表示させると、オーディエンスからのコメントの鮮度が失われ、コメントが画面に表示される頃には、プレイヤーは全く別の話題に移っている場合が考えられる。そのため、混雑を回避する処理として、リレーサーバ２３は、オーディエンスからのコメントを表示する前の段階に、一定時間にメッセージを送り出すキューを設け、そのキューで順番待ち数を計測する。そして、計測された順番待ち数が指定した閾値を超えた場合、リレーサーバ２３はオーディエンスからのコメント送信を禁止して、オーディエンスからのコメントを受け付けないようにしてもよい。
【０１６５】
図４５は、オーディエンスからのコメントの表示処理の概要を示す説明図である。図４５には、オーディエンスから送信されたコメントは、リレーサーバ２３上のキューに一旦蓄えられ、送信された順に、上述の表示手法によってオーディエンス情報表示領域４２０に表示される。しかし、順番待ち数が所定の閾値ｑに達すると、リレーサーバ２３は、それ以上のコメントの入力は受け付けなくする。コメントの入力を受け付けなくする手法として、例えば、オーディエンスによってテキストボックス４３１にコメントが入力され、コメントが確定されても、混雑中である旨のメッセージ（例えば、「混雑しているため、コメントできません。」など）を、コメントを入力したオーディエンスが操作しているＷｅｂブラウザ上に表示されるテキストボックス４３１に表示させる。
【０１６６】
図４６は、オーディエンス側の情報処理装置に表示されるＷｅｂブラウザ２３０のユーザインタフェース４００を示す説明図であり、リレーサーバ２３上のキューに蓄えられている順番待ち数が所定の閾値ｑに達している場合に、オーディエンスがコメントをテキストボックス４３１に入力し、入力したコメントを確定しようとしている状態を示したものである。
【０１６７】
この状態で、オーディエンスがコメントをテキストボックス４３１に入力し、入力したコメントを確定させても、リレーサーバ２３上のキューに蓄えられている順番待ち数が所定の閾値ｑに達しているので、リレーサーバ２３はコメントの受け付けを禁止し、混雑中である旨のメッセージを、コメントを入力したオーディエンスが操作しているＷｅｂブラウザ上に表示されるテキストボックス４３１に表示させる。
【０１６８】
図４７は、オーディエンス側の情報処理装置に表示されるＷｅｂブラウザ２３０のユーザインタフェース４００を示す説明図であり、図４６に示した状態から、オーディエンスがテキストボックス４３１に入力したコメントを確定させた状態に遷移した様子を示すものである。図４７では、混雑中である旨のメッセージがテキストボックス４３１に表示されている。そして、エラーメッセージがテキストボックス４３１に表示されてから所定の時間が経過すると、エラーメッセージをテキストボックス４３１から消去させ、入力待機状態に戻す。これにより、オーディエンスは、多数のコメントが集中していることを把握し、所定の時間経過後に、再びコメントを入力することができる。
【０１６９】
プレイヤーの発言やＷｅｂページへの操作に対する、拍手や笑いなどの感情要素は、オーディエンス側のＷｅｂブラウザ２３０に表示される拍手ボタン４３２や笑いボタン４３３の押下により、参加者へ発信できる。また、全オーディエンス参加者の一定時間内の拍手ボタン４３２や笑いボタン４３３の押下量をフィードバック表示や、サウンド効果で表現することで、イベントの場の雰囲気の盛り上がりを参加者が知ることができる。
【０１７０】
オーディエンスによる拍手ボタン４３２や笑いボタン４３３の押下により、全オーディエンスのフィードバック量Ｆを集計する。フィードバック量Ｆは、全オーディエンスによるアクション数を所定の時間Ｔで除して集計する。すなわち、フィードバック量Ｆ＝アクション数／Ｔである。
【０１７１】
そして、このように算出したフィードバックＦに応じて、オーディエンス情報表示領域３２０、４２０に表示させるエフェクトの量を変化させる。例えば、エフェクトとして視覚効果を用いる場合は、視覚効果の量としてパーティクル出現頻度を変化させ、音声効果を用いる場合は、音声効果の量として、量に応じたＳＥ（サウンドエフェクト）の種類を変化させる。
【０１７２】
プレイヤーの数が増えると、どのプレイヤーが発言しているのかを把握することが困難になる場合が考えられる。そのため、どのプレイヤーが発言しているのか、またどのプレイヤーがマウスを操作しているのかを、容易に判別する仕組みを設けることが望ましい。
【０１７３】
例えば、どのプレイヤーが話しているのかを判別するためには、プレイヤーのマイク音量を手掛かりに、プレイヤーアイコンの表現を変化させることで、どのプレイヤーが話しているかを判別できるようにしてもよい。また、どのプレイヤーが操作をしているかを半ベルするためには、プレイヤーのマウス操作（移動・クリック・ドラックなど）をトリガとして、プレイヤーアイコン表現を変化させることで、どのプレイヤーが操作をしているかを判別できるようにしてもよい。
【０１７４】
オーディエンス側のＷｅｂブラウザ２３０に表示される、プレイヤーによって提示されたＷｅｂサイトを、オーディエンスの操作によって別ウィンドウまたは別タブに表示するようにしてもよい。例えば、オーディエンス側のＷｅｂブラウザ２３０の、テキストボックス４３１、拍手ボタン４３２、笑いボタン４３３が表示されている領域以外の領域のクリックにより、表示中のＷｅｂページを別ウィンドウまたは別タブに表示するようにしてもよい。
【０１７５】
図４８は、オーディエンス側の情報処理装置に表示されるＷｅｂブラウザ２３０のユーザインタフェース４００を示す説明図であり、プレイヤーによって提示されたＷｅｂページが、オーディエンスのマウスカーソル４４０の操作により、別タブに表示されようとしている状態を示したものである。オーディエンスが、例えばマウスカーソル４４０を、テキストボックス４３１、拍手ボタン４３２、笑いボタン４３３が表示されていない領域に移動させて、マウスをクリックすると、タブ４０１ａで表示中のＷｅｂページを、別のタブに表示させる。
【０１７６】
図４９は、オーディエンス側の情報処理装置に表示されるＷｅｂブラウザ２３０のユーザインタフェース４００を示す説明図であり、図４８に示した状態から、プレイヤーによって提示されたＷｅｂサイトが、オーディエンスによるマウスカーソル４４０の操作により、タブ４０１ａとは別のタブ４０１ｂに表示されている状態に移行した様子を示したものである。このように、プレイヤーによって提示されたＷｅｂページを、オーディエンスによるマウスカーソル４４０の操作により、別のウィンドウやタブに表示させることで、当該オーディエンスは、後で改めてそのプレイヤーによって提示されたＷｅｂページの内容を確認することが可能になる。
【０１７７】
図５０は、オーディエンス側の情報処理装置に表示されるＷｅｂブラウザ２３０のユーザインタフェース４００を示す説明図であり、プレイヤーによって提示されたＷｅｂサイトに表示されているバナーに対する、オーディエンスのマウスカーソル４４０の操作により、別タブに表示されようとしている状態を示したものである。オーディエンスが、プレイヤーによって提示されたＷｅｂサイト中のバナー表示領域４５０に表示されているバナーをクリックすることで、当該バナーのリンク先のＷｅｂページを、別のタブに表示させる。
【０１７８】
図５１は、オーディエンス側の情報処理装置に表示されるＷｅｂブラウザ２３０のユーザインタフェース４００を示す説明図であり、図５０に示した状態から、プレイヤーによって提示されたＷｅｂページのバナーに対するオーディエンスのマウスカーソル４４０の操作により、当該バナーのリンク先のＷｅｂページが、タブ４０１ａとは別のタブ４０１ｂに表示されている状態に移行したものを示したものである。このように、プレイヤーによって提示されたＷｅｂページのバナーのリンク先のＷｅｂページを別のウィンドウやタブに表示させることで、当該オーディエンスは、後で改めてそのＷｅｂページの内容を確認することが可能になる。
【０１７９】
このような本開示の一実施形態にかかるコンテンツ共有システム１を用いることで、インターネットを用いた様々なイベントを実現することができる。以下では、そのようなイベントの一例として、インターネットによる新製品のセミナーの実施例について説明する。
【０１８０】
図５２は、本開示の一実施形態にかかるコンテンツ共有システム１を用いたネットイベントの一例を示す説明図であり、新商品のセミナーイベントの概要について示したものである。例えば、新製品を特集するＷｅｂページが複数開設され、それぞれのＷｅｂページの訪問者や、当該Ｗｅｂページの滞留時間をＷｅｂページの開設者が監視し、Ｗｅｂページの開設者や管理者は、あるＷｅｂページの訪問者や、当該Ｗｅｂページの滞留時間が所定の値に達すると、それぞれのＷｅｂページに対して、当該製品のセミナーイベントを開始する旨を通知する。図５２では、新製品Ａ、Ｂ、Ｃをそれぞれ特集するＷｅｂページが開設され、新製品Ｂを特集するＷｅｂページを５人訪問している状態が図示されている。なおＷｅｂページの訪問者や、当該Ｗｅｂページの滞留時間の監視方法は特定の方法に限定されないことは言うまでもない。
【０１８１】
図５３は、本開示の一実施形態にかかるコンテンツ共有システム１を用いたネットイベントの一例を示す説明図であり、Ｗｅｂページの訪問者や、当該Ｗｅｂページの滞留時間をＷｅｂページの開設者や管理者が監視している状態を示すものである。Ｗｅｂページの開設者や管理者は、Ｗｅｂページの訪問者や、当該Ｗｅｂページの滞留時間が所定の値に達すると、それぞれのＷｅｂページに対して、当該製品のセミナーイベントを開始する旨を通知する。
【０１８２】
図５４は、本開示の一実施形態にかかるコンテンツ共有システム１を用いたネットイベントの一例を示す説明図であり、Ｗｅｂページの開設者や管理者が、Ｗｅｂページの訪問者のＷｅｂブラウザに対して、セミナーイベントの開始を通知している状態を示すものである。そしてＷｅｂページの訪問者が、セミナーイベントに参加すると、Ｗｅｂページの開設者や管理者がプレイヤー、Ｗｅｂページの訪問者がオーディエンスの関係となり、プレイヤーによるＷｅｂブラウザを用いた新製品の説明を、オーディエンスが閲覧することができる。
【０１８３】
なお、セミナーイベントへの入り口は、他のＷｅｂページや他のネットサービスにリンクしてもよい。共有するＷｅｂページが変化しても、インターネットによるセミナーイベントのＵＲＬを固定することができる。
【０１８４】
本開示の一実施形態にかかるコンテンツ共有システム１を用いることで、Ｗｅｂページを用いた様々なイベントを提供することができる。例えば、上述したような、商品についてのセミナーイベントの開催の他に、複数のプレイヤーによる注目すべきＷｅｂページの紹介、アーティストのプロモーションイベントなどに、本開示の一実施形態にかかるコンテンツ共有システム１を活用することが出来る。
【０１８５】
なお、上述の説明では、共有するコンテンツとしてインターネット上のＷｅｂページを例に挙げて説明したが、共有するコンテンツは係る例に限定されない。すなわち、共有するコンテンツとしては、映像コンテンツ、画像コンテンツ、文書データなどであってもよく、これらのコンテンツをＷｅｂブラウザで表示させることで、プレイヤーとオーディエンスとの間でコンテンツを共有して表示させるようにしてもよい。
【０１８６】
また上述の説明では、笑いや拍手という感情的な反応をオーディエンスから返すために、拍手ボタン４３２や笑いボタン４３３をＷｅｂブラウザ２３０に表示させていたが、本技術はかかる例に限定されない、例えば、オーディエンスが操作する情報処理装置が携帯型の端末であり、当該端末に加速度センサや傾きセンサなどが備わっている場合に、情報処理装置を傾けたり動かしたりすることで、笑いや拍手という感情的な反応をオーディエンスから返させるようにしてもよい。
【０１８７】
＜２．まとめ＞
以上説明したように、本開示の一実施形態にかかるコンテンツ共有システム１により、話題のＷｅｂページを見ながら複数の人間でチャットをするといったコミュニケーションが、Ｗｅｂブラウザだけで実現可能になる。オーディエンス側は、特別なアプリケーションのインストールを必要とすることなく、Ｗｅｂブラウザで特定のＷｅｂページを開くだけでコミュニケーションに参加可能であり、オーディエンスを特定の機器に縛ることなく、またＷｅｂブラウザのウィンドウサイズがばらばらであっても、表示内容を他のオーディエンスやプレイヤーとの間で正しく共有できる。
【０１８８】
また本開示の一実施形態にかかるコンテンツ共有システム１では、オーディエンスからのコメントを上述したようにサイクリックに表示することで、文書や映像などの共有コンテンツの視認性や話題の鮮度を損なうことなく意思疎通を行うことができるとともに、より多くのコメントを同時に表示でき、個々の表示環境によりウィンドウサイズが異なる場合でも、コメントの出現タイミングや相対位置を変化させないので、円滑なコミュニケーションが図れる。また、オーディエンスが拍手や笑いといった感情的な反応を返すために、これらの感情的な反応を返すためのユーザインタフェースを設けることで、オーディエンスから発信されるメッセージの数を増やさずに、オーディエンスからのより早い意思発信が可能となる。
【０１８９】
なお、本明細書において説明した各装置による一連の制御処理は、ソフトウェア、ハードウェア、及びソフトウェアとハードウェアとの組合せのいずれを用いて実現されてもよい。ソフトウェアを構成するプログラムは、例えば、各装置の内部又は外部に設けられるコンピュータ読取可能な記録媒体に予め格納される。そして、各プログラムは、例えば、実行時にＲＡＭ（Ｒａｎｄｏｍ Ａｃｃｅｓｓ Ｍｅｍｏｒｙ）に読み込まれ、ＣＰＵ（Ｃｅｎｔｒａｌ Ｐｒｏｃｅｓｓｉｎｇ Ｕｎｉｔ）などのプロセッサにより実行される。
【０１９０】
以上、添付図面を参照しながら本開示の好適な実施形態について詳細に説明したが、本開示はかかる例に限定されない。本開示の属する技術の分野における通常の知識を有する者であれば、特許請求の範囲に記載された技術的思想の範疇内において、各種の変更例または修正例に想到し得ることは明らかであり、これらについても、当然に本開示の技術的範囲に属するものと了解される。
【０１９１】
なお、本技術は以下のような構成も取ることができる。
（１）
コンテンツを直接操作するプレイヤーによって操作されるコンテンツと同一の内容を前記プレイヤー側とリアルタイムに共有して表示するコンテンツ表示部と、
前記コンテンツ表示部が前記プレイヤー側とリアルタイムに共有して表示する前記コンテンツの所定の領域に、前記プレイヤーの操作を閲覧するのみの自装置及び他装置から送信されるコメントを所定の規則に基づいて規則的に出現させる表示制御部と、
を備える、情報表示装置。
（２）
前記表示制御部は自装置及び他装置から送信されるコメントを、水平方向に１メッセージ分間隔をあけて順番に出現させる、前記（１）に記載の情報処理装置。
（３）
前記表示制御部は、前記コンテンツ表示部が表示する前記共有コンテンツのウィンドウサイズが変化しても前記規則を変化させない、前記（１）または（２）に記載の情報処理装置。
（４）
前記表示制御部は、前記コンテンツ表示部が表示する前記共有コンテンツに重ねてプレイヤーにフィードバックを返すフィードバック入力部を表示させる、前記（１）から（３）のいずれかに記載の情報処理装置。
（５）
前記表示制御部は、前記フィードバック入力部に、感情的表現をフィードバックとして返すためのものを表示させる、前記（４）に記載の情報処理装置。
（６）
前記表示制御部は、他のプレイヤーからコメントが所定数以上送信されている場合に、前記フィードバック入力部に入力されたコメントが確定された時点で、コメントが送信できない旨を前記フィードバック入力部に表示する、前記（１）から（５）のいずれかに記載の情報処理装置。
（７）
前記表示制御部は、自装置からのものを含めた感情的表現によるフィードバックの頻度を、前記所定の領域への図柄の表示頻度により制御する、前記（１）から（６）のいずれかにに記載の情報処理装置。
（８）
前記表示制御部は、所定の条件を満たすユーザが操作する装置から送信されるコメントを、前記所定の領域の決まった位置に表示させる、前記（１）から（７）のいずれかにに記載の情報処理装置。
（９）
前記所定の条件は、コメントの送信回数が所定量以上である、前記（８）のいずれかにに記載の情報処理装置。
（１０）
コンテンツを直接操作するプレイヤーによって操作される共有コンテンツと同一の内容を前記プレイヤー側とリアルタイムに表示するコンテンツ表示ステップと、
前記コンテンツ表示ステップが前記プレイヤー側とリアルタイムに共有して表示する前記コンテンツの所定の領域に、前記プレイヤーの操作を閲覧するのみの自装置及び他装置から送信されるコメントを所定の規則に基づいて規則的に出現させる表示制御ステップと、
を備える、情報表示方法。
（１１）
コンピュータに、
コンテンツを直接操作するプレイヤーによって操作される共有コンテンツと同一の内容を前記プレイヤー側とリアルタイムに表示するコンテンツ表示ステップと、
前記コンテンツ表示ステップが前記プレイヤー側とリアルタイムに共有して表示する前記コンテンツの所定の領域に、前記プレイヤーの操作を閲覧するのみの自装置及び他装置から送信されるコメントを所定の規則に基づいて規則的に出現させる表示制御ステップと、
を実行させる、コンピュータプログラム。
【符号の説明】
【０１９２】
１ コンテンツ共有システム
１０ ネットワーク
２０ システムサーバ
３０ Ｗｅｂサーバ
３１ 管理データベース
１００ａ、１００ｂ、２００ａ、２００ｂ、２００ｃ 情報処理装置
１１０ ハードウェア
１２０ ＯＳ（Ｏｐｅｒａｔｉｎｇ Ｓｙｓｔｅｍ）
１３０ Ｗｅｂブラウザ
１４０ ブラウザ拡張アプリ
１４１ スクリプト管理部
１４２ 通信部
２１０ ハードウェア
２２０ ＯＳ（Ｏｐｅｒａｔｉｎｇ Ｓｙｓｔｅｍ）
２３０ Ｗｅｂブラウザ
２４０ 専用Ｗｅｂアプリ
２６０ スクリプト
２６１ コンテンツ更新部
２６２ 通信部
【特許請求の範囲】
【請求項１】
コンテンツを直接操作するプレイヤーによって操作されるコンテンツと同一の内容を前記プレイヤー側とリアルタイムに共有して表示するコンテンツ表示部と、
前記コンテンツ表示部が前記プレイヤー側とリアルタイムに共有して表示する前記コンテンツの所定の領域に、前記プレイヤーの操作を閲覧するのみの自装置及び他装置から送信されるコメントを所定の規則に基づいて規則的に出現させる表示制御部と、
を備える、情報表示装置。
【請求項２】
前記表示制御部は自装置及び他装置から送信されるコメントを、水平方向に１メッセージ分間隔をあけて順番に出現させる、請求項１に記載の情報処理装置。
【請求項３】
前記表示制御部は、前記コンテンツ表示部が表示する前記共有コンテンツのウィンドウサイズが変化しても前記規則を変化させない、請求項１に記載の情報処理装置。
【請求項４】
前記表示制御部は、前記コンテンツ表示部が表示する前記共有コンテンツに重ねてプレイヤーにフィードバックを返すフィードバック入力部を表示させる、請求項１に記載の情報処理装置。
【請求項５】
前記表示制御部は、前記フィードバック入力部に、感情的表現をフィードバックとして返すためのものを表示させる、請求項４に記載の情報処理装置。
【請求項６】
前記表示制御部は、他のプレイヤーからコメントが所定数以上送信されている場合に、前記フィードバック入力部に入力されたコメントが確定された時点で、コメントが送信できない旨を前記フィードバック入力部に表示する、請求項１に記載の情報処理装置。
【請求項７】
前記表示制御部は、自装置からのものを含めた感情的表現によるフィードバックの頻度を、前記所定の領域への図柄の表示頻度により制御する、請求項１に記載の情報処理装置。
【請求項８】
前記表示制御部は、所定の条件を満たすユーザが操作する装置から送信されるコメントを、前記所定の領域の決まった位置に表示させる、請求項１に記載の情報処理装置。
【請求項９】
前記所定の条件は、コメントの送信回数が所定量以上である、請求項８に記載の情報処理装置。
【請求項１０】
コンテンツを直接操作するプレイヤーによって操作される共有コンテンツと同一の内容を前記プレイヤー側とリアルタイムに表示するコンテンツ表示ステップと、
前記コンテンツ表示ステップが前記プレイヤー側とリアルタイムに共有して表示する前記コンテンツの所定の領域に、前記プレイヤーの操作を閲覧するのみの自装置及び他装置から送信されるコメントを所定の規則に基づいて規則的に出現させる表示制御ステップと、
を備える、情報表示方法。
【請求項１１】
コンピュータに、
コンテンツを直接操作するプレイヤーによって操作される共有コンテンツと同一の内容を前記プレイヤー側とリアルタイムに表示するコンテンツ表示ステップと、
前記コンテンツ表示ステップが前記プレイヤー側とリアルタイムに共有して表示する前記コンテンツの所定の領域に、前記プレイヤーの操作を閲覧するのみの自装置及び他装置から送信されるコメントを所定の規則に基づいて規則的に出現させる表示制御ステップと、
を実行させる、コンピュータプログラム。
【請求項１】
コンテンツを直接操作するプレイヤーによって操作されるコンテンツと同一の内容を前記プレイヤー側とリアルタイムに共有して表示するコンテンツ表示部と、
前記コンテンツ表示部が前記プレイヤー側とリアルタイムに共有して表示する前記コンテンツの所定の領域に、前記プレイヤーの操作を閲覧するのみの自装置及び他装置から送信されるコメントを所定の規則に基づいて規則的に出現させる表示制御部と、
を備える、情報表示装置。
【請求項２】
前記表示制御部は自装置及び他装置から送信されるコメントを、水平方向に１メッセージ分間隔をあけて順番に出現させる、請求項１に記載の情報処理装置。
【請求項３】
前記表示制御部は、前記コンテンツ表示部が表示する前記共有コンテンツのウィンドウサイズが変化しても前記規則を変化させない、請求項１に記載の情報処理装置。
【請求項４】
前記表示制御部は、前記コンテンツ表示部が表示する前記共有コンテンツに重ねてプレイヤーにフィードバックを返すフィードバック入力部を表示させる、請求項１に記載の情報処理装置。
【請求項５】
前記表示制御部は、前記フィードバック入力部に、感情的表現をフィードバックとして返すためのものを表示させる、請求項４に記載の情報処理装置。
【請求項６】
前記表示制御部は、他のプレイヤーからコメントが所定数以上送信されている場合に、前記フィードバック入力部に入力されたコメントが確定された時点で、コメントが送信できない旨を前記フィードバック入力部に表示する、請求項１に記載の情報処理装置。
【請求項７】
前記表示制御部は、自装置からのものを含めた感情的表現によるフィードバックの頻度を、前記所定の領域への図柄の表示頻度により制御する、請求項１に記載の情報処理装置。
【請求項８】
前記表示制御部は、所定の条件を満たすユーザが操作する装置から送信されるコメントを、前記所定の領域の決まった位置に表示させる、請求項１に記載の情報処理装置。
【請求項９】
前記所定の条件は、コメントの送信回数が所定量以上である、請求項８に記載の情報処理装置。
【請求項１０】
コンテンツを直接操作するプレイヤーによって操作される共有コンテンツと同一の内容を前記プレイヤー側とリアルタイムに表示するコンテンツ表示ステップと、
前記コンテンツ表示ステップが前記プレイヤー側とリアルタイムに共有して表示する前記コンテンツの所定の領域に、前記プレイヤーの操作を閲覧するのみの自装置及び他装置から送信されるコメントを所定の規則に基づいて規則的に出現させる表示制御ステップと、
を備える、情報表示方法。
【請求項１１】
コンピュータに、
コンテンツを直接操作するプレイヤーによって操作される共有コンテンツと同一の内容を前記プレイヤー側とリアルタイムに表示するコンテンツ表示ステップと、
前記コンテンツ表示ステップが前記プレイヤー側とリアルタイムに共有して表示する前記コンテンツの所定の領域に、前記プレイヤーの操作を閲覧するのみの自装置及び他装置から送信されるコメントを所定の規則に基づいて規則的に出現させる表示制御ステップと、
を実行させる、コンピュータプログラム。
【図１】
【図２】
【図３】
【図４】
【図５】
【図６】
【図７】
【図８】
【図９】
【図１０】
【図１１】
【図１２】
【図１３】
【図１４】
【図１５】
【図１６】
【図１７】
【図１８】
【図１９】
【図２０】
【図２１】
【図２２】
【図２３】
【図２４】
【図２５】
【図２６】
【図２７】
【図２８】
【図２９】
【図３０】
【図３１】
【図３２】
【図３３】
【図３４】
【図３５】
【図３６】
【図３７】
【図３８】
【図３９】
【図４０】
【図４１】
【図４２】
【図４３】
【図４４】
【図４５】
【図４６】
【図４７】
【図４８】
【図４９】
【図５０】
【図５１】
【図５２】
【図５３】
【図５４】
【図２】
【図３】
【図４】
【図５】
【図６】
【図７】
【図８】
【図９】
【図１０】
【図１１】
【図１２】
【図１３】
【図１４】
【図１５】
【図１６】
【図１７】
【図１８】
【図１９】
【図２０】
【図２１】
【図２２】
【図２３】
【図２４】
【図２５】
【図２６】
【図２７】
【図２８】
【図２９】
【図３０】
【図３１】
【図３２】
【図３３】
【図３４】
【図３５】
【図３６】
【図３７】
【図３８】
【図３９】
【図４０】
【図４１】
【図４２】
【図４３】
【図４４】
【図４５】
【図４６】
【図４７】
【図４８】
【図４９】
【図５０】
【図５１】
【図５２】
【図５３】
【図５４】
【公開番号】特開２０１２−２３８２１８（Ｐ２０１２−２３８２１８Ａ）
【公開日】平成２４年１２月６日（２０１２．１２．６）
【国際特許分類】
【出願番号】特願２０１１−１０７４００（Ｐ２０１１−１０７４００）
【出願日】平成２３年５月１２日（２０１１．５．１２）
【出願人】（０００００２１８５）ソニー株式会社 (34,172)
【Ｆターム（参考）】
【公開日】平成２４年１２月６日（２０１２．１２．６）
【国際特許分類】
【出願日】平成２３年５月１２日（２０１１．５．１２）
【出願人】（０００００２１８５）ソニー株式会社 (34,172)
【Ｆターム（参考）】
[ Back to top ]