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

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

JavaScript

JavaScriptでCanvasにヘリンボーン(杉綾)を描く 🐟

ヘリンボーン(英: herringbone)は、模様の一種。開きにした魚の骨に似る形状からニシン (herring) の骨 (bone) という意味をもつ。gを黙字にせずヘリングボーンということもある。形状は、V字形や長方形を縦横に連続して組合せられている。 織物(綾織り)…

JavaScriptでネットワークの状態を確認する 📡

そもそもウェブサイトが表示されているということは、ほとんどの状態でオンラインであると信じたいところですが、ElectronでJavaScriptを使った時など、JavaScriptからネットワークの状態を確認したいときがあります。そんなときは、 Navigator.onLine を使…

Navigator.setAppBadgeを使って、iOS16.4のPWA(Progressive web apps)にアプリケーションバッジを付ける 📛

iOS16.4からWebサイトでもプッシュ通知を受け取れるようになりました。 Safariでプッシュ通知を受け取る条件 ❶ httpsでWebサイトをつくる ❷ ❶のウェブサイトをホーム画面に追加する(displayをstandaloneにする) ❸ ユーザーアクションきっかけで通知の許可…

window.openで空のwindowを開きつつ、開いたwindowのdocument.bodyにDOMをappendChildする 🪟

window.openで空のwindowを開き、開いた側のJavaScriptから開かれた側のHTMLの構造を変更する方法として、document.bodyにDOMをappendChildする方法があります。 ソースコード index.js document.querySelector('button').addEventListener('click', () => {…

SpeechSynthesisUtteranceを使ってブラウザにテキストを読み上げてもらう 💬

developer.mozilla.orgこれまで機械音声を作成する場合、 Macのsayコマンドを使っていました 。blog.kimizuka.org音声ファイルを生成できるので、非常に便利です。一方で、生成したmp3をブラウザ上で再生したい場合は、 SpeechSynthesisUtterance を検討して…

クリックした箇所を起点に画像を一刀両断する 🔪

タイトルの通りですが、クリックした箇所を起点にDOMを真っ二つに一刀両断したいなと思い、コードを書いてみました。 思い出の中のFF6の斬鉄剣のようなイメージで制作しましたが、シンプルに仕上げるためにエフェクトは入れていません。 一応、横方向、縦方…

JavaScriptでqsを使わずに簡単なクエリストリングをパースしてオブジェクトに変換する 📝

普段、クエリストリングをパースしたい場合は qs を使っています。www.npmjs.com qs.parse('key=value'); // => { key: 'value' } しかし、qsを読み込むほどでもない場合、例えば自分で決めたURLのパラメーターをパースしたい場合などは自作の関数を使ってい…

howler.jsのhtml5オプションが、iOSのSafariに与える影響を調査する(WebAudioAPI VS HTMLAudioElement) 🔈

前回 に引き続き、 howler.js の検証ですが、正確には、iOSでのWeb Audio API と HTMLAudioElement の比較です。blog.kimizuka.org developer.mozilla.org developer.mozilla.orgかつて、iOSでの Web Audio API と Audioタグ の挙動の近いを調査したことがあ…

howler.jsを使ってBGMを自動再生するWebサイトをつくった時の挙動を確認する 🔈

JavaScriptでのオーディオを簡単かつ確実にしてくれるライブラリ、 howler.js 。howlerjs.comこれまでは、Audioタグ や Web Audio API を直接使えば良いという方針で、あまり積極的に使ってきませんでした。developer.mozilla.org developer.mozilla.orgしか…

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] という感じで、…

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で…

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

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

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

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

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

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

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

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

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

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

clip-pathで切り抜いたDOMを画像化する 🖼

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

iOS15のSafariでDOMをDrag and Dropできるようにする 👆

ことの発端 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を使ってローカルのExpressをグローバルに公開する 🌏

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

imageminとimagemin-pngquantを使ってPNG画像を軽量化する 🖼

imagemin と imagemin-pngquant を使って、ディレクトリ内のPNG画像をまるっと軽量化するスクリプトを書きます。 www.npmjs.com www.npmjs.com 実装方法 ❶ 必要なパッケージをインストールします yarn add -D imagemin imagemin-pngquant ❷ distディレクトリ…

Canvasで長方形を扇のように分割する 🔪

需要があるかは謎ですが、長方形を扇のように分割するコードを書いたので、記録を残しておきます。 DEMO HTML <canvas></canvas> <input type="number" value="5" min="1" max="18" /> JavaScript const canvas = document.querySelector('canvas'); const ctx = canvas.getContext('2d'); let length = 5; canvas.width = 400; c…

html2canvasがwriting-mode: vertical-rlに対応しきれていないのでCanvasで縦書きを実現する 📝

writing-mode: vertical-rlを使えばCSSで縦書きを簡単に実現できます。developer.mozilla.org DEMO 普段はこれでまったく問題ないのですが、html2canvasを使ってHTMLを画像書き出ししようとすると、writing-mode: vertical-rlがうまく評価されません。 検証…

html2canvasでmix-blend-modeを使っているページのスクリーンショットを撮る 📸

ことの発端 調査(Issueを発見) さらに調査(プルリクエストを発見) 検証 左(ブレンドモードなし) HTML 中央(ブレンドモードあり) HTML 右(ブレンドモードあり) HTML 画像化 左(ブレンドモードなし) 中央(ブレンドモードあり) 右(ブレンドモー…

Web Share API を使って複数のファイルをシェアする際、順序が保証されないことに気づいた 📱

以前、iOS15でWeb Share APIを試しました。blog.kimizuka.orgその際は気づかなかったのですが、ファイルを複数シェアしようとすると順番が保証されないということに気づきました。 DEMO https://develop.kimizuka.org/web-share-api-multiple-files/Web Shar…

anyenv-updateを使ってnodenvを更新する 🔁

ことの発端 かつて導入した nodenv 。blog.kimizuka.org nodenv install -lでインストールできるバージョン一覧を表示した際、インストールしたいバージョンが表示されないので更新の方法を調べ始めました。 結果として、anyenv を使ってインストールしてお…

textareaを使ってHTMLの特殊文字をアンエスケープする 📝

特殊文字をアンエスケープしたいと思って、もろもろ調べました。Mozillaのサイトによると、 < &lt; > &gt; " &quot; ' &apos; & &amp;こちらの5文字が特殊文字として挙げられています。developer.mozilla.org最小の構成であれば、この5文字をreplaceす…

iOS15.3.1に搭載されている文字列でJavaScriptのスプレッド構文に耐えうるものを抽出する 😀

iOS15.3.1に収録された全絵文字をJavaScriptの配列に収納しようしたのですが、一部スプレッド構文での分割がうまくいかない絵文字がありました。例えば、‍️という絵文字。 [...'‍️']; // => ['', '‍', '', '️']と言う感じで、 と に分かれてしまいます。そ…

Drag and Drop APIを試す 🖱

Drag and Drop APIを検証しました。developer.mozilla.org 実装手順 最小構成だと、 ドラッグ可能にしたい要素のdraggableをtrueに設定する ドロップ可能にしたい要素にdragoverイベント、dropイベントを設定する dragoverイベント、dropイベントに設定した…