めろたんのアレ

色々書いてくやつ

"PDCA"を簡単に高速に綺麗に回す方法

うぇ〜〜い

いろいろあったのに更新はなかったんや。

とりあえず今回は、Misoca Advent Calendar 2017 の4日目に参加していて完全に忘却していたのでヒイヒイいいながら書いています。

間に合え!!!

前回の記事はこれでした!

tech.misoca.jp

明日は、 merotan こと @renyamizuno_が「すごーい」何か書いてくれるそうです。楽しみです。

ヒェ...

PDCAを回す

今年を色々振り返ってやはり流行の廃れるスピードがスゴイなぁ(小並感)と思うのですが、今年流行ったものとしてハンドスピナーとかありましたね。

そのなかで、

togetter.com

こういうのがありまして、

今回はこれをウェブでやっていくぞ!!!!!

というやつです。

釣られた人は釣られたクマーして。

プロトタイプ

See the Pen めっちゃPDCAまわしてる by renyamizuno (@renyamizuno) on CodePen.

雑にね。

イメージこんな感じ。

で普通にやるだけだとつまらないので、Web Componentsをやってみる。

あ。ちょうどここに「イヌでもわかるWeb Components」っていう本があるぞ〜⤴

inutetraplus.booth.pm

(興味がある方はポチッとお願いします🙏)

と露骨な宣伝をはさみつつやっていきます。

やった。

PDCA Rotate

ここでみれる。

github.com

コードはここ。

回し方は簡単。

コードはたったの2行。

<link rel="import" href="./components/pdca-rotate.html">
<pdca-rotate rpm="30" rotate-direction="normal"></pdca-rotate>

これだけで最後まで回せます。

簡単!!!!!

rpmを上げることで高速で回せます。

高速!!!!!!

回し続けてもブレることはありません。

綺麗!!!!!!!!

すごい!!!!!!!!!

はい。

早すぎると止まったりしますね。

技術的な話

大したことはしていないのですが、 最初にも書いたとおり、Web Componentsの技術を使っています。

template要素を使ってテンプレートを作り、「回る」だけのコンポーネントを作ます。 components/rotate.htmlがそれです。

同様にPDCA Spinnerのテンプレートを作ります。 さっきのrotateを使い、「PDCA」の各文字の部分と全体を回します。 文字は読めるように、全体の回る向きと反対方向に回すようにしています。 この辺の回る向きとかはCSSCustom Propertyをつかって良い感じにしています。

PDCA Spinnerrpmとかrotate-directionを受け取れるようにして、簡単に回るスピードや向きを設定できるようにしました。

詳しくはコードをみてくれ〜〜〜⤴

ピュアなJSとCSSとHTMLで書いているので、 Web Packする必要も無いし、ビルドもする必要もないし、 ナウいブラウザならよしなに動く(動くとは言っていない)ので、ためしてくれ〜。

動かない場合は多分Chromeじゃないからだと思うので、

github.com

これを使えば良い感じになるぞ⤴

まとめ

  • Web Components最高。
  • PDCAは簡単に高速に綺麗に回せる。
    • しかしWeb上に限る。
  • アドベントカレンダーは前々からちゃんと書いておこうな。

次回はぴーみずこと@mzp氏が「NGK2017Bの報告書く」とのことです!! 乞うご期待!!!!