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…

結論 ことの発端 DEMO リメイクした箇所 動画のインライン再生対応 クリックで再生するように変更 結論 PC版Chromeで複数のYouTubePlayerは動作可能 Android版Chromeでも動いた！（Pixel3aで確認） iOSのSafariでの挙動がおかしいので要調査（iPhone SE、iPa…

BlenderでつくったモデルをVR上で確認したく、Three.jsをつかってWebVRコンテンツをつくってみました。 そこまでの手順を簡単にまとめておきます。 Blenderの基本操作を覚える 簡単なモデリングをする .glbファイルで書き出す Three.jsで読み込む ❶ Three.js…

DEMO See the Pen Custom CheckBox without JavaScript by kimmy (@kimmy) on CodePen. 解説 checkboxとlabalと隣接セレクタをうまく使えば、JavaScriptを一切書かずにチェックボックスをカスタムすることができます。 ポイントとしては、❶ チェックボックス…

iOS13のSafariでは簡単にページ全体のスクリーンショットをPDF化することができますが、iOSシミュレータからでも同様の手順でPDFを保存できます。 シミュレータにGUIとして搭載されているスクリーンショットボタンから撮影できると最高だったのですが、残念…

特殊な状況だと思うのですが、若干ハマったのでメモ。 結論 経緯 PHP TypeScript 問題点 完全ビルドのインポート方法 結論 ものすごく、ひさしぶりにNuxt.jsなしてVueを使ったのですが、 vue.runtime.esm.js:619 [Vue warn]: You are using the runtime-only…

blog.kimizuka.orgNuxt.jsでSVGを扱うときにコンポーネントのように扱えるようになる便利なローダー、nuxt-svg-loader ですが、オブジェクトが返ってくると都合が悪いケースもあります。 <template> <img src="~/assets/img/title.svg" alt="title" /> </template> というケースや、 <style> .title { background: url(~assets/img/title.s</style>…

最近、1年前の己のコードを見返す機会があったのですが、 this.items.some((item, i) => { }); という見慣れない記述が。itemsは配列だったので、Array.prototype.someを使ってます、 いつもだったら、forEachを使う場面なのですが、何故にsomeという見慣れ…

すべてはドキュメントに書いてある通りなので、僕がまとめるまでもないのですが、一応ことの顛末をまとめておきます。jestjs.io Jestでテストする Nuxt.jsのプロジェクトのテストにはJestを使ってます。例えば、 expect(wrapper.vm.width).toBe(1200); // 幅…

blog.kimizuka.orgテストの仕方を先に記事にしてしまいましたが、nuxt-svg-loaderとTypeScriptの共存のさせ方もまとめておきます。 nuxt-svg-loaderとは www.npmjs.comNuxt.jsでSVGを扱うときにコンポーネントのように扱えるようになる便利なローダーです。 …

Nuxt.jsでウェブアプリをつくっていたら、 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 . Baili…

これまで、Alexaスキルはいくつもつくってきたのですが、Googleアシスタント向けアプリはひとつしかつくったことがありませんでした。https://amzn.to/2Y3vvhBamzn.tohttps://assistant.google.com/services/a/uid/000000d6315c9755?hl=ja-JPassistant.googl…

すべて 公式のドキュメント に書いてあることなので、わざわざまとめるほどのことでもないのですが、せっかく調べたのでまとめておきます。ja.nuxtjs.org nuxt generateとは 動的なルーティングとは nuxt generateでは動的なルーティングは無視される nuxt g…

Sidecarとは support.apple.comiPadをMacの外部モニタをして使う技です。 macOS Catalina、iPadOS 13以上で使うことができますが、詳しい条件はこちらを参照のこと。 メニューバーにSidecarのアイコンが消えた 僕は外部ディスプレイを持っていないので、よく…

Nuxt.js は開発環境を整えるのがとても簡単で、セットアップが終われば、 yarn devnpm run devのいずれかで、すぐに開発サーバが立ち上がります。このときのURLは、ポート3000が空いていれば、 http://localhost:3000もしくは、 http://0.0.0.0:3000となりま…

天井に設置したEcho Flexから、子供の足音を流すスキルを作りました。上の階に子供部屋がある気分になれます。名付けて「夢の二世帯住宅」です。ゆくゆくは自宅で遊んでいる子供の足音を、実家の天井から流したいです。 pic.twitter.com/kQDcNxHQi1— 君塚史…

ウェブサイトにファイルをアップロードする際、ファイルをドラッグ＆ドロップするUIをよく見かけます。 そういったUIを実装しようとすると、HTML Drag and Drop APIを使いたくなることでしょう。developer.mozilla.orgしかし、実はinputタグでも簡単に作成す…

electron と mdns を同時に使おうと思ったところ、 App threw an error during load Error: The module '/Users/nanashi/develop/node_modules/mdns/build/Release/dns_sd_bindings.node' was compiled against a different Node.js version using NODE_MODU…

最近加速度センサの値に応じた音を再生する仕組みを作り続けてます。 窓を開けたときに歓喜の歌が流れる仕組みを作りました。名付けて「換気の歌」です。 pic.twitter.com/x8ku2DN2Ul— 君塚史高 (@ki_230) 2020年6月21日 加速度が「しきい値を超えた際のイベ…

ElectronでMacアプリをつくるとき、リリースの予定はないもののアプリアイコンをオリジナルのものにしたいなと思い、Macアプリのアイコンのつくりかたを色々調べました。 アイコンファイル（.icns）のつくりかた 本当に色々調べました。いろんなサイズの画像…