実際に下記のようなCSSを使ってp要素の高さをDevToolsで見てみると、115pxになってるのが確認できるはずです。指定してJSで高さを取得し、他のメタデータからBaselineの位置を算出することで最終的にはCapHeightやxHeightなどの表示位置も計算できるはずです。理屈に合うイージングまとめ人間は今まで経験してきた物理現象と同じ動きをするアニメーションを「自然な気持ちよさ」として感じることができるみたいです。そのUIアニメーションが何を表しているのか?によって、なるべく理屈に合うイージングを選択することで、気持ちの良いアニメーションを作ることができるんじゃないか、と最近思うわけです。私はこれまでイージングは「Quadだと遅いからQuartにしてみようかな〜」のようなアバウトな実装をしてました。この方法では、実装工程で何度も動きを見ているうちにゲシュタルト崩壊して気持ちの良いアニメーションが何なのか分からなくなってきます。そもそもQuartの速度を下げてもQuadのグラフとは一致しません。物理現象とは無関係なアニメーションになってしまうのです。実世界の環境を忠実に再現することができない以上、物理現象と全く同じ動きを実装することは不可能ですが、理屈ありきの実装をすればある程度近い動きにはなるはずです。主観的な決めつけで実装する必要がなくなるので、万人受けしやすくなります。ゲシュタルト崩壊して妙にクドいアニメーションになってしまうこともありません。いうことで、物理現象ごとに理屈に合うイージングをまとめてみました。(半分ギャグです)自由落下モノが上から降ってくるような演出の場合。これは一定の加速度で速度を上げ続ける運動(等加速度直線運動)なので、移動距離は経過時間の2乗に比例します。Quadだと動きが鈍くて気持ちよくないと感じることが多いですが、Quadの計算式は単純に時間の2乗しか使っておらず、重力加速度が加味されていませんので、そのへんはdurationで調節してあげます。いうことかというと、動かす要素が実世界でどのくらいの大きさで、どのくらい離れて観測しているのかを考えます。エヴァの空から降ってくる使徒サハクィエルは、随分ゆっくり降りてくるように感じますね。あれはドでかいものを遠くから観測しているからです。具体的には、落下距離を決めてそれをピクセル換算できれば、下記計算式でdurationを求められます。4.9)CSSプリプロセッサでMixinでも作ったら捗るかもしれません。スライドイン例えば、ハンバーガーメニューをクリックして画面外からオーバーレイ要素が滑り込んでくるようなアニメーションの場合。(速度によって摩擦係数は変わってくるらしいが、その辺は無視)durationの算出にも自由落下と同じ式を使えますが、スケール感に加えて加速度(摩擦係数)もイメージする必要があります。これには物体と接地面の素材を想像して、摩擦がどの程度あるかをテキトーに仮定します。2))動摩擦係数でググるとけっこう見つかるので参考にしましょう徐々に消える、フワッと色が変わるこれもよく使うアニメーションです。hoverでボタンの色を変えたりとか。色が変わる遷移をミクロな世界で物理的に説明してみると、たぶん分子レベルで特性が変わっていくんじゃないかなと思います。放射性同位体の原子数の時間的変化の式。放射性物質の半減期を計算するときに使うような式です。原子的に不安定な状態である放射性物質は、放射線の放出とともに原子の崩壊をして、いずれは安定した原子に変化していきます。毎秒10%ずつ変化する原子が2000個あると、1秒後には残り1800個、2秒後には1620個、というように。easeOutExpo。(出典はこちら)イージング関数を最初に作った人はやっぱりちゃんと理屈ありきで作ってたんだなあと関心しますね。durationは半減期一覧を参考に近しい値を計算します。言いたいところですが、比較対象の想像ができる人なんてまず居ないと思うので適当な値でイイ感じにしてください。主観入ってますが、難しいので諦めました。事務所を移転しました10月から渋谷区千駄ヶ谷に事務所機能を移転しました。https://nasbi.jp/aboutこれまで事務所機能は菅沼の自宅に置き、作業自体は完全リモートで各自の自宅から作業していましたが、主に下記3点の理由によりちゃんと事務所を構えることにしました。営業が安定してきた集まって仕事をすることで得られる知識もある信頼度アップこれからもリモートで仕事してたりすることも多くあるとは思いますが、基本的に余裕のある日は出社して、パツってるときは自宅作業という分け方になるんじゃないかなと思っています。業務自体はこれまでと何ら変わりませんので、関係者様に於かれましては、引き続きよろしくお願いいたします。2017年10月1日スマートにiPhoneXの対応のためのpaddingを設定するiPhoneXには、画面上部にセンサーや前面カメラが仕込まれているディスプレイの切り欠きがあります。safariではviewportを下記のように指定することで、横持ちした際にこの切り欠きの周りまでレンダリング領域とすることができます。content="viewport-fit=cover">この指定をすると、ディスプレイ全体に背景色等を引き伸ばせるため、より一体感のあるデザインにすることができるのですが、切り欠き部分がコンテンツと重なってしまうことが起こり得るため、CSS定数を使ってpadding等を余分に持たせてあげることで、これを回避してあげる必要があります。関数ですが、他のブラウザでは一切実装されていない機能になります。そのため、既にpaddingが設定されている要素にcalc等を使って切り欠き分をプラスしてあげる方法だと、構文解釈ができずにpaddingが未設定とされてしまいます。いえわざわざiPhoneXのために新しい要素で囲ってあげるのもバカらしい...。そんなときは下記の様に同じセレクタ内でpaddingを複数記述するとスマートに解決することができます。使っている行は解釈されないので1行目のみ適用されます。要は記述順が重要で、ベンダープレフィックスのような用法で使ってあげればよいのです。2017年8月9日iOS10のSafariではVideo要素のインライン再生が可能になったiOS9までのSafariでは、基本的にvideoのインライン再生はできず、再生すると強制的にフルスクリーンになっていました。iOS10からはvideo要素にplaysinline属性をつけてあげることでインライン再生が可能になってます。インライン再生できました。この仕様に併せて、JSからvideoのフルスクリーン制御もできるようになってます。KANPAI!」に菅沼がLTで登壇致します。使ってあげることでクライアントサイドはもちろん、サーバサイドでもデータを取得し、HTMLで出力することが出来ます。静的ファイルをgenerateした時点でしか走っておらず、ページロード時にデータが更新されていない問題が起こり得ます。使うのはサーバサイド(プリレンダリング時)のみ。データの更新をかけてあげるわけです。することでプリレンダリング運用でも、一応(少し古いかもしれないけど)非同期データのHTMLもプリレンダリングされていて、ブラウザで訪れた際にはちゃんと最新の情報に更新されます。箇所で下記のようなエラーが出る場合がある。単純な文字列の配列)。}}</template>回避するには、下記のように個々を要素で囲ってあげる。}}</span></template>クライアントサイドのみではエラーは出ず、ちゃんとレンダリングされるので、サーバ側の実行ロジックにバグがあるのかもしれない。APIでカテゴリー情報を取得する場合、下記のエンドポイントを使いますよね。取得件数を設定できるのですが、実はこのパラメータ、1〜100の数値以外を渡すとエラーになります。似てるので-1を指定すれば全件取得できそうな気がするのですが、ところがどっこいできません。指定して取得してあげるほうが良さそうです。ロジカルにページングする必要がありそうです。使ってSPAサイトのSEO対策をする株式会社なすびのウェブサイトは、Vue.jsを用いたSPAで作られています(2017年4月現在)。コーポレートサイトのような情報の提供に重きを置くサイトで、SPAのアーキテクチャを使うことはSEOの面からあまり適した用途であるとは言えません。それは、GoogleボットこそJSを実行してからパースしてくれるので問題にはならないのですが、FacebookなどのSNSにシェアされた場合は未だにJSの実行までしてくれないからです。これを解決するためには、サーバーからのレスポンスでHTMLを返す必要性が絶対的にあるのですが、いかんせんSSRを前提に環境の構築を考えると、サーバサイドでNode.jsを噛ませる必要があったりなど、なかなかに敷居が高いのです。コーポレートサイトのような、ページ数も動的コンテンツも少ない小規模サイトであれば、プリレンダリングという選択肢もあります。今回はwebpackプラグインでサクッとプリレンダリングする方法の紹介です。Pluginhttps://github.com/chrisvfritz/prerender-spa-pluginこのプラグインを使って、webpackのbuild過程で静的HTMLを書き出してしまいます。]}上記のように保存先とエンドポイントを設定してbuildすると、下記3ファイルが書き出されます。違うファイルを指しているため、この状態でリロードすると404になってしまいます。