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

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

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も不…