JP7335491B2 - 表示制御プログラム、表示制御方法、および表示制御装置 - Google Patents

Description

本発明は、表示制御プログラム、表示制御方法、および表示制御装置に関する。

スマートフォンを用いたコミュニケーション手段の１つにチャットがある。チャットでは、ユーザの発言内容を示すコメントが、吹き出しを用いてスマートフォンの画面に時系列で表示される。複数のコメントが時系列で表示されることで、チャットを用いた会話の流れが分かりやすくなる。

チャットに関する技術としては、例えば仮想空間上でのメッセージ表示について、ユーザが使用しやすい通信装置が提案されている。またメッセンジャーの表示制御方法に関する提案もある。

特開２００３－１０８５０６号公報 特開２０１６－２１２８７８号公報

チャットで表示される多くのコメントは数行程度の短い文章であるが、長い文章のコメントが投稿されることもある。コメントの文章を吹き出しの表示枠内に表示する場合、文章が長くなると、スマートフォンは文章の長さに合わせて表示枠も大きくする。ただしスマートフォンは画面が狭く、１つの文章を表示するための表示枠を大きくしすぎると、他の文章が表示できなくなる。そこで多くの場合、スマートフォンは、文章が長文の場合、初期状態ではその文章の一部のみを表示し、ユーザの操作に応じて他の部分を表示する。しかし、初期状態で文章の一部のみしか表示されていないと、ユーザが注目している箇所が、文章データ全体の中のどのような位置にあるのかが把握しづらい。

１つの側面では、本件は、文章データ全体におけるユーザの注目箇所の位置の把握を容易にすることを目的とする。

１つの案では、画面上における文章データの表示態様を制御する処理をコンピュータに実行させる表示制御プログラムが提供される。表示制御プログラムに基づいて、コンピュータは以下の処理を実行する。

コンピュータは、文章データ全体を表示した画面に対するユーザからの操作に応じて、文章データ内におけるユーザの注目箇所を特定する。そしてコンピュータは、特定したユーザの注目箇所の文章データ全体に対する位置に応じて、文章データを表示する際の文字の大きさおよび文章データの表示枠の形状を制御する。

１態様によれば、文章データ全体におけるユーザの注目箇所の位置の把握が容易となる。

第１の実施の形態に係る表示制御方法の一例を示す図である。 第２の実施の形態のシステム構成の一例を示す図である。 スマートフォンのハードウェアの構成の一例を示す図である。 コメントの表示態様の改善例を示す図である。 一部の文字列のフォントサイズを縮小させた場合の吹き出しの表示例を示す図である。 カレント行の位置に応じたコメントの表示例を示す図である。 吹き出しの表示態様を比較する図である。 スマートフォンのチャット機能を示すブロック図である。 コメントデータの一例を示す図である。 チャット画面表示手順の一例を示すフローチャートである。 カレント行からの距離と文字サイズとの関係を示す図である。 初期フォントサイズ決定処理の手順の一例を示すフローチャートである。 コメントを指定してカレント行を移動させる操作方法の一例を示す図である。 吹き出し枠を指定してカレント行を移動させる操作方法の一例を示す図である。 カレント行移動後の文字サイズ決定処理の手順の一例を示すフローチャートである。 吹き出し枠の描画方法の一例を示す図である。 吹き出し枠の形状の一例を示す図である。 吹き出し描画処理の手順を示すフローチャート（１／３）である。 吹き出し描画処理の手順を示すフローチャート（２／３）である。 吹き出し描画処理の手順を示すフローチャート（３／３）である。 チャット画面の表示例を示す図である。

以下、本実施の形態について図面を参照して説明する。なお各実施の形態は、矛盾のない範囲で複数の実施の形態を組み合わせて実施することができる。
〔第１の実施の形態〕
まず第１の実施の形態について説明する。

図１は、第１の実施の形態に係る表示制御方法の一例を示す図である。図１には、画面１３上における文章データ１ａの表示態様２ｂ，３ｂ，４ｂを制御する表示制御方法を実施することができる表示制御装置１０が示されている。表示制御装置１０は、例えば表示制御方法の処理手順が記述された表示制御プログラムを実行することにより、表示制御方法を実施することができる。

表示制御装置１０は、表示制御方法を実施するために、記憶部１１と処理部１２とを有する。記憶部１１は、例えば表示制御装置１０が有するメモリ、またはストレージ装置である。処理部１２は、例えば表示制御装置１０が有するプロセッサ、または演算回路である。

記憶部１１は、１以上の文章データ１ａ，１ｂ，・・・を記憶する。文章データ１ａ，１ｂ，・・・は、例えばチャットシステムにおいてユーザまたはチャットボットが投稿したコメントである。

処理部１２は、記憶部１１内の文章データ１ａ，１ｂ，・・・を画面１３に表示する。例えば処理部１２は、文章データ１ａ，１ｂ，・・・それぞれに対応する表示枠を描画し、描画した表示枠内に文章データ１ａ，１ｂ，・・・を表示する。

処理部１２は、文章データ１ａ，１ｂ，・・・の一部が長文であっても、長文の文章データ全体におけるユーザの注目箇所の把握が容易な表示態様で、文章データを表示する。例えば文章データ１ａが長文の文章であるものとする。この場合、処理部１２は、文章データ１ａ全体を表示した画面１３に対するユーザからの操作に応じて、文章データ１ａ内におけるユーザの注目箇所２ｃ，３ｃ，４ｃを特定する。そして処理部１２は、特定したユーザの注目箇所２ｃ，３ｃ，４ｃの文章データ１ａ全体に対する位置に応じて、文章データ１ａを吹き出し２，３，４で表示する際の文字の大きさおよび文章データ１ａの表示枠２ａ，３ａ，４ａの形状を制御する。

文字の大きさの制御としては、処理部１２は、注目箇所２ｃ，３ｃ，４ｃからの距離に応じた制御を行うことができる。例えば処理部１２は、文章データ１ａを表示する際の文字の大きさを文章データ１ａに含まれる文字それぞれの表示位置の注目箇所２ｃ，３ｃ，４ｃからの距離に応じて変更する。この場合、処理部１２は、注目箇所２ｃ，３ｃ，４ｃに近い文字ほど大きく表示し、注目箇所２ｃ，３ｃ，４ｃから遠い文字ほど小さく表示する。

表示枠２ａ，３ａ，４ａの形状の制御としては、処理部１２は、文章データ１ａ全体に対する注目箇所２ｃ，３ｃ，４ｃの位置に応じた制御を行うことができる。例えば処理部１２は、注目箇所２ｃ，３ｃ，４ｃの文章データ１ａ全体に対する上下方向または左右方向における位置に応じて、注目箇所２ｃ，３ｃ，４ｃの上下方向または左右方向に位置する表示枠２ａ，３ａ，４ａの横幅または縦幅を変更する。図１に示すように文章データ１ａの表示態様２ｂ，３ｂ，４ｂが横書きの場合、例えば処理部１２は、文章データ１ａ全体に対する注目箇所２ｃ，３ｃ，４ｃの上下方向の位置に応じて、表示枠２ａ，３ａ，４ａの横幅を制御する。この場合、処理部１２は、注目箇所２ｃ，３ｃ，４ｃに近いほど表示枠２ａ，３ａ，４ａの横幅を広くし、注目箇所２ｃ，３ｃ，４ｃから遠いほど表示枠２ａ，３ａ，４ａの横幅を狭くする。また文章データ１ａの表示態様２ｂ，３ｂ，４ｂが縦書きの場合、例えば処理部１２は、文章データ１ａ全体に対する注目箇所２ｃ，３ｃ，４ｃの左右方向の位置に応じて、表示枠２ａ，３ａ，４ａの縦幅を制御する。この場合、処理部１２は、注目箇所２ｃ，３ｃ，４ｃに近いほど表示枠２ａ，３ａ，４ａの縦幅を広くし、注目箇所２ｃ，３ｃ，４ｃから遠いほど表示枠２ａ，３ａ，４ａの縦幅を狭くする。

