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

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

lodashを使って数値が要素の配列(number[])をソートする 1️⃣

これまで、数字が要素の配列をソートする場合、 const arr = [8, 8, 2, 3]; // 昇順 [${ arr }].sort((a, b) => { return a < b ? -1 : 1 }); // => [2, 3, 8, 8] [${ arr }].sort((a, b) => { return a < b ? 1 : -1 }); // => [8, 8, 3, 2] という感じで、…

GSAPをつかってuseRefの値をアニメーションさせる 🎥

Next.jsでDOMをアニメーションさせようと思った際、いつもはトゥイーンを自作していたのですが、いい感じのライブラリがあれば使いたいなと常々思っていました。 そこで、今回はReact + GSAPでDOMのアニメーションを試みてみようと思います。greensock.com …

Three.jsでスフィアマッピングを使って光表現をベイクする(THREE.MeshMatcapMaterial) 🔦

MeshMatcapMaterial をつかって、光表現のベイクを検証しました。基本的には、 こちらのドキュメント と こちらのサンプル の通り実装した感じです。threejs.org threejs.org ソースコード(抜粋) const matcap = new THREE.TextureLoader().load('/img/mat…

CSSのaspect-ratioを使ってDOMの縦横比を指定する 📺

CSS

これまで、アスペクト比を固定しつつサイズ可変のDOMをつくる際は、before要素のpadding-topを使ってました。 DEMO ソースコード(抜粋) SCSS div { width: 50%; background: red; &:before { display: block; padding-top: calc(100% * 9 / 16); content: …

electron-packagerでWindowsアプリを書き出すときにアイコンを指定する 🖼

かつて、electron-packageでMacアプリを書き出す際の調査結果をまとめました。blog.kimizuka.org今回は、Windowsアプリバージョンです。 試したこと まずは、単純に、 electron-packager . 'アプリ名' --icon=icon.png --platform=win32 --arch=x64 と、png…

Next.js + Electronでアプリを開発する際にpublicディレクトリを使う 📁

最近、Electronアプリを制作する際は、 Next.jsのElectron + TypeScriptのexample を使っています。github.com先日、 yarn dev ではpublicディレクトリの画像が読み込めるのに、yarn dist で書き出したアプリからは読み込めないという事態に出会したので、調…

Three.jsでカメラをスムーズに移動する 🎥

DEMO kimizuka.org左上のボタンを押すとカメラの位置がスムーズに移動します。 今回の例だとcubeのscaleを変えるのと見栄えは変わらないですが、しっかりとカメラを動かしています。 ソースコード(抜粋) const maxRange = 16; const minRange = 2; export …

Three.js + Reactで3Dコンテンツをつくるときのためのカスタムフックをつくる 🔨

React + Three.jsでウェブサイトを作る際、こんな感じのカスタムフックを使って、WebGLRenderer、PerspectiveCamera、Sceneを取得しています。 useThree.tsx import { useEffect, useState } from 'react'; import * as THREE from '~/build/three.module'; …

Three.jsでモーフィングをつかってMeshをスムーズに変形させる 📦

morphTargetInfluences をつかったモーフィングを試してみました。threejs.org基本的には、こちらの サンプル をNext.jsに移植した感じですが、抜粋したソースコードはReactを使っていなくとも同じ書き方になる部分です。threejs.org ソースコード(抜粋) c…

Chromeウェブストアに拡張機能を公開する 🌏

はじめに blog.kimizuka.org以前作成した拡張機能 ですが、審査を通過し Chome ウェブストア に公開することができたので、公開手順をまとめます。公開した拡張機能はこちらです。chrome.google.com 手順 ❶ アカウントを作成 https://chrome.google.com/webs…

Express + socket.ioでiPhoneのカメラが捉えている映像をPCでリアルタイムプレビューするウェブサイトをつくる 🎥

前提 自前で証明書を発行済みでhttpsでlocalhostにアクセスできる iPhoneとPCは同一WiFiにつながっている iPhoneは1台、PCも1台 iPhoneは直接見れない位置にある という条件で、iPhoneのカメラが捉えている映像を確認したく、PCでプレビューできるようにして…

自前で証明書を発行してローカルにExpressで立てたスタティックなウェブサーバにhttpsでアクセスできるようにする 💻

はじめに Expressでウェブサーバを建てる際、http://localhost:3000 でアクセスすることが多い(ポートが3000の場合)のですが、自前で証明書を準備して、https://localhost:3000 でアクセスできるように設定してみます。僕の開発環境がMacOSなので、MacOSで…

Yarn Workspacesを使って複数のNext.js + Electronプロジェクトを管理する 📁

これまでは、Yarn Workspacesの基本的な使い方 、Yarn Workspacesで複数のExpoプロジェクトを管理する方法 を記事にしてきました。blog.kimizuka.org blog.kimizuka.org今回は、Yarn Workspacesを使って複数のNext.js + Electronプロジェクトを管理します。 …

OpenCV.jsを使って、グリーンバック撮影用のカメラをウェブページ上で実装する 🟩

はじめに 今回つくったもの 動作原理 ソースコード index.html index.js index.css 実装時のあれこれ RGBからHSVへの変換 赤の取得 マスク画像との差分の取り方 video要素の消し方 今回使用した色見本 おわりに はじめに この記事は OpenCV Advent Calendar …

OpenCV.jsを使ってカメラで撮影した映像にブラーをかける際はksizeに大きな値を入れすぎないようにする 📷

medianBlur、GaussianBlur、blurを使えば簡単に画像にぼかすことができますが、それなりのFPSを出したい場合は注意が必要です。docs.opencv.org docs.opencv.org docs.opencv.org基本的にどれも使い方に大差はないのですが、今回はmedianBlurで実装してみま…

TypeScriptでCanvasに紙吹雪を舞い散らせる 🎉

5年前ぐらい前につくった紙吹雪をJavaScriptからTypeScriptに移植してみました。 Canvasに紙吹雪をレンダリングする基本方針はそのままに、ちょっとだけ挙動を変更しています。 具体的には、TypeScriptバージョンは紙吹雪が舞い散り終わった後、ループさせず…

iPhoneにInstagramのアプリがインストールされていればアプリに、なければウェブブラウザ版に遷移するリンクをつくる 📱

iOS

iOSのCustom URL Schemeを使い、 Instagramのアプリがインストールされている → アプリに遷移 Instagramのアプリがインストールされていない → ブラウザでインスタを開く という挙動を実装してみました。developer.apple.comInstagramのCustom URL Schemeは…

OpenCV.jsを使って画像から特定の範囲の色が使われている部分だけを抽出し、その割合を算出する 🎨

inRange関数 を使えば、特定の範囲の色のピクセルのみを抽出することができます。docs.opencv.org特定の範囲の色の指定方法ですが、今回はHSVを使って指定しました。ja.wikipedia.orgRGBからHSVに変換する際の選択肢として、COLOR_RGB2HSV と COLOR_RGB2HSV_…

OpenCV.jsを使って2枚の画像の差分を表示する 🖼

blog.kimizuka.org前回の記事がもりもりだったのですが、今回はシンプルにabsdiff関数だけを使ってみます。docs.opencv.org cv.absdiff(matA, matB, 出力先のmat); で、差分が取れるのでものすごく手軽に使えます。早速、下記2枚(1.png、2.png)の画像の差…

OpenCV.jsを使ってカメラで撮影した映像のフレーム差分を算出し、動いているもののみを表示する 📷

まだ、完璧ではないのですが、カメラの映像の中から動いているものだけを表示するスクリプトを書きました。全部で9個canvasがありますが、役割は下記の通りです。9個の小さなCanvasを左上からA、B、C、つまり、 A B C D E F G H Iと呼んだとき、A. 現在(カ…

OpenCV.jsを使ってカメラで撮影した映像を二極化する 📷

blog.kimizuka.org前回は、OpenCV.jsを使ってカメラで撮影した映像をモノクロにしました。 今回は、前回作成したモノクロ画像を更に二極化してみます。 ソースコード JavaScript const Module = { onRuntimeInitialized() { const medias = { audio: false, …

OpenCV.jsを使ってカメラで撮影した映像をモノクロにする 📷

opencv.orgカメラで撮影した映像をモノクロにするだけであれば、ピクセルデータを編集したり、CanvasRenderingContext2D.filterを使ったりすれば良いのですが、OpenCV.jsを試してみたかったので、今回はOpenCV.jsで実装します。blog.kimizuka.org blog.kimiz…

transform-matrixを使って、クリックした箇所を基準に拡大縮小する四角形をつくる 🔍

developer.mozilla.orgtransform-matrixを使って、クリックした箇所を基準に2倍に拡大する四角形をつくりました。もう一度クリックすると元の大きさに戻ります。 DEMO ソースコード JavaScript const rect = document.getElementById('rect'); let scale = 1…

liタグのマーカー(黒丸や数字)はフォントファミリーに依存することに気づく 😱

CSS

いままで意識したことがなかったですが、フォントファミリーを変更すると、liタグのマーカー(左についている黒丸や数字など)サイズが結構変わることがあります。 DEMO PC版のGoogle Chrome「Noto Sans JP」と「san-serif」を並べていますが、黒丸は「Noto…

wheelイベントでトラックパッドのピンチイベントを取得する 🖱

Macのトラックパッドのピンチイン・ピンチアウトをJavaScriptで取得したい場合、wheelイベントを使います。 ピンチイン・ ピンチアウト、ホイールを区別しない場合 DEMO ピンチイン・ピンチアウト、マウスホイールで値が更新されます ソースコード(抜粋) …

Googleカレンダーの予定名を隠した状態のスクリーンショットを撮影してダウンロードするブックマークレットをGoogle Chromeの拡張機能に移植する 📅

以前作成した、こちらのブックマークレット。blog.kimizuka.orgいまでも愛用しています。 先日、Goolge Chromeの拡張機能の作り方を調べたところ、非常に簡単だったので移植してみることにしました。さらには勉強のために公開までやり切ってみようと思います…

Goolge Chromeの拡張機能の習作をつくる 💻

ひさしぶりに、Goolge Chromeの拡張機能をつくることになったので、メモを残しておきます。 どれぐらいひさしぶりなのか調べてみると、僕が最後に拡張機能をつくったのが、2015年12月だったので、かれこれ7年ぶりでした。 その間に、manifest_versionが2から…

WKWebViewを設置しただけのiOSアプリをつくる 📱

iOS

普段はウェブアプリを作成していますが、時々ウェブからはアクセスできない機能を使いたいことがでてきます。 例えば、「プッシュ通知」「Bluetooth」「画面をランドスケープで固定」などです。そんなとき、Swiftで指定したウェブページを表示するだけのアプ…

Xcodeから実機に転送しようとした際に「Developer Mode disabled」となるのを解決する 📱

iOS

ひさしぶりに、XcodeでiOSアプリをつくり、実機に転送しようと思ったのですが、「Developer Mode disabled」となってしまいました。※ 「webview」はアプリ名、「」は端末名です アラートの表示された通り、「設定」>「プライバシーとセキュリティ」>「ディベ…

clip-pathでDOMにマスクを掛けつつborderのような枠線を描く ✏️

CSS

以前、clip-pathでDOMにマスクを掛けつつdrop-shadowで影を落としたことがあったのですが、clip-pathとborderを併用できないかなと思い色々試してみました。blog.kimizuka.org結論としてはborderとの併用は難しく、同じclip-pathを設定した要素をサイズ違い…