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

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

super経由で親のメソッドを呼び出す 💻

これまで、superの使い道は、 class Child extends Parent { constructor(params) { super(params); } } という感じで、constructor内で実行することだけだと思っていたのですが、 いまさらながら、super.prop および super[expr] 式にて、親のメソッドを呼…

累積レイアウトシフト(CLS)をJavaScriptで計測する 💻

いままで、サーチコンソールで計測していたので、開発中はどうやって計測しようか悩んでいたのですが、JavaScriptで計測できることを知りました。search.google.com new PerformanceObserver((entryList) => { for (const entry of entryList.getEntries()) …

yarnのバージョンを切り替える 💻

yarnpkg.comyarnのバージョンを切り替えたい時は、 yarn set version <version>にて、切り替えられることを知りました。 バージョンを指定することもできますし、 yarn set version stableで、安定版。 yarn set version latestで、最新版。 yarn set version classic</version>…

Next.jsのuseSearchParamsで+が読み取れない ➕

結論 URLエンコードを掛けましょう。 ことの発端 ざっくりこんな感じのコードを書いてまして、valueに渡された文字列を表示しようとしていたときのことです。 page.tsx 'use client'; import { useRouter, useSearchParams } from 'next/navigation'; import…

3Dプリント用のモデルをA-Frameで読み込んでMeta Questのブラウザにてプレビューする 👓

4年ほど前に、Three.js版の記事を書きましたが、今回はA-Frame版です。blog.kimizuka.orgまた、用途が若干変わって、3Dプリント用に作ったモデルを等倍でプレビューするために使ってみました。まずはソースコードを全文載せてしまいます。 <html> <head> <meta charset="UTF-8" /> <title>A-Frame</title> <script src="https://aframe.io/releases/1.6.0/aframe.min.js"></script> </head> <body> </body></html>

Mac用に書き出したElectronアプリがカメラにアクセスできないときの対策 📷

ことの発端 navigator.mediaDevices.getUserMediaを使って、ウェブカメラにアクセスするMacアプリを作っていて、 electron . で起動した際には問題ないのに、electron-packagerを使ってアプリ書き出しすると、カメラの映像が取得できずに困ったので対策を調…

Next.js(14.2.15)のAppRouterでuseSearchParamsを使う際はSuspenseで境界を指定する 💻

公式ドキュメントに書いてある通りなのですが、ほんのりハマったのでメモ。nextjs.org ことの発端 src/app/page.tsx import { ServerComponent } from '@/components/ServerComponent'; export default function Home() { return ( <ServerComponent /> ); } src/components/Sev</servercomponent>…

Next.js(App Router)にAdobe Fonts(Typekit Webフォント)を導入する ✍️

3年半前の記事のアップデート版です。blog.kimizuka.org3年半前の記事には環境を書き忘れたので、今回はしっかり書き残しておこうと思うのですが、Next.js(14.2.13)のApp Routerで検証しました。Adobe FontsをWebフォントとして使おうとすると、 <script> (functio…

WebGL2を使って四角形を描き、ウェブカメラから取得した画像をテクスチャに設定する 🖼️

Three.jsやPIXI.js経由で、間接的にWebGLを使ったことはあるものの、直接操作をしたことがなかったので、めちゃめちゃ基本的なところから触ってみました。 順序としては、 試しに三角形を描く 試しに四角形を描く 四角形にテクスチャを貼る という順序で進め…

Next.js(14.2.12)+ Three.js(r168)で、Meta Quest向けにパススルーのWebVRコンテンツをつくる 🕶️

先日作成したMeta Quest向けのWebVRコンテンツ ですが、Meta Questのパススルーを使い、背景を実写にしてみます。blog.kimizuka.orgかつて、getUserMediaを使って、どうにかQuestのカメラにアクセスできないかを試行錯誤していた時期もあったのですが、パス…

Firebase Cloud MessagingのMessaging.sendAll()をMessaging.sendEach()に書き換える ✉️

blog.kimizuka.org昨年作った、Firebase Cloud Messagingから、最近通知が送られてこないなと思っていたのですが、遅ればせながら、Messaging.sendAll()が廃止されていたことに気が付きました。取り急ぎ動くようにするのであれば、Messaging.sendAll() を Me…

Next.js(14.2.12)+ Three.js(r168)で、Meta Quest向けにWebVRコンテンツをつくる 🕶️

2022年はWebVR、2023年はWebARに関する知見をまとめたりしていましたが、久しぶりにWebVRコンテンツを作ってみました。kimizuka.org内容としては、 目の前にCubeがひとつ浮いている コントローラ(もしくは手)が表示されている コントローラ(もしくは手)…

M5StickC Plus2で取得したGPS座標をCloud Firestoreにデータを保存する 🔥

こちら、下記3つの記事の組み合わせです。blog.kimizuka.org blog.kimizuka.org blog.kimizuka.orgM5StickC Plus2でGPS座標を取得して、Cloud Firestorに送信します。 準備するもの M5StickC Plus2 GPSユニット Arduino Firebaseのアカウント(Blazeプランに…

Cloud Functionsを使ってCloud Firestoreにデータを保存する 🔥

実装手順 ❶ パッケージを用意する yarn add firebase firebase-tools ❷ package.jsonを編集する package.json { "name": "functions-to-firestore", "scripts": { "login": "firebase login", "init": "firebase init", "emulate": "firebase emulators:star…

Next.jsの開発サーバをhttpsで立ち上げる 🔒

nextjs.orgNext.js 13.5から、 next dev --experimental-httpsで、開発サーバをhttpsで立ち上げることができるようになった模様です。めちゃめちゃ便利です。 package.json { "scripts": { "dev": "next dev", "dev:https": "next dev --experimental-https"…

M5StickC Plus2でGPS座標を取得する 🌏

blog.kimizuka.org blog.kimizuka.org最近はGPSの記事ばかり書いている気がしますが、今回はM5StickC Plus2でGPS座標の取得を試みます。 前回までは、M5StickC Plusを使っていましたが、今回からは、M5StickC Plus2を使います。本体が若干黄色くなっています…

JavaScriptでクリップボードにテキストをコピーする 📝

昔は、クリップボードにテキストをコピーするだけのためにFlashを使ったりしていましたが、現在はJavaScriptのnavigator.clipboardだけで実現できます。developer.mozilla.org DEMO ポラーノの広場ボタンを押すと、「あのイーハトーヴォのすきとおった風、夏…

Cloud Functionsで2つのGPS座標を受け取り、2点間の直線距離を返すWebAPIをつくる 🔥

実装手順 ❶ パッケージを用意する yarn add firebase firebase-tools ❷ package.jsonを編集する package.json { "name": "gps-distance", "scripts": { "login": "firebase login", "init": "firebase init", "emulate": "firebase emulators:start", "deplo…

M5StickC PlusをWiFiに接続し、Cloud FunctionsのHTTPトリガーのURLを叩いてJSONを取得する 🔥

https://docs.m5stack.com/ja/core/m5stickc_plus より引用前回作ったCloud Functionsの関数のHTTPトリガーをWiFiに接続したM5StickC Plusから叩いてみます。blog.kimizuka.org WiFi接続 HTTPリクエスト JSONのパース と、やらないといけないことがいくつか…

Cloud Functionsを使ってCloud Firestoreに保存した値を読み取る 🔥

前回は、モジュールバンドラー無しでCloud Firestoreをさささっと使いましたが、今回は、Cloud Functionsを使って、Cloud Firestoreに保存した値を読み取るウェブAPIを作ります。blog.kimizuka.org実際のところ、今回の用途(Cloud Firestoreに保存した値を…

モジュールバンドラー無しでCloud Firestoreをさささっと使う(Ver. 10.13.0) 🔥

かつて、Firebase Hosting + Cloud Firestore + Firebase Authenticationを使いつつ、モジュールバンドラー無しのプロトタイプを作ったことがありました。blog.kimizuka.org今回もモジュールバンドラー無しで、Cloud Firestoreをさささっと使うプロトタイプ…

鎌倉駅までの直線距離を表示するウェブサイトをつくりました 📱

DEMO iza-kamakura.kimizuka.fm リポジトリ github.com 制作経緯 navigator.geolocation.watchPositionの検証のために、現在地から鎌倉駅までの直線距離を表示するだけのウェブサイトをつくりました。developer.mozilla.orgnavigator.geolocation.watchPosit…

vh、dvh、svh、lvhの値を確認するWebページをつくる 📱

vh、dvh、svh、lvh、ついでにwindow.innerHeightの値を観測できるウェブサイトを作りました。https://viewport-height.vercel.app DEMO iOS Safari iOS Chrome iOSのSafariとChromeでvhの扱いが異なることがわかります。 ちなみにAndroid ChromeはiOS Safari…

ブーリアンを使って、Blenderで2つのオブジェクトの差分を取る 📦

最近、Blenderで3Dプリント用のstlファイルをせっせと制作しています。こんな感じで、toio用の治具を作ってみたり、こんな感じで、ATOM Matrixを腕時計のように装着できる治具を作ってみたりと、大活躍中です。Blenderも3Dプリンタも。さて、今回はBlenderで…

Macでelectron-builderで書き出したアプリを開こうとすると「壊れているため開けません。ゴミ箱に入れる必要があります。」と表示される際は拡張属性を削除すると開けるようになる 🗑️

タイトルの通りですが、Macでelectron-builderで書き出したアプリを開こうとすると「壊れているため開けません。ゴミ箱に入れる必要があります。」と表示される際は拡張属性を削除すると開けるようになります。 xattr -rc アプリ名でOKです。

Express + Socket.ioを使って静的なHTMLをホスティングしつつ、サーバとブラウザ間をリアルタイムに通信する(ES Modules編) 📡

こちらの記事のES Modulesバージョンです。 ※ Node.js v20.10.0、yarn 1.22.22 で作成blog.kimizuka.org 必要なパッケージをインストール yarn add express socket.io app.mjsを作成 import { createServer } from 'node:http'; import path from 'node:path…

direnvを使ってディレクトリごとに読み込む環境変数を切り替える 📁

Mac

direnvを使うと、ディレクトリごとに環境変数を切り替えられるようになります。 brewを使ってインストール brew install direnv ~/.zshrcに追記 ~/.zshrc eval "$(direnv hook zsh)"ここで、 export EDITOR=vimという具合にエディタも記載しておくと、 diren…

text-align: justifyやfont-feature-settings: 'palt'でテキストの文字詰めを調整する 📝

CSS

text-align: justify developer.mozilla.orgテキストを両端揃えにします。 厳密に言えば文字詰めとは別の処理なのですが、結果的に文字間が調整されます。 font-feature-settings: 'palt' developer.mozilla.orgOpenTypeのプロポーショナルメトリクスを有効…

Reactでインベーダーゲームのような動きをつくる 👾

前回はReactで等速で往復運動するコンポーネントを作りました。blog.kimizuka.orgこのコンポーネントを複数設置すればインベーダーゲームのような動きが作れると思い、試してみたのですが。※ クリックすると動き出します何かが違う。公式サイトを観察してみ…

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…