Marqueeタグでブロック崩しを作りたい/remarquee #megurocss

Marqueeタグでブロック崩しを作りたい/remarquee #megurocss

Marqueeタグでブロック崩しを作ろうと頑張っています。応援してください。

この領域まで読み込めていなかったので、反省しています。(尊敬)
https://speakerdeck.com/tsuyoshiwada/chrome-false-marquee-yao-su-ga-you-xiu-datutahua

33ef4c1ebe619115b552db9a9f9a3509?s=128

sadnessOjisan

November 09, 2018
Tweet

Transcript

  1. MARQUEタグでゲームを作りたい 株式会社 リクルートライフスタイル 井⼿ 優太

  2. Keyframe animationとCSS in JSで Marqueeを作り込む話です

  3. アクセシビリティを無視した発表です @yamanokuさんごめんなさい

  4. Pure CSSは半分諦めています (まだ勝ち筋は残っています)

  5. Who 株式会社 リクルートライフスタイル Frontend Engineer 井手 優太 Twitter: @bug_ojisan Github:

    @sadnessOjisan
  6. Airメイト 飲⾷店のPOSレジや台帳 の情報を元に、 お店の現状の可視化・打ち⼿の提案を⾏う PC/タブレット/スマートフォンで提供

  7. 仕事は真⾯⽬にしていますが

  8. プライベートは くだらないです。

  9. React base Web廃墟コンポーネント https://dasaku-prj.appspot.com/

  10. Gatsbyで動く ハイパフォーマンスWeb廃墟!

  11. 思い出してしまった、 Marqueeタグの存在を・・・

  12. Marqueeタグって • 廃止された • アクセシビリティがわるい

  13. Marqueeタグって • 横に動くやつ

  14. Marqueeタグって • 実は縦にも動きます

  15. Marqueeタグって • 動き方を選べます

  16. Marqueeタグって • 実は入れ子にできます https://developer.mozilla.org/ja/docs/Web/HTML/Element/marquee

  17. Marqueeタグって • 波を作れます http://sound.jp/ptf/html/marquee.html

  18. Marqueeタグって • ブロック崩しも作れます http://sound.jp/ptf/html/marquee.html

  19. そして気づいてしまった。 Marqueeタグの可能性に・・・

  20. もしかして ゲーム/VJシステム を作れるのでは?

  21. 障壁 • マーキータグのパラメータは変数ではない • 衝突判定などはできない

  22. Marquee を プログラマブルに CSS in JS で作り直す

  23. remarquee https://github.com/sadnessOjisan/remarquee

  24. どのようにして、 Marqueeタグを作るのか

  25. 衝突の計算、UIの更新をやりたい ↓ Reactベースで作る

  26. 先人はいた • 実はやろうとしていることは二番煎じ • Reactベースなのも存在 • しかし100%追従しているものはいない

  27. 先人に学ぶ • 文字の移動はkeyframe animation

  28. 仕様に学ぶ • 仕様はMDNから学ぶ

  29. https://developer.mozilla.org/ja/do cs/Web/HTML/Element/marquee

  30. わかったこと • モードが3種類ある • スピードの指定ができる • 移動幅の指定ができる

  31. 移動幅を指定する • WidthやHeight で移動する幅を 指定 • Vspace, hspaceで移動領域の paddingを指定 •

    アニメーションでleftなどに width から hspaceを引いた量 を渡さないといけない • Keyframeを返す関数を作る text width height hspace hspace vspace vspace
  32. スピードを指定する • transition-duration に速度を書く • CSS animationはsec指定しないといけない • marqueeタグは デフォルトで

    6px ずつ動く え、Secは・・・?
  33. Marqueeの移動速度を計算する • scrollamountで一度に移動する 移動量(px)を指定する. デフォル トは6px • scrolldelayで指定したミリ秒単 位でscrollamount量動かす. デ

    フォルトは85msec • truespeedを許可すると, scrolldelayの下限値が60になる 1秒あたりに動く量を算出し、それで移動幅を割る
  34. ループの指定 • animation-iteration-countで指定できる • 回数をprops経由で渡す • 無限ループするためには-1を渡す

  35. behavior • Marqueeにはbehaviorが3つある Ø Scroll: ただdirectionの方へスクロールする Ø Slide: スクロールの終点で停止する Ø

    alternate: スクロールの終点で逆方向に跳ね返る
  36. やっかいなscrollとslide • Scrollの終了位置とSlideの終了位置は異なる • Scrollの終了位置は 要素の大きさ文だけ親からはみ出る必要がある • Slideの終了位置は親のborder位置となる slide scroll

  37. 本当にやっかいなalternate • アニメーション終了時にアニメーションの方向を逆にする • アニメーションの終了時は animationend イベントを購読して 知る

  38. Animationendイベントの購読 • Keyframeの終了を購読するこ とができる • Keyframeが割り振られた要素 に対して、animationendを listenすることで実現可能 • React上では,

    refを取り、そこ からeventをlistenする
  39. animationendで折り返す • Animationendはイベントが終了しないと発火しない => 無限ループを設定していると発火しない • Loop数の変数を1でprops経由でkeyframe animationに渡し, animationendすると, loop数をincrementし,

    逆方向に移動する keyframeをアニメーションにセットする (animation iterateの終了イベント使えば、こんなことしなくて済むかも・・・? (さっき気づいた))
  40. それっぽいコードが 完成

  41. None
  42. こんなことをして なんの意味があったのだ

  43. None
  44. 宣伝 実際にMarqueeでゲーム作るのはアドベントカレンダーで 頑張っています。お楽しみにしておいてください