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

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

html2canvasがwriting-mode: vertical-rlに対応しきれていないのでCanvasで縦書きを実現する 📝

writing-mode: vertical-rlを使えばCSSで縦書きを簡単に実現できます。developer.mozilla.org DEMO 普段はこれでまったく問題ないのですが、html2canvasを使ってHTMLを画像書き出ししようとすると、writing-mode: vertical-rlがうまく評価されません。 検証…

Reactでtextareaの高さをテキスト量に応じて自動で調整する 📝

結論 自作編 基本的な方針 JavaScript(抜粋) DEMO 応用的な方針 JavaScript(抜粋) DEMO 他人のふんどし編 結論 react-textarea-autosize に任せる。github.com 自作編 基本的な方針 textareaのvalueの変更を検知する textareaのheightをautoにする texta…

VerselにデプロイしたNext.js製のサイトのサイトマップをデプロイの度に自動生成する 🗺

❶ Next.jsにnext-sitemapを導入し、サイトマップを生成する準備をする next-sitemapの導入 next-sitemap.config.jsの作成 package.jsonの編集 ❷ デプロイの度にサイトマップを自動生成するようにVercelのビルド設定を編集する ❸ Google Search Consoleにサイ…

Charlesを使ってhttpsのサイトのリソースをローカルファイルに差し替える 🫖

Mac

昔はよく使っていたのですが、5年ぶりぐらいにCharlesを起動してみたところ、すっかり使い方を忘れていたので、ドキュメントを読みなおしました。www.charlesproxy.com Charlesとは 通信のモニタリングなどを行うソフトです。 いろんな使い道があるのですが…

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 を使ってインストールしてお…

Expoで実装したアプリでデータを永続化する(react-native-async-storage編) 📱

blog.kimizuka.org前回 はiOSアプリのみ使える方法を検証しましたが、今回はAndroidアプリやウェブアプリにも対応できる方法を検証します。実現方法をざっくり調べると、かつては AsyncStorage を使った方法が主流だったようです。reactnative.devしかし、現…

React Nativeで実装したiOSアプリでデータを永続化する(UserDefaults編) 📱

ことの発端 ざっくりとした使い方 インポート 値の取得 値の保存 実装例 注意事項 追記 ことの発端 かつて、SwiftでiOSアプリを制作していた際、簡単なデータを永続化するときは UserDefaults を使っていました。developer.apple.comいまはExpoでiOSアプリを…

Cloud Firestoreに保存された値が変更された際にExpoで作ったアプリに通知を送信する 📛

Cloud Firestore トリガー を使って、ドキュメントに変更があった際にプッシュ通知を送ってみました。firebase.google.com 前提 Cloud Firestoreにデバイストークンを保存する(tokensコレクションにデバイスIDをドキュメントIDにして保存する) Cloud Fires…

Expoアプリのプッシュ通知用デバイストークンをCloud Firestoreに登録する 🔥

関連記事 Expoでつくったアプリにローカルサーバからプッシュ通知を送る blog.kimizuka.org Expoでつくったアプリにサーバからプッシュ通知を送る blog.kimizuka.orgこれまで、ローカルサーバからプッシュ通知送信、サーバからプッシュ通知送信を試しまし…

Expoでアプリがフォアグラウンドになったときの処理を書く 📱

ことの発端 Expoで作ったアプリがフォアグラウンドになったタイミング、すなわちiOSアプリでいうところのviewWillEnterForegroundをどう書くのか、React Nativeのドキュメントで調べたところ、 import { useRef, useState, useEffect } from 'react'; import…

Cloud Functionsを定期的に実行する ⏰

昔はCloud Functionsに加え、Cloud Pub/Sub、Cloud Schedulerで設定が必要だったようですが、いまはCloud Functionsで設定すれば、自動的にCloud Pub/SubのトピックとCloud Schedulerのジョブが作成されます。便利な時代になりましたね。firebase.google.com…

Expo(44.0.0) + Firebase(9.6.8)でアプリをつくった際に「Can't find variable:IDBindex」と表示される際の対策 🔥

結論 firebase 9.6.7を使ったら解決した。(expoは44.0.0) ことの発端 こちらのドキュメントをみながら、ExpoアプリにFirebaseを導入しようとしたのですが、iOSでもAndroidでもinitializeAppのタイミングで「Can't find variable:IDBindex」とエラーが表示…

ミドルウェアを使ってVercelにデプロイしたNext.js製のウェブサイトにBasic認証を設定する 🔐

Next.js 12から導入されたミドルウェアを使って、Basic認証を設定するサンプルを見つけたので試してみました。https://nextjs.org/docs/middlewarenextjs.orggithub.com _middleware.ts import { NextRequest, NextResponse } from 'next/server'; const USE…

Xcodeインストール済みのMacでExpoアプリをiOSシミュレーターでプレビューできない場合に確認すべきこと(✔ Xcode needs to be installed (don't worry, you won't have to use it), would you like to continue to the App Store?)📱

ことの発端 expo startで起動したExpoアプリは、ターミナルでiを押下することでiOSシミュレーターでプレビューすることができます。 MacにXcodeとCommand Line Toolsがインストールされていることが条件となるのですが、両方インストールしても、 ✔ Xcode ne…

Expoでつくったアプリにサーバからプッシュ通知を送ってバッジをつける 📛

前回つくった、Expoアプリにプッシュ通知を送るローカルサーバ。blog.kimizuka.orgすんなりうまくいったので、これをそのままHerokuやら、Lambdaやら、Cloud Functionsやらにデプロイすれば、問題なくプッシュ通知を遅れると思い込んでいましたが、冷静に考…

コントローラーでオブジェクトを掴むことができるWebVRをつくる ✊

まだ片手にしか対応できてませんが、コントローラーでオブジェクトを掴むことができるWebVRをつくりました。 cannon.jsで物理演算しているので、掴んだオブジェクトを放り投げることもできます。 DEMO kimizuka.org 実装方針 マウスで3Dオブジェクトを掴んで…

Expoでつくったアプリにローカルサーバからプッシュ通知を送ってバッジをつける(Expoの導入・プッシュ通知を受信するアプリの作成・プッシュ通知を送信するローカルサーバの作成) 📛

結論 ことの発端 Expoの調査 Expoの導入 ❶ アカウントの作成 ❷ アプリの準備 ❸ expo-cliの導入 ❹ expo-cliにログイン プッシュ通知を受信するアプリの作成 ❶ プロジェクトの作成 ❷ expo-notificationsの導入 ❸ app.jsonを編集 ❹ コードを書く App.tsx プッシ…

床を傾けて3Dのボールを転がす(Cannon.js + Three.js + React.js) 🏐

Cannon.js + Three.js + React.jsで、 マウス座標に応じて床を傾ける 四方を見えない壁で囲う という空間を作って、そのな簡易3Dの球を配置してみました。 DEMO kimizuka.org ソースコード(抜粋) function handleMouseMove(evt) { const deg = 12; const x…

Three.js(r136)から THREE.GammaEncoding が undefined になっていることに気づく 😱

Three.js(r127)で開発していたサイトで、Three.jsのバージョンをr136まで上げてみたところ、glTFファイルの色味が若干薄暗くなりました。 r127 r136 直感的に、 renderer.outputEncoding = THREE.GammaEncoding; の部分が効いていないのだと思い、調査して…