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

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

2021-01-01から1ヶ月間の記事一覧

ブラウザで録音した音声を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当初は、 ボイスメモで録音(音声ファイルを生成) どうにかしてブラウザから音声ファイルにアクセス ファイルアップロード とい…

なぜかfirebase deployに失敗するときは一度ログアウトしてみると解決することがある 🔥

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

shape-outsideをつかってテキストの表示領域を平行四辺形にする 📝

CSS

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

aframe-animation-mixerを改造してARオブジェクトのアニメーションを制御可能にする 🎥

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

Next.jsでLoading時に使える関数コンポーネントを作る 🔨

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

Next.js + Three.jsでページのスクロールを管理して3Dモデルをアニメーションさせる 🎥

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

Next.jsでURLのルートを変更する 💻

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

Next.jsでexportするときにURLの最後にスラッシュが付くようにする 💻

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

Next.jsでページのスクロールを管理してクロールする 🏊‍♂️

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

Next.jsでページのスクロールを管理する 📄

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

Next.jsで使えるAnimationクラスをつくる 🎥

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

SCSSの@forをstyled-componentsで書き換える 🔁

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 …

navigator.mediaDevices.getUserMediaで立ち上げるカメラを指定する際のポイント 🎥

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

text-transformを使ってCSSの力でテキストを大文字にしたり小文字にしたりする 📝

CSS

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

A-Frameで深度をつかってマスクを掛ける 👀

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…

Macでlocalhost:3000を使っているプロセスをターミナルからkillする 🗡

Mac

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

Next.jsにTypeScript、SCSS、styled-componentsを導入する 📄

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

TypeScript導入済みのNuxtプロジェクトで型定義ファイルのないnpmパッケージを使う 💻

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…