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

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

Reactで等速で往復運動するコンポーネントをつくる 👾

単純な往復運動であればsin関数を使って実装しますが、これだと等速にはなりません。 いや、数学の得意な人であれば、どうにかして等速にできるのかもしれないですが、今回は単純に区間を区切った式で等速往復を実装します。 DEMO ※ クリックすると動き出し…

Windows 11を開発者モードで使う 🔧

最近話題のStable DiffusionをWIndows 11で動かしてみようと思い、もろもろ試していたところ、Widnowsに開発者モードがあることを知りました。設定 > プライバシーとセキュリティ > 開発者向け > 開発者モード を オン にすると開発者モードになります。Stab…

THREE.Raycasterを使って、直線上にオブジェクトが存在するかを調べる 🔍

以前、Three.jsでクリックされたオブジェクトを判定する際に使った、THREE.Raycasterを再び調査しました。blog.kimizuka.orgthreejs.orgクリックされたオブジェクトの判定では、Raycaster.setFromCameraというメソットを使い、クリックされた点の直線上に存…

Three.jsで複数のカメラ切り替える 🎥

複数のカメラをスイッチングしたいなと思って、いろいろ試しました。 しかし、なんら難しいことはなく、結論から書くと、カメラを複数用意して、renderer.renderに渡し直してあげれば実現できました。 DEMO ソースコード(抜粋) const renderer = new THREE…

input type="time"に表示される時計のアイコンを非表示にする ⏰

CSS

Googe Chromeではinput type="time"の右端に時計のアイコンが表示されます。このアイコンは、 [input type="time"]::-webkit-calendar-picker-indicator というCSSセレクタでセレクトできるので、非表示にしたい場合、 [input type="time"]::-webkit-calenda…

clip-pathで切り抜いたDOMを画像化する 🖼

DEMO clip-pathで切り抜いたDOMをhtml2canvasで画像化すると、clip-pathが無視されます。 もろもろ試したところ、dom-to-imageというライブラリを使ってみると、しっかりとclip-pathを反映することができました。github.com html2canvasで画像化 dom-to-imag…

iOS15のmobile SafariでDOMをDrag and Dropできるようにする 👆

ことの発端 blog.kimizuka.orgかつて、Drag and Drop APIを試したことがありましたが、最近になってiPadで動作していないことに気がつきました。(iOS 15.6にて確認) iOS 15.6で動作しなかったDEMO(Drag and Drop API) caniuse.comCan I use では、iOS15…

ngrokを使ってローカルのExpressをグローバルに公開する 🌏

ローカルで立ち上げたサーバをさくっとグローバルに公開したいとき、ngrok が便利です。ngrok.com 準備 ❶ ngrokのアカウントを作る https://ngrok.com/ の「Sign up」からアカウントを作成します。 ❷ authtokenをメモする https://dashboard.ngrok.com/get-s…

animateTransformを使ってSVGにアニメーションを埋め込む 🎥

