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

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

JavaScript

CanvasRenderingContext2D.filterでCanvasをグレースケールにする 🖼

以前、ピクセルデータを編集することでCanvasをグレースケールにしました。blog.kimizuka.org今回は CanvasRenderingContext2D.filter をつかってグレースケール化を試します。 const canvas = document.createElement('canvas'); const ctx = canvas.getCon…

iOS12以前のmobile Safariではwindow、document、bodyにclickイベントを設定しても発火しない 🖱

mobile Safariのclcikイベントについて DEMO HTML 対策 その1 対策 その2 HTML DEMO mobile Safariのclcikイベントについて その昔、iOSのmobile Safariに置いて、widnow、document、bodyにはclickイベントが設定できない記憶があったのですが、最近はどうな…

Canvasのピクセルデータを編集して動画をグレースケールにする 🖼

canvasタグはcontextのputImageDataを使って、ピクセルデータを編集することができます。 const canvas = document.createElement('canvas'); const ctx = canvas.getContext('2d'); const video = document.createElement('video'); video.src = 'movie.mp4…

動的に生成したvideoタグを自動再生するときはmuted属性ではなくプロパティを変更する 🎥

ビデオをミュートにすれば自動再生できることは知っていたので、 const video = document.createElement('video'); // ミュートに設定 video.setAttribute('muted', 'muted'); video.setAttribute('autoplay', 'autoplay'); video.setAttribute('loop', 'loo…

YouTube IFrame Player APIで読み込んだ動画を自動で再生してループさせる 🎥

公式ドキュメントをざっと読むと、autoplayというパラメータも、loopというオプションも見つかるので、その2つを使って const player = new YT.Player('player', { width: '320', height: '180', videoId: '1g0ebPju_eE', playerVars: { autoplay: 1, playsi…

TypeScriptでスクリプトファイルをimportする際に拡張子を省略する為のwebpack.config.jsの設定 📦

すべては公式ドキュメントに乗っています。webpack.js.orgresolve.extensionsに文字列の配列を渡せばOKです。webpack.js.org module.exports = { //... resolve: { extensions: ['.ts', '.js', '.json'] } }; TypeScriptファイル、JavaScriptファイル、JSON…

jQueryを使ってページ内リンクのスクロールを実装する 🖱

最近めっきり使うことの少なった jQuery 。 しかし、稀にjQuery導入済みのサイトの改修を依頼されることもあるので、使う機会がゼロになったわけではありません。 久しぶりに使うと、animateがすごく便利で、ついつい多用したくなります。animateを使えばペ…

マイク入力を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日 加速度が「しきい値を超えた際のイベ…

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…