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

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

Safariにてbackground-colorの設定されたposition: fixedの子要素のbackface-visibilityがおかしい気がする 🤔

CSS

❶ position: fixedの要素を用意する ❷ ❶で用意した要素に背景色を設定する ❸ ❶で用意した要素の子要素を用意する ❹ ❸で用意した要素をY軸で180度回転させる(裏返す)という処理、つまりコードで書くと、 HTML <div> <p></p> </div> CSS div { position: fixed; background-col…

Error: Do not use <img>. Use Image from 'next/image' instead. See https://nextjs.org/docs/messages/no-img-element. @next/next/no-img-element を解決する 🖼

Next 11を使ってウェブサイトを構築し、 yarn buildで書き出そうと思ったのですが、 Error: Do not use . Use Image from 'next/image' instead. See https://nextjs.org/docs/messages/no-img-element. @next/next/no-img-element とエラーが出ました。指示…

Next.js (Page Router)+ styled-components でページ表示時に一瞬スタイルが当たってない状態が表示されるのを防ぐ 💻

Next.js + styled-componentsでウェブサイトを作り始めてから、ずーっと気になっていました。 ページ表示時に一瞬スタイルが当たってない状態が表示のが。が。ついに、その解決方法を見つけました。この、サーバサイドレンダリングを使えば解決します。style…

NetlifyにホスティングしたサイトにBasic認証を設定する 🔐

_headerで設定できます。blog.kimizuka.org 設定方法 ❶ Pro以上のプランにアップグレードするwww.netlify.com❷ _headersを作成する /* Basic-Auth: user:password※ ユーザー名: user パスワード: password の例❸ ルートディレクトリに_headerを置く以上です。…

face-apiを使って、写真から顔を探してその周りを切り抜くスクリプトを作りました 😀

こんな感じで、顔の周りを切り抜くスクリプトを書きました。github.com (function() { window.trimAndResize = trimAndResize; function trimAndResize(canvas, size) { return faceapi.nets.tinyFaceDetector.load('https://justadudewhohacks.github.io/fa…

Contentful + Nuxt.js + AmplifyでつくったサイトのAPIキーの隠蔽を試みる 🥷

先日、Contentful + Nuxt.jsでつくったサイトのAPIキーの隠蔽を試みましたが、今回はそのサイトをAmplifyを使って公開する際の.envの作成方法をまとめておきます。公式サイトに書いてある通りの方法です。docs.aws.amazon.com ❶ 環境変数を設定 Amplifyコン…

Contentful + Nuxt.jsでつくったサイトのAPIキーの隠蔽を試みる 🥷

※ Contentful と Nuxt.js の説明は省きます。www.contentful.com ja.nuxtjs.orgContentfulとNuxt.jsをつかってウェブサイトを使う場合、こちらの公式のドキュメントを参考にしていました。www.contentful.comが。Nuxt.jsの2.13からdotenvの扱いがより便利に…

MediaDevices.getUserMediaが使えるか確認するページをつくった 📱

2022年に終了と噂のAndroid Things。developer.android.comAndroid Thingsのおかげなのかはわからないですが、IoT系のプロダクトでOSにAndroidを採用しているものは、まあまあ多いように感じます。最近、OSがAndroidのIoT機器のブラウザで、MediaDevices.get…

iOS14からhref属性にbase64を指定しても画像が開けなくなった模様 📱

base64 👈 こちら、hrefにbase64を設定したaタグです。 <a href="data:image/png;base64,..." target="_blank">base64</a> このリンクをタップした時の挙動が、iOS13 → 画像が開く iOS14 → ブランクのページが開くとなっていることに気づきました。気づいた理由としては、前回の記事の続きで、iOS13でのダウンロード属性…

iOS13からdownload属性の挙動が変わった模様 📱

先日、10文字ホラージェネレーター たるものを制作させていただきました。10.ujiqn.com「ユーザーが入力した文字をCanvasにレンダリングして画像として書き出す」という非常にシンプルな仕様のサイトです。 生成した画像をローカルにダウンロードしてもらう…

Macで観覧時もウェブサイトのフォントにSegoeUIを使いたいという想い 📝

CSS

SegoeUIはマイクロソフトがよく使用するフォントであり、Windowsに搭載されていますが、Macには搭載されていません。 なので、ウェブサイトでSegoeUIを使い、絶対に表示させたい場合、ウェブフォントを導入することになります。まず、Googleフォントで探して…

.htaccessを使ってApacheにBasic認証をかける(さくらのレンタルサーバなど) 🔐

blog.kimizuka.org やら Netlify やら Firebase Hosting + Cloud Functions にBasic認証をかけることはあったのですが、単純なApacheにBasic認証を掛けたことがなかったので調べました。 ❶ Basic認証をかけるディレクトリのパスを調べる PHPが動く環境だった…

Nuxt.js(v15.0)からコンポーネントの自動インポートのルールが変わった模様 ✌️

久しぶりにNuxt.jsでプロジェクトを作成したところ、コンポーネントの自動インポート周りでエラーが起こりました。 結論 結論を先に書くと、Nuxt.js(v15.0)からnuxt/componentsがv2に切り替わったことと、僕がAtomic Designのルールにのっとり、components…

Module build failed (from ./node_modules/sass-loader/dist/cjs.js): TypeError: this.getOptions is not a function at Object.loader を解決する 🚨

久しぶりにNuxt.jsでプロジェクトを作成したところ、sass-loaderがエラーを吐きました。 Module build failed (from ./node_modules/sass-loader/dist/cjs.js): TypeError: this.getOptions is not a function at Object.loader Nuxt.js(2.15.7)とsass-loa…

Three.js + AR.js でWebARを作るときはバージョンを固定しておくべし 📷

久しぶりにWebARを実装する機会があり、自分の記事を読み返していたのですが、いつの間にか動かなくなっていました。。blog.kimizuka.org「何もしてないのに壊れた!」と思ったりしましたが、検証してみた結果、 <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/master/three.js"></script> <script src="https://cdn.rawgit.com/mrdoob/three.js/master/examples/js/loaders/GLTFLoader.js">