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

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

JavaScript

マイク入力をFFTで解析しながらwebkitSpeechRecognitionを使ってブラウザで音声認識する 🎙

blog.kimizuka.orgblog.kimizuka.orgこの2つを足してみました。 マイク入力がバッティングして動かないかな?と思ったんですが、動きました。 DEMO develop.kimizuka.org

マイク入力をFFTで解析してビジュアライズする 🎙

blog.kimizuka.org以前、音源をFFT解析するデモを作ったときは、事前にホスティングしてあったmp3を解析しましたが、今回は、MediaDevices.getUserMedia をつかって、ブラウザからマイクにアクセスし、マイク入力をリアルタイムにFFTで解析してビジュアライ…

webkitSpeechRecognitionを使ってブラウザで音声認識を試す 🎙

developer.mozilla.org ざっくり作ってみました。 マイク入力を許可すれば、喋ったことをテキストに起こしてくれます。MacとAndroid10のGoogle Chromeで動作を確認しました。 DEMO develop.kimizuka.org ソースコード JavaScript const recognition = new we…

iOSでダウンロード属性を試して動画のダウンロードを試みる 📱

DEMO develop.kimizuka.org iOS14.0.1の端末でSafariに表示された動画をダウンロードして写真アプリに表示するべく、色々調査してみました。 結論としては無理でした。 href属性 <a href="動画ファイルのパス" /> href属性が動画ファイルに設定してあるリンクを長押しし、「リンク先ファイル</a>…

音源をFFTで解析してビジュアライズする 🎶

WebAudioAPI の AnalyserNode を使って音源をFFTで解析してビジュアライズするデモを作りました。ChromeとSafariで動作確認しています。 DEMO develop.kimizuka.org JavaScript const canvas = document.getElementById('canvas'); const ctx = canvas.getCo…

OculusQuestのブラウザの性能を確認する(加速度センサ値の取得) 🕶

WebVRの可能性を探るべく、OculusQuestのブラウザの性能を確認していこうと思います。 まずは、加速度センサ値の取得から。developer.mozilla.org developer.mozilla.orgdevicemotion と deviceorientation を確認してみました。 devicemotion develop.kimiz…

ディベロッパーツールに画像を出力する 📷

特に使いどころのない技なのですが、どうしてもディベロッパーツールに画像を出力したい場合。❶ 複数行の空文字を出力 ❷ paddingで幅をいい感じにする ❸ 背景画像を設定という手順で出力できます。 DEMO See the Pen Display images on the console by kimmy…

postMessageを使って別ドメインのiframeからメッセージを受け取る 📞

developer.mozilla.org別ドメインのiframeを貼り付けたとき、iframeと通信できたらいいのになと思う瞬間があります。 例えば、iframe内の高さを親に伝えて、iframe自体の高さを変更したいときなどです。そんなときに役に立つのが、window.postMesage。 これ…

delegateを自作のものからnpmに乗り換える 🚗

