４月２１日、html5j Webプラットフォーム部 第17回勉強会に行ってきた！ので
ないようメモメモ
■挨拶
Flashを黒いタートルネックの男に葬り去られた後、
動画をどうつくればよいのか？
CSSの話
マイクロソフトさんの話
TIPS
■Browser animation 2017 動く・動かせ・動け！
・３つのキーワード：動く・動かせ・動け！
・動く：今できること
インターフェースのアニメーション
アニメみたいなアニメーション：SVGも使って
→CSS Transitions A→B
CSS Animations A→B→C
なめらかにうごく
Web Animation API
Element.animation()
FirefoxでもChromeでも実装されている
Polifill:web-animation.js
・動かせ
Firefox Developer Tools 使っている人：ちらほら
なにつかってるんですか？→いんてりJ→Firefoxもいいので・・・
Animation inspector
デモ
タイミングファンクション
ステップ：離散的
いくつかの違うタイミングファンクション
near フューチャー
編集できるようにしていこう
これまで、もじらきんせい
こんご React、GitHubを使ってプルリクできるように
もっとみらい
いんすぺくティング→オーサリング
アニメーションクリエーターの視点：ピックアップしていく
ヘルプ
・動け：これからのアニメ
５つの問題点
（１）フレームのアニメーション
はじめ、ないし、さいごのがでない ５５＋
（２）Transitionの終わりを待つとき
transition cancel, run,start,animationcancel
→Element.getAnimation()
（３）アニメーションがぶつかる
両方合併：リリース版まだ
（４）スクロールにそって動くアニメーション
（５）別のスレッドでアニメーションしたい
・まとめ
■Introducting CSS Grid Layout
・自己紹介
・ぐりっどを定義する
display:grid;
grid-template-columns
grid-columns-gap
・２からむつなげることもできる
・repeatもできる
・auto-fill(minmaxは指定できる）
・グリッドにアイテムを配置する
Griid Track,
Grid Lines
Grid cell
nth-child
・アルゴリズム
grid-auto-flow
・アクセサビリティ
・Flexbox
Flexbox：１次元
Grid:２次元以上
・CSS FeatureQueries
@rachelandrew
https://twitter.com/rachelandrew
■エンジニアよ大志を抱け
・Microsoft biz spark：起業する人など無償で3年間つかえる
→IT企業でおねがいします（そのたいろいろ参加要件あり）
・Microsoft Imagineサブスクリプション
■animistaで勉強嫌いがCSSアニメーション
・なまえはあかさない。自己紹介なし
・現場の問題
リソース的な問題：学習コスト高い？
センス的なもの
クリエイティブ○○：使えない、現場乱すだけ
ツール的な問題
・animista
クロアチアのC2 Ana Travas まだベータ版
・From Designer to Engineer
デザイナ PS+Flash
エンジニア HTML5,CSS3
今
デザイナ PS
エンジニア HTML5,CSS3、JS
・デザイナーがかわいい子だと
すかしたやろうデザイナーだと
・指示の具体性に乖離
animistaのメリット デザイナーが検証
・How To USE
コミュニケーションはどうかわる
・注意点
パーツを作るのではない
Chromeのみ対応
・例
・まとめ
かわいいデザイナーと密なコミュニケーション
くそCDとは少ないコミュニケーション
生のコードが生成されるのでCSSの理屈が学べる
■ディスカッション
（１）Webアニメーションの実装はどうなっていくべきか
・できるだけCSｓで実装すべき
・できるだけJavascriptで実装すべき
・ライブラリやフレームワークに進化
ぶらうざつくっているので、ぶらうざのきのうをつかってほしい
簡単なものからためす
CSS-Transition→CSS Animation→Animation API
復習できるもの
何で動いているかわからないはやめておく
デザイナの要求はとんでもないので
（２）Webアニメーションの学習コストのかけ方
・ライブラリ、フレームワーク
・基礎から
正直、CSSは苦手だ。
（３）Webアニメーションって、どんな効果があるの？どう使うべき？
・インターフェース
楽しいだけでも意味がある
（３－２）デメリット
・文字でつたえないといけないとき
目的に対してはつかえるが、
肝心な情報を逃す可能性
・パフォーマンス
かくかくしちゃうと・・・
→スマホ
・WebGLでみごとに新人サイトがうごかなかったり・・
→アニメーションのテストは方法まだない
・まとめ
まだまだ発展途上
ないようメモメモ
■挨拶
Flashを黒いタートルネックの男に葬り去られた後、
動画をどうつくればよいのか？
CSSの話
マイクロソフトさんの話
TIPS
■Browser animation 2017 動く・動かせ・動け！
・３つのキーワード：動く・動かせ・動け！
・動く：今できること
インターフェースのアニメーション
アニメみたいなアニメーション：SVGも使って
→CSS Transitions A→B
CSS Animations A→B→C
なめらかにうごく
Web Animation API
Element.animation()
FirefoxでもChromeでも実装されている
Polifill:web-animation.js
・動かせ
Firefox Developer Tools 使っている人：ちらほら
なにつかってるんですか？→いんてりJ→Firefoxもいいので・・・
Animation inspector
デモ
タイミングファンクション
ステップ：離散的
いくつかの違うタイミングファンクション
near フューチャー
編集できるようにしていこう
これまで、もじらきんせい
こんご React、GitHubを使ってプルリクできるように
もっとみらい
いんすぺくティング→オーサリング
アニメーションクリエーターの視点：ピックアップしていく
ヘルプ
・動け：これからのアニメ
５つの問題点
（１）フレームのアニメーション
はじめ、ないし、さいごのがでない ５５＋
（２）Transitionの終わりを待つとき
transition cancel, run,start,animationcancel
→Element.getAnimation()
（３）アニメーションがぶつかる
両方合併：リリース版まだ
（４）スクロールにそって動くアニメーション
（５）別のスレッドでアニメーションしたい
・まとめ
■Introducting CSS Grid Layout
・自己紹介
・ぐりっどを定義する
display:grid;
grid-template-columns
grid-columns-gap
・２からむつなげることもできる
・repeatもできる
・auto-fill(minmaxは指定できる）
・グリッドにアイテムを配置する
Griid Track,
Grid Lines
Grid cell
nth-child
・アルゴリズム
grid-auto-flow
・アクセサビリティ
・Flexbox
Flexbox：１次元
Grid:２次元以上
・CSS FeatureQueries
@rachelandrew
https://twitter.com/rachelandrew
■エンジニアよ大志を抱け
・Microsoft biz spark：起業する人など無償で3年間つかえる
→IT企業でおねがいします（そのたいろいろ参加要件あり）
・Microsoft Imagineサブスクリプション
■animistaで勉強嫌いがCSSアニメーション
・なまえはあかさない。自己紹介なし
・現場の問題
リソース的な問題：学習コスト高い？
センス的なもの
クリエイティブ○○：使えない、現場乱すだけ
ツール的な問題
・animista
クロアチアのC2 Ana Travas まだベータ版
・From Designer to Engineer
デザイナ PS+Flash
エンジニア HTML5,CSS3
今
デザイナ PS
エンジニア HTML5,CSS3、JS
・デザイナーがかわいい子だと
すかしたやろうデザイナーだと
・指示の具体性に乖離
animistaのメリット デザイナーが検証
・How To USE
コミュニケーションはどうかわる
・注意点
パーツを作るのではない
Chromeのみ対応
・例
・まとめ
かわいいデザイナーと密なコミュニケーション
くそCDとは少ないコミュニケーション
生のコードが生成されるのでCSSの理屈が学べる
■ディスカッション
（１）Webアニメーションの実装はどうなっていくべきか
・できるだけCSｓで実装すべき
・できるだけJavascriptで実装すべき
・ライブラリやフレームワークに進化
ぶらうざつくっているので、ぶらうざのきのうをつかってほしい
簡単なものからためす
CSS-Transition→CSS Animation→Animation API
復習できるもの
何で動いているかわからないはやめておく
デザイナの要求はとんでもないので
（２）Webアニメーションの学習コストのかけ方
・ライブラリ、フレームワーク
・基礎から
正直、CSSは苦手だ。
（３）Webアニメーションって、どんな効果があるの？どう使うべき？
・インターフェース
楽しいだけでも意味がある
（３－２）デメリット
・文字でつたえないといけないとき
目的に対してはつかえるが、
肝心な情報を逃す可能性
・パフォーマンス
かくかくしちゃうと・・・
→スマホ
・WebGLでみごとに新人サイトがうごかなかったり・・
→アニメーションのテストは方法まだない
・まとめ
まだまだ発展途上
アクセス
トータル
ランキング
