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

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

React Hooksで子コンポーネントにメソッドを定義して親コンポーネントから叩く 🔨

コンポーネントにメソッドを定義できるuseImperativeHandle、refを別のコンポーネントに受け渡すforwardRefを使って実現します。ja.reactjs.org ja.reactjs.org ChildComponent(子) import { forwardRef, useImperativeHandle } from 'react'; export defa…

Setオブジェクトを使ってJavaScriptで配列の中に重複した要素があるかを確認する 🔍

結論 経緯 結論 function isUniq(arr) { return new Set(arr).size === arr.length; } isUniq([0, 1, 2]); // => true isUniq([0, 1, 1]); // => false という感じです。 経緯 配列の中に重複した要素があるかを確認したい場合、lodashを導入しているプロジ…

Next.jsとstyled-componentsを併用すると、warning " > styled-components@5.2.3" has unmet peer dependency "react-is@>= 16.8.0".というワーニングがでるのを解決する 🚨

※ next(10.1.2)とstyled-components(5.2.3)にて確認Next.jsとstyled-componentsを併用すると、yarn や npm install の際に、 warning " > styled-components@5.2.3" has unmet peer dependency "react-is@>= 16.8.0". というワーニングが出るので、若干…

styled-componentで作ったアニメーションのnameを取得する 🎥

結論 const blink = keyframes` 0% { opacity: 0; } 50% { opacity: 1 } 100% { opacity: 0; } `; と定義したアニメーション(blink)であれば、 blink.getName(); でアニメーション名を取得できます。 ことの発端 onAnimationEndを使って、アニメーションの…

画面幅に合わせてフォントサイズを可変させつつ、最小サイズと最大サイズを設定する 🍣

CSS

CSS font-size: 100vw / 1200 * 36; @media (max-width: 750px) { font-size: 750px / 1200 * 36; } @media (min-width: 1601px) { font-size: 1600px / 1200 * 36; } こんな感じで設定できます。 上記の設定だと、 画面幅1200pxの際にフォントサイズ36px 画…

Blenderで作ったglbファイルを並列でThree.jsに読み込む 📦

GLTFLoaderでモデルを読み込む際、配列でURLを渡せると非常に楽だなと思い、つくってみました。 JavaScript async function loadGltfFromUrls(urls) { if (!urls.length) { return []; } const loader = new GLTFLoader(); const list = []; urls.forEach((u…

Blenderで作ったglbファイルをThree.jsで読み込んだあと、複製してたくさん表示する 📦

こちらの記事で、Blenderで作ったglbファイルを読み込んで表示しました。blog.kimizuka.org読み込んだモデルを一度しか使わないのであれば、これで問題ないのですが、同じモデルを何個も配置するときはどうしたものかと考えた結果、cloneをつかって複製する…

CSSで範囲からはみ出したテキストを省略して...にする(一行の場合・複数行の場合) ✏️

CSS

一行の場合 複数行の場合 一行の場合 text-overflowを使います。developer.mozilla.org overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-overflowをellipsisに設定しつつ、overflow:hiddenではみ出した箇所を非表示に、white-spaceを…

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…

ページのスクロールを管理するカスタムフックをつくる 🖱

最近、Next.jsをつかってページスクロールを管理する実験を行ってます。Next.jsを使ってページスクロールに連動してクロールするサイトを作りました。https://t.co/Mdth7el9XS pic.twitter.com/LZwbleg1yv— 君塚史高 (@ki_230) 2021年1月15日 blog.kimizuka.…

styled-componentsでCSSアニメーションを使ってもうまくいかない場合は記述位置を確認する 🔍

最近は、もっぱらNext.js + styled-componentsでウェブサイトを作っております。 そんな折、動作原理を考えたら当然の挙動なのですが、一瞬ハマったのでメモを残します。 ことの発端 const BtnWrapper = styled.div` position: relative; width: 44px; heigh…

Next.jsで作った静的ウェブサイトをGitHub Pagesで公開するためのGitHub Actionsをつくる 🔨

はじめに Next.js + GitHubPagesで静的サイトを公開する設定 については以前記事にしましたが、yarn exportによる書き出し自体は自動化していませんでした。blog.kimizuka.org今回は、以前の設定に加えて、push時に書き出しを自動化するところまで踏み込もう…

iOSでページをスクロールしている最中にscrollToを使ってページのスクロール位置を変更すると次のtouchmoveの発生で元の位置に戻る 👆

github.comこちらのissue に対応するために調査しました。 こんなことは普通はしないと思うのですが、iOSにてページスクロール中にscrollToを使うと、 ❶ ユーザーがページのスクロールを開始する ❷ widow.scrollToでスクロール位置を変更する ❸ (指定箇所ま…

touch-action: noneでtouch操作を無効にする 👆

CSS

iOSでウェブページのスクロールを止めるためにもろもろ調査をしていて、touch-actionたるものを知りました。developer.mozilla.orgその名の通り、許容するタッチ操作を指定できるプロパティで、 touch-action: none とすることで、スワイプ、ピンチなどのす…

Next.jsで作ったサイトをGitHub Pagesで公開する際の設定4点(.nojekyllの追加、ルートの変更、exportのディレクトリ変更、trailingSlashの設定) 👀

❶ _nextディレクトリが404にならないように、publicディレクトリに.nojekyllを追加する Nuxt.jsを使った場合と同じです。blog.kimizuka.orgGitHubPagesのデフォルトの設定では、こちらの通り、アンダースコア (_)、ピリオド (.)、またはハッシュ記号 (#) で…

TypeScriptで開発しているNuxt.jsのプロジェクトにgtagを導入する 🖥

プロパティの作成 いつの間にやらGoogleアナリティクス4たるものがリリースされていました。support.google.comが。Nuxt.jsとの組み合わせを考えると、まだユニバーサルアナリティクスを使った方が良いみたいなので、アカウントをつくるときに、「ユニバーサ…

NetlifyとGitの連携を解除する(解除できない) 🔪

行きは良い良い的な話です。NetlifyとGitを連携させるのは超簡単で、GitにPushするだけでNetlifyにデプロイされるように設定すると運用がすごく楽になります。 が。一度連携させると解除する方法がないような気がします。 (別のGitと連携させなおすことはで…

ブラウザで録音した音声をBlobにしてサーバにアップロードする&サーバからダウンロードしたBlobをBlob URLにしてaudioタグで再生するために、Blob ⇄ Blob URLの変換方法を調べる 🎤

先日つくったブラウザで音声を録音できるサイトですが、折角なら録音データをFirebaseにアップロードしたいと思いました。Next.js + RecorderService.js でブラウザで音声を録音する - みかづきブログ・カスタムそのために、Blob URL → Blob と Blob → Blob…

Next.js + RecorderService.js でブラウザで音声を録音する 🎙

mobile Safariから音声を投稿する仕組みを考えていたところ、MediaRecorder APIたるものを発見しました。developer.mozilla.org当初は、 ボイスメモで録音(音声ファイルを生成) どうにかしてブラウザから音声ファイルにアクセス ファイルアップロード とい…