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

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

2024-01-01から1年間の記事一覧

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

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で制作したので、動的にパラメータを変更で…

VercelのプレビューURLに対して外部からPOSTリクエストを投げると401が返ってくる際の対策 💻

結論 「Project Setting > Deployment Protection > Vercel Authentication」をDisabledに設定すればOKです。 ことの発端 普通はこんな使い方しないと思うのですが、LINE BotのWebHookに使うためのAPIをVercelにデプロイした際に気がつきました。blog.kimizu…

LINE Messaging APIを使ったLINE BotのWebHook用のAPIをNext.js(App Router)を使ってデプロイする 📱

前回は、LINEBot用のスクリプトを作成しましたが、その際はNgrokをつかって公開し、動作を確認しました。blog.kimizuka.orgblog.kimizuka.orgblog.kimizuka.orgしかし、実際に永続的に運用していこうとなると、APIとしてどこかしらで動かし続けた方がよさそ…

LINE Messaging APIを使ったLINE BotのWebHook用のAPIをNext.js(Page Router)を使ってデプロイする 📱

以前、LINEBot用のスクリプトを作成しましたが、その際はNgrokをつかって公開し、動作を確認しました。blog.kimizuka.orgblog.kimizuka.orgblog.kimizuka.orgしかし、実際に永続的に運用していこうとなると、APIとしてどこかしらで動かし続けた方がよさそう…

Electronでディベロッパーツールの起動を禁止する 🚫

結論 const { app } = require('electron'); const window = new BrowserWindow({ width: 375, height: 812, webPreferences: { devTools: false } }); と、BrowserWindowのインスタンスを作成する際に渡すオプションでディベロッパーツールを無効化できる。…

Next.js(App Router)にGA4(Google Analytics4)を導入する 📈

Vercelが @next/third-parties というライブラリを提供してくれているので、それを使えばGA4の導入も楽々です。www.npmjs.com@next/third-parties はGoogle Tag Managerにも対応しているのですが、今回はGA4を直接導入します。 ソースコード(抜粋) src/app…

Next.js(App Router)でRSSフィードを実装する 📡

Next.js(App Router)で作成したポートフォリオサイトにRSSフィードを実装してみました。https://kimizuka.fm/rss.xmlキャッシュの設定が適切にできているかに不安が残りますが、実装方法をメモしておきます。 今回はサイトをデプロイするたびに、ルート直…

Next.js(App Router)でrobots.txtを生成する(本番環境とプレビュー環境でrobots.txtを出しわける) 📝

まず、ドキュメントを読むとすべてが書いてあります。 書いてあるのですが、プレビュー環境と本番環境でrobots.txtを出し分けたかったので、色々検証してみました。nextjs.orgまずは、ほぼほぼドキュメント通りの実装。 app/robots.ts import { MetadataRout…

OpenCV.jsで映像を二極化して白い部分をトラッキングする 📷

赤外線カメラで再規制反射材を撮影して、再帰性反射材をトラッキングすることを目指しました。まず、こちらが赤外線カメラの前で再規制反射テープを振り回している映像です。 今回は、こちらの映像をCanvasにレンダリングした後、OpenCV.jsを使って、❶ 二極…