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

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

Vercelでプレビュー環境に表示される「Log in comment」ボタンを強引に非表示にする 🔘

「Log in comment」ボタンはウェブコンポーネントで実装されているため、 vercel-live-feedback { display: none !important; } と、CSSで強引に非表示にすることができます。

Firebase HostingにホスティングしたウェブサイトからCloud FunctionsのHTTPS関数を実行する 🔥

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

Node.jsを14.Xから18.Xまでバージョンアップしたら Error: error:0308010C:digital envelope routines::unsupported となった 😱

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

npm-check-updatesを使ってパッケージをアップデートしつつ、package.jsonを書き換える 📝

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

プロトタイプでCloud Firestoreをさささっと使う(モジュールバンドラー無し ver.) 🔥

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

iOSでbackdrop-filterを使うときはベンダープレフィックスを付与するべし 📱

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

Electron + Next.jsの開発で、yarn devを実行した際にエラーが発生する際の対策 💪

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

Array.prototype.mapを使って作成した配列からundefinedを削除したい 💻

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.getElementsByTagNameやdocument.getElementsByClassNameとdocument.querySelectorAllの違い 📝

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

ローカルで動作するNext.jsのAPIをVercelにデプロイすると同じ値しか返ってこなくなったので、値をキャッシュしないように設定した 💻

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

ローカルで動作するNext.jsのAPIをVercel(Hobbyプラン)にデプロイすると動かなくなったので、Proプランに切り替えた 💻

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

Three.jsでグリッチエフェクトを使う 📺

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

Shopify GraphQL Storefront APIでメタフィールドを取得する書き方の例(2023-07) 📝

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

js-buy-sdk(shopify-buy)を使ってShopifyのCheckoutを作成するとエラーが発生する 😱

ことの発端 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…

Three.jsでオブジェクトを発光させる ✨

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

動的インポートをつかってNext.jsでサーバサイドレンダリングしないコンポーネントをつくる(名前付きエクスポート編) 💻

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

Blender(3.3.6)でオブジェクトを発光させる ✨

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

App Router(Next.js 13.4.4)のSSGとISRを切り替える 💻

App Router(Next.js 13.4.4)のSSGで作成したサイト を、 ISR にしたらどれぐらいパフォーマンスが変わるのかを比べてみようと思い、キャッシュ を調べながら、SSGからISRに切り替えてみました。blog.kimizuka.org nextjs.org nextjs.org DEMO(SSGバージョ…

App Router(Next.js 13.4.4)を使ったウェブサイトで自動的にサイトマップを作成する 🗺️

かつて、 Page Routerを使ったNext.jsのプロジェクトでサイトマップを自動で生成したこと がありました。blog.kimizuka.org今回は、App Router版です。 といっても、とくに難しいことはありません。 ドキュメント に書いてある通りです。nextjs.orgPageRoute…

Next.jsで慣性スクロールを実装する 🌏

かつて、 ブラウザの標準のページスクロールをループさせたこと がありました。blog.kimizuka.orgしかし、こちらの DEMO は、PCでみるとそれなりにいい感じに動作するのですが、iOSのSafariでみるとループの瞬間にカクついてしまいます。今回はカクつかない…

Next.js(13.4)のApp Routerで404ページをカスタムしつつタイトルなどのmetadataを変更する 4️⃣

PageRouterで404ページをカスタムしたい場合は、pages/404.tsx(もしくはpages/404.jsx)を作成すればOKでした。nextjs.orgApp Routerの場合は、app/not-found.tsx(もしくはnot-found.jsx)を作れば良いようです。nextjs.orgなので、AppRouterを使う場合で…

浮動小数点を意識したコードを書く 📝

JavaScriptでは数値が64ビットの浮動小数点数で表されます。突然ですが、問題です。 0.3 / 0.1の答えは幾つになるでしょう。普通に考えれば3になります。 では、JavaScriptで計算してみましょう。2.9999999999999996となりました。 なぜならば、前述の通り、…

iOSにおけるinput要素とuser-select: noneのコンビネーションを調査する 📱

長らくiOSのSafariでは、input要素にuser-select: noneを掛けると、フォーカス時にキーボードが表示されませんでした。 僕は、ElectronやPWAを開発することが多いので、 * { -webkit-user-select: none; user-select: none; としてしまうことが多かったので…

Next.jsのローカルサーバにhttpsでアクセスできるようにする 💻

はじめに blog.kimizuka.orgこちらの記事 のNext.js版です。 yarn dev で立ち上がるサーバをhttpsでアクセスできるようにします。※ 正確には yarn dev は上書きせずに yarn dev:https を作ります 証明書の発行 ターミナルから、 ❶ 秘密鍵の発行 openssl genr…

styled-components用にPC・Moblieを出し分けるメディアクエリを書き出すためのスクリプトをつくる 📱

メディアクエリでパソコンとスマホのデザインを出し分ける際、ブレイクポイントを一括で編集できるようにスクリプトを使って書き出すようにしています。 mediaQuery.ts const mobileMaxWidth = 768; export function isPc(width: number) { return mobileMax…

App Router(Next.js 13.4)を使ったプロジェクトで書き出した静的サイトのページ遷移をシームレスにすべく View Transitions API を試したり、Nested Layoutsを試したりする 💻

View Transitions API とは まずは、Google Chromeでこちらをご覧ください。http203-playlist.netlify.appChrome Developers で紹介されている View Transitions API が体験できるサイトです。developer.chrome.comリンクをクリックするとURLが切り替わって…

Next.js 13.4 + styled-componentsでApp Routerを使いつつ、outputをexportに設定して静的サイトジェネレータとして使う 💻

Next.js 13.4からApp RouterがStableになりました。 普段、Next.jsを静的サイトジェネレータとして使っている自分としては、App Routerの恩恵は少ないような気がしていたのですが、App Routeをつかっても静的書き出しができることを知ったので、これからは時…

Chrome Remote Desktopを使って、MacBookからWindows機に接続した際、トラックパッドで横スクロールしたい 🖱️

結論 「Shift」を押しながら、トラックパッドを上下にスクロールすれば、左右にスクロールできます。 ことの発端 展示にアプリケーションの開発 + アプリケーションをインストールしたPCの納品という仕事があった際、展示期間中に納品したPCを遠隔で操作した…

Reactでスロットのリールのようなカウンターを実装する 🎰

くるくる回るように数字が変化するカウンターを作りました。 styled-components、lodash、gsapに依存しています。 lodashはreverseしか使っていないので、reverseを自作して外すこともできたのですが、面倒なので使っちゃいました。 gsapに関しても、CSSアニ…

Expoで作ったiOSアプリにセーフエリアを設定する 📱

reactnative.dev import { StyleSheet, View } from 'react-native'; import { WebView } from 'react-native-webview'; export default function App() { return ( <View style={ styles.container }> <WebView source={{ uri: 'https://expo.dev' }} /> </View> ); } const styles = StyleSheet.create({ container: { fl…