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

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

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

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

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

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

<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にキャストされて…

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

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

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

根本的には未解決なのだが、記録を残しておく。 実行環境 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 ? …

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

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…

Nuxt.jsを使ったプロジェクトでページ内スクロールを実装する際は、vue-scrolltoを使うと楽々です。 楽々なんですが、開発にTypeScriptを使っていると、導入までの手順が増えるので、今回はそこをまとめようと思います。 vue-scroll導入手順 ❶ nuxt.config.j…

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