また処理部１２は、ユーザからの操作に応じて注目箇所２ｃ，３ｃ，４ｃを移動させることができる。例えば処理部１２は、画面１３内の文章データ１ａの表示領域に指で触れたまま指を移動させる操作（フリックまたはスワイプ）に応じて、ユーザの注目箇所２ｃ，３ｃ，４ｃを移動させる。図１に示すように横書きの表示態様２ｂ，３ｂ，４ｂであれば、ユーザが文章データ１ａの表示領域内で上方向にスワイプすると、例えば処理部１２は、注目箇所２ｃ，３ｃ，４ｃとなる行を、現在の行よりも下の行に変更する。またユーザが文章データ１ａの表示領域内で下方向にスワイプすると、例えば処理部１２は、注目箇所２ｃ，３ｃ，４ｃとなる行を、現在の行よりも上の行に変更する。

また処理部１２は、画面１３に表示された表示枠２ａ，３ａ，４ａの一部に指で触れたまま指を移動させる操作（フリックまたはスワイプ）に応じて、ユーザの注目箇所２ｃ，３ｃ，４ｃを移動させることもできる。図１に示すように横書きの表示態様２ｂ，３ｂ，４ｂであれば、表示枠２ａ，３ａ，４ａの横幅の広い部分の右側または左側を下方向にスワイプする入力があると、処理部１２は、注目箇所２ｃ，３ｃ，４ｃとなる行を、現在の行よりも下の行に変更する。また表示枠２ａ，３ａ，４ａの横幅の広い部分の右側または左側を上方向にスワイプする入力があると、処理部１２は、注目箇所２ｃ，３ｃ，４ｃとなる行を、現在の行よりも上の行に変更する。

このようにユーザの注目箇所２ｃ，３ｃ，４ｃに応じて文字の大きさや表示枠２ａ，３ａ，４ａを制御することで、長文の文章データ１ａ全体におけるユーザの注目箇所２ｃ，３ｃ，４ｃの位置の把握が容易となる。すなわち注目箇所２ｃ，３ｃ，４ｃから遠い文字を小さくすることで、文章データ１ａ全体を狭い領域に表示できる。そして表示制御装置１０は、注目箇所２ｃ，３ｃ，４ｃの文字を大きくし、注目箇所２ｃ，３ｃ，４ｃ付近の表示枠２ａ，３ａ，４ａの幅を広くしている。これによりユーザは、文章データ１ａ全体に対する注目箇所２ｃ，３ｃ，４ｃの位置（例えば先頭なのか、中段なのか、末尾なのか）を容易に把握できる。しかも注目箇所２ｃ，３ｃ，４ｃは大きな文字で表示されているため、ユーザは、注目箇所２ｃ，３ｃ，４ｃの内容の把握も容易である。

また文章データ１ａの全体が表示されているため、現在の注目箇所２ｃ，３ｃ，４ｃ以外の部分に重要な箇所がある場合にも、ユーザは重要な箇所を容易に認識できる。そしてユーザが重要な箇所に注目箇所２ｃ，３ｃ，４ｃを移動させる操作を行えば、表示制御装置１０は、重要な箇所を新たな注目箇所２ｃ，３ｃ，４ｃとする表示態様２ｂ，３ｂ，４ｂで文章データ１ａを表示する。これにより、ユーザによる重要な箇所の見落としも抑止できる。

〔第２の実施の形態〕
次に第２の実施の形態について説明する。第２の実施の形態は、スマートフォンを用いたチャットにおいて、長文を分かりやすく表示するものである。

図２は、第２の実施の形態のシステム構成の一例を示す図である。チャットを管理するサーバ２００には、ネットワーク２０を介して複数のスマートフォン１００，１００ａ，・・・が接続されている。サーバ２００は、スマートフォン１００，１００ａ，・・・から送信されたコメントを記憶すると共に、記憶したコメントをスマートフォン１００，１００ａ，・・・に送信する。またサーバ２００は、チャットボットにより、ユーザからのチャットによる問い合わせに対して、チャット上で回答することができる。チャットボットとは、ユーザが入力した自然文を解釈し、自動で回答する機能である。

スマートフォン１００，１００ａ，・・・は、ユーザが使用する情報端末の一種である。ユーザは、スマートフォン１００，１００ａ，・・・を用いて、他のユーザとのチャットによる会話を行うことができる。

なおサーバ２００は、チャットに投稿できるコメントの文字数の上限を設定することができる。スマートフォン１００，１００ａ，・・・は、上限の以下の文字数のコメントを、サーバ２００に投稿する。

図３は、スマートフォンのハードウェアの構成の一例を示す図である。スマートフォン１００は、プロセッサ１０１によって装置全体が制御されている。プロセッサ１０１には、バス１０９を介してメモリ１０２と複数の周辺機器が接続されている。プロセッサ１０１は、マルチプロセッサであってもよい。プロセッサ１０１は、例えばＣＰＵ（Central Processing Unit）、ＭＰＵ（Micro Processing Unit）、またはＤＳＰ（Digital Signal Processor）である。プロセッサ１０１がプログラムを実行することで実現する機能の少なくとも一部を、ＡＳＩＣ（Application Specific Integrated Circuit）、ＰＬＤ（Programmable Logic Device）などの電子回路で実現してもよい。

メモリ１０２は、スマートフォン１００の主記憶装置として使用される。メモリ１０２には、プロセッサ１０１に実行させるＯＳ（Operating System）のプログラムやアプリケーションプログラムの少なくとも一部が一時的に格納される。また、メモリ１０２には、プロセッサ１０１による処理に利用する各種データが格納される。メモリ１０２としては、例えばＲＡＭ（Random Access Memory）などの揮発性の半導体記憶装置が使用される。

バス１０９に接続されている周辺機器としては、ストレージ装置１０３、ディスプレイ装置１０４、タッチパネル１０５、機器接続インタフェース１０６、音声入出力部１０７、および無線通信部１０８がある。

ストレージ装置１０３は、内蔵した記録媒体に対して、電気的または磁気的にデータの書き込みおよび読み出しを行う。ストレージ装置１０３は、コンピュータの補助記憶装置として使用される。ストレージ装置１０３には、ＯＳのプログラム、アプリケーションプログラム、および各種データが格納される。なお、ストレージ装置１０３としては、例えばＳＳＤ（Solid State Drive）を使用することができる。

ディスプレイ装置１０４は、プロセッサ１０１からの命令に従って、画像を表示する。ディスプレイ装置１０４としては、有機ＥＬ（Electro Luminescence）を用いた表示装置や液晶表示装置などがある。

タッチパネル１０５は、ディスプレイ装置１０４の画面の前面に配置されており、画面上の押された位置を検知して、その位置を示す信号をプロセッサ１０１に送信する。
機器接続インタフェース１０６は、スマートフォン１００に周辺機器を接続するための通信インタフェースである。例えば機器接続インタフェース１０６には、メモリカード２１を接続することができる。メモリカード２１は、機器接続インタフェース１０６との通信機能を搭載した、カード型の記録媒体である。

音声入出力部１０７には、マイク１０７ａとスピーカ１０７ｂとが接続されている。音声入出力部１０７は、マイク１０７ａから入力された音声信号をディジタル信号に変換して、プロセッサ１０１に送信する。また音声入出力部１０７は、プロセッサ１０１から音声データを受信すると、音声データに従った音声信号を生成し、スピーカ１０７ｂから音声出力を行う。

