Blenderでオブジェクトを発光させる手順のメモです。 バージョンは3.3.6を使っています。 ❶ 3Dビューのシェーディングを変更する「ソリッドモード」では発光具合の確認ができないので、「マテリアルプレビュー」か「レンダープレビュー」に変更します。 僕は…
App Router（Next.js 13.4.4）のSSGで作成したサイト を、 ISR にしたらどれぐらいパフォーマンスが変わるのかを比べてみようと思い、キャッシュ を調べながら、SSGからISRに切り替えてみました。blog.kimizuka.org nextjs.org nextjs.org DEMO（SSGバージョ…
かつて、 Page Routerを使ったNext.jsのプロジェクトでサイトマップを自動で生成したこと がありました。blog.kimizuka.org今回は、App Router版です。 といっても、とくに難しいことはありません。 ドキュメント に書いてある通りです。nextjs.orgPageRoute…
かつて、 ブラウザの標準のページスクロールをループさせたこと がありました。blog.kimizuka.orgしかし、こちらの DEMO は、PCでみるとそれなりにいい感じに動作するのですが、iOSのSafariでみるとループの瞬間にカクついてしまいます。今回はカクつかない…
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のSafariでは、input要素にuser-select: noneを掛けると、フォーカス時にキーボードが表示されませんでした。 僕は、ElectronやPWAを開発することが多いので、 * { -webkit-user-select: none; user-select: none; としてしまうことが多かったので…
はじめに blog.kimizuka.orgこちらの記事 のNext.js版です。 yarn dev で立ち上がるサーバをhttpsでアクセスできるようにします。※ 正確には yarn dev は上書きせずに yarn dev:https を作ります 証明書の発行 ターミナルから、 ❶ 秘密鍵の発行 openssl genr…
メディアクエリでパソコンとスマホのデザインを出し分ける際、ブレイクポイントを一括で編集できるようにスクリプトを使って書き出すようにしています。 mediaQuery.ts const mobileMaxWidth = 768; export function isPc(width: number) { return mobileMax…
View Transitions API とは まずは、Google Chromeでこちらをご覧ください。http203-playlist.netlify.appChrome Developers で紹介されている View Transitions API が体験できるサイトです。developer.chrome.comリンクをクリックするとURLが切り替わって…
Next.js 13.4からApp RouterがStableになりました。 普段、Next.jsを静的サイトジェネレータとして使っている自分としては、App Routerの恩恵は少ないような気がしていたのですが、App Routeをつかっても静的書き出しができることを知ったので、これからは時…
結論 「Shift」を押しながら、トラックパッドを上下にスクロールすれば、左右にスクロールできます。 ことの発端 展示にアプリケーションの開発 + アプリケーションをインストールしたPCの納品という仕事があった際、展示期間中に納品したPCを遠隔で操作した…
くるくる回るように数字が変化するカウンターを作りました。 styled-components、lodash、gsapに依存しています。 lodashはreverseしか使っていないので、reverseを自作して外すこともできたのですが、面倒なので使っちゃいました。 gsapに関しても、CSSアニ…
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…
僕は3つ方法を使い分けています。 ❶ コンソールを確認する yarn startを実行したコンソールに出力されているので、ターミナルを見れば確認できます。 一番手軽です。 ❷ JS Debuggerで確認する yarn startを実行したコンソールで「j」を押下すると、Chromeの…
