tmegos blog

I love school idols / Web developer

GitHubをhttpsで操作するときにusernameすら聞いてくれなくなった

GitHubでは2021/08/13からgit操作でのIDとパスワードによる認証ができなくなりました https://github.blog/2020-12-15-token-authentication-requirements-for-git-operations/ Parsonal Access Token(PAT)を準備してfetchしてみると $ git fetch remote: …

Material UIでFont iconsを使うときに自動翻訳されないようにする

現象 Google Chromeなどで翻訳機能をONにしていると、Font iconsが翻訳されてアイコンが表示されない ハンバーガーメニューのアイコンが出るはずなのに「メ」になっている 開発者ツールで見ると、「menu」が「メニュー」と訳されてしまっている

Material UI v5でのスタイリングエンジンをemotionからstyled-componentsに切り替える

Material UI v5ではスタイリング用のライブラリとしてemotionが使われるようです next.material-ui.com Material UIとは別にstyled-componentsを利用している場合、スタイリング用のライブラリが複数存在することになります Material UIでもstyled-component…

VSCodeでhoverしたときのTypeScriptの型をすべて出す

tsconfig.jsonに"noErrorTruncation": trueを指定すればOK 以下のissueコメントのとおりです github.com

Reactの再レンダリングをWhy Did You RenderとReact Profilerを使って調べる

Reactでできたアプリケーションのパフォーマンスチューニングのために、再レンダリングを調査し、改善したときのメモです 方針 Why Did You Renderを使って、propsやstateが同じはずなのに再レンダリングが発生しているところを見つける 1で見つかった再レン…

macOS Big SurでメニューバーからSidecarを有効にできるようにする

システム環境設定から、Dockとメニューバーを選択します そして、ディスプレイの項目で 「メニューバーに表示」にチェックを入れる 「常に」を選択する の2つの項目を設定します すると、メニューバーにディスプレイのアイコンが追加され、ここからSidecarを…

NetlifyでNode.jsのバージョンを指定する

NODE_VERSION でバージョンを指定します 指定する場所は、 Site settings > Build & deploy > Environment > Environment variables です https://docs.netlify.com/configure-builds/environment-variables/#netlify-configuration-variables https://docs.…

iOS Chromeでresizeイベント後にwindow.innerWidth/innerHeightが異なる問題に対するワークアラウンド

現象 iOS端末を回転させてwindow sizeが変わって、resizeイベント後にwindow.innerWidth/innerHeightを参照しても、実際の値と異なる 例えば画面を横から縦に変えた場合、widthは合っていますが、heightは異なる値を示しています bugs.webkit.org 環境 iPadO…

Percyをsnapshotを取らずに使いたい場合

モチベーション PercyのSDKに存在しないフレームワークを使用している https://docs.percy.io/docs/sdks レスポンシブデザインをJavaScriptで頑張っている場合 PercyはDOMのスナップショットを取得して、それをもとにレスポンシブのテストを行っている。その…

Reactの仮想リストライブラリを調べたときのメモ

まとめ Slackのような仮想リストを実現するのは難しい いずれのライブラリも上方向へのスクロールは難しい 普通に使う分には、react-virtuosoはいいぞ

WebdriverIO

github.com 作業ログです

QA Wolf

github.com 作業ログです

TestCafe

github.com 作業ログ

Introduce playwright

github.com 作業ログです

手になじむE2E Testing Frameworkを探して

E2E

github.com Getting Startだけさわるとよさそうに感じるけど、実務で使っていくと要素が取れなかったり、データ取得を待てなかったり、CIで回すとランダムフェイルしたりと苦労します そこで実際のWebアプリに近いもので同じテストを書いてみて使い勝手を確…

GitLabでrenovateを使う

公式ドキュメントの通りにuser/renovate-runnerなど、renovateのrunnerを実行するだけのプロジェクトを作成して、renovateが必要なプロジェクトを参照してもらう方法がよさそうです gitlab.com 環境 gitlab.com GitLab Enterprise Edition 13.8.0-pre

Onsen UI x CordovaなアプリをIonic x Capacitorに移植したときにやったこと

以下のようなモチベーションで、自作アプリをIonicで書き換えてみることにしました Vue.jsでもTypeScriptが使いたい 2から3に上げたい Onsen UIの更新が止まっていそう…? ダークモードに対応させたい - before after Vue.js 2.6.11 3.0.0-0 UI Framework On…

