プロパティの作成 いつの間にやら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当初は、 ボイスメモで録音（音声ファイルを生成） どうにかしてブラウザから音声ファイルにアクセス ファイルアップロード とい…

タイトルにすべてを書いてしまったので、本文に書くことがなくなってしまったのですが、 ある日、 firebase deploy で、Firebase Hostingにデプロイしようと試みたところ、 Error: Failed to get Firebase project PROJECT_NAME. Please make sure the proje…

DEMO See the Pen shape-outside by kimmy (@kimmy) on CodePen. CSSシェイプをつかって、テキストを斜めに段組してみました。developer.mozilla.orgやっていることは単純で、テキストの左右に三角形を置いて、floatで配置しているだけです。縦位置をセンタ…

アニメーションするARオブジェクトに対してシークバーを付けてみました。aframe-animation-mixerをほんのり改造して、ARで表示したオブジェクトのアニメーションをシークできるようにしてみました。 https://t.co/oFezei9dJu pic.twitter.com/GqaZrlg4IX— 君…

Next.jsとThree.jsでウェブサイトをつくったのですが、3Dモデルが重すぎるのでローディングをつくりました。blog.kimizuka.org以前、Reactのクラスコンポーネント用に作ったものを関数コンポーネントで書き直し、CSSをstyled-componentsで管理するように変更…

blog.kimizuka.org以前つくったスクロール管理の仕組みをつかって、ページをスクロールするとダンスを踊るサイトをつくりました。kimizuka.github.ioNext.js + Three.jsでページスクロールに連動してダンスを踊るサイトを作りました。 https://t.co/0kkwD8lq…

ウェブサイトのルートが / じゃないときの設定方法です。 assetPrefixを、 next.config.js module.exports = { assetPrefix: '/hoge' }; という形にすれば、/hoge/ がルートになります。nextjs.orgNuxt.jsでいうところの、 export default { router: { base:…

Next.jsで/pages/about/index.tsx（もしくは /pages/about/index.js） をexportすると about.html になりますが、 /about/index.html にするためにはどうすればいいのかを探ってました。結論を先に書くと、next.config.jsのtrailingSlashをtrueにすればOKで…

blog.kimizuka.org以前つくったスクロール管理の仕組みをつかって、ページをスクロールするとクロールするサイトをつくりました。kimizuka.github.ioNext.jsを使ってページスクロールに連動してクロールするサイトを作りました。https://t.co/Mdth7el9XS pic…

スクロールに連動してアニメーションを動かすサイトや、パララックスを実装する際、 ページのスクロール量（一番上から何%スクロールしているか） スクロールの方向 を管理すると、非常に楽に実装することができます。 今回はNext.js（React.js）のHooks API…

npmで探したら似たようなものがある気もしなくもないですが、すごくシンプルなものが欲しかったので自作しました。 process.browserを使っている点以外はNuxt.jsに依存しているところはないですが、Next.jsで使うことを前提に作ってます。 TypeScrtipt expor…

Nuxt.js + styled-componentsで開発をしているのですが、SCSSのような感じで、 SCSS ol { @for $i from 0 through 10 { li:nth-child(#{$i + 1}) { &:before { content: '#{$i}'; } } } } こちらをstyled-componentsに書き換えてみると、 styled-components …