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

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

Electronでメインプロセスとレンダラープロセスで通信を行う ⚡️

Electron

一昔前は、何も考えずに ipcMain と ipcRenderer でやり取りを行なっていたのですが、最近は contextBridge を挟むのがセオリーとなってます。www.electronjs.org レンダラープロセス → メインプロセス 例として、レンダラープロセスからアプリの終了を行な…

rubyタグを使ってHTMLにルビを振る 📝

HTML

ルビ注釈要素の存在は知っていましたが、しっかり使ったことがなかったので、仕様を調べてみました。developer.mozilla.org DEMO ソースコード index.html <ruby> 君塚 <rp>(</rp> <rt>きみづか</rt> <rp>)</rp> 史高 <rp>(</rp> <rt>ふみたか</rt> <rp>)</rp> </ruby> こちらの 拡張 で読み上げ時の挙動も確認してみましたが、rt…

どんなサイズになっても両端が半円のボタンをつくる 🔘

CSS

基本的にborder-radiusを短辺の半分を指定すればOKですが、変数を使わないと、ボタンのサイズが変更になるたびに再設定が必要となります。 そんなとき、 border-radius: 9999px; や、 border-radius: 100vmax; など、border-radiusに大きな値を入れればボタ…

AWS CodeCommitのリポジトリをSourcetreeで管理する ☁️

Mac

CodeCommitのリポジトリをSourcetreeで管理するまでの手順をメモしておきます。 ❶ Git 認証情報を使用して HTTPS ユーザーのセットアップを行う docs.aws.amazon.comまずは公式のユーザーガイドに従ってリポジトリをローカルにクローンします。 ❷ Sourcetree…

SurfaceをローカルアカウントでセットアップしてMicrosoftアカウント無しで使用する 🪟

Windows

support.microsoft.com一昔前はオフラインでセットアップすることで簡単にローカルアカウントを作成することができたのですが、つい先日セットアップした際、一筋縄でいかなかったので、手順をメモしておきます。 環境 デバイス: Surface Go4 OS: Windows 11…

autocomplete属性を使って、フォームの自動補完を無効にする 💻

HTML

developer.mozilla.orgなんと、現代的なブラウザーの多くはログイン欄における autocomplete="off" に対応していないようです。 現代的なブラウザーでは、パスワードを一括管理する機能が実装されています。ユーザーがウェブサイトでユーザー名とパスワード…

Macにffmpegをインストールして動画や音声を自在に変換する 🎥

Mac

導入方法 XCodeのコマンドラインツールをインストール xcode-select --install Homebrewをインストール /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"公式サイトにインストールコマンドが記載されてい…

osc.jsを使ってZIG SIMからOSCで送られてくるセンサ値を受け取る 📱

JavaScript

www.npmjs.comZIG SIMから送られてくる値は、ZIG indicatorで確認したいところですが、残念ながらOSCを受け取ることはできないので、Node.jsを書いて、さささっとターミナル上で確認します。zig-project.com ソースコード package.json { "name": "osc-devel…

Node SerialPortを使って、ArduinoとMacで文字列をやり取りする 💻

JavaScript

serialport.ioArduinoのSerial Monitorを使っても良いのですが、個人的にはさささっとNode.jsを書いて、ターミナル上で確認することが多いです。www.arduino.cc 受信 ソースコード package.json { "name": "serial-develop", "version": "1.0.0", "main": "i…

MediaDevices.getUserMediaを使って、PCに接続しているカメラの映像を複数同時に表示する 📷

JavaScript iOS Arduino

いままで、MediaDevices.getUserMediaで取得できるストリームはひとつだけ。と思い込んでいましたが、ひょんなことから複数取得できることを知りました。 なので、さっそく、MediaDevices.getUserMediaを使って、PCに接続しているカメラの映像を複数同時に表…

Picture-in-Picture APIを使ってVideoを再生する 📼

JavaScript

developer.mozilla.orgPicture-in-Picture APIを使って、Video要素をピクチャーインピクチャで再生してみました。 iOS Safari（18.2）、Android Chrome（131.0.6778.135）でも動作を確認済みです。 ソースコード <html> <head> <style> video { display: block; width: 640px; }</style></head></html>…

Electronアプリ起動中にスリープモードに入らないようにする 💤

Electron

www.electronjs.org例えば、動画を再生するアプリを制作するときなど、長時間入力がなくてもPCをスリープモードに入らせないようにしたい場合があります。 そんなときは、electron.powerSaveBlockerを使えば、スリープモードに入ることを防ぐことができます…

dnd-kitを使ってドラッグ&ドロップで並び替え可能なリストを実装する ✊

Next.js

docs.dndkit.comNext.jsとdnd-kitを組み合わせてドラッグ＆ドロップで並び替え可能なリストを実装しました。 DEMO https://develop.kimizuka.org/dnd-kit-sortable/ ソースコード package.json { "name": "dnd-kit-sortable", "version": "0.1.0", "private"…

スマートフォンでSpeechSynthesisUtteranceを使用する際はユーザーアクションが必要 ☝️

iOS JavaScript

SpeechSynthesisUtteranceを使用し、 let number = 0; setInterval(() => { const utterThis = new SpeechSynthesisUtterance(); utterThis.text = String(++number); speechSynthesis.speak(utterThis); }, 1000); こんな感じで、数字を読み上げるWebサイト…

Viteを用いてTypeScriptとSCSSを使ったWebサイトの開発環境を構築する 💻

JavaScript

最近は、もっぱらNext.jsを使ってWebサイトを制作したり、Electronと組み合わせてMacアプリを制作したりしています。 ペライチのWebサイトですら、Next.jsを静的サイトジェネレータとして使っているのですが、ペライチのサイトであれば、Next.jsもReactも不…

Next.js（15.0.3）のStatic Indicatorを非表示にする 👀

Next.js

いつも通り、 npx create-next-app .で、Next.jsのプロジェクトを作成し、 npm run devで、開発サーバを起動したところ、左下に謎のアイコンが表示されるようになっていました。 .nextjs-toastというクラス名が振られています。なんだこれは。と思いましたが…

WebAudioAPIとAudio MIDI 設定を使って、Macのスピーカとイヤホンから別々の音を再生する 🔈

JavaScript

通常Macにイヤホンを繋いだ場合、音源はイヤホンから再生されます。 しかし、Macにはデフォルトアプリとして「Audio MIDI 設定」が入っており、オーディオのインアウトを好きなようにカスタマイズできます。support.apple.comそして、Audio MIDI 設定とWebAu…

多くの場合、requestAnimationFrameのFPSはディスプレイのリフレッシュレートに依存する 💻

JavaScript

結論 多くの場合、requestAnimationFrameのFPSはディスプレイのリフレッシュレートに依存します。developer.mozilla.orgもしも、ディスプレイに依存せずにFPSの最大値を設定したい場合、 const fps = 60; let lastRenderTime = 0; function render(now) { co…

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

JavaScript

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

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

JavaScript

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

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

Yarn

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

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

JavaScript

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

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

A-Frame

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アプリがカメラにアクセスできないときの対策 📷

Electron

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

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

Next.js

公式ドキュメントに書いてある通りなのですが、ほんのりハマったのでメモ。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フォント）を導入する ✍️

Next.js

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

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

JavaScript

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

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

Three.js Next.js

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

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

Firebase

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

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

Three.js Next.js

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