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

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

2024-01-01から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…