みかづきブログ・カスタム

基本的にはちょちょいのほいです。

Next.js + TypeScript + styled-components + SCSSの雛形をつくる 💻

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

娘に「へ」と「え」の使い分けを身につけてもらう為に「へえ」ボタンを作りました 🔘

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

styled-componentsでつくったkeyframeアニメーションに変数を渡す 📹

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

styled-componentsで作成したアニメーションは内容が同じだとnameも同一になる 📛

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

Google Chromeのディベロッパーツールを使って、ウェブサイト全体のスクリーンショットを撮影する 📸

blog.kimizuka.org以前、iOSシミュレータ版でウェブサイト全体のスクリーンショットを撮影 したことがありましたが、今回はGoogle Chromeのディベロッパーツールを使い、PCサイトをまるまるスクリーンショットに収めます。 ❶ ディベロッパーツールを表示 メ…

交差オブザーバー API (Intersection Observer API) を使ってページスクロールに連動したイベントを実行する 🖱️

DEMO 一昔前に、ページスクロールに連動してDOMをあれこれしたい場合、documentのスクロールイベントのコールバックで、対象となるDOMが範囲内に入っているか否かを判定する必要がありました。developer.mozilla.orgなので、僕もかつてページのスクロール量…

position: stickyとscrollIntoViewを組み合わせて使う 💻

position: stickyを使うと、簡単に吸着されるようなページスクロールを実装できます。developer.mozilla.org DEMO 非常に手軽です。しかし、ここにページ内リンクをscrollIntoViewを使って実装するとちょっとした問題が起こります。具体的にいうと、現在位置…

JavaScriptを使ってフロントでuuidを生成する(Crypto.randomUUID) 💻

www.npmjs.comこれまでは uuid をつかって生成することが多かったのですが、Crypto.randomUUIDを使えばライブラリ不要で、v4のUUIDを生成できることを知りました。developer.mozilla.orgブラウザ対応状況を見たところ、全然実践に投入できそうです。 window.…

Firebase Authenticationを使って、メールアドレスとパスワード認証で作成したユーザーのメールアドレスを変更する ✉️

ドキュメント を見ながら、updateEmailを使って実装してみました。firebase.google.com import { updateEmail, User } from 'firebase/auth'; async function changeEmail(currentUser: User, newEmail: string) { return updateEmail(currentUser, newEmail…

LINE Messaging APIを使って、LINE Botからメッセージに応じたテキストを返信する(ぬるぽの時だけガッを返す) 📱

コードを書く .env package.json index.js 追記 前回 はユーザーから何と送られてきても、「Hello World.」と返信するLINE Botをつくってみましたが、今回はユーザーのメッセージの内容に応じて返信するテキストを変更してみます。コードを書くまでの工程は …

LINE Messaging APIを使って、LINE Botから定型文を返信する 📱

共通の準備(前回と一緒なのでスキップ可能) ❶ Developerアカウントを作成する ❷ プロバイダーを作成する ❸ チャンネルを作成する ❹ チャネルシークレットをメモする ❺ チャネルアクセストークンを発行しメモする ❻ Botと友達になる 今回用の準備 ❶ Ngrokの…

LINE Messaging APIを使って、LINE Botから定型文を送信する 📱

❶ Developerアカウントを作成する ❷ プロバイダーを作成する ❸ チャンネルを作成する ❹ チャネルシークレットをメモする ❺ チャネルアクセストークンを発行しメモする ❻ Botと友達になる ❼ コードを書く .env package.json index.js ❽ メッセージを送信 追記…

SVGの属性に複数の値を渡す際、最後の値にセミコロンをつけるべからず 😱

blog.kimizuka.org 先日の記事 をiPhoneで見ていた際に気づきました。 問題なくアニメーションしているSVGと、アニメーションしないSVGがあることに。(現在は修正済みです) DEMO こちら、地道に検証したところ、SVGの属性にセミコロン区切りで複数の値を渡…

SVGのpathを線形保管でアニメーションさせる 📹

DEMO SVGをアニメーションさせる場合、animate要素を使えば割と簡単に実現できます。developer.mozilla.orgただし、パスを線形保管でアニメーションさせたい場合は、変形前、変形後のコマンドの数を同数にする必要があるので、線形変形可能なSVGデータを作る…

Next.jsを使って、スマートフォン用のPull to Reflash(引っ張って更新)を実装する 📱

Next.jsを使って、スマートフォン用のPull to Reflash(引っ張って更新)を実装しました。 DEMO https://next-pull-to-refresh.vercel.app/※ スマートフォン限定です ソースコード PullToRefreshView.tsx 'use client'; import styled, { keyframes } from '…