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…