無線通信部１０８は、移動体通信用の通信インタフェースである。無線通信部１０８にはアンテナ１１３が接続されている。無線通信部１０８は、アンテナ１１３を介して、移動体通信の基地局と通信する。

スマートフォン１００は、以上のようなハードウェア構成によって、第２の実施の形態の処理機能を実現することができる。他のスマートフォン１００ａ，・・・も、スマートフォン１００と同様のハードウェアにより実現することができる。また、第１の実施の形態に示した表示制御装置１０も、図３に示したスマートフォン１００と同様のハードウェアにより実現することができる。

スマートフォン１００は、例えばコンピュータ読み取り可能な記録媒体に記録されたプログラムを実行することにより、第２の実施の形態の処理機能を実現する。スマートフォン１００に実行させる処理内容を記述したプログラムは、様々な記録媒体に記録しておくことができる。例えば、スマートフォン１００に実行させるプログラムをストレージ装置１０３に格納しておくことができる。プロセッサ１０１は、ストレージ装置１０３内のプログラムの少なくとも一部をメモリ１０２にロードし、プログラムを実行する。またスマートフォン１００に実行させるプログラムを、メモリカード２１などの可搬型記録媒体に記録しておくこともできる。可搬型記録媒体に格納されたプログラムは、例えばプロセッサ１０１からの制御により、ストレージ装置１０３にインストールされた後、実行可能となる。またプロセッサ１０１が、可搬型記録媒体から直接プログラムを読み出して実行することもできる。

ここで、スマートフォン１００を用いてチャットを行う場合の課題について説明する。
スマートフォン１００を用いたチャットはコミュニケーション手段として非常に有用であるが、スマートフォン１００の画面サイズはパーソナルコンピュータに比べて狭い。そのため、長文のコメントの表示には不向きである。例えばコメントが長文だと、コメント表示用の吹き出し面積が大きくなり、画面のほとんどの領域が１つのコメントで占有され、チャットの会話の流れが分からなくなる。

なお、通常のユーザによるチャットへのコメントを入力する場合、長文の入力には手間がかかるため、ユーザの操作により長文が入力されることは少ない。それに対して、チャットボットによる自動応答では長文の応答も容易であるため、チャットボットからの回答は長文になることがある。そして、チャットボットの普及に伴い、チャット上で長文を見る機会が多くなってきている。そこで、チャットにおいて長文のコメントを、ユーザにとって理解しやすく表示できるようにすることが重要となっている。

スマートフォン１００に長文のコメントを表示する技術として、例えば「すべて表示」「折りたたむ」などの操作で長文を一部残して隠す技術がある。しかし、このような表示の態様の切り替え技術では、長文の全体の把握と会話の流れの把握とを別画面で行うこととなり、十分に理解しやすい表示態様であるとは言えない。そこで第２の実施の形態では、スマートフォン１００は、長文のコメントにおけるフォントサイズを適切に調整することで、会話の流れを理解しやすくする。

図４は、コメントの表示態様の改善例を示す図である。図４の上段には、比較例として、操作によりコメントの一部表示と全文表示とを切り替える例を示している。例えば第２の実施の形態の機能を有していないスマートフォン３００は、一連のコメントの吹き出しを時系列で画面３１０に表示する。初期状態（比較例の左側）では、吹き出しのサイズが一定である。コメントが長文でありそのコメントが吹き出し内に表示しきれない場合、スマートフォン３００は、コメントの一部（例えば先頭の数行）を吹き出し内に表示し、他の部分は非表示とする。このときスマートフォン３００は、吹き出し内に「すべて表示」というメニュー３１１を表示する。

図４の例では、８つのコメントのうちの４つのコメントが画面３１０内に表示されている。そのため、長文のコメントに至るまでの会話の流れの把握は可能である。しかし、長文のコメントは一部しか表示されておらず、長文の全体を把握するのが困難であり、ユーザの注目する位置がコメント全体に対してどのような位置にあるのかを把握することも難しい。

ユーザが「すべて表示」のメニュー３１１を選択すると、スマートフォン３００は、吹き出しの枠を拡げ、長文のコメントの全部を吹き出し枠内に表示する。このときスマートフォン３００は、長文のコメントを表示する引き出し枠に、「折りたたむ」というメニュー３１２を表示する。

図４の例では、８つのコメントのうちの２つのコメントのみ画面３１０内に表示されている。そのため、長文のコメントの全文を読むことができるが、画面３１０に表示されたコメントから会話の流れを把握するのは困難である。会話の流れを把握する場合、ユーザは「折りたたむ」のメニュー３１２を選択する。するとスマートフォン３００は、長文のコメントの全文表示を取りやめ、一部表示の状態（比較例の左側）に戻る。

このように比較例に示した表示方法では、常に、長文の全体把握と会話の流れの把握との一方が困難となる。それに対して、第２の実施の形態に係るスマートフォン１００は、長文のコメントの一部の文字列のフォントのサイズを小さくすることで、長文のコメントであっても、狭い領域の吹き出し枠に表示できるようにする。吹き出し枠を拡大しないことで、スマートフォン１００の画面１６０には会話の流れの把握に役立つ多くのコメントを表示することが可能となる。

図５は、一部の文字列のフォントサイズを縮小させた場合の吹き出しの表示例を示す図である。例えばチャットボットが投稿したコメントは、チャットボットアイコン２２に関連付けた吹き出し３１，３２に表示される。図５の上段には、吹き出しの枠を拡張した場合の吹き出し３１の表示例を示し、下段には、一部のフォントサイズを縮小させた場合の吹き出し３２の表示例を示している。

フォントサイズを一定とした場合の吹き出し３１は、上下方向に長い形となっている。他方、一部の文字列のフォントサイズを小さくすることで、より狭い領域の吹き出し３２内にすべてのコメントを表示することができる。

スマートフォン１００は、吹き出し３２に表示するコメントのうち、例えばユーザが指定した数行をカレント行とする。そしてスマートフォン１００は、カレント行を最も大きく表示し、カレント行から離れるに従って各行のフォントサイズを小さくする。

これにより吹き出し３２内には、一部のコメントのフォントサイズが小さいものの、文字数上限値以下の文字数のコメントであれば全文を表示できる。コメントの全文が表示されていることで、ユーザは、どの程度の分量のコメントなのかを把握することができる。また例えば他の文字とは異なる色で強調表示された文字がコメント内に含まれている場合、その文字が小さくても、ユーザは色の違いにより強調表示された重要箇所の存在を認識することができる。

また吹き出し３２は、注目部分が大きな文字で強調されることで、アイコンで表された投稿者（図５の例ではチャットボット）が該当部分の発言をしていることを表した、吹き出しらしい表現となっている。

スマートフォン１００は、吹き出し３２内からカレント行の位置を指定する操作入力が行われると、指定された位置をカレント行とするように吹き出し３２の表示態様を変化させる。

図６は、カレント行の位置に応じたコメントの表示例を示す図である。第１の表示態様は、コメントの先頭の３行がカレント行４１となっている場合の吹き出し３３の例である。この場合、カレント行４１である最初の３行が最も大きなフォントで表示され、下の行に行くに従って文字のフォントサイズが小さくなっている。また吹き出し３３は、枠の横幅が下に行くほど狭くなっている。

第２の表示態様は、コメントの中程の３行がカレント行４２となっている場合の吹き出し３４の例である。この場合、カレント行４２である中程の３行が最も大きなフォントで表示され、カレント行から上下の両方向に離れるのに従って文字のフォントサイズが小さくなっている。また吹き出し３４の枠は、中程の横幅が最も広く、中程から上下方向に離れるほど幅が狭くなっている。

第３の表示態様は、コメントの最後尾の３行がカレント行４３となっている場合の吹き出し３５の例である。この場合、カレント行４３である最後尾の３行が最も大きなフォントで表示され、上の行に行くに従って文字のフォントサイズが小さくなっている。また吹き出し３５の枠は、横幅が上に行くほど狭くなっている。

