"PDCA"を簡単に高速に綺麗に回す方法
うぇ〜〜い
いろいろあったのに更新はなかったんや。
とりあえず今回は、Misoca Advent Calendar 2017 の4日目に参加していて完全に忘却していたのでヒイヒイいいながら書いています。
間に合え！！！
前回の記事はこれでした！
明日は、 merotan こと @renyamizuno_が「すごーい」何か書いてくれるそうです。楽しみです。
ﾋｪ...
PDCAを回す
今年を色々振り返ってやはり流行の廃れるスピードがスゴイなぁ(小並感)と思うのですが、今年流行ったものとしてハンドスピナーとかありましたね。
そのなかで、
こういうのがありまして、
今回はこれをウェブでやっていくぞ！！！！！
というやつです。
釣られた人は釣られたクマーして。
プロトタイプ
See the Pen めっちゃPDCAまわしてる by renyamizuno (@renyamizuno) on CodePen.
雑にね。
イメージこんな感じ。
で普通にやるだけだとつまらないので、Web Componentsをやってみる。
あ。ちょうどここに「イヌでもわかるWeb Components」っていう本があるぞ〜⤴
(興味がある方はポチッとお願いします🙏)
と露骨な宣伝をはさみつつやっていきます。
やった。
ここでみれる。
コードはここ。
回し方は簡単。
コードはたったの2行。
<link rel="import" href="./components/pdca-rotate.html"> <pdca-rotate rpm="30" rotate-direction="normal"></pdca-rotate>
これだけで最後まで回せます。
簡単！！！！！
rpmを上げることで高速で回せます。
高速！！！！！！
回し続けてもブレることはありません。
綺麗！！！！！！！！
すごい！！！！！！！！！
はい。
早すぎると止まったりしますね。
なるほどな〜 pic.twitter.com/pBXNl0B1FY
— わかり亭めろたん。 (@renyamizuno_) 2017年12月4日
技術的な話
大したことはしていないのですが、 最初にも書いたとおり、Web Componentsの技術を使っています。
template要素を使ってテンプレートを作り、「回る」だけのコンポーネントを作ます。
components/rotate.htmlがそれです。
同様にPDCA Spinnerのテンプレートを作ります。
さっきのrotateを使い、「PDCA」の各文字の部分と全体を回します。
文字は読めるように、全体の回る向きと反対方向に回すようにしています。
この辺の回る向きとかはCSSのCustom Propertyをつかって良い感じにしています。
でPDCA Spinnerはrpmとかrotate-directionを受け取れるようにして、簡単に回るスピードや向きを設定できるようにしました。
詳しくはコードをみてくれ〜〜〜⤴
ピュアなJSとCSSとHTMLで書いているので、 Web Packする必要も無いし、ビルドもする必要もないし、 ナウいブラウザならよしなに動く(動くとは言っていない)ので、ためしてくれ〜。
動かない場合は多分Chromeじゃないからだと思うので、
これを使えば良い感じになるぞ⤴
まとめ
- Web Components最高。
- PDCAは簡単に高速に綺麗に回せる。
- しかしWeb上に限る。
- アドベントカレンダーは前々からちゃんと書いておこうな。
次回はぴーみずこと@mzp氏が「NGK2017Bの報告書く」とのことです！！ 乞うご期待！！！！
