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

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

2021-07-01から1ヶ月間の記事一覧

Googleカレンダーの予定名を隠すスクリプトをつくりました 📅

会社勤めだったころは、同僚のGoogleカレンダーを確認できたので、空いてる時間を探せたり、探してもらえたりしたのですが、フリーランスでリモートで仕事を進めていると、そうはいかず、オンラインミーティングの日程を合わせるのがやや大変だったりします…

forwardRefを使って子コンポーネントにrefを渡す 👦

forwardRefは、以前、子コンポーネントのメソッドを叩こうとしたときに使ったことがあるのですが、今回は単純にrefを渡すだけの記事です。blog.kimizuka.orgただ、公式ドキュメントにもわかりやすい記事があるので、そちらを見た方が早いかもしれないです。j…

Next.jsで複数のassetPrefixを切り替えながら使う 💻

ことの発端 めずらしいケースだとは思うのですが、最近、ステージングと本番のURLルートのパスが違う環境でNext.jsを使う機会がありました。ざっくりいうと、 本番 https:/kimizuka.fm/production/ ステージング https:/kimizuka.fm/staging/ みたいな感じで…

ループで生成した要素にuseRefを使う 🔁

creareRefを使ってrefを要素分つくるのが良いみたいです。 import { createRef, useRef } from 'react'; const list = ['', '', '']; export default function Indexpage() { const listRefs = useRef([]); list.forEach((_, i) => { listRefs.current[i] = …

Safariでtext-decorationを一括指定すると表示されなくなる 👁

CSS

developer.mozilla.orgAndroid Chromeではアンダーラインが表示されるのに、iOSのSafariでは表示されないという事態に直面しまして、いろいろ調べてみると、text-decorationを一括指定すると、Safariで表示されなくなることに気づきました。iOSでもMacOSでも…

ページのスクロールとリサイズを管理するシンプルなカスタムフックをつくる 🖱

以前作ったカスタムフックが複雑すぎたのでシンプル版を作りました。blog.kimizuka.org useScroll.tsx import { useEffect, useState } from 'react'; export default function useScroll() { const [ scrollTop, setScrollTop ] = useState(0); const [ scr…

Express + Socket.ioを使って静的なHTMLをホスティングしつつ、サーバとブラウザ間をリアルタイムに通信する 📡

ものすごく久しぶりにExpress + Socket.ioでウェブサイトを作ったので、手順をメモしておきます。 ※ Node.js v14.15.0、yarn 1.22.5 で作成 必要なパッケージをインストール yarn add express socket.io app.jsを作成 const express = require('express'); c…

Three.jsに読み込んだglbファイルの影のみを他のオブジェクトに投影し、glbファイル自体は表示しない 🔦

こんな需要があるかはわかりませんが、前々回と前回の記事を併せれば実現できます。blog.kimizuka.org blog.kimizuka.orgつまり、透明なオブジェクトに対してcastShadowを有効にしてあげれば影だけが投影されるのです。 透明なのに影が映るのはおかしい気も…

Three.jsに読み込んだglbファイルの影を他のオブジェクトに投影する 🔦

Three.jsでライト(AmbientLight以外)を使うと、凹凸のあるオブジェクトには影が表示されます。 が。他のオブジェクトに対しては影が落ちません。他のオブジェクトに影を落とすためには、いろいろ設定が必要だったのでまとめておきます。 WebGLRenderer.sha…

Three.jsに読み込んだglbファイルのマテリアルを透明にする 👀

マテリアルの変更は以前調べた し、なんならその時も半透明にしたから大丈夫でしょう。blog.kimizuka.orgと思って、取り組んだのですが、ハマったのでメモを残しておきます。まず、glbファイルを読み込みます。前回の記事を参考にmaterialを透明にします。 …

clip-pathを使ってSVGをマスクとして使いつつ、マスクをアニメーションさせる 😷

CSS

DEMO 解説 clip-pathにSVGのID(正確にはSVG内の図形のID)を渡してあげればその図形をマスクにすることができます。developer.mozilla.orgまた、SVGもタグなのでCSSアニメーションで動かすことができます。 そうすると、合わせ技でマスクをアニメーションさ…

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でのダウンロード属性…