UnityでCubeがクリックされたことを検知する 🖱️

Unity

ものすごく久しぶりにUnityを使い、サーバと通信するモックを作成しました。 Cubeをクリックしたことをサーバに送信したり、サーバからJSONをGETしたり、WebSocketでブラウザとメッセージのやりとりをするモックです。実装時に、何もかも忘れていたので、忘…

2024-07-05

OpenCV.jsで早押しボタンが押されたことを検知する ⭕️

OpenCV.js

OpenCV.jsでカメラで撮影した映像内の赤色の割合を検出し、早押しボタンが押されたことを検知するプログラムを作ってみました。部屋の明るさや、日光の入り方などに依存しますが、なかなかの精度が出ています。ソースコード index.html <html> <head> <meta charset="UTF-8" /> <title>OpenCV - Quiz</title> </meta></head></html>

2024-07-04

MouseEvent.buttonとMouseEvent.movementX・MouseEvent.movementYを使って要素をドラッグ可能にする 🖱️

JavaScript

developer.mozilla.orgMouseEvent.buttonとMouseEvent.movementX・MouseEvent.movementYを使うと、ものすごく簡単に要素をドラッグ可能にすることができることを教わりました。 MouseEvent.buttonを使っているのでスマホをはじめとするタッチデバイスでは動…

2024-07-03

Reactで改行を含んだテキストをコンポーネントに渡す 💻

React

改行タグとdangerouslySetInnerHTMLを使う方法ソースコード DEMO 改行コードとwhite-space: pre-wrapを使う方法ソースコード DEMO 改行タグとChildrenを使う方法ソースコード DEMO 改行タグとdangerouslySetInnerHTMLを使う方法、改行コードとwhite-space…

2024-07-02

リポジトリのURLやローカルにダウンロードしたリポジトリをpackage.jsonに指定する 💻

Git

こちらでの対策でpackage.jsonに己のリポジトリを指定しましたが、もう少し深掘りします。blog.kimizuka.orgnpmのドキュメントに、もろもろ記載されています。docs.npmjs.com リポジトリのURLとブランチ名を指定 { "dependencies": { "electron-next": "git+…

2024-07-01

Macからシリアル通信でArduinoにピン番号と値を送り、その通りにPWMを出力する 💻

Arduino JavaScript

ひょんなことからFirmataとJohnny-fiveで行うような処理を自作したという話です。www.arduino.cc johnny-five.ioMacに接続したArduinoに対して、ピン番号と0〜255の値をシリアル通信で送ることで、Arduinoがその通りに出力します。以前つくった、ディマーをO…

2024-06-18

overflow: scrollを入れ子にするとSafariでスクロール不能になる場合がある 💻

CSS

DEMO 偶然発見したコンビネーションなのですが、上記iframeはSafariでスクロールできません。（17.5にて確認） Google Chrome（126.0.6478.61）、Firefox（112.0.1）では問題なくスクロールできます。ソースコード（抜粋） #scroll { // ❶ position: relati…

2024-06-04

MediaQueryList （window.matchMedia）を使ってJavaScriptでメディアクエリにマッチした際の処理を記述する 📝

JavaScript

MediaQueryListのchangeイベントを使って、CSSのメディアクエリを使って書いていた処理をJavaScriptに移植してみます。developer.mozilla.org developer.mozilla.org CSSバージョン（MediaQuery）ウィンドウ幅が375pxまでは「window.innerWidth HTML <p>window</p>…

2024-05-31

Next.js + styled-componentsのプロジェクトにStorybookを導入する 📕

Next.js styled-components

Storybookとは StorybookはUIコンポーネントの開発環境です。コンポーネントライブラリを参照したり、各コンポーネントの状態を表示したり、コンポーネントをテストしたりできるものです。storybook.js.org Storybook導入手順今回はNext.jsに組み込んで使…

2024-05-29

electron/rebuildから@electron/rebuildへ移行する 💻

Electron

Electron + node-dmxでアプリを作った際、ひさしぶりにelectron-rebuildを使ったのですが、廃止予定（This package has been deprecated）になっていることに気づきました。blog.kimizuka.orgwww.npmjs.com直近でテストがコケているのが不安ではあるのですが…

2024-05-28

親要素の幅を縮めた際、子要素も幅を縮めつつ要素内のテキストを省略する 💻

CSS

親要素にflexを設定する子要素に下記CSSを当てる overflow: hidden; text-overflow: ellipsis; white-space: nowrap; これで、ウィンドウサイズを縮めた際、子要素は幅を縮めて要素内のテキストを省略できます。 DEMO もしも、子要素の中に幅を縮めたくない…