あちき日常ブログ

一歩一歩着実に、より良い未来へ！

自分用のポモドーロ・タイマー作って作業効率爆上げ計画

やること

  • 構成画面の設計（完成イメージ図作成）
  • JavaScriptでタイマー部分実装
  • 素材探し
    • 背景用フリー画像（動画に落とすとき必要だから優先度：高）
    • フリー音源（動画編集時に差し込むから優先度：低）
    • やる気の出る名言（動画編集時に差し込むから優先度：低）
  • キャプチャして動画取得
  • 動画編集
  • YouTubeに投稿

構成画面の設計（完成イメージ図作成）

ポモドーロタイマーの構成画面設計
  • YouTubeで使われる動画について
  • 構成画面設計について（html・cssであれこれしてイメージ作成）
    • timer
      • 23分→3分→4分（作業→振り返り→休憩）
      • 10本の棒を星形に配置し、1セットごとに棒の色を塗っていく
        10セット頑張ったら星が出来上がって、願いが叶うみたいなコンセプト素敵そう
      • JavaScriptで実装できそう
    • state
      • 作業、振り返り、休憩のアイコンを作って、今どの時間帯かを表示したい
    • message
      • 作業state→モチベーションに繋がる格言がいいかな
      • 振り返りstate→振り返りのコツ・ポイントみたいのがいいかな
      • 休憩state→具体的におすすめのアクション6つくらい書こうかな

JavaScriptでタイマー部分を実装

進行状況に応じて星を描いていく部分の実装はかなり苦労しそう

→一旦シンプルなポモドーロタイマーを作って YouTubeに上げることを目標に進める。

→上記動画で今後の作業を効率化できるようならバージョン2として、星形を取り入れようと思う

課題

  • カウントダウンタイマーのアニメーション部分
    下記のような２倍未満の時間に変わる時、アニメーションが50％から始まる。。
    WORK(1分)→CHECK(2分)とか、CHECK(2分)→REST(3分とか)

動画取得

グリーンスクリーンにすれば、iMobieで背景透過できそう。
背景動画はフリー素材のカフェとかにしたい。

macでの画面キャプチャは「QuickTime Player」を使うようだ。

Mac で画面を収録する方法 - Apple サポート (日本)

素材探し

https://pixabay.com/ja/

商用利用可の質◎フリー素材が多数

背景動画も音源も見つけられた。