JavaScript
属性セレクタの前方一致を使って、href属性が#から始まる要素をまるっと取得すればページ内リンクを一網打尽にできます。 [attr^=value] attr という名前の属性の値が value で始まる要素を表します。 https://developer.mozilla.org/ja/docs/Web/CSS/Attrib…
github.comこちらのissue に対応するために調査しました。 こんなことは普通はしないと思うのですが、iOSにてページスクロール中にscrollToを使うと、 ❶ ユーザーがページのスクロールを開始する ❷ widow.scrollToでスクロール位置を変更する ❸ （指定箇所ま…
先日つくったブラウザで音声を録音できるサイトですが、折角なら録音データをFirebaseにアップロードしたいと思いました。Next.js + RecorderService.js でブラウザで音声を録音する - みかづきブログ・カスタムそのために、Blob URL → Blob と Blob → Blob…
mobile Safariから音声を投稿する仕組みを考えていたところ、MediaRecorder APIたるものを発見しました。developer.mozilla.org当初は、 ボイスメモで録音（音声ファイルを生成） どうにかしてブラウザから音声ファイルにアクセス ファイルアップロード とい…
npmで探したら似たようなものがある気もしなくもないですが、すごくシンプルなものが欲しかったので自作しました。 process.browserを使っている点以外はNuxt.jsに依存しているところはないですが、Next.jsで使うことを前提に作ってます。 TypeScrtipt expor…
MediaDevices.getUserMedia()の仕様を確認すると、 すべての constraint が数字とは限りません。例えば、次の例はリアカメラよりもフロントカメラを (利用できるなら) を選好します。 { audio: true, video: { facingMode: "user" } } リアカメラが必要であ…
HubSpotとは ことの発端 dealとは APIを調べる @hubspot/api-client - npmを調べる メソッドを見つける メソッドを叩いてみる ものすごくニッチな記事になりますが、未来の自分のためにも書き残しておきます。 HubSpotとは www.hubspot.jp一言で言うと、「EC…
ページの上部を起点としたときのDOMのY座標を知りたいとき、jQueryを使うのであれば、 const targetTop = $('#target').offset().top; と書けますが、それだけのためにjQueryを導入するのは勿体ない気がしてしまいます。そんなときは、 const targetTop = do…
server.js const express = require('express'); const app = express(); const http = require('http').Server(app); const io = require('socket.io')(http); const path = require('path'); app.use('/', express.static(path.join(__dirname, 'public'))…
以前、ピクセルデータを編集することでCanvasをグレースケールにしました。blog.kimizuka.org今回は CanvasRenderingContext2D.filter をつかってグレースケール化を試します。 const canvas = document.createElement('canvas'); const ctx = canvas.getCon…
mobile Safariのclcikイベントについて DEMO HTML 対策 その1 対策 その2 HTML DEMO mobile Safariのclcikイベントについて その昔、iOSのmobile Safariに置いて、widnow、document、bodyにはclickイベントが設定できない記憶があったのですが、最近はどうな…
canvasタグはcontextのputImageDataを使って、ピクセルデータを編集することができます。 const canvas = document.createElement('canvas'); const ctx = canvas.getContext('2d'); const video = document.createElement('video'); video.src = 'movie.mp4…
ビデオをミュートにすれば自動再生できることは知っていたので、 const video = document.createElement('video'); // ミュートに設定 video.setAttribute('muted', 'muted'); video.setAttribute('autoplay', 'autoplay'); video.setAttribute('loop', 'loo…
公式ドキュメントをざっと読むと、autoplayというパラメータも、loopというオプションも見つかるので、その2つを使って const player = new YT.Player('player', { width: '320', height: '180', videoId: '1g0ebPju_eE', playerVars: { autoplay: 1, playsi…
すべては公式ドキュメントに乗っています。webpack.js.orgresolve.extensionsに文字列の配列を渡せばOKです。webpack.js.org module.exports = { //... resolve: { extensions: ['.ts', '.js', '.json'] } }; TypeScriptファイル、JavaScriptファイル、JSON…
最近めっきり使うことの少なった jQuery 。 しかし、稀にjQuery導入済みのサイトの改修を依頼されることもあるので、使う機会がゼロになったわけではありません。 久しぶりに使うと、animateがすごく便利で、ついつい多用したくなります。animateを使えばペ…
blog.kimizuka.orgblog.kimizuka.orgこの2つを足してみました。 マイク入力がバッティングして動かないかな？と思ったんですが、動きました。 DEMO develop.kimizuka.org
blog.kimizuka.org以前、音源をFFT解析するデモを作ったときは、事前にホスティングしてあったmp3を解析しましたが、今回は、MediaDevices.getUserMedia をつかって、ブラウザからマイクにアクセスし、マイク入力をリアルタイムにFFTで解析してビジュアライ…
developer.mozilla.org ざっくり作ってみました。 マイク入力を許可すれば、喋ったことをテキストに起こしてくれます。MacとAndroid10のGoogle Chromeで動作を確認しました。 DEMO develop.kimizuka.org ソースコード JavaScript const recognition = new we…
DEMO develop.kimizuka.org iOS14.0.1の端末でSafariに表示された動画をダウンロードして写真アプリに表示するべく、色々調査してみました。 結論としては無理でした。 href属性 <a href="動画ファイルのパス" /> href属性が動画ファイルに設定してあるリンクを長押しし、「リンク先ファイル</a>…
WebAudioAPI の AnalyserNode を使って音源をFFTで解析してビジュアライズするデモを作りました。ChromeとSafariで動作確認しています。 DEMO develop.kimizuka.org JavaScript const canvas = document.getElementById('canvas'); const ctx = canvas.getCo…
WebVRの可能性を探るべく、OculusQuestのブラウザの性能を確認していこうと思います。 まずは、加速度センサ値の取得から。developer.mozilla.org developer.mozilla.orgdevicemotion と deviceorientation を確認してみました。 devicemotion develop.kimiz…
特に使いどころのない技なのですが、どうしてもディベロッパーツールに画像を出力したい場合。❶ 複数行の空文字を出力 ❷ paddingで幅をいい感じにする ❸ 背景画像を設定という手順で出力できます。 DEMO See the Pen Display images on the console by kimmy…
developer.mozilla.org別ドメインのiframeを貼り付けたとき、iframeと通信できたらいいのになと思う瞬間があります。 例えば、iframe内の高さを親に伝えて、iframe自体の高さを変更したいときなどです。そんなときに役に立つのが、window.postMesage。 これ…
この記事ではdelegateの説明は省略しますが、興味のある方は昔書いた記事を読んでいただけると幸いです。これまでは自作したdelegate関数を使って、deleateを設定してきました。 自作のdelegate function delegate(parent, eventName, selector, callback) {…
最強のviewportを探っていた際、昨今のviewportは環境によって出し分けられていることを知り、フロントでviewportを書き換えるスクリプトを書いてみました。blog.kimizuka.org本当はサーバで書き換えたものを返した方が良いことは百も承知なのですが、静的な…
現象 yarnしようとすると、 The `yarn’ command exists in these Node versions: v13.1.0 v14.7.0と表示される。 原因 nodeのバージョン管理ツール（僕の場合で言うとndenv）をつかいつつ、npm経由でyarnをインストールしていることが原因。 解決方法 ❶ npm…
結論 ことの発端 DEMO リメイクした箇所 動画のインライン再生対応 クリックで再生するように変更 結論 PC版Chromeで複数のYouTubePlayerは動作可能 Android版Chromeでも動いた！（Pixel3aで確認） iOSのSafariでの挙動がおかしいので要調査（iPhone SE、iPa…
最近、1年前の己のコードを見返す機会があったのですが、 this.items.some((item, i) => { }); という見慣れない記述が。itemsは配列だったので、Array.prototype.someを使ってます、 いつもだったら、forEachを使う場面なのですが、何故にsomeという見慣れ…
ウェブサイトにファイルをアップロードする際、ファイルをドラッグ＆ドロップするUIをよく見かけます。 そういったUIを実装しようとすると、HTML Drag and Drop APIを使いたくなることでしょう。developer.mozilla.orgしかし、実はinputタグでも簡単に作成す…
