前回はReactで等速で往復運動するコンポーネントを作りました。blog.kimizuka.orgこのコンポーネントを複数設置すればインベーダーゲームのような動きが作れると思い、試してみたのですが。※ クリックすると動き出します何かが違う。公式サイトを観察してみ…
タイトルの通りですが、ES Moduleで__diranameを使う方法です。例えば、index.jsや、index.cjsに、 console.log(__dirname); と記述し、 node index.jsnode index.cjsを実行すると、ディレクトリまでのパスが表示されますが、index.mjsに、 console.log(__di…
Cubeがクリックされたことを検知 HTTPリクエスト（GET）でJSONの取得 HTTPリクエスト（POST）でJSONの送信 WebSocketによる通信 今回はここ blog.kimizuka.orgblog.kimizuka.orgblog.kimizuka.org今回のモックを作りたくて色々と記事を書いてきましたが、直…
Cubeがクリックされたことを検知 HTTPリクエスト（GET）でJSONの取得 HTTPリクエスト（POST）でJSONの送信 今回はここ WebSocketによる通信 前々回、前回の続きです。 今回はCubeがクリックされた際に、HTTPリクエスト（POST）でJSONを送信します。 開発環…
Cubeがクリックされたことを検知 HTTPリクエスト（GET）でJSONの取得 今回はここ HTTPリクエスト（POST）でJSONの送信 WebSocketによる通信 前回の続きです。 今回はCubeがクリックされた際に、HTTPリクエスト（GET）でJSONを取得します。 Unityアプリに加…
ものすごく久しぶりにUnityを使い、サーバと通信するモックを作成しました。 Cubeをクリックしたことをサーバに送信したり、サーバからJSONをGETしたり、WebSocketでブラウザとメッセージのやりとりをするモックです。実装時に、何もかも忘れていたので、忘…
OpenCV.jsでカメラで撮影した映像内の赤色の割合を検出し、早押しボタンが押されたことを検知するプログラムを作ってみました。 部屋の明るさや、日光の入り方などに依存しますが、なかなかの精度が出ています。 ソースコード index.html <html> <head> <meta charset="UTF-8" /> <title>OpenCV - Quiz</title> </meta></head></html>
developer.mozilla.orgMouseEvent.buttonとMouseEvent.movementX・MouseEvent.movementYを使うと、ものすごく簡単に要素をドラッグ可能にすることができることを教わりました。 MouseEvent.buttonを使っているのでスマホをはじめとするタッチデバイスでは動…
改行タグとdangerouslySetInnerHTMLを使う方法 ソースコード DEMO 改行コードとwhite-space: pre-wrapを使う方法 ソースコード DEMO 改行タグとChildrenを使う方法 ソースコード DEMO 改行タグとdangerouslySetInnerHTMLを使う方法、改行コードとwhite-space…
こちらでの対策でpackage.jsonに己のリポジトリを指定しましたが、もう少し深掘りします。blog.kimizuka.orgnpmのドキュメントに、もろもろ記載されています。docs.npmjs.com リポジトリのURLとブランチ名を指定 { "dependencies": { "electron-next": "git+…
ひょんなことからFirmataとJohnny-fiveで行うような処理を自作したという話です。www.arduino.cc johnny-five.ioMacに接続したArduinoに対して、ピン番号と0〜255の値をシリアル通信で送ることで、Arduinoがその通りに出力します。以前つくった、ディマーをO…
DEMO 偶然発見したコンビネーションなのですが、上記iframeはSafariでスクロールできません。（17.5にて確認） Google Chrome（126.0.6478.61）、Firefox（112.0.1）では問題なくスクロールできます。 ソースコード（抜粋） #scroll { // ❶ position: relati…
MediaQueryListのchangeイベントを使って、CSSのメディアクエリを使って書いていた処理をJavaScriptに移植してみます。developer.mozilla.org developer.mozilla.org CSSバージョン（MediaQuery） ウィンドウ幅が375pxまでは「window.innerWidth HTML <p>window</p>…
Storybookとは StorybookはUIコンポーネントの開発環境です。 コンポーネントライブラリを参照したり、各コンポーネントの状態を表示したり、コンポーネントをテストしたりできるものです。storybook.js.org Storybook導入手順 今回はNext.jsに組み込んで使…
Electron + node-dmxでアプリを作った際、ひさしぶりにelectron-rebuildを使ったのですが、廃止予定（This package has been deprecated）になっていることに気づきました。blog.kimizuka.orgwww.npmjs.com直近でテストがコケているのが不安ではあるのですが…
