結論 const { app } = require('electron'); const window = new BrowserWindow({ width: 375, height: 812, webPreferences: { devTools: false } }); と、BrowserWindowのインスタンスを作成する際に渡すオプションでディベロッパーツールを無効化できる。…
Vercelが @next/third-parties というライブラリを提供してくれているので、それを使えばGA4の導入も楽々です。www.npmjs.com@next/third-parties はGoogle Tag Managerにも対応しているのですが、今回はGA4を直接導入します。 ソースコード(抜粋) src/app…
Next.js(App Router)で作成したポートフォリオサイトにRSSフィードを実装してみました。https://kimizuka.fm/rss.xmlキャッシュの設定が適切にできているかに不安が残りますが、実装方法をメモしておきます。 今回はサイトをデプロイするたびに、ルート直…
まず、ドキュメントを読むとすべてが書いてあります。 書いてあるのですが、プレビュー環境と本番環境でrobots.txtを出し分けたかったので、色々検証してみました。nextjs.orgまずは、ほぼほぼドキュメント通りの実装。 app/robots.ts import { MetadataRout…
赤外線カメラで再規制反射材を撮影して、再帰性反射材をトラッキングすることを目指しました。まず、こちらが赤外線カメラの前で再規制反射テープを振り回している映像です。 今回は、こちらの映像をCanvasにレンダリングした後、OpenCV.jsを使って、❶ 二極…
https://www.switch-science.com/products/9350 より引用M5StickC PlusをWiFiに繋いで、ButtonA(M5と書いてあるボタン)を押した際に、同一WiFi上にあるサーバに対して押されたことを通知するコードを書いてみました。 ボタンを押したときに1、離したときに…
ことの発端 普段、Electronアプリを制作する際は、 Next.jsのElectron + TypeScriptのexample を使っています。github.com yarn create next-app --example with-electron-typescript app-nameで、Electron + Next.jsの雛形が作成できるので非常に便利です。…
以前、Node.jsからOpenAI APIをさささっと叩きました。blog.kimizuka.org今回は、文章を送信したら、何かしらのスコアを返すAPIを作ってみようと思います。 この説明だとわかりにくいので、実例を交えながら解説します。 先輩風API 先日、体験型コンテンツ勉…
普段、movファイルをmp4に変換する際、ffmpegを使って、 ffmpeg -i in.mov -pix_fmt yuv420p out.mp4と変換しているのですが、Macの設定をあれこれ変更していたら動かなくなってしまったので、一度アンストールして再度導入しました。 使っているMacはApple…
blog.kimizuka.org最近は、Expoを挟まず直接ReactNativeでアプリを作っていたのですが、突然実機に転送できなくなったので、今後のためにメモを残しておきます。 環境 MacOS: 14.3.1 チップ: Apple M1 Max Xcode: 15.2 iOS: 17.3.1 ReactNative: 0.73.4 npx …
急遽、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の回転角をmyCobotの姿勢と同期。 pic.twitter.com/vNcBK1gYO1— 君塚史高 (@ki_230) 2024年2月1日 AirPods → iPhoneアプリ → Express → python-shell → pymycobot → myCobotと繋いでいって、AirPodsの回転角とmyCobotの姿勢を同期させました。需要が…
前回は、Node.jsからOpen AIのAPIをさささっと叩いてみることを目標に、適当な日本語を返してもらいましたが、今回は画像に写っているものを説明してもらおうと思います。blog.kimizuka.org import OpenAI from 'openai'; const openai = new OpenAI({ apiKe…
Node.jsからOepnAI APIをささっと叩いてみます。 npmにモジュールが公開されているので、ドキュメントのQuickstart通りに進めれば楽々です。github.com https://platform.openai.com/docs/quickstart?context=nodeplatform.openai.comNode.jsとyarnは既に導…
developer.mozilla.orgnavigator.mediaDevices.getUserMediaを使ってカメラに接続しようとする際、 const stream = await navigator.mediaDevices.getUserMedia({ audio: false, video: { deviceId: 'HOGEHOGE' } }); という形でdeviceIdを指定できます。 上…
普段は静的サイトのホスティングに GitHub Pages か Netlify をつかうことが多いのですが、Basic認証をかけたい場合、GitHub Pagesでは実現できないですし、Netlifyでは有料の機能なので、どうしようかなと思っていました。一旦は、 Heroku を使おうかなとも…
先日、AirPodsの回転角を監視するiOSアプリのプロトタイプをReact Nativeで作りました。AirPodsの回転角を監視して、悪い姿勢が続いた際に悲鳴が流れるiOSアプリをつくりました。名付けて「腰の悲鳴」です。 pic.twitter.com/ZqwNDjSRH6— 君塚史高 (@ki_230)…
react-native-soundを使って、iOSアプリでmp3を再生してみます。github.com基本的には、ドキュメント通り進めていけばOKです。github.com アプリの作成 npx react-native@latest init ReactNativeSound react-native-soundの導入 yarn add react-native-soun…
普段、iOSアプリを開発する際はExpoを使っているのですが、Expoには提供されていないモジュールを使用するため、ExpoなしのReact Nativeで実装する機会がありました。いろいろとはまりどころがあったのでセットアップ手順をまとめておきます。 ただ、開発者…
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…
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…
www.apple.com DEMO 解説 頑張ればひとつのCanvasで描き切れたと思いますし、パフォーマンス的にもそちらの方が良いと思うのですが、 リングを描くCanvas リングの先端を描くCanvas を分けて実装しました。 また、リングの先端の回転はCSSで実装しています。…
typescript-jp.gitbook.ioTypeScriptのenumはJavaScript変換時にオブジェクトに変換されます。 なので、forEachを使って要素を列挙したい場合は、Object.entriesを使えばOKです。developer.mozilla.orgただし、数値列挙型と文字列列挙型のenumで変換されるオ…
Firebaseで匿名認証を作成した際、自動クリーンアップを有効にすれば30日間で匿名ユーザーが削除されるようになります。firebase.google.comしかし、場合によってはスクリプトで匿名ユーザーをまるっと削除したい場合もあるでしょう。 そんなときに使えるス…
blog.kimizuka.org前回、静的なウェブサイト、動的なウェブサイト、デスクトップアプリをNext.jsで作成しているという話をしましたが、実は今年からプレゼンテーションの資料もNext.jsでつくっています。もともとは、Keynoteで資料を作成していたのですが、 …
最近は、静的なウェブサイトも、動的なウェブサイトも、デスクトップアプリもNext.jsで開発しています。 もっというと、スマホアプリもExpoを使っているのですが、ExpoはReactではあるものの、Next.jsではないので今回は除外します。Next.jsのすべての機能を…
1️⃣ はじめに 娘が「へ」と「え」を使い分けられないことが発覚 プログラムで問題を量産 使い方 実装方法 問題の生成 文章の読み上げ タイトル画面のボタン とりあえず娘に与える 短い役目を終える 気づき 子供は親の作ったものを贔屓目で見てくれる…
function getZoomIn(zoom: number = 1) { return keyframes` 0% { transform: scale(0); } 100% { transform: scale(${ zoom }); } `; } という感じで、変数を受け取ってプロパティに設定したkeyframesを返す関数を作れば、結果として、keyframeアニメーショ…
styled-componentsで作成したアニメーションは、nameかgetName()で名前が取得できます。 import { keyframes } from 'styled-components'; const fadeIn = keyframes` 0% { opacity: 0; } 100% { opacity: 1; } `; console.log(fadeIn.name); // → iHsNqv co…