Unityのinputfieldで改行後に改行する前の文章も表示させておく方法

Question

unityでInputFieldに入力した文章をログとしてコンソールに表示されるプログラムを作りました。

このInputFieldに入力した文章をログに表示する前のInputFieldに文章を入力している段階で、改行を行うとInputFieldが次の行にいってしまい、改行前に打っていた文章が見えなくなってしまいます。これを表示したまま次の行にうつる方法がわかる方、どうか教えてください。初心者なので詳しく教えてくださると非常に助かります。

使い方としては、InputFieldのOn End Edit(string)に以下のスクリプトを入れ、ボタンを指定することで、実行後、指定したボタンを押すとInputFieldに入力してある文章がコンソールにログとして出力されます。InputFieldのLine typeは、Multi Line Newlineを使っています。

コードなどは主にこちらのサイトを参考にしました。
https://xr-hub.com/archives/11035

以下に私の現段階のコードを示します。回答よろしくお願いします。

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

public class InputFieldManager : MonoBehaviour
{
//InputFieldを格納するための変数
InputField inputField;

// Start is called before the first frame update
void Start()
{
    //InputFieldコンポーネントを取得
    inputField = GameObject.Find("InputField").GetComponent<InputField>();
}


//入力された名前情報を読み取ってコンソールに出力する関数
public void GetInputName()
{
    //InputFieldからテキスト情報を取得する
    string name = inputField.text;
    Debug.Log(name);

    //入力フォームのテキストを空にする
    inputField.text = "";
    inputField.ActivateInputField();
}

}

Answer 1

なんかもっとスムーズなやり方ありそうですが・・・
テキストの行数が得られれば、それに応じたサイズに変更するというアプローチでも良いのかなと思って試してみました。

行数が1ならheightは30になり
行数が2ならheightは46.5になりと、行数基準で高さが変動します。

なんで0.55をかけているかというと、30ずつ高さが増えるとスカスカになってしまったので少し補正かけるために仮で置いてます。

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

public class Test0630 : MonoBehaviour
{

    InputField _if;
    RectTransform _if_Rect;
    float baseHeight;

    void Start()
    {
        _if = GetComponent<InputField>();
        _if_Rect = _if.GetComponent<RectTransform>();

        baseHeight = _if_Rect.sizeDelta.y; // 初期のheightを基準とする。デフォルトなら30のはず
    }

    void Update()
    {
        // まずテキストの行数を得る
        var _currentLineCount = GetLine(_if.text);

        // フィールドの高さを決める
        // 0.55f については行数をいい感じに見せるための適当な係数。都度調整
        var _currentFieldHegiht = baseHeight + ((baseHeight * 0.55f) * (_currentLineCount - 1));

        // フィールドのサイズを変更する
        // width / height についてはsizeDeltaで変更できる
        _if_Rect.sizeDelta = new Vector2(_if_Rect.sizeDelta.x, _currentFieldHegiht);
    }

    // テキストを改行コードで分割し、行数を返す
    int GetLine(string str) {
        var lineCount = str.Split('\n');
        return lineCount.Length;
    }
}

Comments

[niconico.smile]

ご回答ありがとうございます！！また、コードまで考えてくださり、誠にありがとうございます。本当に初歩的な質問で申し訳ないのですが、このコードはどうやったら実行中に使用することができますか？[test0630]という新しいスクリプトをVisualStudio2019で作り、「問題は見つかりませんでした」と表示されており、スクリプトを保存した状態まで来ています。ここからこのコードを使用する流れを教えてください。お手数をおかけしますがよろしくお願いいたします。

[hogefugapiyo]

これは直接InputFieldコンポーネントを参照しているので、InputFieldに直接スクリプトをアタッチしてください

[niconico.smile]

ご返信くださりまして誠にありがとうございます！！使用していたInputFieldにアタッチしてみて、実行を押し、エンターキーを入力して、改行を行ってみた結果、無事、改行後にも改行前の文章を見ることが出来ました。コンソールへの出力も無事できました。ほんとにすごいです。ありがとうございます。0.55という値も絶妙でした。

もう一つだけ相談なんですが、先ほど教えていただきましたコードに付け足しの機能として、InputFieldの横幅いっぱいに文字を入力して、InputFieldの1行で入力できる横幅分の文字数を超えて、次の行(2行目)にいった場合にも改行前の文章を表示しておくという機能を付け足すことは可能でしょうか？お手数をおかけしますが何卒よろしくお願いいたします。

[hogefugapiyo]

折返しになる文字数が分かれば対応できると思うんですが、これちょっとむずかしい問題でフォントが等幅じゃない場合、文字の種類によって折返しになるまでの文字数が変動しちゃうんですよね。
たとえばaaaaと入力するのと、llllと入力するのだと折り返しになるまでの文字数が違いますよね。

