みかづきブログ・カスタム

基本的にはちょちょいのほいです。

Common JSの__diranameをES Moduleで使用する(ReferenceError: __dirname is not defined in ES module scope) 📁

タイトルの通りですが、ES Moduleで__diranameを使う方法です。例えば、index.jsや、index.cjsに、 console.log(__dirname); と記述し、 node index.jsnode index.cjsを実行すると、ディレクトリまでのパスが表示されますが、index.mjsに、 console.log(__di…

WebSocketを使って、Unityアプリとブラウザでメッセージのやりとりを行う ⚡️

Cubeがクリックされたことを検知 HTTPリクエスト(GET)でJSONの取得 HTTPリクエスト(POST)でJSONの送信 WebSocketによる通信 今回はここ blog.kimizuka.orgblog.kimizuka.orgblog.kimizuka.org今回のモックを作りたくて色々と記事を書いてきましたが、直…

Networking.UnityWebRequestを使って、Cubeがクリックされたときにローカルサーバに対してJSONをPOSTする 📮

Cubeがクリックされたことを検知 HTTPリクエスト(GET)でJSONの取得 HTTPリクエスト(POST)でJSONの送信 今回はここ WebSocketによる通信 前々回、前回の続きです。 今回はCubeがクリックされた際に、HTTPリクエスト(POST)でJSONを送信します。 開発環…

Networking.UnityWebRequestを使って、CubeがクリックされたときにローカルサーバからJSONをGETする 🎁

Cubeがクリックされたことを検知 HTTPリクエスト(GET)でJSONの取得 今回はここ HTTPリクエスト(POST)でJSONの送信 WebSocketによる通信 前回の続きです。 今回はCubeがクリックされた際に、HTTPリクエスト(GET)でJSONを取得します。 Unityアプリに加…

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

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

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

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

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

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

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

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

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

Git

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

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

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

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

CSS

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

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

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

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

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

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

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

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

CSS

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

CSSで左揃えで横並びにした要素をセンタリングする ⚽️

CSS

いままで、float だったり、 flex だったり、mediaクエリ で画面幅ごとに定義したり、ときにJavaScriptであれこれしたりしながら実装してきた、左揃えで横並びにした要素のセンタリングですが、グリッドレイアウトを使えばものすごくシンプルに実現できるこ…

myCobotに「頷き」「首振り」「首傾げ」をしてもらう 🤖

娘に九九のことを好きになってもらえたら良いなと思い、「表示された数字が積になる九九を口頭で答える仕組み」をつくりました。正解するとmyCobotが頷いてくれます。 pic.twitter.com/2X6w4uN04F— 君塚史高 (@ki_230) 2024年5月22日 こちらの仕組みを実装す…

JavaScriptを使って音声で入力された掛け算の積が期待されているものかどうか判定する 🧮

我ながら良くわからないタイトルにしてしまったな。と思いますが、JavaScriptを使って音声で入力された掛け算の積が期待されているものかどうか判定します。ちなみにAIにタイトルを考えてもらうと、 JavaScriptで九九の音声入力を判定 九九の積を音声入力で…

Electron + node-dmx + ディマーでLED電球を調光する 💡

2月に「Webフロントエンド技術で作る体験型コンテンツ勉強会」たるものに参加させていただき、DMXの便利さを痛感してから、ずーっと欲しかった、DMXコントローラーと調光ユニット(ディマー)を、ついに手に入れることができたので、LED電球を調光できるElec…

Next.jsでLoading時に使える関数コンポーネントを作る(SVG編) 🔨

以前はCSSアニメーションでさささっとローディングを作っていましたが、SVGアニメーションバージョンもさささっと作ってみました。blog.kimizuka.org blog.kimizuka.org現状はstyled-componentsで作っていますが、そのうちCSS Modulesで作り直した方が使い勝…

ブラウザに書いた手書きの数字の認識を目指す(OpenAI API編) ✏️

ひょんなことから、ブラウザに書いた手書きの数字の認識を目指すことにしました。 今回は、OpenAI APIを試してみます。前回同様、手書きで数字を書く仕組みは、かつて作った、Canvasに線を引けるWebサイトを流用します。blog.kimizuka.orgまた、OpenAIのAPI…

ブラウザに書いた手書きの数字の認識を目指す(tesseract.js編) ✏️

ひょんなことから、ブラウザに書いた手書きの数字の認識を目指すことにしました。 まずは、tesseract.jsを試してみます。tesseract.projectnaptha.com大前提として、手書きで数字を書く仕組みが必要なので、かつて作った、Canvasに線を引けるWebサイトを流用…

details要素のgrid-template-rowsを0frから1frにtransitionさせることでアコーディオンを実装する 🪗

前々回のdetails要素と前回のgrid-template-rowsの合わせ技です。blog.kimizuka.org blog.kimizuka.orgdetails要素の開閉にアニメーションを設定したい場合、本当はopen属性の有無で子要素のgrid-template-rowsを変更することで、JavaScriptなしで実現できそ…

grid-template-rowsを0frから1frにtransitionさせることでheightがautoのアコーディオンをCSSのみでアニメーションさせる 🪗

CSS

DOMの高さを0からautoにCSSアニメーションでスムーズに変更したいとき、grid-template-rowsを使うといい感じになるということを教えていただきました。 DEMO SCSS(抜粋) dd { display: grid; // ❶ grid-template-rows: 0fr; // ❸ transition: grid-templat…

details要素のopen属性の有無でプロパティを変化させる際、transitionを設定してもアニメーションしない 😱

CSS

details要素自体をアニメーションさせる場合 details要素自体にtransitionを設定し、open属性の有無でプロパティを変化させたときはアニメーションします。 ※ Google Chrome(123.0.6312.124)でしか確認していません。 DEMO SCSS details { background: rgb…

python-shell(5.0.0)からコールバック関数の渡し方が変更になっていることに気づく 🤖

Node.jsからPythonスクリプトを実行できるpython-shell。 僕はNode.jsのサーバからmyCobotを操作する際に活用しています。blog.kimizuka.org基本的にはrunStringメソッドを使ってPythonでコードを実行しています。 ものすごくシンプルに書くと、 import { Py…

Intl.Segmenterを使って絵文字を含んだ文字列のlengthを取得する ✏️

かつて、文字列を配列に分割代入することで絵文字を含んだ文字列のlengthを簡易的に取得したことがありました。blog.kimizuka.orgサロゲートペアに対して、String.prototype.lengthで文字列の長さを取得しようとすると、うまくいかないときもありますが、 co…

フロントでテキストの長さをカウントする際にHTMLタグを除外する 🌏

noteやcodocなど、文章の途中に有料エリアを設定できるプラットフォームが増えてきました。 大体どのプラットフォームでも課金前から有料エリアの文字数を知ることができるようにデザインされています。 noteでの有料エリアの文字数の提示この文字数カウント…

Next.js(Page Router)のuseRouter().asPathにはhashが含まれる 👀

useRouterの公式ドキュメントがこちら。nextjs.orgasPathの項目には、 asPath: String - The path as shown in the browser including the search params and respecting the trailingSlash configuration. basePath and locale are not included. https://n…

特殊文字を使って擬似要素(before, after)に改行を設定する 📝

CSS

\Aで改行できることを知りました。 white-space: pre-wrapとセットで設定する必要があります。 SCSS p { &:after { white-space: pre-wrap; content: '改\A行'; } } DEMO 関連記事 blog.kimizuka.org