これまでSVGを動かす場合、CSSの@keyframesを使ってました。developer.mozilla.org具体的には、こちらのSVGを回転させたい場合、 CSS(抜粋) svg { animation: rotate .8s linear infinite; } @keyframes rotate { 0% { transform: rotateZ(0deg); } 100% {…

NetlifyでNetlify DNSを使わずに自前のサブドメインを使用する 💻

かつて、Netlify DNSからDNSレコードを削除するのに大変苦労した覚えがありまして、Netlify DNSを使わずに自前のサブドメインを使用する方法を探っていたのですが、普通にCNAMEを設定すればOKでした。blog.kimizuka.org 手順 ❶ サブドメインの登録 Netlifyプ…

scroll-snapを使ってカルーセルをつくる 🖱

CSSのscroll-snapをつかってカルーセルをつくってみました。developer.mozilla.org ループ無し DEMO ソースコード(抜粋) JavaScript const { useEffect, useRef, useState } = React; function App() { const [ list ] = useState([1, 2, 3]); const width…

imageminとimagemin-pngquantを使ってPNG画像を軽量化する 🖼

imagemin と imagemin-pngquant を使って、ディレクトリ内のPNG画像をまるっと軽量化するスクリプトを書きます。 www.npmjs.com www.npmjs.com 実装方法 ❶ 必要なパッケージをインストールします yarn add -D imagemin imagemin-pngquant ❷ distディレクトリ…

radial-gradientで円形のクラデーションを描く際は内接する四角形の大きさを指定する ⭕️

CSS

先日、radial-gradientを使ってパキッとした円を描こうと思った際に、円形グラデーションの%の指定が、円に内接する四角形の大きさを指定していることに気づきました。 ソースコード(抜粋) div { display: flex; align-items: center; justify-content: ce…

Canvasで長方形を扇のように分割する 🔪

需要があるかは謎ですが、長方形を扇のように分割するコードを書いたので、記録を残しておきます。 DEMO HTML <canvas></canvas> <input type="number" value="5" min="1" max="18" /> JavaScript const canvas = document.querySelector('canvas'); const ctx = canvas.getContext('2d'); let length = 5; canvas.width = 400; c…

Three.jsのTextGeometryで日本語を立体的に表示する 🇯🇵

ソースコード抜粋 // three.js r127 にて検証 const fontLoader = new THREE.FontLoader(); // ローダーのインスタンスをつくる fontLoader.load('/scripts/m-plus-1-code-bold.json', (font) => { // typeface.jsを読み込む const textGeometry = new THREE…

Layoutを使ってページを跨いでもunmountされないコンポーネントをつくる 📝

ページA、ページBに共通するコンポーネント(往復する■)を読み込んだ際、普通に実装するとページを遷移するたびに■の位置は初期値に戻るので、タイミングによってはワープしたように見えます。これをなんとかできないものかと調べてみたところ、Layoutsを使…

html2canvasがwriting-mode: vertical-rlに対応しきれていないのでCanvasで縦書きを実現する 📝

writing-mode: vertical-rlを使えばCSSで縦書きを簡単に実現できます。developer.mozilla.org DEMO 普段はこれでまったく問題ないのですが、html2canvasを使ってHTMLを画像書き出ししようとすると、writing-mode: vertical-rlがうまく評価されません。 検証…

Reactでテキスト量に応じて高さを自動で調整するtextareaを作る 📝

結論 自作編 基本的な方針 JavaScript(抜粋) DEMO 応用的な方針 JavaScript(抜粋) DEMO 他人のふんどし編 結論 react-textarea-autosize に任せる。github.com 自作編 基本的な方針 textareaのvalueの変更を検知する textareaのheightをautoにする texta…

VerselにデプロイしたNext.js製のサイトのサイトマップをデプロイの度に自動生成する 🗺

❶ Next.jsにnext-sitemapを導入し、サイトマップを生成する準備をする next-sitemapの導入 next-sitemap.config.jsの作成 package.jsonの編集 ❷ デプロイの度にサイトマップを自動生成するようにVercelのビルド設定を編集する ❸ Google Search Consoleにサイ…

Charlesを使ってhttpsのサイトのリソースをローカルファイルに差し替える 🫖

Mac

昔はよく使っていたのですが、5年ぶりぐらいにCharlesを起動してみたところ、すっかり使い方を忘れていたので、ドキュメントを読みなおしました。www.charlesproxy.com Charlesとは 通信のモニタリングなどを行うソフトです。 いろんな使い道があるのですが…

html2canvasでmix-blend-modeを使っているページのスクリーンショットを撮る 📸

ことの発端 調査(Issueを発見) さらに調査(プルリクエストを発見) 検証 左(ブレンドモードなし) HTML 中央(ブレンドモードあり) HTML 右(ブレンドモードあり) HTML 画像化 左(ブレンドモードなし) 中央(ブレンドモードあり) 右(ブレンドモー…

next/linkのaタグをラップした際の挙動を改めて確認する 🔍

リンクを作成する際に使うnext/link。 改めて仕様を確認してみました。nextjs.org ❶ テキストのみを渡す ソースコード レンダリング結果 ❷ hrefなしのaタグをラップ ソースコード レンダリング結果 ❸ spanタグをラップ ソースコード レンダリング結果 ❹ aタ…

Next.jsにJestを導入してテストを書く 💯

Nuxt.jsではJestを使ったテストを作成していたのですが、Next.jsに導入したことがなかったので導入方法を調べました。 Next.jsのドキュメントにJestの導入方法がまとまっていたのでここを参考にしました。nextjs.org ライブラリの導入 yarn add -D jest @tes…

Yarn Workspacesを使って複数のExpoプロジェクトを管理する 📁

前回は、簡単に Yarn Workspacesの環境を構築しました。blog.kimizuka.org今回は、Yarn Workspacesを使って複数のExpoプロジェクトを管理してみようと思います。というのも、前回の構築方法で、複数のExpoプロジェクトを管理すると、 Error: Cannot resolve …

Yarn Workspacesを使って複数のプロジェクトを管理する 📁

ことの発端 Yarn Workspacesとは ディレクトリ構成 設定方法 ❶ rootディレクトリの作成 ❷ package.jsonの編集 ❸ workspace-aの作成 ❹ workspace-bの作成 ❺ workspace-a、workspace-bにパッケージ(今回はaxios)を追加する ❻ workspace-a/index.mjsを作成、w…

ExpoでiPad非対応のアプリを書き出す 📱

Xcodeのデバイス設定 iPad非対応のiOSアプリを書き出したい時、Xcodeのアプリの設定から General > Deployment Info > Device を iPhone(iPhone、iPad、Universalから選択)にすればOKだと思っていたのですが、ひさしぶりにXcodeを開いてみると、若干勝手が…

SourceTreeからコミットを試みるとHuskyのpre-commitでエラーになる(husky - pre-commit hook exited with code 127) 😱

ことの発端 Huskyでpre-commitが設定してあるプロジェクトに対し、SourceTreeからコミットを行った際、 .husky/pre-commit: line 4: yarn: command not found husky - pre-commit hook exited with code 127 (error) というエラーが出てコミットできませんで…

Web Share API を使って複数のファイルをシェアする際、順序が保証されないことに気づいた 📱

以前、iOS15でWeb Share APIを試しました。blog.kimizuka.orgその際は気づかなかったのですが、ファイルを複数シェアしようとすると順番が保証されないということに気づきました。 DEMO https://develop.kimizuka.org/web-share-api-multiple-files/Web Shar…

accent-colorを使って、チェックボックス(type="checkbox")、ラジオ(type="redio")、スライダー(type="range")の色を変更する ✅

CSS

accent-colorというCSSプロパティを使えば、input要素の色を変更できることしりました。developer.mozilla.orgInternet Explorerは非対応ですが、モダンブラウザの最新版であれば問題なく使えるようです。 検証 ソースコード input { accent-color: red; } …

Googleアナリティクス(gtag.js)実装時に、ユーザーの同意を得てからCookieを使用するようにする 📈

Cookieを使用する前に同意を取ることがスタンダードになりつつある昨今、Googleアナリティクスの対応を調べてみると、しっかりと対応してました。developers.google.com今回はgtag.jsを使いアナリティクスを設定されているサイトに対し、ユーザーが同意する…