この記事ではdelegateの説明は省略しますが、興味のある方は昔書いた記事を読んでいただけると幸いです。これまでは自作したdelegate関数を使って、deleateを設定してきました。 自作のdelegate function delegate(parent, eventName, selector, callback) {…

横幅375pxを下回るブラウザで観覧した際はviewportをwidth=375に書き換えるスクリプトを試す 📱

最強のviewportを探っていた際、昨今のviewportは環境によって出し分けられていることを知り、フロントでviewportを書き換えるスクリプトを書いてみました。blog.kimizuka.org本当はサーバで書き換えたものを返した方が良いことは百も承知なのですが、静的な…

The `yarn’ command exists in these Node versions: を解決する 💪

現象 yarnしようとすると、 The `yarn’ command exists in these Node versions: v13.1.0 v14.7.0と表示される。 原因 nodeのバージョン管理ツール(僕の場合で言うとndenv)をつかいつつ、npm経由でyarnをインストールしていることが原因。 解決方法 ❶ npm…

YouTubeAPIをつかって複数の動画をなるべく同時に再生する 🎥

結論 ことの発端 DEMO リメイクした箇所 動画のインライン再生対応 クリックで再生するように変更 結論 PC版Chromeで複数のYouTubePlayerは動作可能 Android版Chromeでも動いた!(Pixel3aで確認) iOSのSafariでの挙動がおかしいので要調査(iPhone SE、iPa…

Blenderで作ったモデルをThree.jsで読み込んでOculus QuestのブラウザのVRモードで鑑賞する 👓

BlenderでつくったモデルをVR上で確認したく、Three.jsをつかってWebVRコンテンツをつくってみました。 そこまでの手順を簡単にまとめておきます。 Blenderの基本操作を覚える 簡単なモデリングをする .glbファイルで書き出す Three.jsで読み込む ❶ Three.js…

Array.prototype.forEach を使うとループを途中で止めることができないので、代わりに Array.prototype.some を使ってループを止める 🔁

最近、1年前の己のコードを見返す機会があったのですが、 this.items.some((item, i) => { }); という見慣れない記述が。itemsは配列だったので、Array.prototype.someを使ってます、 いつもだったら、forEachを使う場面なのですが、何故にsomeという見慣れ…

ドラッグ&ドロップでファイルをアップロードする(HTML Drag and Drop API無しバージョン) 📦

ウェブサイトにファイルをアップロードする際、ファイルをドラッグ&ドロップするUIをよく見かけます。 そういったUIを実装しようとすると、HTML Drag and Drop APIを使いたくなることでしょう。developer.mozilla.orgしかし、実はinputタグでも簡単に作成す…

M5StickC[obniz無期限ライセンス付属]を振り始めた時、振り終わった時にコールバックイベントを設定する 🔨

最近加速度センサの値に応じた音を再生する仕組みを作り続けてます。 窓を開けたときに歓喜の歌が流れる仕組みを作りました。名付けて「換気の歌」です。 pic.twitter.com/x8ku2DN2Ul— 君塚史高 (@ki_230) 2020年6月21日 加速度が「しきい値を超えた際のイベ…

壁に穴を開けるARをつくって隣の部屋からの音漏れをポジティブに楽しむ 🕳

隣の部屋からの音漏れをポジティブにするWebARをつくりました。壁に穴を開け、隣人がUnityちゃんだと思い込むことで、音漏れに対するイライラを和らげます。ダンスを練習してるなら仕方ないな、と。 #ウソ穴 #バーチャルお隣りさんhttps://t.co/K6VrOOmmH5 p…

npmでusernameが数字のみのユーザーは作成できない 1️⃣

npmでユーザー名が数字のみで構成されるアカウントをつくろうとしたとき、 400 Bad Request - PUT https://registry.npmjs.org/-/user/org.couchdb.user:123456 - That word is not allowed. Please contact support (support@npmjs.com) if you believe you…

正規表現でテキストが全角のみかをチェックする 📝

もろもろ、調べた結果、 /[^\x01-\x7E\uFF61-\uFF9F]/ この正規表現にマッチすれば、全角文字という結論に達しました。 1バイトの文字と半角カタカナ以外を全角文字と定義した書き方です。 /^[^\x01-\x7E\uFF61-\uFF9F]+$/.test('あいうえお'); // => true /…

Macにリングコンを接続したいが繋がらない! 🎮

先日、こちらの npmパッケージ をちょっと改造して、プロコンをMacに接続することに成功しました。www.npmjs.comblog.kimizuka.org同じ要領で、リングコンをMacに繋げようとしたのですが、どう頑張ってもJoy-Con(R)として認識されてしまいます。Bluetooth…

ヘッダーをfixedにするときに心掛けて欲しい、たった2つのこと 2️⃣

DEMO See the Pen Fixed Header by kimmy (@kimmy) on CodePen.ヘッダーってfixedで実装されることが多いのですが、個人的には2つだけ心掛けて欲しいことがありまして、例えば、コードレビューのレビュアーになることがあったら、少なくとも❶は確実に指摘し…

M5StickC[obniz無期限ライセンス付属]の加速度センサにアクセスする 💻

obniz.io obnizとは 株式会社 CambrianRobotics(カンブリアンロボティクス)がつくっている、obnizという名のデバイスです。 そしてobnizOSという名のOSのことを指すこともあります。 M5StickC[obniz無期限ライセンス付属]の中のobnizはobnizOSのことを指し…

afplayコマンドをつかってMacにてターミナルからコマンドで音楽ファイルを再生する 💻

OSXのコマンドに afplay というものがありまして、これを使うとターミナルから音楽が再生できます。おそらく Audio File Play ということなんだと思います。違うかもしれません。 もうちょっと調べようと思ったのですが、OSXのコマンド一覧や、afplayのドキ…

PixiJSでviewに設定したCanvasをタッチの起点にした際もウィンドウのスクロールを可能にする 👼

www.pixijs.comPixiJS をつかって、前面Canvasのサイトをつくっているときには気づかなかったのですが、ファーストビューがCanvas(PixiJSでレンダリング)で、その下にコンテンツがつづくページを実装していた際に気付きました。PixiJSのviewに設定したCanv…

Macが接続しているWiFiのSSIDをコードから取得する 📡

Macが接続しているWiFiのSSIDなどステータスバーを見れば一目瞭然なのですが、今回はSSIDをコードから取得する方法を調査しました。 ターミナルから調べる Node.jsで調べる ターミナルから調べる /System/Library/PrivateFrameworks/Apple80211.framework/Ve…

Nintendo Switch ProコントローラーをMacに接続してGamepadAPIでイベントを受け取る 🎮

Gamepad APIをつかって、ブラウザからコントローラーの入力を取得。https://t.co/EQ4CxCylO6 pic.twitter.com/JuQ3At6RNP— 君塚史高 (@ki_230) 2020年7月3日 昨日はNode.jsをつかって、Macに接続されたコントローラーの入力を取得しましたが、今日はGamepad …

Nintendo Switch ProコントローラーをMacに接続してNode.jsでイベントを受け取る 🎮

接続方法 ボタンイベントのコールバックを登録する ソースコード プルリクエストをつくる Nintendo Switch Proコントローラー、通称プロコン。www.nintendo.co.jp 世界のアソビ大全用に購入したのですが、複数人でのプレイ時には使用できず、どうしたものか…

Three.jsをつかってGETパラメータをキューブとして描画するウェブサイトをつくる 📦

ひょんなことからGETパラメータを基にキューブを生成してくれるサイトをつくってみました。develop.kimizuka.org 使い方 ❶ https://develop.kimizuka.org/cube/?1,1,1,1,1,1,1,1という形でGETパラメータにカンマ区切りで1を渡すと、1x1のcubeを8個並べてcube…

NuxtJS + TypeScript(nuxt-property-decorator) + Firebase Hosting + Cloud Functions でSSR環境をつくった際に {"code": "MODULE_NOT_FOUND"} になってしまったので調査した 🔥

いま振り返ると単純な話だが、ものすごくはまった。 ことの発端 結論 疑ったこと ことの発端 Nuxt.js + Firebase Hosting + Cloud Functions でSSRを実現しているプロジェクトが動かなくなった {"code": "MODULE_NOT_FOUND"} と表示されるので、なにかモジュ…

同一WiFiに繋がっているGoogleHomeを探して音楽を再生するサーバを立てる 🔈

ユーザーが音声で質問したことに回答してくれる、夢のデバイス、スマートスピーカー。 スマートスピーカー向けのアプリケーションをつくるのも比較的簡単で、これまで僕も何本かリリースしてきました。amzn.tohttps://amzn.to/2Z7Koiyamzn.toしかし、スマー…