(57)【要約】【課題】文章データ全体におけるユーザの注目箇所の把握を容易にする。【解決手段】表示制御装置１０は、画面１３上における文章データ１ａの表示態様２ｂ，３ｂ，４ｂを制御する。表示制御装置１０は、文章データ１ａ全体を表示した画面１３に対するユーザからの操作に応じて、文章データ１ａ内におけるユーザの注目箇所２ｃ，３ｃ，４ｃを特定する。そして表示制御装置１０は、特定したユーザの注目箇所２ｃ，３ｃ，４ｃの文章データ１ａ全体に対する位置に応じて、文章データ１ａを表示する際の文字の大きさおよび文章データ１ａの表示枠２ａ，３ａ，４ａの形状を制御する。【選択図】図１
2020197981.tif 000002
【特許請求の範囲】
【請求項１】
画面上における文章データの表示態様を制御する表示制御プログラムであって、
前記文章データ全体を表示した画面に対するユーザからの操作に応じて、前記文章データ内における前記ユーザの注目箇所を特定し、
特定した前記ユーザの前記注目箇所の前記文章データ全体に対する位置に応じて、前記文章データを表示する際の文字の大きさおよび前記文章データの表示枠の形状を制御する、
処理をコンピュータに実行させることを特徴とする表示制御プログラム。
【請求項２】
前記文章データを表示する際の文字の大きさを前記文章データに含まれる文字それぞれの表示位置の前記注目箇所からの距離に応じて変更する、
処理をコンピュータに実行させることを特徴とする請求項１記載の表示制御プログラム。
【請求項３】
前記注目箇所の前記文章データ全体に対する上下方向または左右方向における位置に応じて、前記注目箇所の上下方向または左右方向の前記表示枠の縦幅または横幅を変更する、
処理をコンピュータに実行させることを特徴とする請求項１または２に記載の表示制御プログラム。
【請求項４】
前記画面内の前記文章データの表示領域に触れた指を移動させる操作に応じて、前記ユーザの前記注目箇所を移動させる、
処理をコンピュータに実行させることを特徴とする請求項１ないし３のいずれかに記載の表示制御プログラム。
【請求項５】
前記画面に表示された前記表示枠の一部に触れた指を移動させる操作に応じて、前記ユーザの前記注目箇所を移動させる、
処理をコンピュータに実行させることを特徴とする請求項１ないし４のいずれかに記載の表示制御プログラム。
【請求項６】
画面上における文章データの表示態様を制御するための表示制御方法であって、
コンピュータが、
前記文章データ全体を表示した画面に対するユーザからの操作に応じて、前記文章データ内における前記ユーザの注目箇所を特定し、
特定した前記ユーザの前記注目箇所の前記文章データ全体に対する位置に応じて、前記文章データを表示する際の文字の大きさおよび前記文章データの表示枠の形状を制御する、
ことを特徴とする表示制御方法。
【請求項７】
画面上における文章データの表示態様を制御する表示制御装置であって、
前記文章データを記憶する記憶部と、
前記文章データ全体を表示した画面に対するユーザからの操作に応じて、前記文章データ内における前記ユーザの注目箇所を特定し、特定した前記ユーザの前記注目箇所の前記文章データ全体に対する位置に応じて、前記文章データを表示する際の文字の大きさおよび前記文章データの表示枠の形状を制御する処理部と、
を有することを特徴とする表示制御装置。
【発明の詳細な説明】
【技術分野】
【０００１】
本発明は、表示制御プログラム、表示制御方法、および表示制御装置に関する。
【背景技術】
【０００２】
スマートフォンを用いたコミュニケーション手段の１つにチャットがある。チャットでは、ユーザの発言内容を示すコメントが、吹き出しを用いてスマートフォンの画面に時系列で表示される。複数のコメントが時系列で表示されることで、チャットを用いた会話の流れが分かりやすくなる。
【０００３】
チャットに関する技術としては、例えば仮想空間上でのメッセージ表示について、ユーザが使用しやすい通信装置が提案されている。またメッセンジャーの表示制御方法に関する提案もある。
【先行技術文献】
【特許文献】
【０００４】
【特許文献１】特開２００３−１０８５０６号公報
【特許文献２】特開２０１６−２１２８７８号公報
【発明の概要】
【発明が解決しようとする課題】
【０００５】
チャットで表示される多くのコメントは数行程度の短い文章であるが、長い文章のコメントが投稿されることもある。コメントの文章を吹き出しの表示枠内に表示する場合、文章が長くなると、スマートフォンは文章の長さに合わせて表示枠も大きくする。ただしスマートフォンは画面が狭く、１つの文章を表示するための表示枠を大きくしすぎると、他の文章が表示できなくなる。そこで多くの場合、スマートフォンは、文章が長文の場合、初期状態ではその文章の一部のみを表示し、ユーザの操作に応じて他の部分を表示する。しかし、初期状態で文章の一部のみしか表示されていないと、ユーザが注目している箇所が、文章データ全体の中のどのような位置にあるのかが把握しづらい。
【０００６】
１つの側面では、本件は、文章データ全体におけるユーザの注目箇所の位置の把握を容易にすることを目的とする。
【課題を解決するための手段】
【０００７】
１つの案では、画面上における文章データの表示態様を制御する処理をコンピュータに実行させる表示制御プログラムが提供される。表示制御プログラムに基づいて、コンピュータは以下の処理を実行する。
【０００８】
コンピュータは、文章データ全体を表示した画面に対するユーザからの操作に応じて、文章データ内におけるユーザの注目箇所を特定する。そしてコンピュータは、特定したユーザの注目箇所の文章データ全体に対する位置に応じて、文章データを表示する際の文字の大きさおよび文章データの表示枠の形状を制御する。
【発明の効果】
【０００９】
１態様によれば、文章データ全体におけるユーザの注目箇所の位置の把握が容易となる。
【図面の簡単な説明】
【００１０】
【図１】第１の実施の形態に係る表示制御方法の一例を示す図である。
【図２】第２の実施の形態のシステム構成の一例を示す図である。
【図３】スマートフォンのハードウェアの構成の一例を示す図である。
【図４】コメントの表示態様の改善例を示す図である。
【図５】一部の文字列のフォントサイズを縮小させた場合の吹き出しの表示例を示す図である。
【図６】カレント行の位置に応じたコメントの表示例を示す図である。
【図７】吹き出しの表示態様を比較する図である。
【図８】スマートフォンのチャット機能を示すブロック図である。
【図９】コメントデータの一例を示す図である。
【図１０】チャット画面表示手順の一例を示すフローチャートである。
【図１１】カレント行からの距離と文字サイズとの関係を示す図である。
【図１２】初期フォントサイズ決定処理の手順の一例を示すフローチャートである。
【図１３】コメントを指定してカレント行を移動させる操作方法の一例を示す図である。
【図１４】吹き出し枠を指定してカレント行を移動させる操作方法の一例を示す図である。
【図１５】カレント行移動後の文字サイズ決定処理の手順の一例を示すフローチャートである。
【図１６】吹き出し枠の描画方法の一例を示す図である。
【図１７】吹き出し枠の形状の一例を示す図である。
【図１８】吹き出し描画処理の手順を示すフローチャート（１／３）である。
【図１９】吹き出し描画処理の手順を示すフローチャート（２／３）である。
【図２０】吹き出し描画処理の手順を示すフローチャート（３／３）である。
【図２１】チャット画面の表示例を示す図である。
【発明を実施するための形態】
【００１１】
以下、本実施の形態について図面を参照して説明する。なお各実施の形態は、矛盾のない範囲で複数の実施の形態を組み合わせて実施することができる。
〔第１の実施の形態〕
まず第１の実施の形態について説明する。
【００１２】
図１は、第１の実施の形態に係る表示制御方法の一例を示す図である。図１には、画面１３上における文章データ１ａの表示態様２ｂ，３ｂ，４ｂを制御する表示制御方法を実施することができる表示制御装置１０が示されている。表示制御装置１０は、例えば表示制御方法の処理手順が記述された表示制御プログラムを実行することにより、表示制御方法を実施することができる。
【００１３】
表示制御装置１０は、表示制御方法を実施するために、記憶部１１と処理部１２とを有する。記憶部１１は、例えば表示制御装置１０が有するメモリ、またはストレージ装置である。処理部１２は、例えば表示制御装置１０が有するプロセッサ、または演算回路である。
【００１４】
記憶部１１は、１以上の文章データ１ａ，１ｂ，・・・を記憶する。文章データ１ａ，１ｂ，・・・は、例えばチャットシステムにおいてユーザまたはチャットボットが投稿したコメントである。
【００１５】
処理部１２は、記憶部１１内の文章データ１ａ，１ｂ，・・・を画面１３に表示する。例えば処理部１２は、文章データ１ａ，１ｂ，・・・それぞれに対応する表示枠を描画し、描画した表示枠内に文章データ１ａ，１ｂ，・・・を表示する。
【００１６】
処理部１２は、文章データ１ａ，１ｂ，・・・の一部が長文であっても、長文の文章データ全体におけるユーザの注目箇所の把握が容易な表示態様で、文章データを表示する。例えば文章データ１ａが長文の文章であるものとする。この場合、処理部１２は、文章データ１ａ全体を表示した画面１３に対するユーザからの操作に応じて、文章データ１ａ内におけるユーザの注目箇所２ｃ，３ｃ，４ｃを特定する。そして処理部１２は、特定したユーザの注目箇所２ｃ，３ｃ，４ｃの文章データ１ａ全体に対する位置に応じて、文章データ１ａを吹き出し２，３，４で表示する際の文字の大きさおよび文章データ１ａの表示枠２ａ，３ａ，４ａの形状を制御する。
【００１７】
文字の大きさの制御としては、処理部１２は、注目箇所２ｃ，３ｃ，４ｃからの距離に応じた制御を行うことができる。例えば処理部１２は、文章データ１ａを表示する際の文字の大きさを文章データ１ａに含まれる文字それぞれの表示位置の注目箇所２ｃ，３ｃ，４ｃからの距離に応じて変更する。この場合、処理部１２は、注目箇所２ｃ，３ｃ，４ｃに近い文字ほど大きく表示し、注目箇所２ｃ，３ｃ，４ｃから遠い文字ほど小さく表示する。
【００１８】
表示枠２ａ，３ａ，４ａの形状の制御としては、処理部１２は、文章データ１ａ全体に対する注目箇所２ｃ，３ｃ，４ｃの位置に応じた制御を行うことができる。例えば処理部１２は、注目箇所２ｃ，３ｃ，４ｃの文章データ１ａ全体に対する上下方向または左右方向における位置に応じて、注目箇所２ｃ，３ｃ，４ｃの上下方向または左右方向に位置する表示枠２ａ，３ａ，４ａの横幅または縦幅を変更する。図１に示すように文章データ１ａの表示態様２ｂ，３ｂ，４ｂが横書きの場合、例えば処理部１２は、文章データ１ａ全体に対する注目箇所２ｃ，３ｃ，４ｃの上下方向の位置に応じて、表示枠２ａ，３ａ，４ａの横幅を制御する。この場合、処理部１２は、注目箇所２ｃ，３ｃ，４ｃに近いほど表示枠２ａ，３ａ，４ａの横幅を広くし、注目箇所２ｃ，３ｃ，４ｃから遠いほど表示枠２ａ，３ａ，４ａの横幅を狭くする。また文章データ１ａの表示態様２ｂ，３ｂ，４ｂが縦書きの場合、例えば処理部１２は、文章データ１ａ全体に対する注目箇所２ｃ，３ｃ，４ｃの左右方向の位置に応じて、表示枠２ａ，３ａ，４ａの縦幅を制御する。この場合、処理部１２は、注目箇所２ｃ，３ｃ，４ｃに近いほど表示枠２ａ，３ａ，４ａの縦幅を広くし、注目箇所２ｃ，３ｃ，４ｃから遠いほど表示枠２ａ，３ａ，４ａの縦幅を狭くする。
【００１９】
また処理部１２は、ユーザからの操作に応じて注目箇所２ｃ，３ｃ，４ｃを移動させることができる。例えば処理部１２は、画面１３内の文章データ１ａの表示領域に指で触れたまま指を移動させる操作（フリックまたはスワイプ）に応じて、ユーザの注目箇所２ｃ，３ｃ，４ｃを移動させる。図１に示すように横書きの表示態様２ｂ，３ｂ，４ｂであれば、ユーザが文章データ１ａの表示領域内で上方向にスワイプすると、例えば処理部１２は、注目箇所２ｃ，３ｃ，４ｃとなる行を、現在の行よりも下の行に変更する。またユーザが文章データ１ａの表示領域内で下方向にスワイプすると、例えば処理部１２は、注目箇所２ｃ，３ｃ，４ｃとなる行を、現在の行よりも上の行に変更する。
【００２０】
また処理部１２は、画面１３に表示された表示枠２ａ，３ａ，４ａの一部に指で触れたまま指を移動させる操作（フリックまたはスワイプ）に応じて、ユーザの注目箇所２ｃ，３ｃ，４ｃを移動させることもできる。図１に示すように横書きの表示態様２ｂ，３ｂ，４ｂであれば、表示枠２ａ，３ａ，４ａの横幅の広い部分の右側または左側を下方向にスワイプする入力があると、処理部１２は、注目箇所２ｃ，３ｃ，４ｃとなる行を、現在の行よりも下の行に変更する。また表示枠２ａ，３ａ，４ａの横幅の広い部分の右側または左側を上方向にスワイプする入力があると、処理部１２は、注目箇所２ｃ，３ｃ，４ｃとなる行を、現在の行よりも上の行に変更する。
【００２１】
このようにユーザの注目箇所２ｃ，３ｃ，４ｃに応じて文字の大きさや表示枠２ａ，３ａ，４ａを制御することで、長文の文章データ１ａ全体におけるユーザの注目箇所２ｃ，３ｃ，４ｃの位置の把握が容易となる。すなわち注目箇所２ｃ，３ｃ，４ｃから遠い文字を小さくすることで、文章データ１ａ全体を狭い領域に表示できる。そして表示制御装置１０は、注目箇所２ｃ，３ｃ，４ｃの文字を大きくし、注目箇所２ｃ，３ｃ，４ｃ付近の表示枠２ａ，３ａ，４ａの幅を広くしている。これによりユーザは、文章データ１ａ全体に対する注目箇所２ｃ，３ｃ，４ｃの位置（例えば先頭なのか、中段なのか、末尾なのか）を容易に把握できる。しかも注目箇所２ｃ，３ｃ，４ｃは大きな文字で表示されているため、ユーザは、注目箇所２ｃ，３ｃ，４ｃの内容の把握も容易である。
【００２２】
また文章データ１ａの全体が表示されているため、現在の注目箇所２ｃ，３ｃ，４ｃ以外の部分に重要な箇所がある場合にも、ユーザは重要な箇所を容易に認識できる。そしてユーザが重要な箇所に注目箇所２ｃ，３ｃ，４ｃを移動させる操作を行えば、表示制御装置１０は、重要な箇所を新たな注目箇所２ｃ，３ｃ，４ｃとする表示態様２ｂ，３ｂ，４ｂで文章データ１ａを表示する。これにより、ユーザによる重要な箇所の見落としも抑止できる。
【００２３】
〔第２の実施の形態〕
次に第２の実施の形態について説明する。第２の実施の形態は、スマートフォンを用いたチャットにおいて、長文を分かりやすく表示するものである。
【００２４】
図２は、第２の実施の形態のシステム構成の一例を示す図である。チャットを管理するサーバ２００には、ネットワーク２０を介して複数のスマートフォン１００，１００ａ，・・・が接続されている。サーバ２００は、スマートフォン１００，１００ａ，・・・から送信されたコメントを記憶すると共に、記憶したコメントをスマートフォン１００，１００ａ，・・・に送信する。またサーバ２００は、チャットボットにより、ユーザからのチャットによる問い合わせに対して、チャット上で回答することができる。チャットボットとは、ユーザが入力した自然文を解釈し、自動で回答する機能である。
【００２５】
スマートフォン１００，１００ａ，・・・は、ユーザが使用する情報端末の一種である。ユーザは、スマートフォン１００，１００ａ，・・・を用いて、他のユーザとのチャットによる会話を行うことができる。
【００２６】
なおサーバ２００は、チャットに投稿できるコメントの文字数の上限を設定することができる。スマートフォン１００，１００ａ，・・・は、上限の以下の文字数のコメントを、サーバ２００に投稿する。
【００２７】
図３は、スマートフォンのハードウェアの構成の一例を示す図である。スマートフォン１００は、プロセッサ１０１によって装置全体が制御されている。プロセッサ１０１には、バス１０９を介してメモリ１０２と複数の周辺機器が接続されている。プロセッサ１０１は、マルチプロセッサであってもよい。プロセッサ１０１は、例えばＣＰＵ（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）を用いた表示装置や液晶表示装置などがある。
【００３２】
タッチパネル１０５は、ディスプレイ装置１０４の画面の前面に配置されており、画面上の押された位置を検知して、その位置を示す信号をプロセッサ１０１に送信する。
機器接続インタフェース１０６は、スマートフォン１００に周辺機器を接続するための通信インタフェースである。例えば機器接続インタフェース１０６には、メモリカード２１を接続することができる。メモリカード２１は、機器接続インタフェース１０６との通信機能を搭載した、カード型の記録媒体である。
【００３３】
音声入出力部１０７には、マイク１０７ａとスピーカ１０７ｂとが接続されている。音声入出力部１０７は、マイク１０７ａから入力された音声信号をディジタル信号に変換して、プロセッサ１０１に送信する。また音声入出力部１０７は、プロセッサ１０１から音声データを受信すると、音声データに従った音声信号を生成し、スピーカ１０７ｂから音声出力を行う。
【００３４】
無線通信部１０８は、移動体通信用の通信インタフェースである。無線通信部１０８にはアンテナ１１３が接続されている。無線通信部１０８は、アンテナ１１３を介して、移動体通信の基地局と通信する。
【００３５】
スマートフォン１００は、以上のようなハードウェア構成によって、第２の実施の形態の処理機能を実現することができる。他のスマートフォン１００ａ，・・・も、スマートフォン１００と同様のハードウェアにより実現することができる。また、第１の実施の形態に示した表示制御装置１０も、図３に示したスマートフォン１００と同様のハードウェアにより実現することができる。
【００３６】
スマートフォン１００は、例えばコンピュータ読み取り可能な記録媒体に記録されたプログラムを実行することにより、第２の実施の形態の処理機能を実現する。スマートフォン１００に実行させる処理内容を記述したプログラムは、様々な記録媒体に記録しておくことができる。例えば、スマートフォン１００に実行させるプログラムをストレージ装置１０３に格納しておくことができる。プロセッサ１０１は、ストレージ装置１０３内のプログラムの少なくとも一部をメモリ１０２にロードし、プログラムを実行する。またスマートフォン１００に実行させるプログラムを、メモリカード２１などの可搬型記録媒体に記録しておくこともできる。可搬型記録媒体に格納されたプログラムは、例えばプロセッサ１０１からの制御により、ストレージ装置１０３にインストールされた後、実行可能となる。またプロセッサ１０１が、可搬型記録媒体から直接プログラムを読み出して実行することもできる。
【００３７】
ここで、スマートフォン１００を用いてチャットを行う場合の課題について説明する。
スマートフォン１００を用いたチャットはコミュニケーション手段として非常に有用であるが、スマートフォン１００の画面サイズはパーソナルコンピュータに比べて狭い。そのため、長文のコメントの表示には不向きである。例えばコメントが長文だと、コメント表示用の吹き出し面積が大きくなり、画面のほとんどの領域が１つのコメントで占有され、チャットの会話の流れが分からなくなる。
【００３８】
なお、通常のユーザによるチャットへのコメントを入力する場合、長文の入力には手間がかかるため、ユーザの操作により長文が入力されることは少ない。それに対して、チャットボットによる自動応答では長文の応答も容易であるため、チャットボットからの回答は長文になることがある。そして、チャットボットの普及に伴い、チャット上で長文を見る機会が多くなってきている。そこで、チャットにおいて長文のコメントを、ユーザにとって理解しやすく表示できるようにすることが重要となっている。
【００３９】
スマートフォン１００に長文のコメントを表示する技術として、例えば「すべて表示」「折りたたむ」などの操作で長文を一部残して隠す技術がある。しかし、このような表示の態様の切り替え技術では、長文の全体の把握と会話の流れの把握とを別画面で行うこととなり、十分に理解しやすい表示態様であるとは言えない。そこで第２の実施の形態では、スマートフォン１００は、長文のコメントにおけるフォントサイズを適切に調整することで、会話の流れを理解しやすくする。
【００４０】
図４は、コメントの表示態様の改善例を示す図である。図４の上段には、比較例として、操作によりコメントの一部表示と全文表示とを切り替える例を示している。例えば第２の実施の形態の機能を有していないスマートフォン３００は、一連のコメントの吹き出しを時系列で画面３１０に表示する。初期状態（比較例の左側）では、吹き出しのサイズが一定である。コメントが長文でありそのコメントが吹き出し内に表示しきれない場合、スマートフォン３００は、コメントの一部（例えば先頭の数行）を吹き出し内に表示し、他の部分は非表示とする。このときスマートフォン３００は、吹き出し内に「すべて表示」というメニュー３１１を表示する。
【００４１】
図４の例では、８つのコメントのうちの４つのコメントが画面３１０内に表示されている。そのため、長文のコメントに至るまでの会話の流れの把握は可能である。しかし、長文のコメントは一部しか表示されておらず、長文の全体を把握するのが困難であり、ユーザの注目する位置がコメント全体に対してどのような位置にあるのかを把握することも難しい。
【００４２】
ユーザが「すべて表示」のメニュー３１１を選択すると、スマートフォン３００は、吹き出しの枠を拡げ、長文のコメントの全部を吹き出し枠内に表示する。このときスマートフォン３００は、長文のコメントを表示する引き出し枠に、「折りたたむ」というメニュー３１２を表示する。
【００４３】
図４の例では、８つのコメントのうちの２つのコメントのみ画面３１０内に表示されている。そのため、長文のコメントの全文を読むことができるが、画面３１０に表示されたコメントから会話の流れを把握するのは困難である。会話の流れを把握する場合、ユーザは「折りたたむ」のメニュー３１２を選択する。するとスマートフォン３００は、長文のコメントの全文表示を取りやめ、一部表示の状態（比較例の左側）に戻る。
【００４４】
このように比較例に示した表示方法では、常に、長文の全体把握と会話の流れの把握との一方が困難となる。それに対して、第２の実施の形態に係るスマートフォン１００は、長文のコメントの一部の文字列のフォントのサイズを小さくすることで、長文のコメントであっても、狭い領域の吹き出し枠に表示できるようにする。吹き出し枠を拡大しないことで、スマートフォン１００の画面１６０には会話の流れの把握に役立つ多くのコメントを表示することが可能となる。
【００４５】
図５は、一部の文字列のフォントサイズを縮小させた場合の吹き出しの表示例を示す図である。例えばチャットボットが投稿したコメントは、チャットボットアイコン２２に関連付けた吹き出し３１，３２に表示される。図５の上段には、吹き出しの枠を拡張した場合の吹き出し３１の表示例を示し、下段には、一部のフォントサイズを縮小させた場合の吹き出し３２の表示例を示している。
【００４６】
フォントサイズを一定とした場合の吹き出し３１は、上下方向に長い形となっている。他方、一部の文字列のフォントサイズを小さくすることで、より狭い領域の吹き出し３２内にすべてのコメントを表示することができる。
【００４７】
スマートフォン１００は、吹き出し３２に表示するコメントのうち、例えばユーザが指定した数行をカレント行とする。そしてスマートフォン１００は、カレント行を最も大きく表示し、カレント行から離れるに従って各行のフォントサイズを小さくする。
【００４８】
これにより吹き出し３２内には、一部のコメントのフォントサイズが小さいものの、文字数上限値以下の文字数のコメントであれば全文を表示できる。コメントの全文が表示されていることで、ユーザは、どの程度の分量のコメントなのかを把握することができる。また例えば他の文字とは異なる色で強調表示された文字がコメント内に含まれている場合、その文字が小さくても、ユーザは色の違いにより強調表示された重要箇所の存在を認識することができる。
【００４９】
また吹き出し３２は、注目部分が大きな文字で強調されることで、アイコンで表された投稿者（図５の例ではチャットボット）が該当部分の発言をしていることを表した、吹き出しらしい表現となっている。
【００５０】
スマートフォン１００は、吹き出し３２内からカレント行の位置を指定する操作入力が行われると、指定された位置をカレント行とするように吹き出し３２の表示態様を変化させる。
【００５１】
図６は、カレント行の位置に応じたコメントの表示例を示す図である。第１の表示態様は、コメントの先頭の３行がカレント行４１となっている場合の吹き出し３３の例である。この場合、カレント行４１である最初の３行が最も大きなフォントで表示され、下の行に行くに従って文字のフォントサイズが小さくなっている。また吹き出し３３は、枠の横幅が下に行くほど狭くなっている。
【００５２】
第２の表示態様は、コメントの中程の３行がカレント行４２となっている場合の吹き出し３４の例である。この場合、カレント行４２である中程の３行が最も大きなフォントで表示され、カレント行から上下の両方向に離れるのに従って文字のフォントサイズが小さくなっている。また吹き出し３４の枠は、中程の横幅が最も広く、中程から上下方向に離れるほど幅が狭くなっている。
【００５３】
第３の表示態様は、コメントの最後尾の３行がカレント行４３となっている場合の吹き出し３５の例である。この場合、カレント行４３である最後尾の３行が最も大きなフォントで表示され、上の行に行くに従って文字のフォントサイズが小さくなっている。また吹き出し３５の枠は、横幅が上に行くほど狭くなっている。
【００５４】
このように、ユーザが長文を読み進めていく場合であっても、スマートフォン１００は、ユーザの指定に応じてカレント行を移動することで、ユーザが読んでいる数行の文字を大きく表示し、読んでいる行から離れた位置の文字ほど小さく表示することができる。その結果、ユーザは、注目している部分とその周辺を確認しながら、長文のコメント全体を大きなフォントで読み進めることができる。しかも長文のコメント全体が吹き出し内に表示されているため、ユーザは、文章量を容易に把握できる。
【００５５】
またスマートフォン１００は、吹き出し枠の形状を、文字の量と文字サイズに応じて変形させている。これにより、ユーザは、文章中のどこを読んでいるか（長文の先頭なのか中段なのか、末尾なのかなど）を容易に認識できる。また、カレント行から離れた位置の行を表示する部分では、吹き出し枠の横幅が狭くなっている。これにより、吹き出し枠の外側に他のアイコンなどによる情報表示が可能であり、スマートフォン１００の狭い画面を有効に活用することができる。
【００５６】
なお狭い領域で長文のコメントを読み進めるための手法として、スクロールバーなどを用いて、限られた領域内に表示されたコメントの文章をスクロールさせる方法も考えられる。しかし、スクロールバーを用いた吹き出しの長文表示と比べても、図６に示したような改善後の吹き出しの方が長文の内容把握がしやすい。
【００５７】
図７は、吹き出しの表示態様を比較する図である。図７には、比較例として、スクロールバー３６ａによってコメントの文章をスクロールさせることが可能な吹き出し３６を示している。この吹き出し３６では、コメントが長文になったときだけスクロールバー３６ａが表示されることとなり、吹き出しの表示態様が統一されないという欠点がある。また、吹き出し３６内に表示される文章はコメントの一部に過ぎず、隠れている文章の中に重要箇所があっても、ユーザが気づきにくい。さらにスマートフォンでは画面全体が狭く、スクロールバーが小さくなるため、スクロールバーでは細かな表示位置の指定が困難である。
【００５８】
それに対して、注目箇所に応じて文字の大きさと吹き出し枠の形状とを可変とする吹き出し３７であれば、長文のコメントの全体を吹き出し３７内に表示することができる。全文が表示されていることで、注目箇所以外に重要箇所３７ａがあった場合、小さいながらもその重要箇所３７ａが吹き出し３７内に表示される。その結果、ユーザは、重要箇所３７ａの存在を容易に認識できる。しかもスクロールバー３６ａを用いた吹き出し３６に比べ、改善後の吹き出し３６の表示領域は狭い。そのため、画面内の空き領域が増え、他の情報の表示に利用できる。また改善後の吹き出し３７では、例えばスクロールバー３６ａのような特定のオブジェクトが表示されたり、表示されなかったりすることがなく、表示態様が統一されている。
【００５９】
次にスマートフォン１００が有するチャット機能について説明する。
図８は、スマートフォンのチャット機能を示すブロック図である。スマートフォン１００は、記憶部１１０、コメント送受信部１２０、操作受付部１３０、および表示制御部１４０を有する。
【００６０】
記憶部１１０は、チャットのコメントデータ１１１を記憶する。コメントデータ１１１は、例えばチャット上で発言されたコメントの文字列と、そのコメントの投稿時刻とを含む。記憶部１１０としては、例えばスマートフォン１００のメモリ１０２またはストレージ装置１０３の記憶領域の一部が使用される。
【００６１】
コメント送受信部１２０は、チャットシステム上に投稿されたコメントをサーバ２００から取得する。コメント送受信部１２０は、取得したコメントをコメントデータ１１１として記憶部１１０に格納する。またコメント送受信部１２０は、スマートフォン１００のユーザが入力した投稿用のコメントを、サーバ２００上のチャットシステムに送信する。例えばコメント送受信部１２０は、スマートフォン１００を使用するユーザが入力したコメントがコメントデータ１１１に追加された場合、追加されたコメントを、ユーザの新たな投稿としてサーバ２００に送信する。
【００６２】
操作受付部１３０は、チャット画面に対するユーザからの操作を受け付ける。操作受付部１３０は、ユーザがコメント投稿用のテキストボックスにコメントを入力した場合、入力されたコメントを、記憶部１１０内のコメントデータ１１１に追加する。また操作受付部１３０は、吹き出しのカレント行の指定操作や、画面のスクロール操作などの画面操作が行われた場合、操作内容を表示制御部１４０に通知する。
【００６３】
表示制御部１４０は、コメントデータ１１１の内容をディスプレイ装置の画面に表示する。例えば表示制御部１４０は、コメントデータ１１１に示されるコメントを表示するための吹き出しを生成し、吹き出し内にコメントを投稿順に表示する。なお表示制御部１４０は、コメントの長さが所定値以上の場合、図６に示したように、カレント行に応じて行ごとの文字サイズを決定し、カレント行に応じた形状の吹き出し枠の吹き出しを表示する。そのために、表示制御部１４０は、文字サイズ決定部１４１、および吹き出し描画部１４２を有する。
【００６４】
文字サイズ決定部１４１は、長さが所定値以上のコメントについて、カレント行に応じた各行の文字のサイズ（フォントサイズ）を決定する。例えば文字サイズ決定部１４１は、カレント行との距離が離れた行ほど、その行の文字サイズを小さくする。
【００６５】
吹き出し描画部１４２は、長さが所定値以上のコメントについて、カレント行に応じた形状の吹き出し枠を描画する。例えば吹き出し描画部１４２は、カレント行との距離が離れた行の表示位置ほど横幅が狭い吹き出し枠を描画する。
【００６６】
また吹き出し描画部１４２は、コメントデータ１１１に示されるコメントを示す画像を描画する。例えば吹き出し描画部１４２は、長さが所定値以上のコメントについては、吹き出し描画部１４２が生成した吹き出し枠内に、文字サイズ決定部１４１が決定したフォントサイズでコメントを描画する。そして吹き出し描画部１４２は、長さが所定値未満のコメントについては、予め用意された所定の吹き出し枠内に、予め決められたサイズのフォントでコメントを描画する。
【００６７】
なお、図８に示した各要素の機能は、例えば、その要素に対応するプログラムモジュールをコンピュータに実行させることで実現することができる。
次にコメントデータ１１１について具体的に説明する。
【００６８】
図９は、コメントデータの一例を示す図である。コメントデータ１１１には、チャットに投稿されたコメントが、日時と投稿者とに対応付けて格納されている。コメントデータ１１１に示される日時は、対応するコメントが投稿された日時である。コメントデータ１１１に示される投稿者は、対応するコメントを投稿したユーザのユーザ名である。チャットボットが投稿したコメントの場合、投稿者に「チャットボット」と示される。
【００６９】
図９に示すコメントデータ１１１の例では、チャットボットが投稿したコメントが長文となっており、規定のサイズの吹き出しには全文を表示することができない。なおコメントデータ１１１には、強調文字列を含むコメントが格納される場合もある。図９の例では、チャットボットが投稿したコメントの一部の文字列が、下線とボールドによって強調されている。
【００７０】
次に、スマートフォン１００によるチャット画面の表示手順について詳細に説明する。
図１０は、チャット画面表示手順の一例を示すフローチャートである。以下、図１０に示す処理をステップ番号に沿って説明する。
【００７１】
［ステップＳ１０１］表示制御部１４０は、コメントデータ１１１から表示するコメントを選択する。例えば表示制御部１４０は、チャット画面の初期状態を表示する場合、投稿された日時が最新のコメントから順に、未描画のコメントを選択する。また表示制御部１４０は、画面のスクロール操作に応じて画面がスクロールされた場合、スクロール後の画面の最も下に表示するコメントから順に、そのコメントより以前に投稿されたコメントを選択する。
【００７２】
［ステップＳ１０２］文字サイズ決定部１４１は、選択されたコメントの先頭の数行をカレント行とし、行ごとの初期の文字サイズを決定する。初期文字サイズ決定処理の詳細は後述する（図１２参照）。
【００７３】
［ステップＳ１０３］吹き出し描画部１４２は、吹き出し枠を描画する。例えば吹き出し描画部１４２は、選択されたコメントの行ごとの文字サイズに応じた吹き出し枠を描画する。また吹き出し描画部１４２は、選択したコメントを、描画された吹き出し枠内に決定されたサイズの文字で描画する。吹き出し描画処理の詳細は後述する（図１８参照）。
【００７４】
［ステップＳ１０４］表示制御部１４０は、チャット画面内に他のコメントを表示可能か否かを判断する。例えば表示制御部１４０は、描画した吹き出し枠の上に、コメントが長文の場合の吹き出し枠の高さ分の空き領域があれば、他のコメントを表示可能であると判断する。表示制御部１４０は、他のコメントを表示可能であれば処理をステップＳ１０１に進める。また表示制御部１４０は、他のコメントを表示できない場合、処理をステップＳ１０５に進める。
【００７５】
［ステップＳ１０５］表示制御部１４０は、カレント行の移動操作が行われたか否かを判断する。表示制御部１４０は、カレント行の移動操作が行われた場合、処理をステップＳ１０６に進める。また表示制御部１４０は、カレント行の移動操作が行われていなければ、処理をステップＳ１０８に進める。
【００７６】
［ステップＳ１０６］文字サイズ決定部１４１は、カレント行の移動操作が行われた吹き出し内のコメント（再描画コメント）について、カレント行移動後の文字サイズを決定する。カレント行移動後文字サイズ決定処理の詳細は後述する（図１５参照）。
【００７７】
［ステップＳ１０７］吹き出し描画部１４２は、吹き出し描画する。例えば吹き出し描画部１４２は、再描画コメントの行ごとの文字サイズに応じた吹き出し枠を描画する。さらに吹き出し描画部１４２は、再描画コメントを、描画された吹き出し枠内に決定されたサイズの文字で描画する。吹き出し描画処理の詳細は後述する（図１８〜図２０参照）。
【００７８】
［ステップＳ１０８］表示制御部１４０は、画面スクロール操作が行われたか否かを判断する。表示制御部１４０は、画面スクロール操作が行われた場合、処理をステップＳ１０１に進める。また表示制御部１４０は、画面スクロール操作が行われていなければ、処理をステップＳ１０９に進める。
【００７９】
［ステップＳ１０９］表示制御部１４０は、チャット画面を閉じる操作が行われたか否かを判断する。表示制御部１４０は、閉じる操作が行われた場合、チャット画面表示処理を終了する。また表示制御部１４０は、閉じる操作が行われていなければ、処理をステップＳ１０５に進める。
【００８０】
スマートフォン１００は、このような手順でチャット画面の初期表示を行うと共に、ユーザによる吹き出しのカレント行の移動操作または画面全体のスクロール操作に応じて、チャット画面を更新する。
【００８１】
次に、コメントの行ごとの文字サイズの決定方法について、詳細に説明する。
図１１は、カレント行からの距離と文字サイズとの関係を示す図である。図１１では、横軸にカレント行中心からの距離が示されており、縦軸に文字のフォントサイズが示されている。カレント行中心からの距離は、コメントの先頭から所定文字数で改行していったときの各行の行番号から、カレント行の中心行の行番号を減算した値である。
【００８２】
図１１の例では、カレント行は３行である。この場合、３行のカレント行の上から２行目が中心行である。カレント行のフォントサイズは１２ポイントである。そしてカレント行の中心行からの距離が離れるに従ってフォントサイズが小さくなり、距離の全対値が８以上の行は、フォントサイズがすべて１ポイントとなる。
【００８３】
ここで、１行の文字数を「ａ」、カレント行のフォントサイズを「ｂ」、最小フォントサイズを「ｃ」、二次関数の係数を「ｄ」とする。１行の文字数ａは、例えば「１４」である。カレント行のフォントサイズｂは、例えば「１２」である。最小フォントサイズｃは、例えば「１」である。二次関数の係数ｄは、例えば「０．２」である。
【００８４】
この場合、文字サイズ決定部１４１は、まずコメントの文章を、１行の文字数「ａ」で複数の行に分割する。文字サイズ決定部１４１は、分割によって生成された各行に、コメントの先頭に近い方から、１から昇順の行番号を付与する。そして文字サイズ決定部１４１は、各行のカレント行からの距離をｘとしたとき、以下の式（１）によってフォントサイズを計算する。
フォントサイズ＝ｂ−（ｄ×ｘ2）    （１）
ただし文字サイズ決定部１４１は、フォントサイズ＜ｃの場合、フォントサイズ＝ｃとする。
【００８５】
例えば文字サイズ決定部１４１は、フォントサイズは整数値とするため、フォントサイズの計算結果の小数点以下の値は切り捨てる。なおスマートフォン１００が小数点以下のフォントの表示が可能な場合、文字サイズ決定部１４１は、小数点以下の数値も有効とすることもできる。
【００８６】
次に、初期フォントサイズ決定処理の手順についてフローチャートを参照して説明する。
図１２は、初期フォントサイズ決定処理の手順の一例を示すフローチャートである。以下、図１２に示す処理をステップ番号に沿って説明する。
【００８７】
［ステップＳ１２１］文字サイズ決定部１４１は、コメントの文章を１行の文字数ａごとに改行する。
［ステップＳ１２２］文字サイズ決定部１４１は、コメントの行数ｈを取得する。ｈは、１以上の整数である。
【００８８】
［ステップＳ１２３］文字サイズ決定部１４１は、要素数がｈのフォントサイズ配列ｆ［ｉ］を作成する。ｉは、フォントサイズ配列の要素番号を示す変数である。
［ステップＳ１２４］文字サイズ決定部１４１は、変数ｉを１からｈまでインクリメント（ｉ＝ｉ＋１）しながら、ステップＳ１２５〜Ｓ１２９のフォントサイズ計算処理を繰り返す。
【００８９】
［ステップＳ１２５］文字サイズ決定部１４１は、ｉ行目の行がカレント行か否かを判断する。例えば文字サイズ決定部１４１は、ｉ≦３であればカレント行であると判断する。文字サイズ決定部１４１は、カレント行であれば、処理をステップＳ１２６に進める。また文字サイズ決定部１４１は、カレント行でなければ、処理をステップＳ１２７に進める。
【００９０】
［ステップＳ１２６］文字サイズ決定部１４１は、配列ｆ［ｉ］に、カレント行のフォントサイズｂを設定する。文字サイズ決定部１４１は、その後、処理をステップＳ１３０に進める。
【００９１】
［ステップＳ１２７］文字サイズ決定部１４１は、式（１）を用いて計算したフォントサイズを、配列ｆ［ｉ］に設定する。なお文字サイズ決定部１４１は、現在のカレント行の中心行の行番号を「２」とする（先頭から３行のカレント行の中心行）。この場合、ｉ番目の行のカレント行の中心行からの距離ｘは「ｉ−２」となる。従って文字サイズ決定部１４１は、以下の処理を行うこととなる。
ｆ［ｉ］＝ｂ−（ｄ×（ｉ−２）2）    （２）
なお文字サイズ決定部１４１は、式（２）の右辺の値の小数点以下は切り捨てる。
【００９２】
［ステップＳ１２８］文字サイズ決定部１４１は、ｆ［ｉ］の値が最小フォントサイズｃ未満（ｆ［ｉ］＜ｃ）か否かを判断する。文字サイズ決定部１４１は、最小フォントサイズ未満の場合、処理をステップＳ１２９に進める。また文字サイズ決定部１４１は、最小フォントサイズ以上であれば、処理をステップＳ１３０に進める。
【００９３】
［ステップＳ１２９］文字サイズ決定部１４１は、配列ｆ［ｉ］に最小フォントサイズｃを設定する。
［ステップＳ１３０］文字サイズ決定部１４１は、変数ｉをインクリメントすると行数ｈを超える場合、ステップＳ１２５〜Ｓ１２９の繰り返し処理を終了し、処理をステップＳ１３１に進める。
【００９４】
［ステップＳ１３１］文字サイズ決定部１４１は、初期表示のコメントの行ごとのフォントサイズを、配列ｆ［ｉ］に示される値に決定する。
このようにして、初期のコメントの行ごとの文字サイズが決定される。その後、ユーザが吹き出しに対するカレント行の移動操作を行うと、各行の文字サイズが変更されると共に、吹き出しの枠の形状が変更される。なお、カレント行の移動操作方法としては、コメントの一部を指定して操作する方法と、吹き出し枠を指定して操作する方法とが考えられる。
【００９５】
図１３は、コメントを指定してカレント行を移動させる操作方法の一例を示す図である。例えばユーザは、先頭の数行をカレント行として表示された吹き出し６１内のコメントを指定して、上方向へフリックまたはスワイプする。フリックとは、タッチパネル１０５の画面に触れた指先を弾くように移動させることである。スワイプは、タッチパネル１０５の画面を指先で押しながら、その指先を移動させることである。このようなユーザの操作は、操作受付部１３０によって検知され、操作内容が表示制御部１４０に送られる。そして表示制御部１４０は、コメントを指定した上方向へのフリップまたはスワイプ操作を、カレント行の下方向への移動操作と認識する。
【００９６】
吹き出し６１の状態からカレント行が下の行に移動すると、中程の行がカレント行に設定された吹き出し６２が表示される。ここでユーザが、コメントを指定して上方向へフリックまたはスワイプすると、カレント行がさらに下方向へ移動する。カレント行が末尾の行まで移動すると、最後の３行が最も大きな文字で表された吹き出し６３が表示される。
【００９７】
図１３には、表示制御部１４０がカレント行を下に移動させる例を示しているが、ユーザがコメントを指定して下方向にフリックまたはスワイプした場合には、表示制御部１４０はカレント行を上に移動させる。
【００９８】
図１４は、吹き出し枠を指定してカレント行を移動させる操作方法の一例を示す図である。例えばユーザは、先頭の数行がカレント行として表示された吹き出し６１の枠の端を指定して、下方向へフリックまたはスワイプする。このようなユーザの操作は、操作受付部１３０によって検知され、操作内容が表示制御部１４０に送られる。そして表示制御部１４０は、吹き出し６１の枠を指定した下方向へのフリップまたはスワイプ操作を、カレント行の下方向への移動操作と認識する。
【００９９】
吹き出し６１の状態からカレント行が下の行に移動すると、中程の行がカレント行に設定された吹き出し６２が表示される。ここでユーザが吹き出し６２の枠の端を指定して、下方向へフリックまたはスワイプすると、カレント行がさらに下方向へ移動する。カレント行が末尾の行まで移動すると、最後の３行が最も大きな文字で表された吹き出し６３が表示される。
【０１００】
図１４には、カレント行を下に移動させる場合の操作方法を示しているが、ユーザが吹き出し枠を指定して上方向にフリックまたはスワイプした場合には、表示制御部１４０はカレント行を上に移動させる。
【０１０１】
なお、図１３と図１４に、カレント行を移動させる２つの操作方法を示したが、スマートフォン１００は、いずれか一方の操作方法または両方の操作方法を実施することができる。
【０１０２】
次にカレント行移動後の文字サイズの決定処理についてフローチャートを参照して説明する。
図１５は、カレント行移動後の文字サイズ決定処理の手順の一例を示すフローチャートである。以下、図１５に示す処理をステップ番号に沿って説明する。
【０１０３】
［ステップＳ１４１］文字サイズ決定部１４１は、カレント行の中心行の行番号Ｃを取得する。Ｃは、１以上ｈ以下の整数である。
［ステップＳ１４２］文字サイズ決定部１４１は、要素数がｈのフォントサイズ配列ｆ［ｉ］を作成する。
【０１０４】
［ステップＳ１４３］文字サイズ決定部１４１は、変数ｉを１からｈまでインクリメント（ｉ＝ｉ＋１）しながら、ステップＳ１４４〜Ｓ１４８のフォントサイズ計算処理を繰り返す。
【０１０５】
［ステップＳ１４４］文字サイズ決定部１４１は、ｉ行目の行がカレント行か否かを判断する。例えば文字サイズ決定部１４１は、Ｃ−１≦ｉ≦Ｃ＋１であればカレント行であると判断する。文字サイズ決定部１４１は、カレント行であれば、処理をステップＳ１４５に進める。また文字サイズ決定部１４１は、カレント行でなければ、処理をステップＳ１４６に進める。
【０１０６】
［ステップＳ１４５］文字サイズ決定部１４１は、配列ｆ［ｉ］に、カレント行のフォントサイズｂを設定する。文字サイズ決定部１４１は、その後、処理をステップＳ１４９に進める。
【０１０７】
［ステップＳ１４６］文字サイズ決定部１４１は、式（１）を用いて計算したフォントサイズを、配列ｆ［ｉ］に設定する。このとき、ｉ番目の行のカレント行の中心行Ｃからの距離ｘは「ｉ−Ｃ」となる。従って文字サイズ決定部１４１は、以下の処理を行うこととなる。
ｆ［ｉ］＝ｂ−（ｄ×（ｉ−Ｃ）2）    （３）
なお文字サイズ決定部１４１は、式（３）の右辺の値の小数点以下は切り捨てる。
【０１０８】
［ステップＳ１４７］文字サイズ決定部１４１は、ｆ［ｉ］の値が最小フォントサイズｃ未満（ｆ［ｉ］＜ｃ）か否かを判断する。文字サイズ決定部１４１は、最小フォントサイズ未満の場合、処理をステップＳ１４８に進める。また文字サイズ決定部１４１は、最小フォントサイズ以上であれば、処理をステップＳ１４９に進める。
【０１０９】
［ステップＳ１４８］文字サイズ決定部１４１は、配列ｆ［ｉ］に最小フォントサイズｃを設定する。
［ステップＳ１４９］文字サイズ決定部１４１は、変数ｉをインクリメントすると行数ｈを超える場合、ステップＳ１４４〜Ｓ１４８の繰り返し処理を終了し、処理をステップＳ１５０に進める。
【０１１０】
［ステップＳ１５０］文字サイズ決定部１４１は、初期表示のコメントの行ごとのフォントサイズを、配列ｆ［ｉ］に示される値に決定する。
このようにして、カレント行が移動した場合には、コメントの行ごとの文字サイズが再計算される。コメントの行ごとの文字サイズが決定すると、吹き出し描画部１４２が、文字サイズに合わせた吹き出し枠を描画する。
【０１１１】
図１６は、吹き出し枠の描画方法の一例を示す図である。吹き出し描画部１４２は、まず行ごとの幅を算出する。幅は、以下の式で表される。
幅＝フォントサイズ×ａ＋マージン幅      （４）
マージン幅は、予め設定した値である。次に吹き出し描画部１４２は、各行の左右両側に、制御点５２を設定する。例えば吹き出し描画部１４２は、コメントの文字列の配置の指定が中央寄せ（センタリング）の場合、中心ライン５１から左右に、算出した幅の半分の距離だけ離れた位置に制御点５２を設定する。
【０１１２】
このとき吹き出し描画部１４２は、先頭の行の上にも制御点５２ａを設定する。例えば吹き出し描画部１４２は、先頭の行の上の制御点５２ａを、先頭行の左右の制御点よりも中心ライン５１に寄せた位置に設定する。同様に吹き出し描画部１４２は、最後尾の行の下にも制御点５２ｂを設定する。例えば吹き出し描画部１４２は、最後尾の行の下の制御点５２ｂを、最後尾の行の左右の制御点よりも中心ライン５１に寄せた位置に設定する。
【０１１３】
次に吹き出し描画部１４２は、設定した制御点５２間を接続する接続線５３を描画する。そして吹き出し描画部１４２は、最後に、チャットボットまたはユーザを示すアイコンを指し示す三角形を描画する。
【０１１４】
なお吹き出し枠の形状は、吹き出し内の文字の配置方法の指定によっても変わる。
図１７は、吹き出し枠の形状の一例を示す図である。文字列の配置方法としては、例えば左寄せ、センタリング、右寄せがある。図１７には、配置の種別ごとに、カレント行が先頭の数行の場合、カレント行が中程の行の場合、カレント行が末尾の数行の場合の吹き出し枠形状を、代表的に示している。
【０１１５】
左寄せの配置の吹き出し枠形状は、例えば左側からの吹き出しに用いられる。右寄せの配置の吹き出し枠形状は、例えば右側からの吹き出しに用いられる。センタリングの配置の吹き出し枠形状は、いずれの方向からの吹き出しにも用いることができる。
【０１１６】
次に、吹き出し描画処理の手順について、フローチャートを参照して詳細に説明する。
図１８は、吹き出し描画処理の手順を示すフローチャート（１／３）である。以下、図１８に示す処理をステップ番号に沿って説明する。
【０１１７】
［ステップＳ１６１］吹き出し描画部１４２は、表示幅配列ｗ［ｉ］（ｉ＝０，２，・・・，ｈ，ｈ＋１）を生成する。
［ステップＳ１６２］吹き出し描画部１４２は、計算済みのフォントサイズ配列ｆ［ｉ］（ｉ＝１，２，・・・ｈ）を取得する。
【０１１８】
［ステップＳ１６３］吹き出し描画部１４２は、変数ｉを１からｈまでインクリメント（ｉ＝ｉ＋１）しながら、ステップＳ１６４の吹き出し幅計算処理を繰り返す。
［ステップＳ１６４］吹き出し描画部１４２は、行番号ｉの行の位置における吹き出し枠の幅ｗ［ｉ］を計算する。マージン幅をｍ（ｍは正の実数）とすると、吹き出し枠の幅ｗ［ｉ］の計算式は、以下の通りとなる。
ｗ［ｉ］＝ｆ［ｉ］×ａ＋ｍ    （５）
［ステップＳ１６５］吹き出し描画部１４２は、変数ｉをインクリメントすると行数ｈを超える場合、ステップＳ１６４の繰り返し処理を終了し、処理をステップＳ１６６に進める。
【０１１９】
［ステップＳ１６６］吹き出し描画部１４２は、吹き出し枠の上辺の幅を要素番号「０」の表示用配列ｗ［０］に設定し、下辺の幅を要素番号「ｈ＋１」の表示用配列ｗ［ｈ＋１］に設定する。例えば吹き出し描画部１４２は、予め設定してある絞り幅ｎ（ｎは正の実数）を用いて、「ｗ［０］＝ｗ［１］−ｎ」、「ｗ［ｈ＋１］＝ｗ［ｈ］−ｎ」とする。
【０１２０】
［ステップＳ１６７］吹き出し描画部１４２は、吹き出しに表示するコメントの文字の配置の指定を取得する。例えばスマートフォン１００を使用しているユーザが投稿したコメントに対しては、右寄せまたはセンタリングの配置が指定される。またスマートフォン１００を使用しているユーザ以外のユーザ（チャットボットを含む）が投稿したコメントに対しては、左寄せまたはセンタリングの配置が指定される。
【０１２１】
［ステップＳ１６８］吹き出し描画部１４２は、配置の指定が右寄せか否かを判断する。吹き出し描画部１４２は、右寄せであれば処理をステップＳ１６９に進める。また吹き出し描画部１４２は、右寄せでなければ、処理をステップＳ１７０に進める。
【０１２２】
［ステップＳ１６９］吹き出し描画部１４２は、基準座標Ｘに、右寄せ時のｘ軸の基準座標値Ｘｒを設定する。基準座標値Ｘｒは、吹き出し枠の右側の辺の位置を示している。吹き出し描画部１４２は、その後、処理をステップＳ１８１（図１９参照）に進める。
【０１２３】
［ステップＳ１７０］吹き出し描画部１４２は、配置の指定が左寄せか否かを判断する。吹き出し描画部１４２は、左寄せであれば処理をステップＳ１７１に進める。また吹き出し描画部１４２は、左寄せでなければ、処理をステップＳ１７２に進める。
【０１２４】
［ステップＳ１７１］吹き出し描画部１４２は、基準座標Ｘに、右寄せ時のｘ軸の基準座標値Ｘｌを設定する。基準座標値Ｘｌは、吹き出し枠の左側の辺の位置を示している。吹き出し描画部１４２は、その後、処理をステップＳ１８１に進める。
【０１２５】
［ステップＳ１７２］吹き出し描画部１４２は、基準座標Ｘに、センタリング時のｘ軸の基準座標値Ｘｍを設定する。基準座標値Ｘｍは、吹き出し枠の中心ライン５１（図１６参照）の位置を示している。吹き出し描画部１４２は、その後、処理をステップＳ１８１に進める。
【０１２６】
図１９は、吹き出し描画処理の手順を示すフローチャート（２／３）である。以下、図１９に示す処理をステップ番号に沿って説明する。
［ステップＳ１８１］吹き出し描画部１４２は、左側座標配列Ｌ［ｉ］［ｊ］と右側座標配列Ｒ［ｉ］［ｊ］を生成する。これらの配列は２次元配列であり、変数ｉは「ｉ＝０，１，２，・・・，ｈ，ｈ＋１」の値を採り、変数ｊは「ｘ，ｙ」の値を採る。
【０１２７】
［ステップＳ１８２］吹き出し描画部１４２は、変数ｉを０からｈ＋１までインクリメント（ｉ＝ｉ＋１）しながら、ステップＳ１８３〜Ｓ１８４の吹き出し多角形座標処理を繰り返す。
【０１２８】
［ステップＳ１８３］吹き出し描画部１４２は、左側の上からｉ番目の制御点の座標を算出し、左側座標配列Ｌ［ｉ］［ｊ］に設定する。例えば吹き出し描画部１４２は、基準座標Ｘと左シフト幅ＳＬを用いて、以下の処理を行う。
Ｌ［ｉ］［ｘ，ｙ］＝［Ｘ−ＳＬ，Ｌ［ｉ−１］［ｙ］＋ｆ［ｉ］］    （６）
これは、左側の上からｉ番目の制御点のｘ座標が「Ｘ−ＳＬ」、ｙ座標が「Ｌ［ｉ−１］［ｙ］＋ｆ［ｉ］」であることを示している。Ｌ［ｉ−１］［ｙ］は、上からｉ−１番目の制御点のｙ座標である。吹き出し描画部１４２は、ｉ＝０の場合、例えばＬ［ｉ−１］［ｙ］＝Ｙとする。Ｙは、吹き出し表示領域の上端のｙ座標である。また吹き出し描画部１４２は、ｆ（０）＝０、ｆ（ｈ＋１）＝ｆ（ｈ）とする。
【０１２９】
［ステップＳ１８４］吹き出し描画部１４２は、右側の上からｉ番目の制御点の座標を算出し、右側座標配列Ｒ［ｉ］［ｊ］に設定する。例えば吹き出し描画部１４２は、基準座標Ｘと右シフト幅ＳＲを用いて、以下の処理を行う。
Ｒ［ｉ］［ｘ，ｙ］＝［Ｘ＋ＳＲ，Ｌ［ｉ−１］［ｙ］＋ｆ［ｉ］］    （７）
これは、右側の上からｉ番目の制御点のｘ座標が「Ｘ＋ＳＲ」、ｙ座標が「Ｌ［ｉ−１］［ｙ］＋ｆ［ｉ］」であることを示している。
【０１３０】
［ステップＳ１８５］吹き出し描画部１４２は、変数ｉをインクリメントするとｈ＋１を超える場合、ステップＳ１８３〜Ｓ１８４の繰り返し処理を終了し、処理をステップＳ１８６に進める。
【０１３１】
［ステップＳ１８６］吹き出し描画部１４２は、左側座標配列と右側座標配列とを１つの配列（多角形座標配列）に結合する。
［ステップＳ１８７］吹き出し描画部１４２は、多角形座標配列に示される隣接する制御点同士を接続する線（吹き出し枠）を描画する。吹き出し描画部１４２は、その後、処理をステップＳ１９１に進める（図２０参照）。
【０１３２】
図２０は、吹き出し描画処理の手順を示すフローチャート（３／３）である。以下、図２０に示す処理をステップ番号に沿って説明する。
［ステップＳ１９１］吹き出し描画部１４２は、描画した吹き出し枠内にテキスト描画領域を作成する。
【０１３３】
［ステップＳ１９２］吹き出し描画部１４２は、コメントの投稿者に応じて、吹き出し内のコメントの配置（左寄せ／センタリング／右寄せ）を設定する。
［ステップＳ１９３］吹き出し描画部１４２は、変数ｉを１からｈまでインクリメント（ｉ＝ｉ＋１）しながら、ステップＳ１９４のコメント描画処理を繰り返す。
【０１３４】
［ステップＳ１９４］吹き出し描画部１４２は、コメントのｉ行目をフォントサイズｆ［ｉ］で描画する。
［ステップＳ１９５］吹き出し描画部１４２は、変数ｉをインクリメントするとｈを超える場合、ステップＳ１９４の繰り返し処理を終了すると共に、吹き出し描画処理を終了する。
【０１３５】
このようにして、長文のコメントであっても、所定の範囲内の領域に全文を表示することができる。その結果、会話の流れが分かりやすく、かつ長文のコメントの全体を確認可能なチャット画面が表示される。
【０１３６】
図２１は、チャット画面の表示例を示す図である。スマートフォン１００の画面１６０には、例えばチャットボットの投稿であることを示すチャットボットアイコン１６１，１６２と、スマートフォン１００を使用しているユーザの投稿であることを示すユーザアイコン１６３，１６４が表示されている。チャットボットアイコン１６１，１６２に対応付けられた吹き出し１６６，１６８のコメントは、左寄せの配置である。ユーザアイコン１６３，１６４に対応付けられた吹き出し１６５，１６７のコメントは、文章の行数が２行のため、フォントサイズと吹き出し形状の制御は不要であることから、通常の吹き出し形状となっているが、文章は右寄せとなっている。もしこの文章が長文であった場合、ユーザの投稿したコメントは右寄せの吹き出し形状となる。
【０１３７】
例えば吹き出し１６６のコメントは長文であり、カレント行以外の行の文字は、カレント行よりも小さく表示されている。小さく表示された文字の中に、強調された文字が含まれる場合、スマートフォン１００は、その文字を指し示す矢印と、強調表示マーク１７０を表示することができる。強調表示マーク１７０が表示されていることで、ユーザは、小さく表示された文字の中に、重要な記述が含まれていることを容易に認識できる。
【０１３８】
画面１６０の下には、投稿用のテキストボックス１６９が表示されている。ユーザがテキストボックス１６９にコメントを入力し、入力内容の確定操作を行うと、スマートフォン１００は、入力されたコメントをチャットシステムに新たに投稿する。
【０１３９】
〔その他の実施の形態〕
第２の実施の形態では、フリックまたはスワイプでカレント行を移動させているが、他の方法でカレント行を移動させることもできる。例えばユーザが吹き出し内をタップしたとき、スマートフォン１００は、タップされた位置の行をカレント行の中心行とするように、カレント行を移動させてもよい。
【０１４０】
また第２の実施の形態に示した吹き出しの表示方法は、スマートフォン１００に限らず、タブレット端末またはパーソナルコンピュータでも実施することができる。
さらに第２の実施の形態に示した吹き出しの表示方法は、チャット以外のソフトウェアにおける吹き出しの表示にも適用可能である。
【０１４１】
また第２の実施の形態では、吹き出し内にコメントを横書きで表示しているが、スマートフォン１００は、コメントを縦書きで表示することもできる。スマートフォン１００は、コメントを縦書きで表示した場合、吹き出し枠の縦幅を、カレント行の位置に応じて制御する。
【０１４２】
以上、実施の形態を例示したが、実施の形態で示した各部の構成は同様の機能を有する他のものに置換することができる。また、他の任意の構成物や工程が付加されてもよい。さらに、前述した実施の形態のうちの任意の２以上の構成（特徴）を組み合わせたものであってもよい。
【符号の説明】
【０１４３】
１ａ，１ｂ，・・・  文章データ
２，３，４  吹き出し
２ａ，３ａ，４ａ  表示枠
２ｂ，３ｂ，４ｂ  表示態様
２ｃ，３ｃ，４ｃ  注目箇所
１０  表示制御装置
１１  記憶部
１２  処理部
１３  画面
【図１】
2020197981.tif 000003
【図２】
2020197981.tif 000004
【図３】
2020197981.tif 000005
【図４】
2020197981.tif 000006
【図５】
2020197981.tif 000007
【図６】
2020197981.tif 000008
【図７】
2020197981.tif 000009
【図８】
2020197981.tif 000010
【図９】
2020197981.tif 000011
【図１０】
2020197981.tif 000012
【図１１】
2020197981.tif 000013
【図１２】
2020197981.tif 000014
【図１３】
2020197981.tif 000015
【図１４】
2020197981.tif 000016
【図１５】
2020197981.tif 000017
【図１６】
2020197981.tif 000018
【図１７】
2020197981.tif 000019
【図１８】
2020197981.tif 000020
【図１９】
2020197981.tif 000021
【図２０】
2020197981.tif 000022
【図２１】
2020197981.tif 000023