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

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

JavaScript

JavaScriptで数字をぱららららっと表示する仕組みをつくる 🎰

抽選した数字を表示する前にランダムを抽選した数字をぱららららっと表示する仕組みを作りました。 ライブラリ不要でさささっと使うためにVanilla JSで書いています。 DEMO See the Pen random by kimmy (@kimmy) on CodePen. ソースコード index.js const p…

干渉縞を鑑賞するウェブサイトをつくりました 👁️

昔、CodePenにアップした、干渉縞を鑑賞するサイトをリメイクしました。 See the Pen moiré by kimmy (@kimmy) on CodePen.CodePenでは、base64化した画像を背景画像にしたDOMを回転させていましたが、今回はCanvasで制作したので、動的にパラメータを変更で…

M5StickC Plusのボタンを押したことをUDP通信を使ってNode.jsで立てたサーバに伝える ⚡️

https://www.switch-science.com/products/9350 より引用M5StickC PlusをWiFiに繋いで、ButtonA(M5と書いてあるボタン)を押した際に、同一WiFi上にあるサーバに対して押されたことを通知するコードを書いてみました。 ボタンを押したときに1、離したときに…

OpenAI APIを活用した文章スコアリングの実装 💯

以前、Node.jsからOpenAI APIをさささっと叩きました。blog.kimizuka.org今回は、文章を送信したら、何かしらのスコアを返すAPIを作ってみようと思います。 この説明だとわかりにくいので、実例を交えながら解説します。 先輩風API 先日、体験型コンテンツ勉…

AirPods → iPhoneアプリ → Express → python-shell → pymycobot → myCobotと繋いでいって、AirPodsの回転角とmyCobotの姿勢と同期する 🤖

AirPodsの回転角をmyCobotの姿勢と同期。 pic.twitter.com/vNcBK1gYO1— 君塚史高 (@ki_230) 2024年2月1日 AirPods → iPhoneアプリ → Express → python-shell → pymycobot → myCobotと繋いでいって、AirPodsの回転角とmyCobotの姿勢を同期させました。需要が…

Node.jsからOpenAI APIをささっと叩く 🔨

Node.jsからOepnAI APIをささっと叩いてみます。 npmにモジュールが公開されているので、ドキュメントのQuickstart通りに進めれば楽々です。github.com https://platform.openai.com/docs/quickstart?context=nodeplatform.openai.comNode.jsとyarnは既に導…

navigator.mediaDevices.getUserMediaを実行した際にstreamを取得するカメラをlabelを使って指定する 🎥

developer.mozilla.orgnavigator.mediaDevices.getUserMediaを使ってカメラに接続しようとする際、 const stream = await navigator.mediaDevices.getUserMedia({ audio: false, video: { deviceId: 'HOGEHOGE' } }); という形でdeviceIdを指定できます。 上…

Array.prototype.findで配列の中から条件に合う要素を取得する 💻

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…

CanvasでAppleのアクティビティアプリのリングのような演出をつくる 🍎

www.apple.com DEMO 解説 頑張ればひとつのCanvasで描き切れたと思いますし、パフォーマンス的にもそちらの方が良いと思うのですが、 リングを描くCanvas リングの先端を描くCanvas を分けて実装しました。 また、リングの先端の回転はCSSで実装しています。…

TypeScriptのenumをループで列挙する 0️⃣

typescript-jp.gitbook.ioTypeScriptのenumはJavaScript変換時にオブジェクトに変換されます。 なので、forEachを使って要素を列挙したい場合は、Object.entriesを使えばOKです。developer.mozilla.orgただし、数値列挙型と文字列列挙型のenumで変換されるオ…

娘に「へ」と「え」の使い分けを身につけてもらう為に「へえ」ボタンを作りました 🔘

1️⃣ はじめに 娘が「へ」と「え」を使い分けられないことが発覚 プログラムで問題を量産 ‍ 使い方 実装方法 問題の生成 文章の読み上げ タイトル画面のボタン とりあえず娘に与える 短い役目を終える 気づき 子供は親の作ったものを贔屓目で見てくれる…

交差オブザーバー 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タグ の挙動の近いを調査したことがあ…