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

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

JavaScript

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アプリに加…

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

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

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

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

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

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

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

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

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

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

ブラウザに書いた手書きの数字の認識を目指す(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なしで実現できそ…

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での有料エリアの文字数の提示この文字数カウント…

JavaScriptで数字をぱららららっと表示する仕組みをつくる 🎰

抽選した数字を表示する前にランダムを抽選した数字をぱららららっと表示する仕組みを作りました。 ライブラリ不要でさささっと使うためにVanilla JSで書いています。 DEMO See the Pen random by kimmy (@kimmy) on CodePen. ソースコード index.js const p…

干渉縞を鑑賞するウェブサイトをつくりました 👁️

昔、CodePenにアップした、干渉縞を鑑賞するサイトをリメイクしました。 See the Pen moiré by kimmy (@kimmy) on CodePen.CodePenでは、base64化した画像を背景画像にしたDOMを回転させていましたが、今回はCanvasで制作したので、動的にパラメータを変更で…

M5StickC Plusのボタンを押したことをUDP通信を使ってNode.jsで立てたサーバに伝える ⚡️

https://www.switch-science.com/products/9350 より引用M5StickC PlusをWiFiに繋いで、ButtonA(M5と書いてあるボタン)を押した際に、同一WiFi上にあるサーバに対して押されたことを通知するコードを書いてみました。 ボタンを押したときに1、離したときに…

OpenAI APIを活用した文章スコアリングの実装 💯

以前、Node.jsからOpenAI APIをさささっと叩きました。blog.kimizuka.org今回は、文章を送信したら、何かしらのスコアを返すAPIを作ってみようと思います。 この説明だとわかりにくいので、実例を交えながら解説します。 先輩風API 先日、体験型コンテンツ勉…

AirPods → iPhoneアプリ → Express → python-shell → pymycobot → myCobotと繋いでいって、AirPodsの回転角とmyCobotの姿勢と同期する 🤖

AirPodsの回転角をmyCobotの姿勢と同期。 pic.twitter.com/vNcBK1gYO1— 君塚史高 (@ki_230) 2024年2月1日 AirPods → iPhoneアプリ → Express → python-shell → pymycobot → myCobotと繋いでいって、AirPodsの回転角とmyCobotの姿勢を同期させました。需要が…

Node.jsからOpenAI APIをささっと叩く 🔨

Node.jsからOepnAI APIをささっと叩いてみます。 npmにモジュールが公開されているので、ドキュメントのQuickstart通りに進めれば楽々です。github.com https://platform.openai.com/docs/quickstart?context=nodeplatform.openai.comNode.jsとyarnは既に導…

navigator.mediaDevices.getUserMediaを実行した際にstreamを取得するカメラをlabelを使って指定する 🎥

developer.mozilla.orgnavigator.mediaDevices.getUserMediaを使ってカメラに接続しようとする際、 const stream = await navigator.mediaDevices.getUserMedia({ audio: false, video: { deviceId: 'HOGEHOGE' } }); という形でdeviceIdを指定できます。 上…

Array.prototype.findで配列の中から条件に合う要素を取得する 💻

developer.mozilla.org配列の中から条件に合う要素を取得する場合、いつも配列をループで回すか、lodashが導入されているプロジェクトでは_.findを使っていたのですが、IE11が亡きいま、Array.prototype.findでいけるということに気がつきました。lodash.com…

クリックした箇所を起点に絵文字を一刀両断する 🔪

以前つくったDEMOをもとに、左上に入力した絵文字を一刀両断するDEMOをつくりました。blog.kimizuka.org DEMO ソースコード(抜粋) 絵文字の判定 document.querySelector('input').addEventListener('input', (evt) => { if (evt.target.value.length === 2…

CanvasでAppleのアクティビティアプリのリングのような演出をつくる 🍎

www.apple.com DEMO 解説 頑張ればひとつのCanvasで描き切れたと思いますし、パフォーマンス的にもそちらの方が良いと思うのですが、 リングを描くCanvas リングの先端を描くCanvas を分けて実装しました。 また、リングの先端の回転はCSSで実装しています。…

TypeScriptのenumをループで列挙する 0️⃣

typescript-jp.gitbook.ioTypeScriptのenumはJavaScript変換時にオブジェクトに変換されます。 なので、forEachを使って要素を列挙したい場合は、Object.entriesを使えばOKです。developer.mozilla.orgただし、数値列挙型と文字列列挙型のenumで変換されるオ…

娘に「へ」と「え」の使い分けを身につけてもらう為に「へえ」ボタンを作りました 🔘

1️⃣ はじめに 娘が「へ」と「え」を使い分けられないことが発覚 プログラムで問題を量産 ‍ 使い方 実装方法 問題の生成 文章の読み上げ タイトル画面のボタン とりあえず娘に与える 短い役目を終える 気づき 子供は親の作ったものを贔屓目で見てくれる…

交差オブザーバー API (Intersection Observer API) を使ってページスクロールに連動したイベントを実行する 🖱️

DEMO 一昔前に、ページスクロールに連動してDOMをあれこれしたい場合、documentのスクロールイベントのコールバックで、対象となるDOMが範囲内に入っているか否かを判定する必要がありました。developer.mozilla.orgなので、僕もかつてページのスクロール量…

position: stickyとscrollIntoViewを組み合わせて使う 💻

position: stickyを使うと、簡単に吸着されるようなページスクロールを実装できます。developer.mozilla.org DEMO 非常に手軽です。しかし、ここにページ内リンクをscrollIntoViewを使って実装するとちょっとした問題が起こります。具体的にいうと、現在位置…

JavaScriptを使ってフロントでuuidを生成する(Crypto.randomUUID) 💻

www.npmjs.comこれまでは uuid をつかって生成することが多かったのですが、Crypto.randomUUIDを使えばライブラリ不要で、v4のUUIDを生成できることを知りました。developer.mozilla.orgブラウザ対応状況を見たところ、全然実践に投入できそうです。 window.…