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

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

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、離したときに…

Electron + Next.jsの開発で、yarn devを実行した際にエラーが発生する際の対策(Error [ERR_REQUIRE_ESM]: require() of ES Module /node_modules/electron-next/node_modules/electron-is-dev/index.js from /node_modules/electron-next/index.js not supported. 編) 💪

ことの発端 普段、Electronアプリを制作する際は、 Next.jsのElectron + TypeScriptのexample を使っています。github.com yarn create next-app --example with-electron-typescript app-nameで、Electron + Next.jsの雛形が作成できるので非常に便利です。…

OpenAI APIを活用した文章スコアリングの実装 💯

以前、Node.jsからOpenAI APIをさささっと叩きました。blog.kimizuka.org今回は、文章を送信したら、何かしらのスコアを返すAPIを作ってみようと思います。 この説明だとわかりにくいので、実例を交えながら解説します。 先輩風API 先日、体験型コンテンツ勉…

Macにffmpegを導入してmovファイルをmp4ファイルに変換する 📹

Mac

普段、movファイルをmp4に変換する際、ffmpegを使って、 ffmpeg -i in.mov -pix_fmt yuv420p out.mp4と変換しているのですが、Macの設定をあれこれ変更していたら動かなくなってしまったので、一度アンストールして再度導入しました。 使っているMacはApple…

突然React Nativeで作ったアプリがiOSの実機に転送できなくなったので調査する 📱

blog.kimizuka.org最近は、Expoを挟まず直接ReactNativeでアプリを作っていたのですが、突然実機に転送できなくなったので、今後のためにメモを残しておきます。 環境 MacOS: 14.3.1 チップ: Apple M1 Max Xcode: 15.2 iOS: 17.3.1 ReactNative: 0.73.4 npx …

Appleシリコン搭載のMacに、nodenvを使って古いNode.jsを導入する 💻

急遽、Node.js 12での作業が必要になったので、Appleシリコン搭載のMac(M1 Max)にNode.js 12.22.12を導入しました。普通に、 nodenv install 12.22.2を実行すると、 BUILD FAILED (OS X 14.3.1 using node-build 4.9.136)と、ビルドがコケてしまうので、 a…

AirPods → iPhoneアプリ → Express → python-shell → pymycobot → myCobotと繋いでいって、AirPodsの回転角とmyCobotの姿勢と同期する 🤖

AirPodsの回転角をmyCobotの姿勢と同期。 pic.twitter.com/vNcBK1gYO1— 君塚史高 (@ki_230) 2024年2月1日 AirPods → iPhoneアプリ → Express → python-shell → pymycobot → myCobotと繋いでいって、AirPodsの回転角とmyCobotの姿勢を同期させました。需要が…

OpenAI APIを使って画像に写っているものを説明してもらう 📷

