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

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

html2canvasでmix-blend-modeを使っているページのスクリーンショットを撮る 📸

ことの発端 調査(Issueを発見) さらに調査(プルリクエストを発見) 検証 左(ブレンドモードなし) HTML 中央(ブレンドモードあり) HTML 右(ブレンドモードあり) HTML 画像化 左(ブレンドモードなし) 中央(ブレンドモードあり) 右(ブレンドモー…

next/linkのaタグをラップした際の挙動を改めて確認する 🔍

リンクを作成する際に使うnext/link。 改めて仕様を確認してみました。nextjs.org ❶ テキストのみを渡す ソースコード レンダリング結果 ❷ hrefなしのaタグをラップ ソースコード レンダリング結果 ❸ spanタグをラップ ソースコード レンダリング結果 ❹ aタ…

Next.jsにJestを導入してテストを書く 💯

Nuxt.jsではJestを使ったテストを作成していたのですが、Next.jsに導入したことがなかったので導入方法を調べました。 Next.jsのドキュメントにJestの導入方法がまとまっていたのでここを参考にしました。nextjs.org ライブラリの導入 yarn add -D jest @tes…

Yarn Workspacesを使って複数のExpoプロジェクトを管理する 📁

前回は、簡単に Yarn Workspacesの環境を構築しました。blog.kimizuka.org今回は、Yarn Workspacesを使って複数のExpoプロジェクトを管理してみようと思います。というのも、前回の構築方法で、複数のExpoプロジェクトを管理すると、 Error: Cannot resolve …

Yarn Workspacesを使って複数のプロジェクトを管理する 📁

ことの発端 Yarn Workspacesとは ディレクトリ構成 設定方法 ❶ rootディレクトリの作成 ❷ package.jsonの編集 ❸ workspace-aの作成 ❹ workspace-bの作成 ❺ workspace-a、workspace-bにパッケージ(今回はaxios)を追加する ❻ workspace-a/index.mjsを作成、w…

ExpoでiPad非対応のアプリを書き出す 📱

Xcodeのデバイス設定 iPad非対応のiOSアプリを書き出したい時、Xcodeのアプリの設定から General > Deployment Info > Device を iPhone(iPhone、iPad、Universalから選択)にすればOKだと思っていたのですが、ひさしぶりにXcodeを開いてみると、若干勝手が…

SourceTreeからコミットを試みるとHuskyのpre-commitでエラーになる(husky - pre-commit hook exited with code 127) 😱

ことの発端 Huskyでpre-commitが設定してあるプロジェクトに対し、SourceTreeからコミットを行った際、 .husky/pre-commit: line 4: yarn: command not found husky - pre-commit hook exited with code 127 (error) というエラーが出てコミットできませんで…

Web Share API を使って複数のファイルをシェアする際、順序が保証されない 📱

以前、iOS15でWeb Share APIを試しました。blog.kimizuka.orgその際は気づかなかったのですが、ファイルを複数シェアしようとすると順番が保証されないということに気づきました。 DEMO https://develop.kimizuka.org/web-share-api-multiple-files/Web Shar…

accent-colorを使って、チェックボックス(type="checkbox")、ラジオ(type="redio")、スライダー(type="range")の色を変更する ✅

CSS

accent-colorというCSSプロパティを使えば、input要素の色を変更できることしりました。developer.mozilla.orgInternet Explorerは非対応ですが、モダンブラウザの最新版であれば問題なく使えるようです。 検証 ソースコード input { accent-color: red; } …

Googleアナリティクス(gtag.js)実装時に、ユーザーの同意を得てからCookieを使用するようにする 📈

Cookieを使用する前に同意を取ることがスタンダードになりつつある昨今、Googleアナリティクスの対応を調べてみると、しっかりと対応してました。developers.google.com今回はgtag.jsを使いアナリティクスを設定されているサイトに対し、ユーザーが同意する…

Next.jsにPrettierを導入してコードをきれいに保つ ✨

これまで、Prettier導入済みのプロジェクトに参加したことはありましたが、自ら積極的に導入したことはありませんでした。prettier.ioしかし、最近、コーディングのルールを若干見直しまして、古い書き方と混ざるのが嫌なので、Prettierの力でコードを整える…

anyenv-updateを使ってnodenvを更新する 🔁

ことの発端 かつて導入した nodenv 。blog.kimizuka.org nodenv install -lでインストールできるバージョン一覧を表示した際、インストールしたいバージョンが表示されないので更新の方法を調べ始めました。 結果として、anyenv を使ってインストールしてお…