Navigator.setAppBadgeを使って、iOS16.4のPWA（Progressive web apps）にアプリケーションバッジを付ける 📛

iOS JavaScript

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

2023-03-30

タッチディスプレイ付きのWindows機でGoogle Chromeのジェスチャーによる進む・戻るを無効にする 👆

Windows

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

2023-03-29

windowのサイズを計測するページをつくる 🪟

HTML

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

2023-03-28

Reactを使ったWebサイトで右クリックした際にメニューを表示させないようにする 🖱

React TypeScript

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

2023-03-27

CSSでボタンをつくる 🔘

CSS

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

2023-03-24

Three.jsでトゥーンレンダリング風の表現を試みる 📺

Three.js

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

2023-03-23

AR.js + Three.jsで画像認識時にコールバックイベントを発火させる（markerFoundの調整、markerLostの自作） 🔥

AR.js Three.js

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

2023-03-22

AR.js + Three.jsでマーカー認識時にコールバックイベントを発火させる（markerFoundの調整、markerLostの自作） 🔥

AR.js Three.js

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

2023-03-20

動画の背景色を透明にしたテクスチャーをAR.jsでマーカー上に表示する 🎥

AR.js Three.js

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

2023-03-17

画面幅375pxを下回る環境で観覧した際はviewportをwidth=375に書き換えるスクリプトをカスタムフックにする 📱

React

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

2023-03-16

CSSの力でマウスカーソルを非表示にする 🖱

CSS

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

2023-03-15

window.openで空のwindowを開きつつ、開いたwindowのdocument.bodyにDOMをappendChildする 🪟

JavaScript

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