このように、ユーザが長文を読み進めていく場合であっても、スマートフォン１００は、ユーザの指定に応じてカレント行を移動することで、ユーザが読んでいる数行の文字を大きく表示し、読んでいる行から離れた位置の文字ほど小さく表示することができる。その結果、ユーザは、注目している部分とその周辺を確認しながら、長文のコメント全体を大きなフォントで読み進めることができる。しかも長文のコメント全体が吹き出し内に表示されているため、ユーザは、文章量を容易に把握できる。

またスマートフォン１００は、吹き出し枠の形状を、文字の量と文字サイズに応じて変形させている。これにより、ユーザは、文章中のどこを読んでいるか（長文の先頭なのか中段なのか、末尾なのかなど）を容易に認識できる。また、カレント行から離れた位置の行を表示する部分では、吹き出し枠の横幅が狭くなっている。これにより、吹き出し枠の外側に他のアイコンなどによる情報表示が可能であり、スマートフォン１００の狭い画面を有効に活用することができる。

なお狭い領域で長文のコメントを読み進めるための手法として、スクロールバーなどを用いて、限られた領域内に表示されたコメントの文章をスクロールさせる方法も考えられる。しかし、スクロールバーを用いた吹き出しの長文表示と比べても、図６に示したような改善後の吹き出しの方が長文の内容把握がしやすい。

図７は、吹き出しの表示態様を比較する図である。図７には、比較例として、スクロールバー３６ａによってコメントの文章をスクロールさせることが可能な吹き出し３６を示している。この吹き出し３６では、コメントが長文になったときだけスクロールバー３６ａが表示されることとなり、吹き出しの表示態様が統一されないという欠点がある。また、吹き出し３６内に表示される文章はコメントの一部に過ぎず、隠れている文章の中に重要箇所があっても、ユーザが気づきにくい。さらにスマートフォンでは画面全体が狭く、スクロールバーが小さくなるため、スクロールバーでは細かな表示位置の指定が困難である。

それに対して、注目箇所に応じて文字の大きさと吹き出し枠の形状とを可変とする吹き出し３７であれば、長文のコメントの全体を吹き出し３７内に表示することができる。全文が表示されていることで、注目箇所以外に重要箇所３７ａがあった場合、小さいながらもその重要箇所３７ａが吹き出し３７内に表示される。その結果、ユーザは、重要箇所３７ａの存在を容易に認識できる。しかもスクロールバー３６ａを用いた吹き出し３６に比べ、改善後の吹き出し３６の表示領域は狭い。そのため、画面内の空き領域が増え、他の情報の表示に利用できる。また改善後の吹き出し３７では、例えばスクロールバー３６ａのような特定のオブジェクトが表示されたり、表示されなかったりすることがなく、表示態様が統一されている。

次にスマートフォン１００が有するチャット機能について説明する。
図８は、スマートフォンのチャット機能を示すブロック図である。スマートフォン１００は、記憶部１１０、コメント送受信部１２０、操作受付部１３０、および表示制御部１４０を有する。

記憶部１１０は、チャットのコメントデータ１１１を記憶する。コメントデータ１１１は、例えばチャット上で発言されたコメントの文字列と、そのコメントの投稿時刻とを含む。記憶部１１０としては、例えばスマートフォン１００のメモリ１０２またはストレージ装置１０３の記憶領域の一部が使用される。

コメント送受信部１２０は、チャットシステム上に投稿されたコメントをサーバ２００から取得する。コメント送受信部１２０は、取得したコメントをコメントデータ１１１として記憶部１１０に格納する。またコメント送受信部１２０は、スマートフォン１００のユーザが入力した投稿用のコメントを、サーバ２００上のチャットシステムに送信する。例えばコメント送受信部１２０は、スマートフォン１００を使用するユーザが入力したコメントがコメントデータ１１１に追加された場合、追加されたコメントを、ユーザの新たな投稿としてサーバ２００に送信する。

操作受付部１３０は、チャット画面に対するユーザからの操作を受け付ける。操作受付部１３０は、ユーザがコメント投稿用のテキストボックスにコメントを入力した場合、入力されたコメントを、記憶部１１０内のコメントデータ１１１に追加する。また操作受付部１３０は、吹き出しのカレント行の指定操作や、画面のスクロール操作などの画面操作が行われた場合、操作内容を表示制御部１４０に通知する。

表示制御部１４０は、コメントデータ１１１の内容をディスプレイ装置の画面に表示する。例えば表示制御部１４０は、コメントデータ１１１に示されるコメントを表示するための吹き出しを生成し、吹き出し内にコメントを投稿順に表示する。なお表示制御部１４０は、コメントの長さが所定値以上の場合、図６に示したように、カレント行に応じて行ごとの文字サイズを決定し、カレント行に応じた形状の吹き出し枠の吹き出しを表示する。そのために、表示制御部１４０は、文字サイズ決定部１４１、および吹き出し描画部１４２を有する。

文字サイズ決定部１４１は、長さが所定値以上のコメントについて、カレント行に応じた各行の文字のサイズ（フォントサイズ）を決定する。例えば文字サイズ決定部１４１は、カレント行との距離が離れた行ほど、その行の文字サイズを小さくする。

吹き出し描画部１４２は、長さが所定値以上のコメントについて、カレント行に応じた形状の吹き出し枠を描画する。例えば吹き出し描画部１４２は、カレント行との距離が離れた行の表示位置ほど横幅が狭い吹き出し枠を描画する。

また吹き出し描画部１４２は、コメントデータ１１１に示されるコメントを示す画像を描画する。例えば吹き出し描画部１４２は、長さが所定値以上のコメントについては、吹き出し描画部１４２が生成した吹き出し枠内に、文字サイズ決定部１４１が決定したフォントサイズでコメントを描画する。そして吹き出し描画部１４２は、長さが所定値未満のコメントについては、予め用意された所定の吹き出し枠内に、予め決められたサイズのフォントでコメントを描画する。

なお、図８に示した各要素の機能は、例えば、その要素に対応するプログラムモジュールをコンピュータに実行させることで実現することができる。
次にコメントデータ１１１について具体的に説明する。

図９は、コメントデータの一例を示す図である。コメントデータ１１１には、チャットに投稿されたコメントが、日時と投稿者とに対応付けて格納されている。コメントデータ１１１に示される日時は、対応するコメントが投稿された日時である。コメントデータ１１１に示される投稿者は、対応するコメントを投稿したユーザのユーザ名である。チャットボットが投稿したコメントの場合、投稿者に「チャットボット」と示される。

図９に示すコメントデータ１１１の例では、チャットボットが投稿したコメントが長文となっており、規定のサイズの吹き出しには全文を表示することができない。なおコメントデータ１１１には、強調文字列を含むコメントが格納される場合もある。図９の例では、チャットボットが投稿したコメントの一部の文字列が、下線とボールドによって強調されている。

次に、スマートフォン１００によるチャット画面の表示手順について詳細に説明する。
図１０は、チャット画面表示手順の一例を示すフローチャートである。以下、図１０に示す処理をステップ番号に沿って説明する。

［ステップＳ１０１］表示制御部１４０は、コメントデータ１１１から表示するコメントを選択する。例えば表示制御部１４０は、チャット画面の初期状態を表示する場合、投稿された日時が最新のコメントから順に、未描画のコメントを選択する。また表示制御部１４０は、画面のスクロール操作に応じて画面がスクロールされた場合、スクロール後の画面の最も下に表示するコメントから順に、そのコメントより以前に投稿されたコメントを選択する。

［ステップＳ１０２］文字サイズ決定部１４１は、選択されたコメントの先頭の数行をカレント行とし、行ごとの初期の文字サイズを決定する。初期文字サイズ決定処理の詳細は後述する（図１２参照）。

