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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

単純な往復運動であればsin関数を使って実装しますが、これだと等速にはなりません。 いや、数学の得意な人であれば、どうにかして等速にできるのかもしれないですが、今回は単純に区間を区切った式で等速往復を実装します。 DEMO ※ クリックすると動き出し…

最近話題のStable DiffusionをWIndows 11で動かしてみようと思い、もろもろ試していたところ、Widnowsに開発者モードがあることを知りました。設定 > プライバシーとセキュリティ > 開発者向け > 開発者モード を オン にすると開発者モードになります。Stab…

以前、Three.jsでクリックされたオブジェクトを判定する際に使った、THREE.Raycasterを再び調査しました。blog.kimizuka.orgthreejs.orgクリックされたオブジェクトの判定では、Raycaster.setFromCameraというメソットを使い、クリックされた点の直線上に存…

複数のカメラをスイッチングしたいなと思って、いろいろ試しました。 しかし、なんら難しいことはなく、結論から書くと、カメラを複数用意して、renderer.renderに渡し直してあげれば実現できました。 DEMO ソースコード（抜粋） const renderer = new THREE…

Googe Chromeではinput type="time"の右端に時計のアイコンが表示されます。このアイコンは、 [input type="time"]::-webkit-calendar-picker-indicator というCSSセレクタでセレクトできるので、非表示にしたい場合、 [input type="time"]::-webkit-calenda…

DEMO clip-pathで切り抜いたDOMをhtml2canvasで画像化すると、clip-pathが無視されます。 もろもろ試したところ、dom-to-imageというライブラリを使ってみると、しっかりとclip-pathを反映することができました。github.com html2canvasで画像化 dom-to-imag…

ことの発端 blog.kimizuka.orgかつて、Drag and Drop APIを試したことがありましたが、最近になってiPadで動作していないことに気がつきました。（iOS 15.6にて確認） iOS 15.6で動作しなかったDEMO（Drag and Drop API） caniuse.comCan I use では、iOS15…

ローカルで立ち上げたサーバをさくっとグローバルに公開したいとき、ngrok が便利です。ngrok.com 準備 ❶ ngrokのアカウントを作る https://ngrok.com/ の「Sign up」からアカウントを作成します。 ❷ authtokenをメモする https://dashboard.ngrok.com/get-s…

これまでSVGを動かす場合、CSSの@keyframesを使ってました。developer.mozilla.org具体的には、こちらのSVGを回転させたい場合、 CSS（抜粋） svg { animation: rotate .8s linear infinite; } @keyframes rotate { 0% { transform: rotateZ(0deg); } 100% {…