- UIT meetup vol.7 集まれ！（タブン）実務では使わないフロントエンド芸発表会に参加してきました。
| タイトル | 発表者 |
|---|---|
| @1-div challenge | kawasako3 |
| SVGで作るワードアート | hashrock |
| React.js と動くもの、鳴るもの | Leonardo |
| 本気でCSS芸やりたい人ためのbox-shadow講座 | ダーシノ |
| CSS PANICを支える技術 | GeckoTang |
SVGで作るワードアート
- hashrockさん
- SVG芸人
何でSVG
- なくてもフロントエンドは作れる
- やってて楽しくなる系
ワードアート
- MS Wordで作れる
- パワポとかエクセルでもできる
SVGでワードアート
- SVG
<svg>- d属性で曲線
- SVG DOM
- ReactとかVueで扱える
- ベジェ曲線
- SVGの世界は単位がない世界
- ブラウザのスクリーンの世界はpx
- クリックされた位置を取得する時にSVGの世界の単位に変換しないといけない
- SVGフィルタ
- drop shadowみたいなものも作れる
React.js と動くもの、鳴るもの
- Leonardoさん(LINE)
React + ReduxでWebGL
- レンダリングのタイミングが大切
- Three.jsのレンダリング
composer.render()を繰り返し呼ぶ
- オブジェクトがぐるぐるしてるだけのアプリはあまりない
- ユーザの操作にあわせて動かしたり
- requestAnimationFrame()でrender呼ぶ
- Reactのライフサイクルで呼んでstate管理するとかなり重い
React + ReduxでWebAudioAPI
- AudioNodeどこで持つか
- 全部Storeで持つようにした
参考
本気でCSS芸やりたい人ためのbox-shadow講座
- ダーシノさん
box-shadowの基礎
- 影のサイズは要素と同じ
- 影は要素の背面に表示される
- 影はカンマ区切りで複数指定し表示させることができる
box-shadowでファミコン風UI
box-shadowでドット絵
- もとの要素のheight/widthを1pxにする
- 影のサイズは要素と同じだから
box-shadow芸のハマリポイント
- ギガを消費する
- ギガを抑える
- currentcolorを使う
- サイズの調整は
transform: scale(x)を使う
- メンテできない
- box-shadowの定義が大きすぎてどこを変えたいかわからない
- Sassをうまく使って頑張る
まとめ
- box-shadowはアイデア次第でいろんなことができる
