【改良版】仕事、勉強のスイッチを入れるカウントダウン&経過時間計測

日常の話

先日、仕事や勉強のやる気のスイッチを入れるカウント動画をアップしましたが、改良して経過時間を測定できるようにしました。
勉強時間や仕事の作業時間を記録している人の役に立つツールになっています。

やる気スイッチ動画&時間計測

スタートボタンを押せば動画が再生されるとともに作業時間が計測されます。(動画のカウントダウン後に経過時間を計測開始します。)

経過時間 0分 0秒

使い方

  • 「スタート」ボタンをクリックすると、カウントダウンが始まり、カウントダウン終了から作業時間の計測をスタートします。
  • 「ストップ」ボタンをクリックしてタイマーを停止します。
  • 停止中に「再開する」ボタンをクリックすると、再び計測を開始できます。

作業時間を効果的に管理しよう

カウントダウンは、気持ちを切り替させてくれて、集中力を高めてくれます。
あわせて作業時間を計測することで、効率的な勉強や仕事をサポートする便利なツールです。

ぜひ使ってみて、時間管理と作業効率の向上に役立ててみてください。

作り方の備忘

ストップフォッチやボタンでMP4を再生する詳細は、カスタムScriptにJavascriptを貼り付けているのでChromeのF12の機能で閲覧可能だと思います。

作り方はざっと以下のような感じです。

  • Windowsで無料で使えるCripChampで動画を作成する。
  • ワードプレスの機能で動画を埋め込む。ワードプレスのブロックの設定で「インラインで再生」をオンにしておく。
  • カスタムhtmlブロックで、「スタート」「ストップ」のボタンと経過時間表示を設置する。
  • ワードプレスのカスタムCSSでボタンのサイズや色を設定する。
  • 動画のブロックにはワードプレスのブロックの高度な設定で追加CSSクラスを設定しておく。
  • Javascriptで動画要素を指定するときはワードプレスでは動画ブロックの入れ子で子要素としてMP4の動画があるので、指定するときは追加CSSクラスの要素の子要素として指定する。
  • 計測のスタートは動画の長さに合わせてマイナス4秒からスタートさせ経過時間がマイナスの間は0分0秒で表示させる。
  • ストップウォッチのJavascript部分はChatGPTに書いてもらった。
  • Javascriptで「スタート」ボタンで動画再生するには、MP4を指定した要素を変数videoに指定したら、「video.play()」で再生させることができる。

コメント

タイトルとURLをコピーしました