2025年6月5日　活動日誌

2025年6月5日(木)の活動日誌

開発

開発作業は特になし。

Webページ

カルーセルを追加することができました！！
https://www.lab-apps-forest.com/

色々と対応に時間がかかりましたが、XのAIツール「Grok」さんの
協力で実装することが出来ました。

手動変更時に自動変更開始を待機させる

手動変更してバナーを確認中に自動変更されるのを防ぐために
手動変更時に自動変更をストップし、一定時間待機させてから自動変更を再開
差せるように対応。
中々思った通りに動かずJavaScriptを試行錯誤修正していましたが、
chromeの開発ツールでコンソールを見ると
めっちゃエラーが出ていて、途中で処理が止まっていたようです。
久々に触るからといっても、エラー確認は初歩の初歩でしょ…。

// 自動スライドの再開（待機時間付き）
function resumeAutoPlay() {
   clearInterval( autoPlayId ); // 既存のインターバルをクリア
  if (timeoutId) {
    clearTimeout(timeoutId); // 既存のタイマーをクリア（重要！）
  }
  timeoutId = setTimeout(() => {
    autoPlay(); // 8秒後に自動スライドを再開
  }, 8000); // 8秒待機
}

最終的にはこんな形で自動変更の開始を待機させました。
setIntervalで一定間隔の処理を実施、setTimeoutで一定時間待機。
clearIntervalで一定間隔の時間のクリア、clearTimeoutで一定待機の時間をクリア。
なるほどね。

そもそも、非同期処理ならPromiseとかRxJSを使うべきなんだろうか。
とりあえず、大した処理の画面でもないのでこのままでもいいけど。

自動変更後の手動変更待機

次のバナーを見ようとボタンを押そうとした瞬間に、
自動変更でバナーが変更され、ちょうど見たかったバナーなのに
ボタンを押して更に次のバナーになってしまうのが嫌だったので、
自動変更後は1秒程度、手動変更不可にするようにしました。

実装内容としては、自動変更中かどうかのフラグを作って
自動変更後１秒後まではボタンクリック時にバナー移動をさせないような
制御をいれています。
下のナビゲーションでの移動は可能としています。

全然大したことじゃないですが、自分で動かして不満だった箇所を
自分の判断で勝手に修正できるのは、仕事の業務じゃできないよなぁと
思って少し楽しかったです。

明日の目標

Webページの拡充を引き続き実施予定。
過去作とかを掲載してコンテンツ数の水増しを図る。
トップページ用のイラストを作成とか。