［ステップＳ１０３］吹き出し描画部１４２は、吹き出し枠を描画する。例えば吹き出し描画部１４２は、選択されたコメントの行ごとの文字サイズに応じた吹き出し枠を描画する。また吹き出し描画部１４２は、選択したコメントを、描画された吹き出し枠内に決定されたサイズの文字で描画する。吹き出し描画処理の詳細は後述する（図１８参照）。

［ステップＳ１０４］表示制御部１４０は、チャット画面内に他のコメントを表示可能か否かを判断する。例えば表示制御部１４０は、描画した吹き出し枠の上に、コメントが長文の場合の吹き出し枠の高さ分の空き領域があれば、他のコメントを表示可能であると判断する。表示制御部１４０は、他のコメントを表示可能であれば処理をステップＳ１０１に進める。また表示制御部１４０は、他のコメントを表示できない場合、処理をステップＳ１０５に進める。

［ステップＳ１０５］表示制御部１４０は、カレント行の移動操作が行われたか否かを判断する。表示制御部１４０は、カレント行の移動操作が行われた場合、処理をステップＳ１０６に進める。また表示制御部１４０は、カレント行の移動操作が行われていなければ、処理をステップＳ１０８に進める。

［ステップＳ１０６］文字サイズ決定部１４１は、カレント行の移動操作が行われた吹き出し内のコメント（再描画コメント）について、カレント行移動後の文字サイズを決定する。カレント行移動後文字サイズ決定処理の詳細は後述する（図１５参照）。

［ステップＳ１０７］吹き出し描画部１４２は、吹き出し描画する。例えば吹き出し描画部１４２は、再描画コメントの行ごとの文字サイズに応じた吹き出し枠を描画する。さらに吹き出し描画部１４２は、再描画コメントを、描画された吹き出し枠内に決定されたサイズの文字で描画する。吹き出し描画処理の詳細は後述する（図１８～図２０参照）。

［ステップＳ１０８］表示制御部１４０は、画面スクロール操作が行われたか否かを判断する。表示制御部１４０は、画面スクロール操作が行われた場合、処理をステップＳ１０１に進める。また表示制御部１４０は、画面スクロール操作が行われていなければ、処理をステップＳ１０９に進める。

［ステップＳ１０９］表示制御部１４０は、チャット画面を閉じる操作が行われたか否かを判断する。表示制御部１４０は、閉じる操作が行われた場合、チャット画面表示処理を終了する。また表示制御部１４０は、閉じる操作が行われていなければ、処理をステップＳ１０５に進める。

スマートフォン１００は、このような手順でチャット画面の初期表示を行うと共に、ユーザによる吹き出しのカレント行の移動操作または画面全体のスクロール操作に応じて、チャット画面を更新する。

次に、コメントの行ごとの文字サイズの決定方法について、詳細に説明する。
図１１は、カレント行からの距離と文字サイズとの関係を示す図である。図１１では、横軸にカレント行中心からの距離が示されており、縦軸に文字のフォントサイズが示されている。カレント行中心からの距離は、コメントの先頭から所定文字数で改行していったときの各行の行番号から、カレント行の中心行の行番号を減算した値である。

図１１の例では、カレント行は３行である。この場合、３行のカレント行の上から２行目が中心行である。カレント行のフォントサイズは１２ポイントである。そしてカレント行の中心行からの距離が離れるに従ってフォントサイズが小さくなり、距離の全対値が８以上の行は、フォントサイズがすべて１ポイントとなる。

ここで、１行の文字数を「ａ」、カレント行のフォントサイズを「ｂ」、最小フォントサイズを「ｃ」、二次関数の係数を「ｄ」とする。１行の文字数ａは、例えば「１４」である。カレント行のフォントサイズｂは、例えば「１２」である。最小フォントサイズｃは、例えば「１」である。二次関数の係数ｄは、例えば「０．２」である。

この場合、文字サイズ決定部１４１は、まずコメントの文章を、１行の文字数「ａ」で複数の行に分割する。文字サイズ決定部１４１は、分割によって生成された各行に、コメントの先頭に近い方から、１から昇順の行番号を付与する。そして文字サイズ決定部１４１は、各行のカレント行からの距離をｘとしたとき、以下の式（１）によってフォントサイズを計算する。
フォントサイズ＝ｂ－（ｄ×ｘ²） （１）
ただし文字サイズ決定部１４１は、フォントサイズ＜ｃの場合、フォントサイズ＝ｃとする。

例えば文字サイズ決定部１４１は、フォントサイズは整数値とするため、フォントサイズの計算結果の小数点以下の値は切り捨てる。なおスマートフォン１００が小数点以下のフォントの表示が可能な場合、文字サイズ決定部１４１は、小数点以下の数値も有効とすることもできる。

次に、初期フォントサイズ決定処理の手順についてフローチャートを参照して説明する。
図１２は、初期フォントサイズ決定処理の手順の一例を示すフローチャートである。以下、図１２に示す処理をステップ番号に沿って説明する。

［ステップＳ１２１］文字サイズ決定部１４１は、コメントの文章を１行の文字数ａごとに改行する。
［ステップＳ１２２］文字サイズ決定部１４１は、コメントの行数ｈを取得する。ｈは、１以上の整数である。

［ステップＳ１２３］文字サイズ決定部１４１は、要素数がｈのフォントサイズ配列ｆ［ｉ］を作成する。ｉは、フォントサイズ配列の要素番号を示す変数である。
［ステップＳ１２４］文字サイズ決定部１４１は、変数ｉを１からｈまでインクリメント（ｉ＝ｉ＋１）しながら、ステップＳ１２５～Ｓ１２９のフォントサイズ計算処理を繰り返す。

［ステップＳ１２５］文字サイズ決定部１４１は、ｉ行目の行がカレント行か否かを判断する。例えば文字サイズ決定部１４１は、ｉ≦３であればカレント行であると判断する。文字サイズ決定部１４１は、カレント行であれば、処理をステップＳ１２６に進める。また文字サイズ決定部１４１は、カレント行でなければ、処理をステップＳ１２７に進める。

［ステップＳ１２６］文字サイズ決定部１４１は、配列ｆ［ｉ］に、カレント行のフォントサイズｂを設定する。文字サイズ決定部１４１は、その後、処理をステップＳ１３０に進める。

［ステップＳ１２７］文字サイズ決定部１４１は、式（１）を用いて計算したフォントサイズを、配列ｆ［ｉ］に設定する。なお文字サイズ決定部１４１は、現在のカレント行の中心行の行番号を「２」とする（先頭から３行のカレント行の中心行）。この場合、ｉ番目の行のカレント行の中心行からの距離ｘは「ｉ－２」となる。従って文字サイズ決定部１４１は、以下の処理を行うこととなる。
ｆ［ｉ］＝ｂ－（ｄ×（ｉ－２）²） （２）
なお文字サイズ決定部１４１は、式（２）の右辺の値の小数点以下は切り捨てる。

［ステップＳ１２８］文字サイズ決定部１４１は、ｆ［ｉ］の値が最小フォントサイズｃ未満（ｆ［ｉ］＜ｃ）か否かを判断する。文字サイズ決定部１４１は、最小フォントサイズ未満の場合、処理をステップＳ１２９に進める。また文字サイズ決定部１４１は、最小フォントサイズ以上であれば、処理をステップＳ１３０に進める。

［ステップＳ１２９］文字サイズ決定部１４１は、配列ｆ［ｉ］に最小フォントサイズｃを設定する。
［ステップＳ１３０］文字サイズ決定部１４１は、変数ｉをインクリメントすると行数ｈを超える場合、ステップＳ１２５～Ｓ１２９の繰り返し処理を終了し、処理をステップＳ１３１に進める。

