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

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

JavaScript

交差オブザーバー API (Intersection Observer API) を使ってページスクロールに連動したイベントを実行する 🖱️

DEMO 一昔前に、ページスクロールに連動してDOMをあれこれしたい場合、documentのスクロールイベントのコールバックで、対象となるDOMが範囲内に入っているか否かを判定する必要がありました。developer.mozilla.orgなので、僕もかつてページのスクロール量…

position: stickyとscrollIntoViewを組み合わせて使う 💻

position: stickyを使うと、簡単に吸着されるようなページスクロールを実装できます。developer.mozilla.org DEMO 非常に手軽です。しかし、ここにページ内リンクをscrollIntoViewを使って実装するとちょっとした問題が起こります。具体的にいうと、現在位置…

JavaScriptを使ってフロントでuuidを生成する(Crypto.randomUUID) 💻

www.npmjs.comこれまでは uuid をつかって生成することが多かったのですが、Crypto.randomUUIDを使えばライブラリ不要で、v4のUUIDを生成できることを知りました。developer.mozilla.orgブラウザ対応状況を見たところ、全然実践に投入できそうです。 window.…

LINE Messaging APIを使って、LINE Botからメッセージに応じたテキストを返信する(ぬるぽの時だけガッを返す) 📱

コードを書く .env package.json index.js 追記 前回 はユーザーから何と送られてきても、「Hello World.」と返信するLINE Botをつくってみましたが、今回はユーザーのメッセージの内容に応じて返信するテキストを変更してみます。コードを書くまでの工程は …

LINE Messaging APIを使って、LINE Botから定型文を返信する 📱

共通の準備(前回と一緒なのでスキップ可能) ❶ Developerアカウントを作成する ❷ プロバイダーを作成する ❸ チャンネルを作成する ❹ チャネルシークレットをメモする ❺ チャネルアクセストークンを発行しメモする ❻ Botと友達になる 今回用の準備 ❶ Ngrokの…

LINE Messaging APIを使って、LINE Botから定型文を送信する 📱

❶ Developerアカウントを作成する ❷ プロバイダーを作成する ❸ チャンネルを作成する ❹ チャネルシークレットをメモする ❺ チャネルアクセストークンを発行しメモする ❻ Botと友達になる ❼ コードを書く .env package.json index.js ❽ メッセージを送信 追記…

npm-check-updatesを使ってパッケージをアップデートしつつ、package.jsonを書き換える 📝

www.npmjs.comnpm-check-updatesを使えば、package.jsonに記載されているパッケージを記載しているバージョンを無視して最新にしてくれます。 依存関係はいい感じに評価してくれるようです。僕の場合、 package.json { "scripts": { "update": "ncu -u" }, "…

Array.prototype.mapを使って作成した配列からundefinedを削除したい 💻

const arr = ['a', 'b', 'c', 1, 2, 3].map((item) => { if (typeof item === 'number') { return item * 2; } }); console.log(arr); // => [undefined, undefined, undefined, 2, 4, 6] みたいなケースで、undefinedを削除したい場合、filterを使って、 co…

document.getElementsByTagNameやdocument.getElementsByClassNameとdocument.querySelectorAllの違い 📝

document.querySelectorAll と、 document.getElementsByTagName document.getElementsByClassName document.getElementsByName は、いずれもNodeListを返すメソッドです。が。返ってくるNodeListは微妙に異なっています。 具体的には、Static NodeList 返っ…

浮動小数点を意識したコードを書く 📝

JavaScriptでは数値が64ビットの浮動小数点数で表されます。突然ですが、問題です。 0.3 / 0.1の答えは幾つになるでしょう。普通に考えれば3になります。 では、JavaScriptで計算してみましょう。2.9999999999999996となりました。 なぜならば、前述の通り、…

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…