ターミナル(コンソール)でプログレスバーを表示するには？

Question

node.js (v4.3) でコンソールにプログレスバー(処理の進捗状況)のような情報を表示させたいと考えています。ご質問ですが、長い文字列でも表示させることは可能でしょうか？

質問内容(やりたいこと)

長いメッセージも、進捗のメッセージが行送りされずに表示したい。

できたこと

下記のtask_shortMessageように、短いメッセージであれば一行内で文字列が更新されて表示させる事ができました。

できないこと

しかし画面サイズの狭いコンソールでは、task_longMessageのように長いメッセージを表示させた時にメッセージが一行内で更新されず、行送りされて次々に表示されてしまいます。

var main = () => {
    Promise.resolve({message: "進捗：" , count: 0 })
    .then(task_shortMessage)
    .then(task_shortMessage)
    .then(task_shortMessage)
    .then(task_shortMessage)
    .then(task_shortMessage)
    .then(task_longMessage)
    .then(task_longMessage)
    .then(task_longMessage)
    .then(task_longMessage)
    .then(task_longMessage)
}

const LONG_MESSAGE = "LongCharacterLongCharacterLongCharacterLongCharacter";

var task_shortMessage = (result) => {
  return new Promise( (resolve , reject) => {
    setTimeout( () => {
      process.stdout.write(result.message  + ++result.count  + "\r");
      resolve(result);
    }, 1000);
  });
}

var task_longMessage = (result) => {
  return new Promise( (resolve , reject) => {
    setTimeout( () => {
      process.stdout.write(result.message  + ++result.count  + LONG_MESSAGE + "\r");
      resolve(result);
    }, 1000);
  });
}

main();

Answer 1

readline.moveCursorを利用すれば解決できそうです。

const readline=require("readline");

function progress(par){
	const LONG_MESSAGE = "LongCharacterLongCharacterLongCharacterLongCharacterLongCharacterLongCharacterLongCharacterLongCharacter";

	const empty=" ".repeat(10);
	var gauge=("=".repeat(par)+empty).slice(0,10);
	process.stdout.write(`\r進捗:[${gauge}]:${LONG_MESSAGE}`);
}

const g=(function*(){
	for(let i=0;i<=10;i++){
		yield setTimeout(()=>g.next(),200);
		progress(i);
		readline.moveCursor(process.stdout,0,-1);
	}
})();
g.next();

Comments

[TEA]

教えていただきありがとうございました！サンプルコードも分かりやすく大変参考になりました。

readline.moveCursor(process.stdout,0,-1);の「-1」は戻す行数を表している事が理解できました。

ユーザーの画面サイズによっては、メッセージが2行以上にわたって表示されるケースもあるかと思いますが、そういったケースでは「-1」の部分を「-2」などにに変更することになるかと思います。

メッセージの表示によって改行されてしまった行数を、何かの方法で取得する事は難しいでしょうか？

Answer 2

その改行する目安なわけですが、コンソールには何桁目で必ず改行するという限界値が決められているので、それを各ユーザーから取得すれば行数は計算できると思います。
勿論、出力する値はこちらにあるわけなので、

floor(出力文字数(出力バイト数(幅))/行最大文字数)

で計算するといいのかなぁと考えました。

そして、肝心の行最大文字数の取得方法なんですが、これはNode.jsからの方法は分からなかったです。
代替案ですが、Node.jsは一応、コマンドプロンプトとかターミナルをchild_process.exec/execSyncから呼べますので、各環境に合わせてコマンドを叩けば取得できるのではないかと思います。

当方はWindows環境なので、Linux/Unixは分かりませんけど、Windowsではなんとか取得できたので、ソースを載せておきます。
色々弄って遊んでいたら少々プログラムが大きくなってしまいましたが、そこは目をつぶってください。

const readline=require("readline");
const exec=require("child_process").execSync;
const rl=readline.createInterface(process.stdin,process.stdout);

