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

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

TypeScript + styled-componentsにpropsを渡す 🎁

公式のAPIリファレンスにTypeScriptとカスタムpropsを組み合わせて使う方法が記載されてました。styled-components.comシンプルなものであれば、 const Text = styled.p<{ color: string }>` color: ${ ({ color }) => color }; `; という感じで定義できます…

Next.jsでサーバサイドレンダリングしないコンポーネントをつくる 💻

Next.js + PixiJSでサイトをつくっていたとき、PixiJSをつかったコンポーネントを読み込もうとすると、 Server Error ReferenceError: self is not defined This error happened while generating the page. Any console logs will be displayed in the term…

Netlifyにホスティングしたサイトのレスポンスヘッダーを調整する 📡

公式のドキュメントにすべてが書いてありました。 設定方法は2パターンあるようです。docs.netlify.com ❶ _headersファイルを作る /* X-Frame-Options: DENY X-XSS-Protection: 1; mode=blockこんな感じで、レスポンスヘッダーに設定したい内容を_headerとい…

BlenderでつくったglbファイルをA-Frameに読み込んでマテリアルの色を編集する 📦

こちらの記事のA-Frameバージョンです。blog.kimizuka.org ❶ Blenderでモデルをつくる ❷ glbファイルを書き出す ❸ glbを読み込むHTMLをつくる ❹ マテリアルを取得して色を変えてみる ❺ カスタムデータ属性で色を変更可能にする ❶ Blenderでモデルをつくる と…

Next.js + PixiJSでPIXI.loaders.Loaderを使った際、ホットリロード時に'Error: Resource named "RESOURCE_NAME" already exists.' となるのを防ぐ 🛡

ことの発端 対策1(没案) 対策2(採用案) ことの発端 Next.js + PixiJSでサイトをつくっていて、 useEffect(() => { if (!app) { return; } app.loader.add('resource-1', '/resource/1.png') .load((loader, resources) => { setResources(resources); })…

Firebase HostingでURL末尾の.htmlを削除する設定にするとNext.jsのホスティングがいい感じになる 🔥

これまで、Next.jsのプロジェクトをFirebase Hostingにデプロイするときは、Next.jsの設定を変更してURLの末尾にスラッシュをつけていました。blog.kimizuka.orgが。逆に、Firebase Hostingの設定を変更してURL末尾の.htmlを削除することができることを知り…

Three.js + AR.js を使って、WebARを実装する 📷

これまでWebARの実装には、A-Frame + AR.jsを使ってきましたが、細かい調整が必要になってきたのでThree.js + AR.jsで実装してみようと思います。aframe.iothreejs.orgA-Frameも内部ではThree.jsを使っているので、ライブラリをひとつ減らすイメージです。AR…

Next.js + Vercel + Twitter APIでツイートの検索結果をウェブページに表示する 🦜

ツイッターの検索結果をウェブページに埋め込みたいとき、昔は公式のウィジェットがあったのですが、2018年に廃止されました。 でも、どうしても検索結果をウェブページに埋め込みたくて諸々調査した結果。Next.js + Vercel + Twitter API で割と簡単に埋め…

Next.js + Firebase Hosting で構築したサイトにGoogleアナリティクスを導入する 📈

Firebase HostingにはGoogleアナリティクスとの連携機能がついています。firebase.google.com僕はこれまで連携機能を使ったことがなく、Firebase Hostingを使っていても、タグやnpmでアナリティクスを導入していたのですが、この度初めて使ってみました。連…

Next.jsにAdobe Fonts(Typekit Webフォント)を導入する ✍️

Adobe Fontsで日本語フォントをWebフォントとして使おうとすると、 <script> (function(d) { var config = { kitId: 'XXXXXXX', scriptTimeout: 3000, async: true }, h=d.documentElement,t=setTimeout(function(){h.className=h.className.replace(/\bwf-loading\b…

CSSセレクタの前方一致を使って、ページ内リンクをまるっとセレクトする 🕸

属性セレクタの前方一致を使って、href属性が#から始まる要素をまるっと取得すればページ内リンクを一網打尽にできます。 [attr^=value] attr という名前の属性の値が value で始まる要素を表します。 https://developer.mozilla.org/ja/docs/Web/CSS/Attrib…

Three.jsがレンダリングに使っているCanvasをdrawImageのsrcにしたり、toDataURLでbase64化したりすると真っ黒になるときの対策方法(preserveDrawingBufferをtrueにする) 🖼

Three.jsがレンダリングしているCanvasは、デフォルトでpreserveDrawingBufferがfalseになっているため、普通にdrawImageで他のCanvasにレンダリングしようとしたり、toDataURLを使ってbase64化したりしようと真っ黒になります。developer.mozilla.orgthreej…