2023-01-01から1年間の記事一覧
いままで、あまり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ビューのシェーディングを変更する「ソリッドモード」では発光具合の確認ができないので、「マテリアルプレビュー」か「レンダープレビュー」に変更します。 僕は…
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の…
ヘリンボーン(英: herringbone)は、模様の一種。開きにした魚の骨に似る形状からニシン (herring) の骨 (bone) という意味をもつ。gを黙字にせずヘリングボーンということもある。形状は、V字形や長方形を縦横に連続して組合せられている。 織物(綾織り)…
UIApplication.shared.isIdleTimerDisabled を trueに設定すれば、スリープに入らなくなります。developer.apple.com 試しに、かつてつくった WKWebViewを設置しただけのiOSアプリ に組み込んでみましょう。blog.kimizuka.org ソースコード ContentView.swif…
UIScreen.main.brightness を使えば画面輝度の取得と設定ができます。developer.apple.com値としては0から1をfloatで取れるようなので、 UIScreen.main.brightness = 1.0 // 最大輝度 UIScreen.main.brightness = 0 // 最低輝度 というような感じで設定でき…
オブジェクトモードで「N」を押下するか、右上にある「」をクリックすると、トランスフォームが表示され、そこで寸法が確認できます。寸法はメートルで表示されますが、シーンの設定 > 単位 > 単位を区切るにチェックを入れると、寸法に合わせて「cm」や「mm…
ElectronでBrowserWindowにlocalhostを表示するコードを書きました。 PC内に既にlocalhostが立ち上がっていればそれをそのまま、立ち上がっていなければ起動してからBrowserWindowに表示します。 静的なサーバを起動するだけなので、Expressは必要ないのです…
そもそもウェブサイトが表示されているということは、ほとんどの状態でオンラインであると信じたいところですが、ElectronでJavaScriptを使った時など、JavaScriptからネットワークの状態を確認したいときがあります。そんなときは、 Navigator.onLine を使…
いちかばちか、onDoubleClickでコールバックを設定してみたら動きました。 びっくりして、筆を取っています。よくみたら、 ドキュメント にも記載がありましたが、全然知りませんでした。ja.legacy.reactjs.org ソースコード(抜粋) <div onDoubleClick={ () => console.log('DoubleCl</div>…
前回は、Navigator.setAppBadgeを使ってアイコンにバッジをつけました 。blog.kimizuka.org今回はトークンをデータベースに登録して、サーバからプッシュ通知を送信してみます。 Safariでプッシュ通知を受け取る条件 ❶ httpsでWebサイトをつくる ❷ ❶のウェブ…
かつて、Safariでアクセスした際と、PWAとしてホーム画面に追加した後に開いた際でページの見た目を変更するウェブサイトをつくったことがあるのですが、今回はそれをNext.jsに移植してみようと思います。youtu.begithub.com DEMO web-app-store-kit.vercel.…