CSS アニメーションのメモ

transitionとkeyframes-animationの指定。よく忘れるからメモ。(書けば比較的覺えられる筈…

transition

transition: <property> <duration> <timing-function> <delay>

transition-property, transition-duration, transition-timing-function, transition-delay プロパティをスペース区切りでまとめて指定できる。
指定がないものは初期値が設定される。

指定順	プロパティ	意味	初期値
1	transition-property	transitionを適応するプロパティ	none
2	transition-duration	transitionに要する時間 s, msで指定	0
3	transition-timing-function	アニメーションののイージング	ease
4	transition-delay	transitionが始まるまで待機する時間 s, msで指定	0

note: transition-delayを0と指定するとGoogle Chromeでtransitionが効かなくなる。0sや0msのように単位をつければOKっぽい

3. イージング transition-timing-function

キーワード	変化	cubic-bezier換算
ease	開始と終了がなめらかに変化 ease-in-outより開始は早く、終了はゆっくり	cubic-bezier(0.25, 0.1, 0.25, 1.0)
linear	一定に変化	cubic-bezier(0.0, 0.0, 1.0, 1.0)
ease-in	開始ゆっくり	cubic-bezier(0.42, 0, 1.0, 1.0)
ease-out	終了ゆっくり	cubic-bezier(0, 0, 0.58, 1.0)
ease-in-out	開始と終了ゆっくり	cubic-bezier(0.42, 0, 0.58, 1.0)
cubic-bezier(x1, y1, x2, y2)	3次ベジェ曲線で指定 アンカーポイント(制御点)のXY座標を引数にする

cubic-bezier はアンカーポイントの座標から出来る曲線がイージングになる。
下記のようなサービスを使って作成するのが楽

cubic-bezier.com

SASSやStylusを使っているならcubic-bezierの値を変数にしておけばサイトで統一したアニメーションを設定するのも楽になる

複数プロパティにtransitionを指定

複数のプロパティを指定するときは, (カンマ) 区切りで指定
e.g.

transition: transform .8s ease-in-out .3s, opacity 1s ease-in

@keyframes / animation

animation: <name> <duration> <timing-function> <delay> <iteration-count> <direction> <fill-mode> <play-state>

animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode, animation-play-state プロパティをスペース区切りでまとめて指定できる。
transitionと同じく指定がないものは初期値になる。

指定順	プロパティ	意味	初期値
1	animation-name	アニメーション名 @keyframesで指定	none
2	animation-duration	アニメーションが100%になるまでの時間 s, msで指定	0
3	animation-timing-function	アニメーションのイージング cubic-bezierでも指定可	ease
4	animation-delay	アニメーションが始まるまで待機する時間 s, msで指定	0
5	animation-iteration-count	繰り返し回数	1
6	animation-direction	アニメーションを再生する方向	normal
7	animation-fill-mode	アニメーション開始前・開始後のスタイルの指定	none
8	animation-play-state	アニメーションの実行・停止を設定	running

1. animation-name

@keyfremes <animation-name> で作成したアニメーション名を指定する。

e.g.

@keyframes fadeIn {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
.fadeInAnime {
  animation-name: fadeIn;
}

2. animation-duration

transitionのtransition-duration と同じ

cf. animation-duration - CSS: カスケーディングスタイルシート | MDN

3. animation-timing-function

transitionのtransition-timing-functionのキーワードに加えて、ステップで実行できるstep-start, step-end, steps(ステップ数, start), steps(ステップ数, end)が選択できる

キーワード	変化
ease	開始と終了がなめらかに変化 ease-in-outより開始は早く、終了はゆっくり cubic-bezier(0.25, 0.1, 0.25, 1.0)
linear	一定に変化 cubic-bezier(0.0, 0.0, 1.0, 1.0)
ease-in	開始ゆっくり cubic-bezier(0.42, 0, 1.0, 1.0)
ease-out	終了ゆっくり cubic-bezier(0, 0, 0.58, 1.0)
ease-in-out	開始と終了ゆっくり cubic-bezier(0.42, 0, 0.58, 1.0)
cubic-bezier(x1, y1, x2, y2)	3次ベジェ曲線で指定 アンカーポイント(制御点)のXY座標を引数にする
step-start	アニメーション開始直後に完了状態になり、 アニメーション終了までその位置に居続ける steps(1, start)
step-end	アニメーションが完了するまで初期状態で居続け、 アニメーション終了時に完了状態になる steps(1, end)
steps(n, start) steps(n, end)	step-start, step-endをステップ数で分割してアニメーション n はステップ数

cf.

• animation-timing-function - CSS: カスケーディングスタイルシート | MDN
• <timing-function> - CSS: カスケーディングスタイルシート | MDN

sample

See the Pen @keyframe animation | animation-timing-function by KIKIKI (@chaika-design) on CodePen.

step-endはこれで正しいのかちょっと怪しい...

4. animation-delay

transitionのtransition-delay と同じ
同様に0と指定していると、Google Chromeで動作しなくなるので、指定する場合は0s, 0msと単位を付けたほうが良さそう。

cf. animation-delay - CSS: カスケーディングスタイルシート | MDN

5. animation-iteration-count

アニメーションを繰り返す回数。 0だと0回。つまりアニメーションは実行されない。負の数は無効。
1.5のような少数を指定すると、1回と50%のアニメーションが実行される。
infiniteを指定すると無限にアニメーションを繰り返す。

cf. animation-iteration-count - CSS: カスケーディングスタイルシート | MDN

6. animation-direction

normal

順再生。0% -> 100% に向かって再生し、100%に到達すると0%に戻って再生される

reverse

逆再生。100% -> 0%に向かって再生し、0%に達すると100%に戻って再生。
animation-timing-functionで指定したイージングも逆再生で適応される。

alternate

順再生し、100%に達すると100%->0%と逆再生し、これを繰り返す

alternate-reverse

逆再生し、0%に達すると0%->100%の順再生し、これを繰り返す

cf. animation-direction - CSS: カスケーディングスタイルシート | MDN

sample

See the Pen @keyframe animation | animation-direction by KIKIKI (@chaika-design) on CodePen.

7. animation-fill-mode

none

アニメーション中のスタイルはアニメーション開始前・終了後に適応されない

forwards

アニメーション終了時のスタイルがアニメーション終了後も維持される

backwards

アニメーション開始時のスタイルがアニメーション開始前も適応される

both

forwardsとbackwards両方

cf. animation-fill-mode - CSS: カスケーディングスタイルシート | MDN

sample
1秒後にアニメーションが始まるので、開始時と終了時のスタイルの違いに注目してください。

See the Pen @keyframe animation | animation-fill-mode by KIKIKI (@chaika-design) on CodePen.

8. animation-play-state

running

アニメーションを実行

paused

アニメーションを停止

cf. animation-play-state - CSS: カスケーディングスタイルシート | MDN

sample

See the Pen @keyframe animation | animation-play-state by KIKIKI (@chaika-design) on CodePen.

　
animationの説明が思ったより大変で大作になってしまった…
でも忘れた時のにこの記事を見返せばコピペできそうなので良しとしよう。

---

[参考]

• cubic-bezier.com
  • CSS cubic-bezier() function
  • sigbus.info: 中学生でもわかるベジェ曲線
  • JavaScript で CSS の cubic bezier - Qiita
• transition - CSS: カスケーディングスタイルシート | MDN
• transition－CSS3リファレンス
  • 【CSS3】Transition（変化）関連のまとめ - Qiita
• animation - CSS: カスケーディングスタイルシート | MDN
• @keyframes - CSS: カスケーディングスタイルシート | MDN
• animation－CSS3リファレンス
  • 【CSS3】@keyframes と animation 関連のまとめ - Qiita

ハッカドール THE あにめ~しょん 第1巻 [Blu-ray]

ハッカドール THE あにめ~しょん 第2巻 [Blu-ray]

JavaScript クッキー操作できるjs-cookie使ってみた

インストール

# 1. ダウンロードして使う

GitHub からスクリプトをダウンロードしてスクリプトタグで読み込む

<script src="/path/to/js.cookie.js"></script>

# 2. CDNを使う

<script src="https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js"></script>

# 3. NPMでインストール

npm

$ npm install js-cookie --save

yarn

$ yarn add js-cookie

読み込み

import Cookies from 'js-cookie';

使い方

Cookieを保存

Cookies.set('cookie_name', 'value')

Cookies.set('idol', '星宮いちご');

期限付きのCookieを保存
Cookies.set('cookie_name', 'value', { expires: 1 })
オプションにexpiresキーワードで保存。期限のexpiresの単位は「日数」
e.g. 1週間なら { expires: 7 } 12時間なら { expires: 1/2 }

Cookies.set('one_day_idol', '紫吹蘭', {expires: 1});

パスを指定してCookieを保存
Cookies.set('cookie_name', 'value', { path: '' }) オプションにpathキーワードでパスを渡す。パスの指定があると、そのパスは以下でのみCookieが有効になる。{path: ''}とすると現在のページ配下で有効

Cookies.set('current_idol', '霧矢あおい', {path: ''});

Cookieを取得

Cookies.get('cookie_name')

const idol = Cookies.get('idol');
console.log(idol); // => 星宮いちご

Cookieが存在しない場合はundefinedを返す

const idol = Cookies.get('legend_idol');
console.log(idol); //=> undefined

Cookie名を指定しないCookies.get() で保存されているCookieを{name, value}形式のオブジェクトで取得できる ※ 取得できるものだけ

Cookies.get();
// => {idol: '星宮いちご', ,current_idol: '霧矢あおい', one_day_idol: '紫吹蘭'}

Cookieの削除

Cookie.remove('cookie_name')

Cookies.set('idle', '星宮いちご');
Cookies.remove('idle');
console.log( Cookies.get('idle') ); // => undefined

パス付きのCookieはパスが合ってないと削除できない。※ 有効なパスに居るればパス指定なしでも削除できるっぽい

Cookies.set('current_idol', '霧矢あおい', { path: '/cool' });
Cookies.remove('current_idol');
console.log( Cookies.get('current_idol') ); // => 霧矢あおい
Cookies.remove('current_idol', { path: '/cool' });
console.log( Cookies.get('current_idol') ); // => undefined

　
簡単にCookieを操作することができました！

Cookieの有効期限をあまり短い期間で指定することって無いのかもだけど、js-cookieは日数がデフォルトなので1日以下にしたい時、1時間なら1/24 = 0.0416666....、30分なら1/( 24 * 2 ) = 0.0208333...という具合に値が少数になってしまいます。
直接値を指定するなら近い数字にすれば良いと思いますが、小数点を含む計算式だと誤差(IEEE754)が出る可能性もありますので注意が必要かなーって思いました。
Floot値にもなるから個人的には、殆どの場合intで指定できるPHPのsetcookieみたいに秒数指定の方が良かったのではないか説。

---

[参考]

• GitHub - js-cookie/js-cookie: A simple, lightweight JavaScript API for handling browser cookies
• 【2018年最新版】JavaScriptプラグインjs-cookieで超簡単にクッキー管理 | Pizzamanz.net
• JavaScript IEEE754 JavaScriptの大きな数と小さな数の仕組みを理解する 〜 IEEE754入門 〜 - 風と宇宙とプログラム
• PHP: setcookie - Manual

低反発シート 1本入り クッション フルーツ 果物 リアル 夏 面白い クッション枕 ［Youショップ販売品以外は注意］ クッキー

クッキー柄のクッション…思ったより無かった…

Webpack 4 で Cannot assign to read only property 'exports' of object エラー

こんにちは、Webpackでのbundle化初心者です。
今までgulpで分けたJSファイルをconcatして一つにまとめていました。gulpのconcatだとファイル名を01-みたいなprefixをつけて結合順をコントロールしてました。webpackだとその辺りも解決してくれるっぽいので良いですね。(バンドルするための処理が乗るので最終的なコード量は多くなると思いますが

今回自分で分割したファイルを読み込ませていてwebpackでは問題なくbundleされたファイルが生成されたけど、ブラウザで確認すると Cannot assign to read only property 'exports' of objectというエラーが発生したのでメモ。

import と module.exports が混在してるとよろしくないっぽい

モジュールの化はES6のimport / export の組み合わせと、CommonJSのmodule.exports / require があり、これらが混在してしまうのがよろしくないようです。 ただ、require は import / export と使っても問題ないようです。

e.g

import / export と module.exports が混在するとエラー

// config.js
module.exports = {name: '佐倉 千代'};

// name.js
import config from './config';
module.exports = '野崎 梅太郎';

// app.js
import name from './name';
console.log(name);

↓
webpackでbundle.jsは生成されるけどブラウザで確認すると
Uncaught TypeError: Cannot assign to read only property 'exports' of object '#<Object>'

name.js で importとmodule.exports が混在しているのでNG

import / export の組み合わせにすればOK

// config.js
export default {name: '佐倉 千代'};

// name.js
import config from './config';
export default config.name;

// app.js
import name from './name';
console.log(name);

→ 佐倉 千代 問題なく実行される

module.exportsされているものをimport / requireして export するのはエラーにならないっぽい

Cannot assign to read only property 'exports' of object '#<Object>' (mix require and export) · Issue #4039 · webpack/webpack · GitHub こちらには

// 'a.js'
module.exports = { a: 'b' };
// b.js
const a = require('./a.js').a;
export default {
   aa: a
}

Gives error:
Cannot assign to read only property 'exports' of object '#<Object>'
Appeared after upgrade webpack 2.2.0.rc.6 -> 2.2.0.

とあったのですが、
試していたWebpack v4 の環境ではmodule.exportsされたものを読み込んでexportしてもエラーにはならなかったので仕様が変わったのかもしれません。

// config.js
module.exports = {name: '佐倉 千代'};

// name.js
import config from './config';
export default config.name;

// app.js
import name from './name';
console.log(name);

→ 佐倉 千代

require / module.exports の組み合わせにしてもエラーになる場合がある

require / module.exports の組み合わせにすればOKかと思ったのですが、
requireしたオブジェクトをそのままmodule.exportsしているとエラーになるようです。

require / module.exports で統一されてるけどエラーになるパターン

// config.js
module.exports = {name: '野崎 梅太郎'};

// name.js
const config = require('./config');
module.exports = config.name;

// app.js
const name = require('./name');
console.log(name);

→ Uncaught TypeError: Cannot assign to read only property 'exports' of object '#<Object>'

最終的な部分がimport文でもエラー

// config.js
module.exports = {name: '野崎 梅太郎'};

// name.js
const config = require('./config');
module.exports = config.name;

// app.js
import name from './name';
console.log(name);

→ Uncaught TypeError: Cannot assign to read only property 'exports' of object '#<Object>'

経由しているファイル(name.js)で読み込んでいるモジュールがexportだろうと、読み込んだ内容をmodule.exportsしていればエラー

// config.js
export {name: '野崎 梅太郎'};

// name.js
const config = require('./config');
module.exports = config.name;

// app.js
const name = require('./name');
console.log(name);

→ Uncaught TypeError: Cannot assign to read only property 'exports' of object '#<Object>'

// config.js
export {name: '野崎 梅太郎'};

// name.js
const config = require('./config');
module.exports = config.name;

// app.js
import name from './name';
console.log(name);

→ Uncaught TypeError: Cannot assign to read only property 'exports' of object '#<Object>'

module.exports が読み込んだ内容でなければOK

// config.js
module.exports = {name: '野崎 梅太郎'};

// name.js
const config = require('./config');
module.exports = '御子柴 実琴';

// app.js
import name from './name';
console.log(name);

→ 御子柴 実琴 問題なく実行される
※ config.js が exportでも、app.jsはrequireでもエラーにはならない

require はimport / exportと混在しても常にOK

// config.js
module.exports = {name: '堀 政行'};

// name.js
const config = require('./config');
export default config.name;

// app.js
import name from './name';
console.log(name);

→ 堀 政行 問題なく実行される

requireとimportが同じファイル内で混在していても問題ないので次のような感じでも問題なくbundleされて実行もできる

// config.js
module.exports = {name: '堀 政行'};

// name.js
cost $ = require('jquery');
import config from './config';
config.name = '鹿島 遊';
export default config.name;

// app.js
const config = require('./config');
import name from './name';
console.log(name);

→ 鹿島 遊
問題なく実行されるけど、importとrequireが同じファイルで混在してると見通しよくないので良くないって感想。

まとめ

• ファイル内がエラーにならない組み合わせであればOK
• import / export か import / require / export の組み合わせで統一する
• require / module.exports での組み合わせで統一する
  • 但しrequireで読み込んだオブジェクトをmodule.exportsするとエラー
• import と module.exportsが同じファイルにあるとエラー

module.exportsはトラップが多いので使わないほうが良さそう。という感想です。

と、THE Webpack 初心者って感じのエラーでした。
EMS (ES module)の世界と CJS (CommonJS)の世界があって混在してるって訳ですね。
JavaScriptもブラウザのECMAScriptとnode.jsの世界があって仕様がそれぞれ違うってのと近い感じでしょうか…
昨今のJS界隈の流れとか歴史とか含めた仕様の違い理解してないとハマりポイントっぽいって印象です。 (IEのJScriptに悩まされる事は減ったけど
絶対王者jQueryが倒れ、世は将にJSフロントエンド戦国時代！
(ここ数年は勢力図が落ち着いてる感じっぽいですが、その感離れていたのでキャッチアップが大変です

---

[参考]

• Cannot assign to read only property 'exports' of object '#<Object>' (mix require and export) · Issue #4039 · webpack/webpack · GitHub
• Babel 7 Upgrading creating error: “TypeError: Cannot assign to read only property 'exports' of object '#<Object>'” | stackoverflow
• babel+webpackな環境でESM(import構文)とCJS(module.exports構文)を混在させると『Cannot assign to read only property ‘exports’ of object ‘#<Object>’』と怒られる - ひと夏の技術

import / exports と module.exports / require について

• Node.js: exports vs module.exports
• Node.js : exports と module.exports の違い（解説編） - ぼちぼち日記
• ES6のexportについて詳しく調べた - Qiita

違いを理解していないので、いずれ...

月刊少女野崎くん ネタラバ 法令遵守 野崎梅太郎

最近作業中 月刊少女野崎くん 見てました。面白いよね