【メモ】resizeイベントで変更されたウィンドウの幅を取得するhooks
ウィンドウリサイズイベントで変更されたウィンドウの幅を取得するhooksのメモ
リサイズしたとき無駄に発火しないように setTimeout()
を入れています。
// useWindowWidth.ts import { useCallback, useLayoutEffect, useState } from "react"; /** * resizeイベントで変更されたウィンドウの幅を取得する * @param {number} ms - イベント発火後のdelay * @returns {number} window width */ export const useWindowWidth = (ms: number = 200): number => { const [width, setWidth] = useState(0); const updateWidth = useCallback(() => { const timeout = setTimeout(() => { setWidth(window.innerWidth); }, ms); return () => clearTimeout(timeout); }, [ms, setWidth]); useLayoutEffect(() => { window.addEventListener("resize", updateWidth); updateWidth(); return () => window.removeEventListener("resize", updateWidth); }, [updateWidth]); return width; };
// hooksつかいかた import { useEffect } from "react"; const windowWidth = useWindowWidth(); // ウィンドウリサイズのたびにconsole.logが表示される useEffect(() => console.log(windowWidth), [windowWidth]);
【Final Cut Pro】アプリケーション“iMovie”から送信されたXML書類を読み込めませんでした。
iMovie から Final Cut Pro への乗り換えは簡単。
iMovie メニュー 「ファイル」>「ムービーをFinal Cut Proに送信」
で上記のエラー
「アプリケーション“iMovie”から送信されたXML書類を読み込めませんでした。DTDバージョンが認識されません。」
が出てしまう😇
iMovie と Final Cut Pro の CurrentVersion.plist
を見てみると、以下のようになっている。
<!-- iMovie --> <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd"> <plist version="1.0"> <dict> <key>catalogVersion</key> <string>1050; 10.3.6 (406338)</string> <key>catalogVersionBase</key> <string>1020; 10.3.5 (405627)</string> </dict> </plist> <!-- Final Cut Pro --> <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd"> <plist version="1.0"> <dict> <key>catalogVersion</key> <string>1020; 10.6.5 (405627)</string> <key>catalogVersionBase</key> <string>1020; 10.6.5 (405627)</string> </dict> </plist>
これもうわかんねぇな😇
Final Cut Pro のバージョンなどで検索すると同様の問題がヒットしました。
10.6.5 トライアル版はこの機能サポートされていないっぽいわよ的なことが書いてあってベストアンサーのようです。
そこで、最新のトライアル版 をダウンロードし、アプリケーションを上書きしてみました。
早速 iMovie を起動し 「ファイル」>「ムービーをFinal Cut Proに送信」
を試したところ
送信できたー😆
無事エラーが解消されました。
手軽さが魅力で iMovie から始めてみた動画制作ですが、結構すぐにつらみがやってきたので
最初から Final Cut Pro でスタートしておけばよかったなーという感想です。
ファイルも iMovie と二重管理みたくなっちゃったし。もう少しシームレスな感じを期待してたのじゃが。。
まーとりあえずひとまずは解決してよかった。
ではまたー🫶
Rust@VSCode で rust-analyzer が proc macro `xxx` not expanded / unsupported ABI エラー
proc macro "xxx" not expanded...
という構文エラーになってしまったら
ここに対応するissueがあるので
バージョンを上記対応版の 0.3.1277
に下げると解消します。
完全なる一時凌ぎですが、エディタが赤いとソワソワしてしまう方は是非👍
【メモ】failed to solve with frontend dockerfile.v0: failed to create LLB definition: unexpected status code [manifests latest]: 400 Bad Request
ECRのイメージをビルドするときに以下のエラーになりました。
=> [internal] load build definition from Dockerfile.lambda 0.0s => => transferring dockerfile: 44B 0.0s => [internal] load .dockerignore 0.0s => => transferring context: 2B 0.0s => CANCELED [internal] load metadata for docker.io/library/golang:1.18.5-alpin 1.2s => ERROR [internal] load metadata for public.ecr.aws/lambda/go:latest 0.7s ------ > [internal] load metadata for public.ecr.aws/lambda/go:latest: ------ failed to solve with frontend dockerfile.v0: failed to create LLB definition: unexpected status code [manifests latest]: 400 Bad Request
このエラーはDockerを再起動したら直りました。 Dockerデスクトップを使っている人だったら、アプリをRestartするだけで解決すると思います。
Xcode アップデート後の xcodebuild エラー
Xcodeをアップデートしたら、ターミナル起動時にエラーが出るようになってしまった。
xcodebuild[2933:15402] Requested but did not find extension point with identifier Xcode.IDEKit.ExtensionSentinelHostApplications for extension Xcode.DebuggerFoundation.AppExtensionHosts.watchOS of plug-in com.apple.dt.IDEWatchSupportCore xcodebuild[2933:15402] Requested but did not find extension point with identifier Xcode.IDEKit.ExtensionPointIdentifierToBundleIdentifier for extension Xcode.DebuggerFoundation.AppExtensionToBundleIdentifierMap.watchOS of plug-in com.apple.dt.IDEWatchSupportCore
この記事を参考に、Xcode CLI を再インストールすると直った。
sudo rm -rf /Library/Developer/CommandLineTools # install latest xcode-select --install
xcode-select --install、何かの折に、何度も何度もやってる気がする。
【メモ】graphql-codegenの「AggregateError: GraphQL Document Validation failed」を解決する
タイトルの通りなんだけど
graphql-codegen
のValidationエラーの原因がいつもよくわからない
$ yarn graphql-codegen ... ❯ Generate outputs ❯ Generate /hoge/fuga/frontend/src/pages/User/graphql.ts ✔ Load GraphQL schemas ✔ Load GraphQL documents ✖ Generate → GraphQL Document Validation failed with 1 errors Found 1 error ✖ /hoge/fuga/frontend/src/pages/User/graphql.ts AggregateError: GraphQL Document Validation failed with 1 errors at Object.checkValidationErrors (/hoge/fuga/frontend/node_modules/@graphql-codegen/core/node_modules/@graphql-tools/utils/index.js:962:15) ...
いやーいくらなんでも抽象的すぎん?
というわけでエラーの詳細を知るために、 @graphql-tools/utils/index.js:962
の手前に console.table
を仕込む
// @graphql-tools/utils/index.js:944目あたり function checkValidationErrors(loadDocumentErrors) { if (loadDocumentErrors.length > 0) { const errors = []; for (const loadDocumentError of loadDocumentErrors) { for (const graphQLError of loadDocumentError.errors) { const error = new Error(); error.name = 'GraphQLDocumentError'; error.message = `${error.name}: ${graphQLError.message}`; error.stack = error.message; if (graphQLError.locations) { for (const location of graphQLError.locations) { error.stack += `\n at ${loadDocumentError.filePath}:${location.line}:${location.column}`; } } console.table(error) // コレを追加 errors.push(error); } } throw new exports.AggregateError(errors, `GraphQL Document Validation failed with ${loadDocumentErrors.length} errors`); } }
この状態で再実施するとエラーの詳細が表示されて
あっ!なるほどな!となれると思います。
【メモ】Laravel で思った動きをしないときに唱えるおまじない
Laravel で、APIを追加したのにアクセスできないんだよな
php artisan route:list
にも出てこないんだよな
ってことありませんか?
わたしは割とかなり良くある。
そういうときは雑に以下のコマンドを叩くとだいたい解決します。
rm bootstrap/cache/* && php artisan cache:clear && php artisan config:clear && php artisan config:cache && php artisan route:clear && php artisan view:clear && php artisan clear-compiled && php artisan optimize && composer dump-autoload
Symfony で php symfony cc
叩けばだいたい解決したのと同じあれです👍