コンポーネントにメソッドを定義できるuseImperativeHandle、refを別のコンポーネントに受け渡すforwardRefを使って実現します。ja.reactjs.org ja.reactjs.org ChildComponent（子） import { forwardRef, useImperativeHandle } from 'react'; export defa…
結論 経緯 結論 function isUniq(arr) { return new Set(arr).size === arr.length; } isUniq([0, 1, 2]); // => true isUniq([0, 1, 1]); // => false という感じです。 経緯 配列の中に重複した要素があるかを確認したい場合、lodashを導入しているプロジ…
※ 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". というワーニングが出るので、若干…
結論 const blink = keyframes` 0% { opacity: 0; } 50% { opacity: 1 } 100% { opacity: 0; } `; と定義したアニメーション（blink）であれば、 blink.getName(); でアニメーション名を取得できます。 ことの発端 onAnimationEndを使って、アニメーションの…
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 画…
GLTFLoaderでモデルを読み込む際、配列でURLを渡せると非常に楽だなと思い、つくってみました。 JavaScript async function loadGltfFromUrls(urls) { if (!urls.length) { return []; } const loader = new GLTFLoader(); const list = []; urls.forEach((u…
こちらの記事で、Blenderで作ったglbファイルを読み込んで表示しました。blog.kimizuka.org読み込んだモデルを一度しか使わないのであれば、これで問題ないのですが、同じモデルを何個も配置するときはどうしたものかと考えた結果、cloneをつかって複製する…
一行の場合 複数行の場合 一行の場合 text-overflowを使います。developer.mozilla.org overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-overflowをellipsisに設定しつつ、overflow:hiddenではみ出した箇所を非表示に、white-spaceを…
公式のAPIリファレンスにTypeScriptとカスタムpropsを組み合わせて使う方法が記載されてました。styled-components.comシンプルなものであれば、 const Text = styled.p<{ color: string }>` color: ${ ({ color }) => color }; `; という感じで定義できます…
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…
公式のドキュメントにすべてが書いてありました。 設定方法は2パターンあるようです。docs.netlify.com ❶ _headersファイルを作る /* X-Frame-Options: DENY X-XSS-Protection: 1; mode=blockこんな感じで、レスポンスヘッダーに設定したい内容を_headerとい…
こちらの記事のA-Frameバージョンです。blog.kimizuka.org ❶ Blenderでモデルをつくる ❷ glbファイルを書き出す ❸ glbを読み込むHTMLをつくる ❹ マテリアルを取得して色を変えてみる ❺ カスタムデータ属性で色を変更可能にする ❶ Blenderでモデルをつくる と…
ことの発端 対策1（没案） 対策2（採用案） ことの発端 Next.js + PixiJSでサイトをつくっていて、 useEffect(() => { if (!app) { return; } app.loader.add('resource-1', '/resource/1.png') .load((loader, resources) => { setResources(resources); })…
これまで、Next.jsのプロジェクトをFirebase Hostingにデプロイするときは、Next.jsの設定を変更してURLの末尾にスラッシュをつけていました。blog.kimizuka.orgが。逆に、Firebase Hostingの設定を変更してURL末尾の.htmlを削除することができることを知り…
これまでWebARの実装には、A-Frame + AR.jsを使ってきましたが、細かい調整が必要になってきたのでThree.js + AR.jsで実装してみようと思います。aframe.iothreejs.orgA-Frameも内部ではThree.jsを使っているので、ライブラリをひとつ減らすイメージです。AR…
ツイッターの検索結果をウェブページに埋め込みたいとき、昔は公式のウィジェットがあったのですが、2018年に廃止されました。 でも、どうしても検索結果をウェブページに埋め込みたくて諸々調査した結果。Next.js + Vercel + Twitter API で割と簡単に埋め…
Firebase HostingにはGoogleアナリティクスとの連携機能がついています。firebase.google.com僕はこれまで連携機能を使ったことがなく、Firebase Hostingを使っていても、タグやnpmでアナリティクスを導入していたのですが、この度初めて使ってみました。連…
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…
属性セレクタの前方一致を使って、href属性が#から始まる要素をまるっと取得すればページ内リンクを一網打尽にできます。 [attr^=value] attr という名前の属性の値が value で始まる要素を表します。 https://developer.mozilla.org/ja/docs/Web/CSS/Attrib…
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.…
最近は、もっぱらNext.js + styled-componentsでウェブサイトを作っております。 そんな折、動作原理を考えたら当然の挙動なのですが、一瞬ハマったのでメモを残します。 ことの発端 const BtnWrapper = styled.div` position: relative; width: 44px; heigh…
はじめに Next.js + GitHubPagesで静的サイトを公開する設定 については以前記事にしましたが、yarn exportによる書き出し自体は自動化していませんでした。blog.kimizuka.org今回は、以前の設定に加えて、push時に書き出しを自動化するところまで踏み込もう…
github.comこちらのissue に対応するために調査しました。 こんなことは普通はしないと思うのですが、iOSにてページスクロール中にscrollToを使うと、 ❶ ユーザーがページのスクロールを開始する ❷ widow.scrollToでスクロール位置を変更する ❸ （指定箇所ま…
iOSでウェブページのスクロールを止めるためにもろもろ調査をしていて、touch-actionたるものを知りました。developer.mozilla.orgその名の通り、許容するタッチ操作を指定できるプロパティで、 touch-action: none とすることで、スワイプ、ピンチなどのす…
❶ _nextディレクトリが404にならないように、publicディレクトリに.nojekyllを追加する Nuxt.jsを使った場合と同じです。blog.kimizuka.orgGitHubPagesのデフォルトの設定では、こちらの通り、アンダースコア (_)、ピリオド (.)、またはハッシュ記号 (#) で…
プロパティの作成 いつの間にやらGoogleアナリティクス4たるものがリリースされていました。support.google.comが。Nuxt.jsとの組み合わせを考えると、まだユニバーサルアナリティクスを使った方が良いみたいなので、アカウントをつくるときに、「ユニバーサ…
行きは良い良い的な話です。NetlifyとGitを連携させるのは超簡単で、GitにPushするだけでNetlifyにデプロイされるように設定すると運用がすごく楽になります。 が。一度連携させると解除する方法がないような気がします。 （別のGitと連携させなおすことはで…
先日つくったブラウザで音声を録音できるサイトですが、折角なら録音データをFirebaseにアップロードしたいと思いました。Next.js + RecorderService.js でブラウザで音声を録音する - みかづきブログ・カスタムそのために、Blob URL → Blob と Blob → Blob…
mobile Safariから音声を投稿する仕組みを考えていたところ、MediaRecorder APIたるものを発見しました。developer.mozilla.org当初は、 ボイスメモで録音（音声ファイルを生成） どうにかしてブラウザから音声ファイルにアクセス ファイルアップロード とい…
