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

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

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を使って、❶ 二極…

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

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