iOS16.4からWebサイトでもプッシュ通知を受け取れるようになりました。 そして、僕はこの日を待ち望んでしました。webkit.org去年の今頃、僕は（アップルにリジェクトされ続けている）チバッジを復活させるべく、Expoを使ってiPhoneアプリを作っていましたが…

chrome://flags の overscroll history navigation から無効にすることができました。

以前、まったく同じものをつくった気がしなくもないのですが、見当たらなかったので作成しました。develop.kimizuka.orgFullScreenAPI に対応しているブラウザであれば、全画面にすることもできます。 ソースコード（抜粋） index.js handleResize(); window…

右クリックした際の挙動は、 onContextMenu を使って制御できます。 なので、 Event.preventDefault を使って、既定のアクションが発生しないようにできます。developer.mozilla.org developer.mozilla.org ソースコード（抜粋） import { MouseEvent } from…

フラットなボタンが欲しくなって、はじめは イラストレーター で作ってSVGで書き出そうと思っていたのですが、僕のイラレスキルだと、CSSで作ってしまった方が手っ取り早かったので、CSSでさささっとつくってみました。 DEMO See the Pen button by kimmy (@…

トゥーンレンダリングに憧れて色々試してみました。 使える場所はかなり限定されるのですが、❶ OrthographicCamera を使う ❷ MeshToonMaterial を使ったオブジェクトを作る ❸ ❷で作ったオブジェクトと同じ形で少し大きなオブジェクトを MeshBasicMaterial を…

前回の検証 のイメージトラッキング（NFT）版です。 結論としては、前回の結果と全く同様でした。ARとしてはARオブジェクトの位置を合わせるのが難しく、ちょっと実戦で使用するのは厳しいかなという印象だったイメージトラッキングですが、簡単な画像認証の…

かつて、 A-Frameでマーカーの検知イベントを使ったこと がありましたが、今回はThree.jsで実装してみます。blog.kimizuka.org といっても、A-Frameも内部ではThree.jsを使っているので、実装方法はほとんど変わりません。 ただし、認識時のイベント（marker…

いわゆるひとつのクロマキー合成です。❶ 背景が単色の動画をつくる ❷ 動画の背景色を透明に置き換えてCanvasにレンダリングする ❸ Canvasを CanvasTexture に設定するという流れで実装します。 ❶ 背景が単色の動画をつくる ひさしぶりに Animate を使ってつ…

かつて制作した、 画面幅375pxを下回る環境で観覧した際はviewportをwidth=375に書き換えるスクリプト ですが、React用にカスタムフックにしました。blog.kimizuka.orguseResizeに関しても、かつて作成した useResize を流用しています。 ソースコード useVi…

Electronで展示用のアプリケーションをつくった時などに役に立つTipsなのですが、CSSで、 html { cursor: none; } と指定すればマウスカーソルが非表示になります。 DEMO 常に非表示にすると、調整時などに困ったことになるので、何か条件をつけて表示・非表…

window.openで空のwindowを開き、開いた側のJavaScriptから開かれた側のHTMLの構造を変更する方法として、document.bodyにDOMをappendChildする方法があります。 ソースコード index.js document.querySelector('button').addEventListener('click', () => {…

かつて制作したアレクサスキル、「タイマーの逆襲」。 いまでも非常に気に入っているアプリケーションです。タイマーの逆襲Fumitaka KIMIZUKAAmazonどのようなアプリケーションかというと、❶ AIスピーカーに時間を測って欲しいと頼まれる（3秒経ったら教えて…

ar-js-org.github.ioAR.jsのドキュメント にはA-Frame用を使ったコードが記載されているのですが、Three.jsを使った実装も検証します。 結論 先に結論を書いておきます。 A-Frame を使っても Three.js を使ってもイメージトラッキングの実装は可能でした。 …

最近は、もっぱらAR.jsの検証を行なっていますが、2つのマーカーを同時に認識できるかを検証しました。結果としては、PC版のChromeでも、mobile Safariでも、同時に認識できました。 いくつまで同時にいけるか試そうかとも思ったのですが、今回は一旦2つまで…

これまで、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] という感じで、…