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

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

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

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…