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

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

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

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

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

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

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

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

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

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