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

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

トップ > JavaScript

JavaScript

osc.jsを使ってZIG SIMからOSCで送られてくるセンサ値を受け取る 📱

JavaScript

www.npmjs.comZIG SIMから送られてくる値は、ZIG indicatorで確認したいところですが、残念ながらOSCを受け取ることはできないので、Node.jsを書いて、さささっとターミナル上で確認します。zig-project.com ソースコード package.json { "name": "osc-devel…

Node SerialPortを使って、ArduinoとMacで文字列をやり取りする 💻

JavaScript

serialport.ioArduinoのSerial Monitorを使っても良いのですが、個人的にはさささっとNode.jsを書いて、ターミナル上で確認することが多いです。www.arduino.cc 受信 ソースコード package.json { "name": "serial-develop", "version": "1.0.0", "main": "i…

MediaDevices.getUserMediaを使って、PCに接続しているカメラの映像を複数同時に表示する 📷

JavaScript iOS Arduino

いままで、MediaDevices.getUserMediaで取得できるストリームはひとつだけ。と思い込んでいましたが、ひょんなことから複数取得できることを知りました。 なので、さっそく、MediaDevices.getUserMediaを使って、PCに接続しているカメラの映像を複数同時に表…

Picture-in-Picture APIを使ってVideoを再生する 📼

JavaScript

developer.mozilla.orgPicture-in-Picture APIを使って、Video要素をピクチャーインピクチャで再生してみました。 iOS Safari（18.2）、Android Chrome（131.0.6778.135）でも動作を確認済みです。 ソースコード <html> <head> <style> video { display: block; width: 640px; }</style></head></html>…

スマートフォンでSpeechSynthesisUtteranceを使用する際はユーザーアクションが必要 ☝️

iOS JavaScript

SpeechSynthesisUtteranceを使用し、 let number = 0; setInterval(() => { const utterThis = new SpeechSynthesisUtterance(); utterThis.text = String(++number); speechSynthesis.speak(utterThis); }, 1000); こんな感じで、数字を読み上げるWebサイト…

Viteを用いてTypeScriptとSCSSを使ったWebサイトの開発環境を構築する 💻

JavaScript

最近は、もっぱらNext.jsを使ってWebサイトを制作したり、Electronと組み合わせてMacアプリを制作したりしています。 ペライチのWebサイトですら、Next.jsを静的サイトジェネレータとして使っているのですが、ペライチのサイトであれば、Next.jsもReactも不…

WebAudioAPIとAudio MIDI 設定を使って、Macのスピーカとイヤホンから別々の音を再生する 🔈

JavaScript

通常Macにイヤホンを繋いだ場合、音源はイヤホンから再生されます。 しかし、Macにはデフォルトアプリとして「Audio MIDI 設定」が入っており、オーディオのインアウトを好きなようにカスタマイズできます。support.apple.comそして、Audio MIDI 設定とWebAu…

多くの場合、requestAnimationFrameのFPSはディスプレイのリフレッシュレートに依存する 💻

JavaScript

結論 多くの場合、requestAnimationFrameのFPSはディスプレイのリフレッシュレートに依存します。developer.mozilla.orgもしも、ディスプレイに依存せずにFPSの最大値を設定したい場合、 const fps = 60; let lastRenderTime = 0; function render(now) { co…

super経由で親のメソッドを呼び出す 💻

JavaScript

これまで、superの使い道は、 class Child extends Parent { constructor(params) { super(params); } } という感じで、constructor内で実行することだけだと思っていたのですが、 いまさらながら、super.prop および super[expr] 式にて、親のメソッドを呼…

累積レイアウトシフト（CLS）をJavaScriptで計測する 💻

JavaScript

いままで、サーチコンソールで計測していたので、開発中はどうやって計測しようか悩んでいたのですが、JavaScriptで計測できることを知りました。search.google.com new PerformanceObserver((entryList) => { for (const entry of entryList.getEntries()) …

Next.jsのuseSearchParamsで+が読み取れない ➕

JavaScript

結論 URLエンコードを掛けましょう。 ことの発端 ざっくりこんな感じのコードを書いてまして、valueに渡された文字列を表示しようとしていたときのことです。 page.tsx 'use client'; import { useRouter, useSearchParams } from 'next/navigation'; import…

WebGL2を使って四角形を描き、ウェブカメラから取得した画像をテクスチャに設定する 🖼️

JavaScript

Three.jsやPIXI.js経由で、間接的にWebGLを使ったことはあるものの、直接操作をしたことがなかったので、めちゃめちゃ基本的なところから触ってみました。 順序としては、 試しに三角形を描く 試しに四角形を描く 四角形にテクスチャを貼る という順序で進め…

JavaScriptでクリップボードにテキストをコピーする 📝

JavaScript

昔は、クリップボードにテキストをコピーするだけのためにFlashを使ったりしていましたが、現在はJavaScriptのnavigator.clipboardだけで実現できます。developer.mozilla.org DEMO ポラーノの広場ボタンを押すと、「あのイーハトーヴォのすきとおった風、夏…

鎌倉駅までの直線距離を表示するウェブサイトをつくりました 📱

JavaScript

DEMO iza-kamakura.kimizuka.fm リポジトリ github.com 制作経緯 navigator.geolocation.watchPositionの検証のために、現在地から鎌倉駅までの直線距離を表示するだけのウェブサイトをつくりました。developer.mozilla.orgnavigator.geolocation.watchPosit…

Express + Socket.ioを使って静的なHTMLをホスティングしつつ、サーバとブラウザ間をリアルタイムに通信する（ES Modules編） 📡

JavaScript

こちらの記事のES Modulesバージョンです。 ※ Node.js v20.10.0、yarn 1.22.22 で作成blog.kimizuka.org 必要なパッケージをインストール yarn add express socket.io app.mjsを作成 import { createServer } from 'node:http'; import path from 'node:path…

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

JavaScript

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

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

Unity JavaScript

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

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

Unity JavaScript

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

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

Unity JavaScript

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

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

JavaScript

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

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

Arduino JavaScript

ひょんなことからFirmataとJohnny-fiveで行うような処理を自作したという話です。https://www.arduino.cc/reference/en/libraries/firmata/www.arduino.cc johnny-five.ioMacに接続したArduinoに対して、ピン番号と0〜255の値をシリアル通信で送ることで、Ar…

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

JavaScript

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

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

JavaScript

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

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

JavaScript

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

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

OpenAI JavaScript

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

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

JavaScript

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

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

JavaScript CSS

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

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

JavaScript

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

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

JavaScript

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

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

JavaScript

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