もし、フォントが等幅なら１文字あたりの横幅が共通なので話が早くて
１行あたり何文字まで入力できるかを決めてあげて、その文字数より入力文字数が多ければ高さを増やすことで全文が見えるようになると思います

私の知らない解決方法がある可能性も十分にあるので
これに関しては改めて質問を立てていただいたほうが他の方から有益な回答が得られる可能性があるかと思います。

[niconico.smile]

ご返信ありがとうございます。何度も対応していただいて本当に助かります。
入力する文字によって折り返しされる文字数が異なることにより、この問題が起こっていると思うのですが、以下のURL(以下のURLではInputFieldではなくtext形式？になっているかもしれません。)のように1行のInputFieldの中に入力できる文字数を事前に指定しておくというのはどうでしょうか？(○文字以上を超えたら自動で改行されるようにする)そうすれば、折り返しになる文字数がわかるのではないかと考えました。

この時に、日本語・全角英数字の場合と半角英数字の場合で同じ文字数で改行されるように設定した場合、設定した文字数上限いっぱいの文字を入力した際の一行全体の横幅が日本語・全角英数字の場合と半角英数字の場合では大きく異なるということが考えられます。そのため、入力している文字が日本語・全角英数字の時の場合と半角英数字の時の場合とその他(日本語・全角英数字と半角英数字が1行の中に混合で存在する時の場合)で、事前に自動で改行されるよう指定する上限の文字数を一行の横幅がちょうど良いバランスなるように変えられるようにできればいいなと思っています。(入力が日本語・全角英数字の時と半角英数字の時で場合分けするのが難しい場合は、同じ文字数を上限としても問題ありません。理由としては、1行に入力できる文字数の上限をあまり大きくしなければそこまで差異は生まれないと考えられるためです。または、半角英数字は2.1文字分(任意の数)くらいで日本語・全角英数字の1文字分だと考えられるため、半角英数字が入力された時は、2.1文字で日本語・全角英数字の1文字分の横幅としてカウントする(この時、半角英数字の文字数に合わせて小数点以下は切り上げとする。[例:半角英数字が4文字だとした場合、4(文字)÷2.1(日本語・全角英数字の一文字分の横幅を半角英数字の文字数の横幅に変換した値)＝1.9047＝2文字(小数点以下を切り上げ)とし、日本語・全角英数字の2文字分として上限までのカウントに加える］)をして半角英数字の横幅を日本語・全角英数字分の横幅に変換して、半角を全角としてカウントできるようにプログラムを組めればいいかなと思っています。この場合、半角英数字が奇数の場合であっても一番近い偶数に切り上げで合わせられるのではないか[半角英数字が3文字の場合、3(文字)÷2.1(日本語・全角英数字の一文字分の横幅を半角英数字の文字数の横幅に変換した値)＝1.4285＝2文字(小数点以下を切り上げ)となり、日本語・全角英数字2文字分の横幅として上限までのカウントに加える］と考えられるため、問題なく使えそうです。)

https://teratail.com/questions/249814

この点を踏まえてもコードの実現は難しいでしょうか？難しいようであれば、考え込みすぎずにおっしゃっていただけましたら回答者様のご助言のように質問を立て直してみたいと思います。

何度もお手数をおかけしてしまい、本当に申し訳ございません。何卒よろしくお願いいたします。

Answer 2

InputFieldは、常に入力カーソル(文字を入力するときに出てくる縦棒のこと)が表示されるように動きますので、縦幅が狭い(2行を表示できない)と、2行目に移ったときに1行目が表示されなくなります。
InputFieldのRect TransformでHeightの値を大きくすればよいのではないでしょうか。

＜追記＞

https://kan-kikuchi.hatenablog.com/entry/Text_Preferred

こちらで紹介されている「text.preferredHeight」を使えば出来そうだと思います。
これを使うとテキストを全て表示するために必要な高さ(Widthもあります)を出してくれます。
かなり力技ですが、処理が重くならない場所ならあまり気にならないと思います。
が、滅茶苦茶なので、こんな方法もあるんだ、程度にお願いします。
※私は、途中に書いている、InputFieldだと必要な縦幅がちゃんと計測できない理由もわかっておりません。

using UnityEngine;
using UnityEngine.UI;

public class InputFieldManager : MonoBehaviour
{
	//テキストの高さの補正値(任意)
	[SerializeField] private float TextHeightCorrection;

	//InputFieldを格納するための変数など
	InputField inputField;
	RectTransform inputRect;
	Text text;

	// Start is called before the first frame update
	void Start()
	{
		//InputFieldコンポーネントを取得
		inputField = GameObject.Find("InputField").GetComponent<InputField>();
		inputRect = inputField.GetComponent<RectTransform>();

		//InputFieldのテキストを取得
		text = inputField.textComponent;
	}

	//入力された名前情報を読み取ってコンソールに出力する関数
	public void GetInputName()
	{
		//InputFieldからテキスト情報を取得する
		string name = inputField.text;
		Debug.Log(name);

		//入力フォームのテキストを空にする
		inputField.text = "";
		inputField.ActivateInputField();
	}

//InputFieldコンポーネントの「On Value Changed」に設定
	public void OnEditInputField()
	{
		//一旦、必要サイズ計測の為に大きくする
		//InputFieldのサイズが小さいと必要な縦幅がちゃんと出されないみたいです
		inputRect.sizeDelta = new Vector2(inputRect.sizeDelta.x, 1000);

		//1行以下の場合(30は初期値)
		if (text.preferredHeight < 30)
		{
			inputRect.sizeDelta = new Vector2(inputRect.sizeDelta.x, 30f);
		}
		//2行以上の場合
		else
		{
			inputRect.sizeDelta = new Vector2(inputRect.sizeDelta.x, text.preferredHeight + TextHeightCorrection);
		}
	}
}

一応これで動きました。

Comments

[niconico.smile]

ご回答ありがとうございます！！
InputFieldのRect TransformでHeightの値を変えることで縦幅をいじれること知りませんでした！ありがとうございます！私が行いたいことに使えそうです。
そこでなんですが、InputFieldへの入力に、もし改行が追加された場合、または、設定してあるInputFieldの横幅を越えて2行になってしまう場合、初期値のHeight値[初期値:30]の分が現在のHeight値に足される、つまり、+30されるといった入力に合わせてテキストの縦幅が可変するコードの書き方分かりませんか？2行にして幅を大きくした後に文字を削除して1行にしたら幅がその分戻るようにしてほしいのと、ログに一度出力したら大きくなっていた分のHeightは初期のHeightに戻るようにしてほしいです。

[退会済みユーザー]

https://kan-kikuchi.hatenablog.com/entry/Text_Preferred

こちらで紹介されている「text.preferredHeight」を使えば出来そうだと思います。
これを使うとテキストを全て表示するために必要な高さ(Widthもあります)を出してくれます。
かなり力技ですが、処理が重くならない場所ならあまり気にならないと思います。
が、滅茶苦茶なので、こんな方法もあるんだ、程度にお願いします。
※私は、途中に書いている、InputFieldだと必要な縦幅がちゃんと計測できない理由もわかっておりません。
一応この方法で動きました。回答の方に追記として移動しておきます。

[niconico.smile]

コードの提示、そして、ご回答いただきまして、誠にありがとうございます。こちらのコードを使うとテキストを全て表示するために必要な高さ(Widthもある)を出してくれるということですが、それによって何ができるようになるか教えていただきたいです。このコードの使い方としては、InputFieldのOn End Edit(string)とInputFieldの「On Value Changed」に送っていただきましたスクリプトを入れ、(InputFieldのOn End Edit(string)にはGetInputName()を、InputFieldの「On Value Changed」 にはOnEditInputField()を入れている)ボタンを指定し、実行後、指定したボタンを押していますが、使い方はこれで合っていますでしょうか？現段階では、何が変化しているかがわかっていません。お手数をおかけしますがどこが変化したのかを教えていただきたいです。初歩的な質問で申し訳ございません。

現在、改行を入力したら改行前の文章を見ることには成功しています。しかし、inputFieldの横幅を超え、文字の折り返しにて次の行にうつった場合には改行前の文章が見えない状態になってしまっています。ReglSS様から教えていただきましたコードを用いれば、この状況下を変えることができるのでしょうか？お手数をおかけしますが私自身が初心者のため、教えていただけますと光栄です。何卒よろしくお願いいたします。

[退会済みユーザー]

いえいえ、説明不足でした。
使い方はそれで問題ないと思いますよ。
preferred.Heightを使用すると、テキストが全文を表示するのに必要な高さを算出してくれるので、その数値をInputFieldのRectTransformのHeightに代入すれば……という考えです。
このコードはInputFieldに入力された内容をもとに、InputField自体のサイズを変えているものです。
On Value Changedは半角入力の時は1文字打つごとに、全角入力の時は確定時に呼ばれます。
OnEditInputField()はInputFieldの高さを、テキストを全文表示するのに必要な高さに変更してくれますので、入力中に行数が変化しても縦幅はその時の行数にフィットすると思います。
追加したコードは入力を行わなければ見た目には何の変化も出ません。
こちらの環境では、改行を行った時も、横幅を越えて文字を入力したときも正常に高さが変更されました。
「2行にして幅を大きくした後に文字を削除して1行にしたら幅がその分戻るようにしてほしいのと、ログに一度出力したら大きくなっていた分のHeightは初期のHeightに戻るようにしてほしいです。」とのことでしたので、一応この機能は満たしているかな、と思います。
注意点は、日本語入力をしているときは、変換を確定してからでないと反映されません(これはどうにもならないと思います)