iOS16.4からWebサイトでもプッシュ通知を受け取れるようになりました。 Safariでプッシュ通知を受け取る条件 ❶ httpsでWebサイトをつくる ❷ ❶のウェブサイトをホーム画面に追加する（displayをstandaloneにする） ❸ ユーザーアクションきっかけで通知の許可…

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以外に設定した場合…