［ステップＳ１３１］文字サイズ決定部１４１は、初期表示のコメントの行ごとのフォントサイズを、配列ｆ［ｉ］に示される値に決定する。
このようにして、初期のコメントの行ごとの文字サイズが決定される。その後、ユーザが吹き出しに対するカレント行の移動操作を行うと、各行の文字サイズが変更されると共に、吹き出しの枠の形状が変更される。なお、カレント行の移動操作方法としては、コメントの一部を指定して操作する方法と、吹き出し枠を指定して操作する方法とが考えられる。

図１３は、コメントを指定してカレント行を移動させる操作方法の一例を示す図である。例えばユーザは、先頭の数行をカレント行として表示された吹き出し６１内のコメントを指定して、上方向へフリックまたはスワイプする。フリックとは、タッチパネル１０５の画面に触れた指先を弾くように移動させることである。スワイプは、タッチパネル１０５の画面を指先で押しながら、その指先を移動させることである。このようなユーザの操作は、操作受付部１３０によって検知され、操作内容が表示制御部１４０に送られる。そして表示制御部１４０は、コメントを指定した上方向へのフリップまたはスワイプ操作を、カレント行の下方向への移動操作と認識する。

吹き出し６１の状態からカレント行が下の行に移動すると、中程の行がカレント行に設定された吹き出し６２が表示される。ここでユーザが、コメントを指定して上方向へフリックまたはスワイプすると、カレント行がさらに下方向へ移動する。カレント行が末尾の行まで移動すると、最後の３行が最も大きな文字で表された吹き出し６３が表示される。

図１３には、表示制御部１４０がカレント行を下に移動させる例を示しているが、ユーザがコメントを指定して下方向にフリックまたはスワイプした場合には、表示制御部１４０はカレント行を上に移動させる。

図１４は、吹き出し枠を指定してカレント行を移動させる操作方法の一例を示す図である。例えばユーザは、先頭の数行がカレント行として表示された吹き出し６１の枠の端を指定して、下方向へフリックまたはスワイプする。このようなユーザの操作は、操作受付部１３０によって検知され、操作内容が表示制御部１４０に送られる。そして表示制御部１４０は、吹き出し６１の枠を指定した下方向へのフリップまたはスワイプ操作を、カレント行の下方向への移動操作と認識する。

吹き出し６１の状態からカレント行が下の行に移動すると、中程の行がカレント行に設定された吹き出し６２が表示される。ここでユーザが吹き出し６２の枠の端を指定して、下方向へフリックまたはスワイプすると、カレント行がさらに下方向へ移動する。カレント行が末尾の行まで移動すると、最後の３行が最も大きな文字で表された吹き出し６３が表示される。

図１４には、カレント行を下に移動させる場合の操作方法を示しているが、ユーザが吹き出し枠を指定して上方向にフリックまたはスワイプした場合には、表示制御部１４０はカレント行を上に移動させる。

なお、図１３と図１４に、カレント行を移動させる２つの操作方法を示したが、スマートフォン１００は、いずれか一方の操作方法または両方の操作方法を実施することができる。

次にカレント行移動後の文字サイズの決定処理についてフローチャートを参照して説明する。
図１５は、カレント行移動後の文字サイズ決定処理の手順の一例を示すフローチャートである。以下、図１５に示す処理をステップ番号に沿って説明する。

［ステップＳ１４１］文字サイズ決定部１４１は、カレント行の中心行の行番号Ｃを取得する。Ｃは、１以上ｈ以下の整数である。
［ステップＳ１４２］文字サイズ決定部１４１は、要素数がｈのフォントサイズ配列ｆ［ｉ］を作成する。

［ステップＳ１４３］文字サイズ決定部１４１は、変数ｉを１からｈまでインクリメント（ｉ＝ｉ＋１）しながら、ステップＳ１４４～Ｓ１４８のフォントサイズ計算処理を繰り返す。

［ステップＳ１４４］文字サイズ決定部１４１は、ｉ行目の行がカレント行か否かを判断する。例えば文字サイズ決定部１４１は、Ｃ－１≦ｉ≦Ｃ＋１であればカレント行であると判断する。文字サイズ決定部１４１は、カレント行であれば、処理をステップＳ１４５に進める。また文字サイズ決定部１４１は、カレント行でなければ、処理をステップＳ１４６に進める。

［ステップＳ１４５］文字サイズ決定部１４１は、配列ｆ［ｉ］に、カレント行のフォントサイズｂを設定する。文字サイズ決定部１４１は、その後、処理をステップＳ１４９に進める。

［ステップＳ１４６］文字サイズ決定部１４１は、式（１）を用いて計算したフォントサイズを、配列ｆ［ｉ］に設定する。このとき、ｉ番目の行のカレント行の中心行Ｃからの距離ｘは「ｉ－Ｃ」となる。従って文字サイズ決定部１４１は、以下の処理を行うこととなる。
ｆ［ｉ］＝ｂ－（ｄ×（ｉ－Ｃ）²） （３）
なお文字サイズ決定部１４１は、式（３）の右辺の値の小数点以下は切り捨てる。

［ステップＳ１４７］文字サイズ決定部１４１は、ｆ［ｉ］の値が最小フォントサイズｃ未満（ｆ［ｉ］＜ｃ）か否かを判断する。文字サイズ決定部１４１は、最小フォントサイズ未満の場合、処理をステップＳ１４８に進める。また文字サイズ決定部１４１は、最小フォントサイズ以上であれば、処理をステップＳ１４９に進める。

［ステップＳ１４８］文字サイズ決定部１４１は、配列ｆ［ｉ］に最小フォントサイズｃを設定する。
［ステップＳ１４９］文字サイズ決定部１４１は、変数ｉをインクリメントすると行数ｈを超える場合、ステップＳ１４４～Ｓ１４８の繰り返し処理を終了し、処理をステップＳ１５０に進める。

［ステップＳ１５０］文字サイズ決定部１４１は、初期表示のコメントの行ごとのフォントサイズを、配列ｆ［ｉ］に示される値に決定する。
このようにして、カレント行が移動した場合には、コメントの行ごとの文字サイズが再計算される。コメントの行ごとの文字サイズが決定すると、吹き出し描画部１４２が、文字サイズに合わせた吹き出し枠を描画する。

図１６は、吹き出し枠の描画方法の一例を示す図である。吹き出し描画部１４２は、まず行ごとの幅を算出する。幅は、以下の式で表される。
幅＝フォントサイズ×ａ＋マージン幅 （４）
マージン幅は、予め設定した値である。次に吹き出し描画部１４２は、各行の左右両側に、制御点５２を設定する。例えば吹き出し描画部１４２は、コメントの文字列の配置の指定が中央寄せ（センタリング）の場合、中心ライン５１から左右に、算出した幅の半分の距離だけ離れた位置に制御点５２を設定する。

このとき吹き出し描画部１４２は、先頭の行の上にも制御点５２ａを設定する。例えば吹き出し描画部１４２は、先頭の行の上の制御点５２ａを、先頭行の左右の制御点よりも中心ライン５１に寄せた位置に設定する。同様に吹き出し描画部１４２は、最後尾の行の下にも制御点５２ｂを設定する。例えば吹き出し描画部１４２は、最後尾の行の下の制御点５２ｂを、最後尾の行の左右の制御点よりも中心ライン５１に寄せた位置に設定する。

次に吹き出し描画部１４２は、設定した制御点５２間を接続する接続線５３を描画する。そして吹き出し描画部１４２は、最後に、チャットボットまたはユーザを示すアイコンを指し示す三角形を描画する。

