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

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

非常に目が悪くて2時間に1回ぐらい目薬を刺さないといけないんですが、うっかり忘れてしまう事が多く、2時間おきにPush通知を送ってくれるMacアプリを作ってみました。 サーバPushではなくローカルPushで実装しています。 JavaScript const { app, Notificat…

<video src="movie.mp4" controls playsinline></video> という感じで、poster属性を省略するとiOSでサムネイルが表示されないことに気づきました。 PC版のChrome、Safari、Firefox、Android版のChromeでは1フレーム目がサムネイルとして表示されます。 動画はYouTubeにホスティングしてつかっていたので、全然気…

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…

ElectronでBrowserWindowのインスタンスを生成する際にオプションとして、transparent: trueを渡すと背景が透明なアプリを作成できます。 const mainWindow = new BrowserWindow({ transparent: true }); Macだとこれで問題ないのですが、Windowsだと、 cons…

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

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

以前、VRモードに対応する形で作ったので、そのままVRモードでつくりますが、VRモードじゃなくても要点は変わりません。❶ Canvasを作る ❷ TextureにCanvasを設定する ❸ MaterialにTextureを設定する ❹ MeshにMaterialと適当なGeometryを設定する ❺ Meshのmat…

nuxt generateで静的書き出ししたウェブサイトをGitHub Pagesにアップすると、_nuxt以下のファイルが404になってしまいます。原因としてはこちらに書いてある通りなのですが、アンダースコア (_)、ピリオド (.)、またはハッシュ記号 (#) で始まる、またはテ…

偶然気づきました。 iOSとAndeoirdでfont-familyを指定せずにfont-weightを指定すると、差異が出てくることに。font-weightがnormalとboldの2択なところは一緒なのですが、iOSはfont-weight:600からがbold、Androidはfont-weight:700からがboldとなっていま…

DEMO develop.kimizuka.org position: fixedを掛けた要素の親に、 transform: translate3d(0, 0, 0); や、 filter: blur(0); を指定すると効かなくなり、position: relative指定時の位置を取るようになります。 色々試してみましたが、対策は無くて、transla…

すごく単純な話なのですが、 <form id="parent"> <form id="child"></form> </form> という感じで書くと がレンダリングされません。消えます。コンポーネント単位で開発していて、僕が作ったformが表示されずに、なんでだろうと思って調べると、他の人が作ったformと入れ子になっていることが原因ということに…

凄くレアなケースだと思うのですが、Nuxt.jsをつかってサイトを作っているとき、ある階層以下はVueを使わない普通のHTMLをホスティングしたいこともあると思います。例えば、 /policy/index.html にVueを使わずにつくったHTMLを置きたいときなどです。そんな…