AdMobを使っていてAppのプライバシーを入力するとき

トラッキングについては、Info.plistにNSUserTrackingUsageDescriptionが ある:トラッキングのデータタイプを指定する ない:トラッキングのデータタイプを指定しなくてもよい と考えてもよさそうです ドキュメントを読む限り、トラッキングについてユーザ…

Snowpackでfailed to resolve module specifierが出てライブラリが読み込まれない

新しくライブラリを追加した後、ライブラリを呼び出すと以下のエラーが発生 ブラウザのコンソール Uncaught TypeError: Failed to resolve module specifier "ライブラリ". Relative references must start with either "/", "./", or "../". Snowpackのコン…

未解決 iPadOSでinput type="file"が効かなくなるケースがある

iOS

※解決できていません ここでは再現手順や試したことをメモとして残しています 環境 iPadOS 13.5.1 現象 <input type="file"> というとても簡単なコードでも、ファイル選択のダイアログが出なくなるケースがある

半角記号にマッチする正規表現

[!-/:-@[-`{-~] ASCIIコードで、 ! 〜 /、: 〜 @、[ 〜 `、{ 〜 ~ にマッチするという意味 0-9などと同じ意味だけど、なんでこうなるんだっけと思ったのでメモ 参考 文字一覧 (ASCII) - instant tools ASCIIと半角カナ一覧 - instant tools

Material UIにてダイアログ内の入力欄がソフトウェアキーボードに隠れる問題を解決するための1つの方法

現象 Material UIでダイアログ内にautoFocusを有効にした入力欄がある場合、iOSで入力欄がソフトウェアキーボードに隠れる github.com 対策 ダイアログのtransitionを無効にすると、ソフトウェアキーボードが出たタイミングでスクロールされて入力欄が隠れな…

alpineにperfをインストールする

Node.jsのパフォーマンスを測定するために、perfをインストールしたときのメモ nodejs.org 環境 node:12.16.2-alpine 方法 /etc/apk/repositories に以下のリポジトリを追加 http://dl-cdn.alpinelinux.org/alpine/edge/main # elfutils-devの0.179-r0を入れ…

Web向けのプロジェクトに混入した@types/nodeをany化する

現象 Web向けのプロジェクトにNode.jsの型が混入し、setTimeoutなどの型が壊れてビルドエラーになる TS2322: Type 'Timeout' is not assignable to type 'number'. これはライブラリをインストールした際、そのライブラリの型定義ファイルに@types/nodeが含…

Chrome 81、Safari 13.1からExifのOrientationが考慮されるようになりましたね

みなさんの環境では、以下の画像はどのように見えますか? タイトルの通りですが、Chrome 81、Safari 13.1からjpegのExif、Orientationの値を考慮して画像が表示されるようになったようです See the Pen exif orientation by megos (@megos) on CodePen.

package.jsonの^(caret)にハマった話

背景 vue-cliを3系から4系にアップデートしたらビルドに失敗した ERROR Failed to compile with 1 errors Module build failed (from ./node_modules/eslint-loader/index.js): Error: Cannot find module 'eslint/lib/formatters/stylish' at Function.Modu…

IE11確認用のVMでオーディオを有効にする

IE11で音が鳴るかどうか確認しようと思ったらデフォルトではオーディオが有効になっていなかったのでメモ developer.microsoft.com

Siderがすべて解析エラーになってしまったので対応した

日時 2020/03/05 以降 現象 Siderの解析に失敗する ログを見ても特に何もエラーが出ていない 2020/03/08現在はエラーが出るようになってます 対策 sider.ymlにSiderがサポートしているtool以外が設定されていないか調べる もし設定されている場合は、その設…

iOS/iPadOS 13のSafariでページ全体や一部がレンダリングされない問題に対するワークアラウンド

背景 業務でWebアプリを開発しているのですが、iPadOS 13のSafariにて以下のような事象が発生しました ページ全体が真っ白になる ページの一部が欠ける 真っ白になったり、一部が欠けたりしたときにWebインスペクタを使うとDOM自体は存在している 画面をタッ…

Twitterでトロとパズルのデータ連携をできるようにする

トリッキー過ぎて偶然できたのでメモ アプリのバージョンはiOS版のv1.0.3です 今日現在、Twitterでデータ連携しようとして、Twitterにログインしても、 「Error: Failed to find request token in session」 と表示され、連携に失敗してしまうようです この…