前回は、Node.jsからOpen AIのAPIをさささっと叩いてみることを目標に、適当な日本語を返してもらいましたが、今回は画像に写っているものを説明してもらおうと思います。blog.kimizuka.org import OpenAI from 'openai'; const openai = new OpenAI({ apiKe…

Node.jsからOpenAI APIをささっと叩く 🔨

Node.jsからOepnAI APIをささっと叩いてみます。 npmにモジュールが公開されているので、ドキュメントのQuickstart通りに進めれば楽々です。github.com https://platform.openai.com/docs/quickstart?context=nodeplatform.openai.comNode.jsとyarnは既に導…

navigator.mediaDevices.getUserMediaを実行した際にstreamを取得するカメラをlabelを使って指定する 🎥

developer.mozilla.orgnavigator.mediaDevices.getUserMediaを使ってカメラに接続しようとする際、 const stream = await navigator.mediaDevices.getUserMedia({ audio: false, video: { deviceId: 'HOGEHOGE' } }); という形でdeviceIdを指定できます。 上…

静的なHTMLをFirebase HostingにアップしてBasic認証を掛ける 🔑

普段は静的サイトのホスティングに GitHub Pages か Netlify をつかうことが多いのですが、Basic認証をかけたい場合、GitHub Pagesでは実現できないですし、Netlifyでは有料の機能なので、どうしようかなと思っていました。一旦は、 Heroku を使おうかなとも…

react-native-headphone-motionを使って、React Native製のiOSアプリでAirPods内のセンサにアクセスする 🎧

先日、AirPodsの回転角を監視するiOSアプリのプロトタイプをReact Nativeで作りました。AirPodsの回転角を監視して、悪い姿勢が続いた際に悲鳴が流れるiOSアプリをつくりました。名付けて「腰の悲鳴」です。 pic.twitter.com/ZqwNDjSRH6— 君塚史高 (@ki_230)…

react-native-soundを使って、React Native製のiOSアプリでmp3を再生する 🔈

react-native-soundを使って、iOSアプリでmp3を再生してみます。github.com基本的には、ドキュメント通り進めていけばOKです。github.com アプリの作成 npx react-native@latest init ReactNativeSound react-native-soundの導入 yarn add react-native-soun…

React NativeでつくったiOSアプリを実機で動作確認する 📱

普段、iOSアプリを開発する際はExpoを使っているのですが、Expoには提供されていないモジュールを使用するため、ExpoなしのReact Nativeで実装する機会がありました。いろいろとはまりどころがあったのでセットアップ手順をまとめておきます。 ただ、開発者…

Next.jsのAppRouterでクライアントコンポーネントからslugを取得する 💻

nextjs.org PageRouter const { useRouter } = require('next/router'); export function DetailPageTemplate() { const router = useRouter(); return ( <div> <p>{ router.query.slug }</p> </div> ); } と、PageRouterの時はuseRouterで取得できていた、slugなのですが、App…

Array.prototype.findで配列の中から条件に合う要素を取得する 💻

developer.mozilla.org配列の中から条件に合う要素を取得する場合、いつも配列をループで回すか、lodashが導入されているプロジェクトでは_.findを使っていたのですが、IE11が亡きいま、Array.prototype.findでいけるということに気がつきました。lodash.com…

クリックした箇所を起点に絵文字を一刀両断する 🔪

以前つくったDEMOをもとに、左上に入力した絵文字を一刀両断するDEMOをつくりました。blog.kimizuka.org DEMO ソースコード(抜粋) 絵文字の判定 document.querySelector('input').addEventListener('input', (evt) => { if (evt.target.value.length === 2…

CanvasでAppleのアクティビティアプリのリングのような演出をつくる 🍎

www.apple.com DEMO 解説 頑張ればひとつのCanvasで描き切れたと思いますし、パフォーマンス的にもそちらの方が良いと思うのですが、 リングを描くCanvas リングの先端を描くCanvas を分けて実装しました。 また、リングの先端の回転はCSSで実装しています。…

TypeScriptのenumをループで列挙する 0️⃣

typescript-jp.gitbook.ioTypeScriptのenumはJavaScript変換時にオブジェクトに変換されます。 なので、forEachを使って要素を列挙したい場合は、Object.entriesを使えばOKです。developer.mozilla.orgただし、数値列挙型と文字列列挙型のenumで変換されるオ…

Firebase Admin SDKを使って匿名ユーザーを一括で1000件削除する 🔥

Firebaseで匿名認証を作成した際、自動クリーンアップを有効にすれば30日間で匿名ユーザーが削除されるようになります。firebase.google.comしかし、場合によってはスクリプトで匿名ユーザーをまるっと削除したい場合もあるでしょう。 そんなときに使えるス…

Next.jsでプレゼンテーションの資料をつくる 🧑‍🏫

blog.kimizuka.org前回、静的なウェブサイト、動的なウェブサイト、デスクトップアプリをNext.jsで作成しているという話をしましたが、実は今年からプレゼンテーションの資料もNext.jsでつくっています。もともとは、Keynoteで資料を作成していたのですが、 …

Next.js + TypeScript + styled-components + SCSSの雛形をつくる 💻

最近は、静的なウェブサイトも、動的なウェブサイトも、デスクトップアプリもNext.jsで開発しています。 もっというと、スマホアプリもExpoを使っているのですが、ExpoはReactではあるものの、Next.jsではないので今回は除外します。Next.jsのすべての機能を…

娘に「へ」と「え」の使い分けを身につけてもらう為に「へえ」ボタンを作りました 🔘

1️⃣ はじめに 娘が「へ」と「え」を使い分けられないことが発覚 プログラムで問題を量産 ‍ 使い方 実装方法 問題の生成 文章の読み上げ タイトル画面のボタン とりあえず娘に与える 短い役目を終える 気づき 子供は親の作ったものを贔屓目で見てくれる…

styled-componentsでつくったkeyframeアニメーションに変数を渡す 📹

function getZoomIn(zoom: number = 1) { return keyframes` 0% { transform: scale(0); } 100% { transform: scale(${ zoom }); } `; } という感じで、変数を受け取ってプロパティに設定したkeyframesを返す関数を作れば、結果として、keyframeアニメーショ…

styled-componentsで作成したアニメーションは内容が同じだとnameも同一になる 📛

styled-componentsで作成したアニメーションは、nameかgetName()で名前が取得できます。 import { keyframes } from 'styled-components'; const fadeIn = keyframes` 0% { opacity: 0; } 100% { opacity: 1; } `; console.log(fadeIn.name); // → iHsNqv co…