CSS メディアクエリを使ってスタイルを当てることができます。 ソースコード body { color: #2e3440; background: #d8dee9; } @media (prefers-color-scheme: dark) { body { color: #d8dee9; background: #22262a; } } @media (prefers-color-scheme: light…
今日はとてもいい天気だった。朝からお日さまがぽかぽかしていて、どこかに出かけたくなるような陽気だ。お昼ごはんを食べたあと、公園へ向かうと、たくさんの人がいた。 ベンチではおじいちゃんとおばあちゃんがゆっくり話をしていて、芝生では子どもたちが…
git log -p ファイル名で確認できます。基本的な機能だと思うのですが、僕はGitHubのファイルのリビジョン履歴 に頼りっぱなしだったので、使ったことがありませんでした。docs.github.comGitHubのリビジョン履歴は、git blameを使っているようです。なので…
const target = 'user-8823'; const hasTarget = users.includes(target); みたいなコードで、要素の多いユニークな配列から、特定の要素が含まれているかを確認するコードを高速で動かそうと思った時に、 const target = 'user-8823'; const set = newSet(u…
blog.kimizuka.org4チャンネルの音源再生がうまくいったので、1チャンネル増やすのなど簡単なことであろうと思っていたのですが、がっつりハマりました。 今後のためにメモを残しておきます。 結論 こちらで、5つのモノラル音源（440Hzのサイン波）を5つのス…
ひさしぶりに、Windowsでオーディオインターフェイス（UR44CR）を使おうとしたら、使い方をすっかり忘れ、わたわたしてしまったため、今後そうならないようにメモを残しておきます。www.steinberg.netただ、調査の結果、UR44CRはWindowsではASIO対応のソフト…
かつて、Node.jsからOpenAI APIをささっと叩いたことがありましたが、今回はVertexAI APIをさささっと叩いてみようと思います。blog.kimizuka.org公式の クイックスタート はこちらです。cloud.google.com ❶ 必要なモジュールをインストールする yarn add @g…
これまで、Shopify JavaScript Buy SDKを使ってShopifyのカート操作やチェックアウトを実装していたのですが、2025年1月に廃止になってしまいました。 Deprecation notice Note: The JS Buy SDK is deprecated as of January, 2025. It will no longer be up…
ひさしぶりに、オーディオインターフェイス（UR44CR）を使おうとしたら、使い方をすっかり忘れてしまっていたので、今後のためにメモを残しておきます。 以前作った、4chの音源を再生するウェブサイトを使って検証します。https://web-audio-api-4ch.netlify…
Macにバージョン違いのpyhonをいくつかインストールしたかったので、anyenvとpyenvを使うことにしました。 導入手順をメモしておきます。 導入手順 anyenvのインストール README の通りに進めれば導入できます。 brew install anyenvanyenv initecho 'eval "…
結論 例えば、app.asarに収納されているファイル一覧は、 npx asar l app.asar で確認できます。 ASARアーカイブとは Asar is a simple extensive archive format, it works like tar that concatenates all files together without compression, while havi…
一昔前は、何も考えずに ipcMain と ipcRenderer でやり取りを行なっていたのですが、最近は contextBridge を挟むのがセオリーとなってます。www.electronjs.org レンダラープロセス → メインプロセス 例として、レンダラープロセスからアプリの終了を行な…
ルビ注釈要素の存在は知っていましたが、しっかり使ったことがなかったので、仕様を調べてみました。developer.mozilla.org DEMO ソースコード index.html <ruby> 君塚 <rp>(</rp> <rt>きみづか</rt> <rp>)</rp> 史高 <rp>(</rp> <rt>ふみたか</rt> <rp>)</rp> </ruby> こちらの 拡張 で読み上げ時の挙動も確認してみましたが、rt…
基本的にborder-radiusを短辺の半分を指定すればOKですが、変数を使わないと、ボタンのサイズが変更になるたびに再設定が必要となります。 そんなとき、 border-radius: 9999px; や、 border-radius: 100vmax; など、border-radiusに大きな値を入れればボタ…
CodeCommitのリポジトリをSourcetreeで管理するまでの手順をメモしておきます。 ❶ Git 認証情報を使用して HTTPS ユーザーのセットアップを行う docs.aws.amazon.comまずは公式のユーザーガイドに従ってリポジトリをローカルにクローンします。 ❷ Sourcetree…
support.microsoft.com一昔前はオフラインでセットアップすることで簡単にローカルアカウントを作成することができたのですが、つい先日セットアップした際、一筋縄でいかなかったので、手順をメモしておきます。 環境 デバイス: Surface Go4 OS: Windows 11…
developer.mozilla.orgなんと、現代的なブラウザーの多くはログイン欄における autocomplete="off" に対応していないようです。 現代的なブラウザーでは、パスワードを一括管理する機能が実装されています。ユーザーがウェブサイトでユーザー名とパスワード…
導入方法 XCodeのコマンドラインツールをインストール xcode-select --install Homebrewをインストール /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"公式サイトにインストールコマンドが記載されてい…
www.npmjs.comZIG SIMから送られてくる値は、ZIG indicatorで確認したいところですが、残念ながらOSCを受け取ることはできないので、Node.jsを書いて、さささっとターミナル上で確認します。zig-project.com ソースコード package.json { "name": "osc-devel…
serialport.ioArduinoのSerial Monitorを使っても良いのですが、個人的にはさささっとNode.jsを書いて、ターミナル上で確認することが多いです。www.arduino.cc 受信 ソースコード package.json { "name": "serial-develop", "version": "1.0.0", "main": "i…
いままで、MediaDevices.getUserMediaで取得できるストリームはひとつだけ。と思い込んでいましたが、ひょんなことから複数取得できることを知りました。 なので、さっそく、MediaDevices.getUserMediaを使って、PCに接続しているカメラの映像を複数同時に表…
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>…
www.electronjs.org例えば、動画を再生するアプリを制作するときなど、長時間入力がなくてもPCをスリープモードに入らせないようにしたい場合があります。 そんなときは、electron.powerSaveBlockerを使えば、スリープモードに入ることを防ぐことができます…
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を使用し、 let number = 0; setInterval(() => { const utterThis = new SpeechSynthesisUtterance(); utterThis.text = String(++number); speechSynthesis.speak(utterThis); }, 1000); こんな感じで、数字を読み上げるWebサイト…
最近は、もっぱらNext.jsを使ってWebサイトを制作したり、Electronと組み合わせてMacアプリを制作したりしています。 ペライチのWebサイトですら、Next.jsを静的サイトジェネレータとして使っているのですが、ペライチのサイトであれば、Next.jsもReactも不…
追記 バージョンによって指定方法が異なるようです。blog.kimizuka.orgいつも通り、 npx create-next-app .で、Next.jsのプロジェクトを作成し、 npm run devで、開発サーバを起動したところ、左下に謎のアイコンが表示されるようになっていました。 .nextjs…
通常Macにイヤホンを繋いだ場合、音源はイヤホンから再生されます。 しかし、Macにはデフォルトアプリとして「Audio MIDI 設定」が入っており、オーディオのインアウトを好きなようにカスタマイズできます。support.apple.comそして、Audio MIDI 設定とWebAu…
結論 多くの場合、requestAnimationFrameのFPSはディスプレイのリフレッシュレートに依存します。developer.mozilla.orgもしも、ディスプレイに依存せずにFPSの最大値を設定したい場合、 const fps = 60; let lastRenderTime = 0; function render(now) { co…
これまで、superの使い道は、 class Child extends Parent { constructor(params) { super(params); } } という感じで、constructor内で実行することだけだと思っていたのですが、 いまさらながら、super.prop および super[expr] 式にて、親のメソッドを呼…
