結論 「Shift」を押しながら、トラックパッドを上下にスクロールすれば、左右にスクロールできます。 ことの発端 展示にアプリケーションの開発 + アプリケーションをインストールしたPCの納品という仕事があった際、展示期間中に納品したPCを遠隔で操作した…

くるくる回るように数字が変化するカウンターを作りました。 styled-components、lodash、gsapに依存しています。 lodashはreverseしか使っていないので、reverseを自作して外すこともできたのですが、面倒なので使っちゃいました。 gsapに関しても、CSSアニ…

reactnative.dev import { StyleSheet, View } from 'react-native'; import { WebView } from 'react-native-webview'; export default function App() { return ( <View style={ styles.container }> <WebView source={{ uri: 'https://expo.dev' }} /> </View> ); } const styles = StyleSheet.create({ container: { fl…

僕は3つ方法を使い分けています。 ❶ コンソールを確認する yarn startを実行したコンソールに出力されているので、ターミナルを見れば確認できます。 一番手軽です。 ❷ JS Debuggerで確認する yarn startを実行したコンソールで「j」を押下すると、Chromeの…

ヘリンボーン（英: herringbone）は、模様の一種。開きにした魚の骨に似る形状からニシン (herring) の骨 (bone) という意味をもつ。gを黙字にせずヘリングボーンということもある。形状は、V字形や長方形を縦横に連続して組合せられている。 織物（綾織り）…

UIApplication.shared.isIdleTimerDisabled を trueに設定すれば、スリープに入らなくなります。developer.apple.com 試しに、かつてつくった WKWebViewを設置しただけのiOSアプリ に組み込んでみましょう。blog.kimizuka.org ソースコード ContentView.swif…

UIScreen.main.brightness を使えば画面輝度の取得と設定ができます。developer.apple.com値としては0から1をfloatで取れるようなので、 UIScreen.main.brightness = 1.0 // 最大輝度 UIScreen.main.brightness = 0 // 最低輝度 というような感じで設定でき…

オブジェクトモードで「N」を押下するか、右上にある「」をクリックすると、トランスフォームが表示され、そこで寸法が確認できます。寸法はメートルで表示されますが、シーンの設定 > 単位 > 単位を区切るにチェックを入れると、寸法に合わせて「cm」や「mm…

ElectronでBrowserWindowにlocalhostを表示するコードを書きました。 PC内に既にlocalhostが立ち上がっていればそれをそのまま、立ち上がっていなければ起動してからBrowserWindowに表示します。 静的なサーバを起動するだけなので、Expressは必要ないのです…

そもそもウェブサイトが表示されているということは、ほとんどの状態でオンラインであると信じたいところですが、ElectronでJavaScriptを使った時など、JavaScriptからネットワークの状態を確認したいときがあります。そんなときは、 Navigator.onLine を使…

いちかばちか、onDoubleClickでコールバックを設定してみたら動きました。 びっくりして、筆を取っています。よくみたら、 ドキュメント にも記載がありましたが、全然知りませんでした。ja.legacy.reactjs.org ソースコード（抜粋） <div onDoubleClick={ () => console.log('DoubleCl</div>…

前回は、Navigator.setAppBadgeを使ってアイコンにバッジをつけました 。blog.kimizuka.org今回はトークンをデータベースに登録して、サーバからプッシュ通知を送信してみます。 Safariでプッシュ通知を受け取る条件 ❶ httpsでWebサイトをつくる ❷ ❶のウェブ…

かつて、Safariでアクセスした際と、PWAとしてホーム画面に追加した後に開いた際でページの見た目を変更するウェブサイトをつくったことがあるのですが、今回はそれをNext.jsに移植してみようと思います。youtu.begithub.com DEMO web-app-store-kit.vercel.…

developer.mozilla.orgOSのダークモードですが、メディアクエリで簡単に判定できます。 @media (prefers-color-scheme: dark) { /* ダークモードのスタイルを書く */ } DEMO 最近つくっている、PWAをホーム画面に登録することを促すポップアップです。 ライ…

かつて、Next.js 12でミドルウェアを使ったBasic認証の設定方法を 記事 にまとめましたが、Next.js 13になって、ミドルウェアの設定方法に微妙な変更があったため調査しました。blog.kimizuka.orgnextjs.org 変更点 middleware.tsの位置変更 前回の方法 をそ…

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つまで…