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

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

Sublime Text 3でスニペットを登録・編集する 💻

Mac

Sublime Textにはスニペットを登録する機能があります。 Tool > Developer > New Snippet... を選択すると、 <snippet> <content></content> </snippet>

マイク入力を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…

ElectronでPush通知を送るMacアプリをつくる 👀

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

iOSでvideoタグのposter属性を省略するとサムネイルが表示されない 🎥

iOS

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

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…

Electronで背景透過のアプリをつくる 👀

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

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…

Three.jsにてCanvasを使ってTextureを動的に変更し、VRモードでも動くようにする 🖼

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

Nuxt.jsで作ったサイトをGitHub Pagesで公開する際の注意点(_nuxtディレクトリが404になる)👀

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

iOSとAndroidでシステムフォントのfont-weight:600の扱いが違う ✏️

CSS

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

親にtranslate3dやfilterを掛けるとposition: fixedが効かなくなる 😱

CSS

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

formタグを入れ子にすると、子のformが消える 😱

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

universalモードのNuxt.jsでnuxt generateで静的サイト書き出しをしつつ、staticなディレクトリ内の静的HTMLにもアクセスできるようにする 💻

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

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

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

CSSの力でスクロールバーを非表示にする 👀

CSS

blog.kimizuka.org本当はこの記事で書こうと思っていたことなのですが、-webkit-overflow-scrolling: touchが不要になっていたことに驚きすぎて、記事を分けることにしました。さて、overflow: scrollを実装するとき、「スクロールバーを消したい」という要…

Yarn + TypeScript + Nuxt.jsで ./index.vue?vue&type=script&lang=ts& in ./pages/index.vue というエラーが起こらなくなった 🤔

解決したので記録を残しておく。 困っていたこと TypeScriptを有効にして、あとはデフォルトの設定で作成したNuxtプロジェクトで、 ERROR Failed to compile with 1 errors This relative module was not found: ./index.vue?vue&type=script&lang=ts& in ./…

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

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

いつの間にか-webkit-overflow-scrolling: touchが不要になっていることに気づく 📱

CSS

overflow: scrollと一緒に使うことで、慣性スクロールを有効にしてくれることでお馴染みの-webkit-overflow-scrolling: touchですが、いつのまにか不必要になっていることに気づきました。 iOS13.7のSafariとAndroid10のChromeで確認しましたが、overflow: s…

イベントが振ってあるDOMをelに指定してVueのインスタンスにするとイベントは引き継がれず消える 💻

Vue

普通はこんなことしないと思うのですが、 <button id="app">{{ name }}</button> document.getElementById('app').addEventListener('click', () => { console.log('click!'); }); const vue = new Vue({ el: '#app', data: { name: 'vue' } }); という感じで、イベントを振ったDOMを引…

Vueでカスタムデータ属性(data属性)に'false'を渡したい 💻

Vue

<div :data-is-loading="isLoading" id="app"></div> new Vue({ el: '#app', data() { return { isLoading: false }; } }) と書くと、 <div data-is-loading="false" id="app"></div> ではなく、 <div id="app"></div> というHTMLが出力されます。 なぜならば、属性にfalseを渡すとその属性を描画しないという挙動だからです。 ちなみに、trueを渡した際はStringにキャストされて…

servezをつかってlocalhostを簡単にhttpsにする 💻

最近、WebVRの開発をしているのですが、httpsが必須かつ、確認にはOculus Questを使うので、localhostをhttpsにして、Questをそこに繋がないと面倒すぎてやってられません。 (最初はいちいちサーバにアップして確認していた)自分で証明書を発行したり、mkc…

Netlify DNSで設定したDNSレコード(This is a system record that cannot be managed directly)を削除するまでの道のり 🛣

docs.netlify.com今回は登録手順は記載しませんが、Netlifyにホスティングしたページにカスタムドメインを設定するのは楽々です。が。設定したカスタムドメインを削除するのがやたら大変だったので、手順をまとめておきます。 ことの発端 Netlify DNSに登録…

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

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

Yarn + TypeScript + Nuxt.jsで ./index.vue?vue&type=script&lang=ts& in ./pages/index.vue というエラーが起こる 😱

根本的には未解決なのだが、記録を残しておく。 実行環境 OS: macOS Catallina(10.15.6) node: 12.10.0 yarn: 1.22.5 nuxt: 2.14.0 実行手順 yarn create nuxt-app app? Project name: app ? Programming language: TypeScript ? Package manager: Yarn ? …

macOS Catalina(10.15.6)でRailsを起動しようとすると `const_missing': library not found for class Digest::SHA1 -- digest/sha1 (LoadError) となってしまう 😱

Mac

ruby 2.2.2、Rails 4.2.3で開発しているプロジェクトがあるのだが、久しぶりに立ち上げようとしたところ、 `const_missing': library not found for class Digest::SHA1 -- digest/sha1 (LoadError) となってしまった。「さわってないのに壊れた!」と思った…

続・Nuxt.jsで、This is likely caused by incorrect HTML markup, for example nesting block-level elements inside <p>, or missing <tbody>. というエラーが出たので調査する 🔍

blog.kimizuka.orgまたもや、 The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside , or missing . Bailing hydration…