メンチカツ

ロースカツが好きです

【メモ】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”から送信された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 のバージョンなどで検索すると同様の問題がヒットしました。

discussions.apple.com

10.6.5 トライアル版はこの機能サポートされていないっぽいわよ的なことが書いてあってベストアンサーのようです。

そこで、最新のトライアル版 をダウンロードし、アプリケーションを上書きしてみました。

バージョン情報
v10.6.6になった

早速 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があるので

github.com

バージョンを上記対応版の 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 を再インストールすると直った。

apple.stackexchange.com

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`);
    }
}

この状態で再実施するとエラーの詳細が表示されて

GraphQLDocumentError

あっ!なるほどな!となれると思います。

【メモ】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

Symfonyphp symfony cc 叩けばだいたい解決したのと同じあれです👍