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

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

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 とすることで、スワイプ、ピンチなどのす…