以前つくったDEMOをもとに、左上に入力した絵文字を一刀両断するDEMOをつくりました。blog.kimizuka.org DEMO ソースコード（抜粋） 絵文字の判定 document.querySelector('input').addEventListener('input', (evt) => { if (evt.target.value.length === 2…

www.apple.com DEMO 解説 頑張ればひとつのCanvasで描き切れたと思いますし、パフォーマンス的にもそちらの方が良いと思うのですが、 リングを描くCanvas リングの先端を描くCanvas を分けて実装しました。 また、リングの先端の回転はCSSで実装しています。…

typescript-jp.gitbook.ioTypeScriptのenumはJavaScript変換時にオブジェクトに変換されます。 なので、forEachを使って要素を列挙したい場合は、Object.entriesを使えばOKです。developer.mozilla.orgただし、数値列挙型と文字列列挙型のenumで変換されるオ…

Firebaseで匿名認証を作成した際、自動クリーンアップを有効にすれば30日間で匿名ユーザーが削除されるようになります。firebase.google.comしかし、場合によってはスクリプトで匿名ユーザーをまるっと削除したい場合もあるでしょう。 そんなときに使えるス…

blog.kimizuka.org前回、静的なウェブサイト、動的なウェブサイト、デスクトップアプリをNext.jsで作成しているという話をしましたが、実は今年からプレゼンテーションの資料もNext.jsでつくっています。もともとは、Keynoteで資料を作成していたのですが、 …

最近は、静的なウェブサイトも、動的なウェブサイトも、デスクトップアプリもNext.jsで開発しています。 もっというと、スマホアプリもExpoを使っているのですが、ExpoはReactではあるものの、Next.jsではないので今回は除外します。Next.jsのすべての機能を…

1️⃣ はじめに 娘が「へ」と「え」を使い分けられないことが発覚 プログラムで問題を量産 ‍ 使い方 実装方法 問題の生成 文章の読み上げ タイトル画面のボタン とりあえず娘に与える 短い役目を終える 気づき 子供は親の作ったものを贔屓目で見てくれる…

function getZoomIn(zoom: number = 1) { return keyframes` 0% { transform: scale(0); } 100% { transform: scale(${ zoom }); } `; } という感じで、変数を受け取ってプロパティに設定したkeyframesを返す関数を作れば、結果として、keyframeアニメーショ…

styled-componentsで作成したアニメーションは、nameかgetName()で名前が取得できます。 import { keyframes } from 'styled-components'; const fadeIn = keyframes` 0% { opacity: 0; } 100% { opacity: 1; } `; console.log(fadeIn.name); // → iHsNqv co…