これまで、ARマーカーは白黒の画像で作成してきました。 しかし、 こちらのサイト でデフォルトで表示されている画像は青が入っていて、ずーっと気になってました。jeromeetienne.github.ioというのも、pattern-marker.pattをテキストエディタで開いてみると…

developer.mozilla.orgこれまで機械音声を作成する場合、 Macのsayコマンドを使っていました 。blog.kimizuka.org音声ファイルを生成できるので、非常に便利です。一方で、生成したmp3をブラウザ上で再生したい場合は、 SpeechSynthesisUtterance を検討して…

iOSのSafariでbuttonタグを連打した際、ダブルタップと判定され、画面が拡大・縮小する現象に困っていました。https://develop.kimizuka.org/touch-action/auto/ をiOS16.13.1のSafariで確認した様子 ボタンをダブルタップすると画面が拡大・縮小するdevelop…

タイトルの通りですが、クリックした箇所を起点にDOMを真っ二つに一刀両断したいなと思い、コードを書いてみました。 思い出の中のFF6の斬鉄剣のようなイメージで制作しましたが、シンプルに仕上げるためにエフェクトは入れていません。 一応、横方向、縦方…

ものすごくはずかしい話ではあるのですが、同じミスを繰り返さないようにメモを残しておきます。久しぶりにAlexaスキルを更新しようと思った時の話です。 かつては、Lambdaへの関数のデプロイは Apex を使っていたのですが、いまとなってはリポジトリがアー…

AR.jsの/three.js/examples/mobile-performance.htmlというサンプルを見ていて、THREEx.ArSmoothedControlsというものを見つけました。github.com早速、サンプルのコードを参考に 以前のコード を修正してみました。blog.kimizuka.org ソースコード（全文） …

こちらのサイト でARマーカーを作成とする際、Pattern Ratioを変更するとマーカーにする画像の大きさを変更することができるので、結果として相対的に縁の太さを変更することができます。jeromeetienne.github.ioただ、Pattern Ratioを0.5以外に設定した場合…

普段、クエリストリングをパースしたい場合は qs を使っています。www.npmjs.com qs.parse('key=value'); // => { key: 'value' } しかし、qsを読み込むほどでもない場合、例えば自分で決めたURLのパラメーターをパースしたい場合などは自作の関数を使ってい…

はじめに 結論 px指定 mm指定 調査 ❶ グリッドを表示して計測 ソースコード 結果 調査 ❷ DOMの大きさをmmで指定して計測 ソースコード 結果 結論 はじめに 最近、HTMLをPDFに変換したいと思うことが増えてきまして、いろいろ調査していたのですが、そんな中…

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

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

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

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

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

これまで、数字が要素の配列をソートする場合、 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] という感じで、…