先日つくったブラウザで音声を録音できるサイトですが、折角なら録音データを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 …

MediaDevices.getUserMedia()の仕様を確認すると、 すべての constraint が数字とは限りません。例えば、次の例はリアカメラよりもフロントカメラを (利用できるなら) を選好します。 { audio: true, video: { facingMode: "user" } } リアカメラが必要であ…

アルファベットのユーザー名をデータベースには小文字で収納しつつ、HTMLに表示する際は大文字で表示したい。 最近そんな感じのケースがありまして、ReactやVueを使って、 <p className="username">{ username.toUpperCase() }</p> <p class="username">{{ username.toUpperCase() }}</p> といった感じにバインデ…

A-Frameは内部でThree.jsを使っているので、Three.Material.colorWriteをfalseにすることで、実現できます。 threejs.org .colorWrite : Boolean Whether to render the material's color. This can be used in conjunction with a mesh's renderOrder prope…

Next.jsやNuxt.jsを使っているとき、自動的に空いているポートを探してローカルサーバを立ててくれますが、ターミナルで終了してもごく稀にサーバが落ちないことがあります。 そんなときは、ターミナルコマンドでプロセスをkillするしかないので、その手順を…

Next.jsのプロジェクト作成方法 TypeScript導入方法 SCSS導入方法 styled-components導入方法 .babelrc Next.jsのプロジェクト作成方法 yarn create next-app app（以下のコマンドはappディレクトリ以下で行う） TypeScript導入方法 yarn add -D typescript …

www.npmjs.comTypeScript導入済みのNuxtプロジェクトにdelegateを導入しようと思ったのですが、 Could not find a declaration file for module 'delegate'. '/node_modules/delegate/src/delegate.js' implicitly has an 'any' type. Try `npm install @typ…