Web技術を使ってPDCAを回してみた

概要
Web技術を活用してPDCAを簡単に回す方法について（ネタ）。

はじめに

PDCAを回すのが大事だとよく言われるのだが、あれは回すのがなかなか手間がかかる。少なくとも昼寝する時間がなくなるぐらいには。

こうした手間がかかるものは、技術を使って楽に解決しよう。というわけで、Web技術、といってもそんな大仰なものではなく、CSSを使ってPDCAを回してみた。

実際に回してみたサンプルページはこちら

回すための方法

永遠に回り続けるPDCA
永遠に回り続けるPDCA

HTMLでは、回したいものに rotate クラスを付けておく。

<div class="rotate">P</div>
<div class="rotate">D</div>
<div class="rotate">C</div>
<div class="rotate">A</div>

CSSでは、rotate クラスに対して、回転のアニメーションを入れる。

.rotate {
    -webkit-animation: rotate-anim 2s;
    -webkit-animation-iteration-count: infinite;
    animation: rotate-anim 2s;
    animation-iteration-count: infinite;
}
@-webkit-keyframes rotate-anim {
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
}
@keyframes rotate-anim {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); } 
}

これで、このページをブラウザで開いているだけで、ひたすらPDCAを回し続けることができる。あとはのんびり昼寝しよう。

似たようなことを考えた人たち