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

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

Azure Kinect DKにElectronからアクセスする 📷

Azure Kinect DKをNode.jsやElectronから使うためのライブラリを見つけたので試してみようと思います。github.com Azure Kinect DKとは azure.microsoft.com Azure Kinect は、洗練されたコンピューター ビジョンと音声モデル、高度な AI センサー、Azure Co…

AR.js + Three.jsでスマートフォンに対応したシンプルなマーカー型のWebARを実装する 📱

これまで、 A-Frameを使ったWebAR を実装して来たり、 AR.js + Three.js + Next.jsを使ったWebAR を実装してきたりしました。blog.kimizuka.org blog.kimizuka.org今回は極限までシンプルに、必要最低限のライブラリ(AR.js + Three.js)のみを使って、画面…

howler.jsのhtml5オプションが、iOSのSafariに与える影響を調査する(WebAudioAPI VS HTMLAudioElement) 🔈

前回 に引き続き、 howler.js の検証ですが、正確には、iOSでのWeb Audio API と HTMLAudioElement の比較です。blog.kimizuka.org developer.mozilla.org developer.mozilla.orgかつて、iOSでの Web Audio API と Audioタグ の挙動の近いを調査したことがあ…

howler.jsを使ってBGMを自動再生するWebサイトをつくった時の挙動を確認する 🔈

JavaScriptでのオーディオを簡単かつ確実にしてくれるライブラリ、 howler.js 。howlerjs.comこれまでは、Audioタグ や Web Audio API を直接使えば良いという方針で、あまり積極的に使ってきませんでした。developer.mozilla.org developer.mozilla.orgしか…

OpenCV.jsでスマートフォンのカメラを使った動体検知を実装する 📷

かつて、 OpenCV.jsを使ってフレーム差分のみを表示するDEMO をつくりました。blog.kimizuka.orgしかし、若干複雑かつ、取り回しにくいコードになってしまっていたため、今回はフレーム差分を検知した際にコールバックイベントを実行するだけのシンプルめな…

lodashを使って数値が要素の配列(number[])をソートする 1️⃣

これまで、数字が要素の配列をソートする場合、 const arr = [8, 8, 2, 3]; // 昇順 [${ arr }].sort((a, b) => { return a < b ? -1 : 1 }); // => [2, 3, 8, 8] [${ arr }].sort((a, b) => { return a < b ? 1 : -1 }); // => [8, 8, 3, 2] という感じで、…

GSAPをつかってuseRefの値をアニメーションさせる 🎥

Next.jsでDOMをアニメーションさせようと思った際、いつもはトゥイーンを自作していたのですが、いい感じのライブラリがあれば使いたいなと常々思っていました。 そこで、今回はReact + GSAPでDOMのアニメーションを試みてみようと思います。greensock.com …

Three.jsでスフィアマッピングを使って光表現をベイクする(THREE.MeshMatcapMaterial) 🔦

MeshMatcapMaterial をつかって、光表現のベイクを検証しました。基本的には、 こちらのドキュメント と こちらのサンプル の通り実装した感じです。threejs.org threejs.org ソースコード(抜粋) const matcap = new THREE.TextureLoader().load('/img/mat…

CSSのaspect-ratioを使ってDOMの縦横比を指定する 📺

CSS

これまで、アスペクト比を固定しつつサイズ可変のDOMをつくる際は、before要素のpadding-topを使ってました。 DEMO ソースコード(抜粋) SCSS div { width: 50%; background: red; &:before { display: block; padding-top: calc(100% * 9 / 16); content: …

electron-packagerでWindowsアプリを書き出すときにアイコンを指定する 🖼

かつて、electron-packageでMacアプリを書き出す際の調査結果をまとめました。blog.kimizuka.org今回は、Windowsアプリバージョンです。 試したこと まずは、単純に、 electron-packager . 'アプリ名' --icon=icon.png --platform=win32 --arch=x64 と、png…

Next.js + Electronでアプリを開発する際にpublicディレクトリを使う 📁

最近、Electronアプリを制作する際は、 Next.jsのElectron + TypeScriptのexample を使っています。github.com先日、 yarn dev ではpublicディレクトリの画像が読み込めるのに、yarn dist で書き出したアプリからは読み込めないという事態に出会したので、調…

Three.jsでカメラをスムーズに移動する 🎥

DEMO kimizuka.org左上のボタンを押すとカメラの位置がスムーズに移動します。 今回の例だとcubeのscaleを変えるのと見栄えは変わらないですが、しっかりとカメラを動かしています。 ソースコード(抜粋) const maxRange = 16; const minRange = 2; export …

Three.js + Reactで3Dコンテンツをつくるときのためのカスタムフックをつくる 🔨

React + Three.jsでウェブサイトを作る際、こんな感じのカスタムフックを使って、WebGLRenderer、PerspectiveCamera、Sceneを取得しています。 useThree.tsx import { useEffect, useState } from 'react'; import * as THREE from '~/build/three.module'; …

Three.jsでモーフィングをつかってMeshをスムーズに変形させる 📦

morphTargetInfluences をつかったモーフィングを試してみました。threejs.org基本的には、こちらの サンプル をNext.jsに移植した感じですが、抜粋したソースコードはReactを使っていなくとも同じ書き方になる部分です。threejs.org ソースコード(抜粋) c…

Chromeウェブストアに拡張機能を公開する 🌏

はじめに blog.kimizuka.org以前作成した拡張機能 ですが、審査を通過し Chome ウェブストア に公開することができたので、公開手順をまとめます。公開した拡張機能はこちらです。chrome.google.com 手順 ❶ アカウントを作成 https://chrome.google.com/webs…