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…

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

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

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

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

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

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

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

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

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

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

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

Vercelでプレビュー環境に表示される「Log in comment」ボタン。 非表示にしたい場合は設定からOFFにできます。そんなことがあるのかはわあkりませんが、自分に設定を変更する権限がないけれども、大急ぎで非表示にしたい場合、「Log in comment」ボタンはウ…

発行されたURLを普通に叩くとクロスオリジンになってしまうのでどうしたものかと思っていたのですが、ホスティングのリライトルールを使うと回避できます。firebase.google.comというか、公式のドキュメントに詳しい手順が書いてあるので、その通り進めればF…

昔つくったNext.jsのプロジェクトを久しぶりに修正しようと思ったのですが、.node-versionが14.21.3でした。 流石に14は古すぎるので、18.17.1までバージョンアップし、 yarn devを実行したところ、 Error: error:0308010C:digital envelope routines::unsup…

www.npmjs.comnpm-check-updatesを使えば、package.jsonに記載されているパッケージを記載しているバージョンを無視して最新にしてくれます。 依存関係はいい感じに評価してくれるようです。僕の場合、 package.json { "scripts": { "update": "ncu -u" }, "…

本番環境でCloud Firestoreを使う場合、セキュリティルールをしっかり設定しないといけないですが、プロトタイプとして誰でも読み書きOKとしてさささっと実装したい場合もあります。今回は、 ログイン不要で誰でもデータを読み書きできる モジュールバンドラ…

CSSで擦りガラス越しに見ているようなエフェクトをかけたい際、backdrop-filterを使うといい感じに実装できます。 DEMO ソースコード（抜粋） CSS .backdrop-filter { backdrop-filter: blur(4px); } しかし、現状ではSafariで使用するにはベンダープレフィ…

ことの発端 普段、Electronアプリを制作する際は、 Next.jsのElectron + TypeScriptのexample を使っています。github.com yarn create next-app --example with-electron-typescript app-nameで、Electron + Next.jsの雛形が作成できるので非常に便利です。…

const arr = ['a', 'b', 'c', 1, 2, 3].map((item) => { if (typeof item === 'number') { return item * 2; } }); console.log(arr); // => [undefined, undefined, undefined, 2, 4, 6] みたいなケースで、undefinedを削除したい場合、filterを使って、 co…

document.querySelectorAll と、 document.getElementsByTagName document.getElementsByClassName document.getElementsByName は、いずれもNodeListを返すメソッドです。が。返ってくるNodeListは微妙に異なっています。 具体的には、Static NodeList 返っ…

先日 に引き続き、Next.jsのlocalとVercelの挙動の違いについてです。まずは、こちらのソースコードをご覧ください。 ソースコード src/api/timestamp/route.ts import { NextResponse } from 'next/server'; export async function GET(request: Request) {…

いままで、あまりAPIを作ってこなかったので知りませんでしたが、Hobbyプランだと、 Serverless Functionは10秒でタイムアウト するようです。vercel.com ソースコード src/app/api/develop/route.ts import { NextResponse } from 'next/server'; export as…

以前、 Three.js で EffectComposer の UnrealBloomPass を試しました。blog.kimizuka.org今回は、EffectComposer の GlitchPass を試してみました。 DEMO https://kimizuka-org-git-r154-kimizuka.vercel.app/glitch-passグリッチが掛かります。 ソースコー…

かつては、こちらの記事を参考にメタフィールドを取得していました。www.shopify.com メタフィールド取得例 { products(first: 10) { edges { node { metafields(first:10) { edges { node { key value } } } } } } } blog.kimizuka.org参考にした記事が書か…

ことの発端 github.comREADME の記載に従って、 import Client from 'shopify-buy'; // Initializing a client to return content in the store's primary language const client = Client.buildClient({ domain: 'your-shop-name.myshopify.com', storefron…

先日、 Blenderでオブジェクトを発光させました が、今回はThree.jsでオブジェクトを発光させる手順のメモです。 Three.jsとNext.jsを使っていますが、本質的な部分としては Three.jsのEffectComposer と postprocessing unreal bloom を使って実装します。t…

かつて、 動的インポートを使ってNext.jsでサーバサイドレンダリングしないコンポーネントをつくったこと がありました。blog.kimizuka.orgこのときは、default export を使ってエクスポートしているコンポーネントを対象にしていたのですが、名前付きのエク…

Blenderでオブジェクトを発光させる手順のメモです。 バージョンは3.3.6を使っています。 ❶ 3Dビューのシェーディングを変更する「ソリッドモード」では発光具合の確認ができないので、「マテリアルプレビュー」か「レンダープレビュー」に変更します。 僕は…