なお吹き出し枠の形状は、吹き出し内の文字の配置方法の指定によっても変わる。
図１７は、吹き出し枠の形状の一例を示す図である。文字列の配置方法としては、例えば左寄せ、センタリング、右寄せがある。図１７には、配置の種別ごとに、カレント行が先頭の数行の場合、カレント行が中程の行の場合、カレント行が末尾の数行の場合の吹き出し枠形状を、代表的に示している。

左寄せの配置の吹き出し枠形状は、例えば左側からの吹き出しに用いられる。右寄せの配置の吹き出し枠形状は、例えば右側からの吹き出しに用いられる。センタリングの配置の吹き出し枠形状は、いずれの方向からの吹き出しにも用いることができる。

次に、吹き出し描画処理の手順について、フローチャートを参照して詳細に説明する。
図１８は、吹き出し描画処理の手順を示すフローチャート（１／３）である。以下、図１８に示す処理をステップ番号に沿って説明する。

［ステップＳ１６１］吹き出し描画部１４２は、表示幅配列ｗ［ｉ］（ｉ＝０，２，・・・，ｈ，ｈ＋１）を生成する。
［ステップＳ１６２］吹き出し描画部１４２は、計算済みのフォントサイズ配列ｆ［ｉ］（ｉ＝１，２，・・・ｈ）を取得する。

［ステップＳ１６３］吹き出し描画部１４２は、変数ｉを１からｈまでインクリメント（ｉ＝ｉ＋１）しながら、ステップＳ１６４の吹き出し幅計算処理を繰り返す。
［ステップＳ１６４］吹き出し描画部１４２は、行番号ｉの行の位置における吹き出し枠の幅ｗ［ｉ］を計算する。マージン幅をｍ（ｍは正の実数）とすると、吹き出し枠の幅ｗ［ｉ］の計算式は、以下の通りとなる。
ｗ［ｉ］＝ｆ［ｉ］×ａ＋ｍ （５）
［ステップＳ１６５］吹き出し描画部１４２は、変数ｉをインクリメントすると行数ｈを超える場合、ステップＳ１６４の繰り返し処理を終了し、処理をステップＳ１６６に進める。

［ステップＳ１６６］吹き出し描画部１４２は、吹き出し枠の上辺の幅を要素番号「０」の表示用配列ｗ［０］に設定し、下辺の幅を要素番号「ｈ＋１」の表示用配列ｗ［ｈ＋１］に設定する。例えば吹き出し描画部１４２は、予め設定してある絞り幅ｎ（ｎは正の実数）を用いて、「ｗ［０］＝ｗ［１］－ｎ」、「ｗ［ｈ＋１］＝ｗ［ｈ］－ｎ」とする。

［ステップＳ１６７］吹き出し描画部１４２は、吹き出しに表示するコメントの文字の配置の指定を取得する。例えばスマートフォン１００を使用しているユーザが投稿したコメントに対しては、右寄せまたはセンタリングの配置が指定される。またスマートフォン１００を使用しているユーザ以外のユーザ（チャットボットを含む）が投稿したコメントに対しては、左寄せまたはセンタリングの配置が指定される。

［ステップＳ１６８］吹き出し描画部１４２は、配置の指定が右寄せか否かを判断する。吹き出し描画部１４２は、右寄せであれば処理をステップＳ１６９に進める。また吹き出し描画部１４２は、右寄せでなければ、処理をステップＳ１７０に進める。

［ステップＳ１６９］吹き出し描画部１４２は、基準座標Ｘに、右寄せ時のｘ軸の基準座標値Ｘｒを設定する。基準座標値Ｘｒは、吹き出し枠の右側の辺の位置を示している。吹き出し描画部１４２は、その後、処理をステップＳ１８１（図１９参照）に進める。

［ステップＳ１７０］吹き出し描画部１４２は、配置の指定が左寄せか否かを判断する。吹き出し描画部１４２は、左寄せであれば処理をステップＳ１７１に進める。また吹き出し描画部１４２は、左寄せでなければ、処理をステップＳ１７２に進める。

［ステップＳ１７１］吹き出し描画部１４２は、基準座標Ｘに、右寄せ時のｘ軸の基準座標値Ｘｌを設定する。基準座標値Ｘｌは、吹き出し枠の左側の辺の位置を示している。吹き出し描画部１４２は、その後、処理をステップＳ１８１に進める。

［ステップＳ１７２］吹き出し描画部１４２は、基準座標Ｘに、センタリング時のｘ軸の基準座標値Ｘｍを設定する。基準座標値Ｘｍは、吹き出し枠の中心ライン５１（図１６参照）の位置を示している。吹き出し描画部１４２は、その後、処理をステップＳ１８１に進める。

図１９は、吹き出し描画処理の手順を示すフローチャート（２／３）である。以下、図１９に示す処理をステップ番号に沿って説明する。
［ステップＳ１８１］吹き出し描画部１４２は、左側座標配列Ｌ［ｉ］［ｊ］と右側座標配列Ｒ［ｉ］［ｊ］を生成する。これらの配列は２次元配列であり、変数ｉは「ｉ＝０，１，２，・・・，ｈ，ｈ＋１」の値を採り、変数ｊは「ｘ，ｙ」の値を採る。

［ステップＳ１８２］吹き出し描画部１４２は、変数ｉを０からｈ＋１までインクリメント（ｉ＝ｉ＋１）しながら、ステップＳ１８３～Ｓ１８４の吹き出し多角形座標処理を繰り返す。

［ステップＳ１８３］吹き出し描画部１４２は、左側の上からｉ番目の制御点の座標を算出し、左側座標配列Ｌ［ｉ］［ｊ］に設定する。例えば吹き出し描画部１４２は、基準座標Ｘと左シフト幅ＳＬを用いて、以下の処理を行う。
Ｌ［ｉ］［ｘ，ｙ］＝［Ｘ－ＳＬ，Ｌ［ｉ－１］［ｙ］＋ｆ［ｉ］］ （６）
これは、左側の上からｉ番目の制御点のｘ座標が「Ｘ－ＳＬ」、ｙ座標が「Ｌ［ｉ－１］［ｙ］＋ｆ［ｉ］」であることを示している。Ｌ［ｉ－１］［ｙ］は、上からｉ－１番目の制御点のｙ座標である。吹き出し描画部１４２は、ｉ＝０の場合、例えばＬ［ｉ－１］［ｙ］＝Ｙとする。Ｙは、吹き出し表示領域の上端のｙ座標である。また吹き出し描画部１４２は、ｆ（０）＝０、ｆ（ｈ＋１）＝ｆ（ｈ）とする。

［ステップＳ１８４］吹き出し描画部１４２は、右側の上からｉ番目の制御点の座標を算出し、右側座標配列Ｒ［ｉ］［ｊ］に設定する。例えば吹き出し描画部１４２は、基準座標Ｘと右シフト幅ＳＲを用いて、以下の処理を行う。
Ｒ［ｉ］［ｘ，ｙ］＝［Ｘ＋ＳＲ，Ｌ［ｉ－１］［ｙ］＋ｆ［ｉ］］ （７）
これは、右側の上からｉ番目の制御点のｘ座標が「Ｘ＋ＳＲ」、ｙ座標が「Ｌ［ｉ－１］［ｙ］＋ｆ［ｉ］」であることを示している。

［ステップＳ１８５］吹き出し描画部１４２は、変数ｉをインクリメントするとｈ＋１を超える場合、ステップＳ１８３～Ｓ１８４の繰り返し処理を終了し、処理をステップＳ１８６に進める。

［ステップＳ１８６］吹き出し描画部１４２は、左側座標配列と右側座標配列とを１つの配列（多角形座標配列）に結合する。
［ステップＳ１８７］吹き出し描画部１４２は、多角形座標配列に示される隣接する制御点同士を接続する線（吹き出し枠）を描画する。吹き出し描画部１４２は、その後、処理をステップＳ１９１に進める（図２０参照）。

