Googleスプレッドシートに表示させたサイドバーからGASを実行して処理をする場合、UI的にはナニもないので、実際動いているのかと止まっているのかわからない。
ちょっと思いついて、プログレスバーが表示できないかとググってみた。
ホントの進捗をリアルタイムに表示するのは、やっぱり大変そうだ。
でも、動いているのがわかるようにするだけなら意外と簡単そうに出来ることがわかった。
たとえば、
こんなページ。
で、作ってみたコードはこんな感じ。
<script>
// グローバル変数
var val; // プログレスバーの進捗値
var intervalID; // 一定間隔で処理を行うintervalのIDを保持
function moveCompletedProject() {
//
// @brief 開発済み案件を各グループの実績シートに移動する
// @note
// @param
// @date Sep ??, 2022
//..............................................................
// 50msおきにプログレスバーを更新する
val = 0;
intervalID = setInterval("updateProgress()", 50);
// GAS側に処理を依頼する
google.script.run
.withSuccessHandler(function(data) {
// ここはCallback関数
// プログレスバーの後始末（表示をクリアしてインターバルを解除）
document.getElementById("myProgress").value = 0;
clearInterval(intervalID);
if(data == 0) {
alert("開発済み案件はありませんでした。");
}
else {
alert(data + "件の開発済み案件を移動しました。");
}
})
// ここが実際のGAS側の関数
.moveCompletedProject();
}
function updateProgress() {
//
// @brief プログレスバーの進捗値を更新し、プログレスバーに反映させる
// @note
// @param
// @date Sep 30, 2022
//..............................................................
val += 1;
document.getElementById("myProgress").value = val;
document.getElementById("myProgress").innerText = "なんちゃって" + val + "%";
console.log("progress:", val, "%");
// 最大値まで達したら振り出しに戻る
if (val == 100) {
val = 0;
}
}
</script>
<body>
<div class="sidebar">
--ここは省略して --
<!-- プログレスバーを表示 -->
<div>
<progress id="myProgress" value="0" max="100">0%</progress>
</div>
</div>
</body>
--