class Progress{
	constructor(width,parMax){
		//最大の列数
		this.columns=exec("mode")	//コマンドプロンプトからmodeを呼び出して、
			.toString()				//文字列として取得して、
			.split(/\r\n/)			//改行で分割し、
			.filter(val=>{			//文字化けした" 桁数: "(=" ����: ")を検索して、
				if(val.replace(" ����: ","")!=val) return val;
			})[0].replace(" ����: ","")|0	//無駄な文字を消して整数に変換。

		//進捗度
		this.par=0;
		//目標進捗度
		this.parMax=parMax;
		//プログレスバーの長さ
		this.width=width;
	}

	//プログレスバーの更新
	view(message){
		const parcent=this.par/this.parMax;
		const widthNow=Math.floor(this.width*parcent);

		const gauge=(">".repeat(widthNow)+" ".repeat(this.width-widthNow));
		const output=`#[${gauge}]#(${(parcent*100).toFixed(1)}%<-${this.par}/${this.parMax})`;

		//列数と文字数(半角のみ)から実際の行数を計算
		const rows=Math.floor(message.length/this.columns)+2;
		console.log(output);

		//現在位置より下を消去する
		readline.clearScreenDown(process.stdout);

		console.log(message);

		//行数分上に移動。
		readline.moveCursor(process.stdout,0,-rows);

		this.par++;
	}

	//プログレスバーの完了
	done(lastMessage){
		//lastMessageの左を埋める文字数
		const sideLen=Math.floor((this.width-lastMessage.length)/2);

		var gauge="=".repeat(sideLen)+lastMessage
		gauge+="=".repeat(this.width-gauge.length)
		const output=`#[${gauge}]#(100%<-${this.parMax}/${this.parMax})`;

		//最大列数に合うように空白埋めして表示
		process.stdout.write(output+" ".repeat(this.columns-output.length)+"\r");

		//現在位置より下を消去する
		readline.clearScreenDown(process.stdout);
	}
}

const g=(function*(){
	const firstMsg="FirstStep FirstStep FirstStep FirstStep FirstStep FirstStep FirstStep FirstStep FirstStep FirstStep FirstStep FirstStep FirstStep FirstStep FirstStep FirstStep FirstStep FirstStep FirstStep FirstStep FirstStep FirstStep";
	const secondMsg="SecondStep SecondStep SecondStep SecondStep SecondStep SecondStep SecondStep SecondStep SecondStep SecondStep SecondStep SecondStep SecondStep SecondStep SecondStep SecondStep SecondStep SecondStep SecondStep SecondStep SecondStep SecondStep SecondStep SecondStep SecondStep SecondStep SecondStep SecondStep SecondStep SecondStep SecondStep SecondStep SecondStep SecondStep";
	const thirdMsg="ThirdStep ThirdStep ThirdStep ThirdStep";
	console.log("START!");

	const width=55;
	const works=270;
	const prg=new Progress(width,works);

	for(let i=0;i<=works;i++){
		yield setTimeout(()=>g.next(),90);
		if(i<40){
			prg.view(firstMsg);
		}
		else if(i<90){
			prg.view(secondMsg);
		}
		else{
			prg.view(thirdMsg);
		}
	}
	prg.done(">>  Done!  <<");
	console.log("終了しました!");
	rl.once("line",process.exit);
})();
g.next();

追記:

> process.stdout
WriteStream {
  ...,
  columns: 80,
  rows: 25,
  ...,
  destroy: [Function] }

> process.stdout.columns
80

process.stdoutを叩いてみたらその中にcolumns入ってました。
これで置換すればどのプラットフォームでも桁数を取得できるのではないでしょうか。

Comments

[TEA]

貴重なお時間を割いて頂き、詳細に教えていだき本当にありがとうございました。目からウロコといいますか、とても勉強になるアプローチで参考になりました！columnsがあるのですね。

また後で教えていただいた方法を試してみたいと思いますが、まずはベストアンサーにさせていただきました。本当にありがとうございます！