図２０は、吹き出し描画処理の手順を示すフローチャート（３／３）である。以下、図２０に示す処理をステップ番号に沿って説明する。
［ステップＳ１９１］吹き出し描画部１４２は、描画した吹き出し枠内にテキスト描画領域を作成する。

［ステップＳ１９２］吹き出し描画部１４２は、コメントの投稿者に応じて、吹き出し内のコメントの配置（左寄せ／センタリング／右寄せ）を設定する。
［ステップＳ１９３］吹き出し描画部１４２は、変数ｉを１からｈまでインクリメント（ｉ＝ｉ＋１）しながら、ステップＳ１９４のコメント描画処理を繰り返す。

［ステップＳ１９４］吹き出し描画部１４２は、コメントのｉ行目をフォントサイズｆ［ｉ］で描画する。
［ステップＳ１９５］吹き出し描画部１４２は、変数ｉをインクリメントするとｈを超える場合、ステップＳ１９４の繰り返し処理を終了すると共に、吹き出し描画処理を終了する。

このようにして、長文のコメントであっても、所定の範囲内の領域に全文を表示することができる。その結果、会話の流れが分かりやすく、かつ長文のコメントの全体を確認可能なチャット画面が表示される。

図２１は、チャット画面の表示例を示す図である。スマートフォン１００の画面１６０には、例えばチャットボットの投稿であることを示すチャットボットアイコン１６１，１６２と、スマートフォン１００を使用しているユーザの投稿であることを示すユーザアイコン１６３，１６４が表示されている。チャットボットアイコン１６１，１６２に対応付けられた吹き出し１６６，１６８のコメントは、左寄せの配置である。ユーザアイコン１６３，１６４に対応付けられた吹き出し１６５，１６７のコメントは、文章の行数が２行のため、フォントサイズと吹き出し形状の制御は不要であることから、通常の吹き出し形状となっているが、文章は右寄せとなっている。もしこの文章が長文であった場合、ユーザの投稿したコメントは右寄せの吹き出し形状となる。

例えば吹き出し１６６のコメントは長文であり、カレント行以外の行の文字は、カレント行よりも小さく表示されている。小さく表示された文字の中に、強調された文字が含まれる場合、スマートフォン１００は、その文字を指し示す矢印と、強調表示マーク１７０を表示することができる。強調表示マーク１７０が表示されていることで、ユーザは、小さく表示された文字の中に、重要な記述が含まれていることを容易に認識できる。

画面１６０の下には、投稿用のテキストボックス１６９が表示されている。ユーザがテキストボックス１６９にコメントを入力し、入力内容の確定操作を行うと、スマートフォン１００は、入力されたコメントをチャットシステムに新たに投稿する。

〔その他の実施の形態〕
第２の実施の形態では、フリックまたはスワイプでカレント行を移動させているが、他の方法でカレント行を移動させることもできる。例えばユーザが吹き出し内をタップしたとき、スマートフォン１００は、タップされた位置の行をカレント行の中心行とするように、カレント行を移動させてもよい。

また第２の実施の形態に示した吹き出しの表示方法は、スマートフォン１００に限らず、タブレット端末またはパーソナルコンピュータでも実施することができる。
さらに第２の実施の形態に示した吹き出しの表示方法は、チャット以外のソフトウェアにおける吹き出しの表示にも適用可能である。

また第２の実施の形態では、吹き出し内にコメントを横書きで表示しているが、スマートフォン１００は、コメントを縦書きで表示することもできる。スマートフォン１００は、コメントを縦書きで表示した場合、吹き出し枠の縦幅を、カレント行の位置に応じて制御する。

以上、実施の形態を例示したが、実施の形態で示した各部の構成は同様の機能を有する他のものに置換することができる。また、他の任意の構成物や工程が付加されてもよい。さらに、前述した実施の形態のうちの任意の２以上の構成（特徴）を組み合わせたものであってもよい。

１ａ，１ｂ，・・・ 文章データ
２，３，４ 吹き出し
２ａ，３ａ，４ａ 表示枠
２ｂ，３ｂ，４ｂ 表示態様
２ｃ，３ｃ，４ｃ 注目箇所
１０ 表示制御装置
１１ 記憶部
１２ 処理部
１３ 画面

Claims (7)

1. 画面上における文章データの表示態様を制御する表示制御プログラムであって、
   前記文章データ全体を表示した前記画面に対するユーザからの操作に応じて、前記文章データ内における前記ユーザの注目箇所を特定し、
   特定した前記ユーザの前記注目箇所の前記文章データ全体に対する位置に応じて、前記文章データにおける行ごとの文字サイズを決定し、
   前記行の位置ごとに、前記文字サイズに基づいて枠幅を算出し、
   前記文章データに基づいて、前記行の位置において前記行ごとに算出された前記枠幅を有する表示枠と、前記表示枠内に配置され、前行ごとに決定された前記文字サイズの文字とを描画する、
   処理をコンピュータに実行させることを特徴とする表示制御プログラム。
2. 前記文章データを表示する際の文字の大きさを前記文章データに含まれる文字それぞれの表示位置の前記注目箇所からの距離に応じて変更する、
   処理をコンピュータに実行させることを特徴とする請求項１記載の表示制御プログラム。
3. 前記注目箇所の前記文章データ全体に対する上下方向または左右方向における位置に応じて、前記注目箇所の上下方向または左右方向の前記表示枠の縦幅または横幅を変更する、
   処理をコンピュータに実行させることを特徴とする請求項１または２に記載の表示制御プログラム。
4. 前記画面内の前記文章データの表示領域に触れた指を移動させる操作に応じて、前記ユーザの前記注目箇所を移動させる、
   処理をコンピュータに実行させることを特徴とする請求項１ないし３のいずれかに記載の表示制御プログラム。
5. 画面上における文章データの表示態様を制御する表示制御プログラムであって、
   前記文章データ全体と前記文章データの表示枠とを表示した前記画面に対する、ユーザからの、前記表示枠の一部に触れた指を移動させる操作に応じて、前記文章データ内における前記ユーザの注目箇所を移動させ、
   特定した前記ユーザの前記注目箇所の前記文章データ全体に対する位置に応じて、前記文章データを表示する際の文字の大きさおよび前記文章データの前記表示枠の形状を制御する、
   処理をコンピュータに実行させることを特徴とする表示制御プログラム。
6. 画面上における文章データの表示態様を制御するための表示制御方法であって、
   コンピュータが、
   前記文章データ全体を表示した画面に対するユーザからの操作に応じて、前記文章データ内における前記ユーザの注目箇所を特定し、
   特定した前記ユーザの前記注目箇所の前記文章データ全体に対する位置に応じて、前記文章データにおける行ごとの文字サイズを決定し、
   前記行の位置ごとに、前記文字サイズに基づいて枠幅を算出し、
   前記文章データに基づいて、前記行の位置において前記行ごとに算出された前記枠幅を有する表示枠と、前記表示枠内に配置され、前行ごとに決定された前記文字サイズの文字とを描画する、
   ことを特徴とする表示制御方法。
7. 画面上における文章データの表示態様を制御する表示制御装置であって、
   前記文章データを記憶する記憶部と、
   前記文章データ全体を表示した画面に対するユーザからの操作に応じて、前記文章データ内における前記ユーザの注目箇所を特定し、特定した前記ユーザの前記注目箇所の前記文章データ全体に対する位置に応じて、前記文章データにおける行ごとの文字サイズを決定し、前記行の位置ごとに、前記文字サイズに基づいて枠幅を算出し、前記文章データに基づいて、前記行の位置において前記行ごとに算出された前記枠幅を有する表示枠と、前記表示枠内に配置され、前行ごとに決定された前記文字サイズの文字とを描画する処理部と、
   を有することを特徴とする表示制御装置。

Images