俺のコード type Job = Record<'area' | 'act' | 'type' | 'num' | 'days' | 'limit', string>; type Filter = Record<'area' | 'act' | 'type', string[]>; const filter:Filter = { area: [], act: [], type: [] }; (async () => { const resp = await fet…

こんなエラーが出た。 Blocked aria-hidden on an element because its descendant retained focus. The focus must not be hidden from assistive technology users. Avoid using aria-hidden on a focused element or its ancestor. Consider using the in…

visgl.github.io Pinを使ってラップするとうまい具合に中のピンも寄ってくれるので、GoogleマップのPinの要素は全部透明化してやればOK <AdvancedMarker position={{ lat: point.lat, lng: point.lng }} ref={ref} onClick={handleClick}> <Pin borderColor="transparent" background="transparent" glyphColor="transparent"> <div className="landmark"> </div></pin></advancedmarker>

環境 Laravel11 + Breeze + Inertia.js + React でユーザーログイン周りのScaffoldを作った。 操作は全てReactからのAPIコール AuthはStatefulAPIを使って、Sanctumで行う。Routeにミドルウェアを Route::middleware('auth:sanctum')って感じ。 ログイン後に…

たとえばこんなコードで user(); if (in_array(HasApiTokens::class, class_uses($sanctum_user))){ // @phpcs:ignore $sanctum_user->tokens()->delete(); } Undefined method 'tokens'.intelephense(P1013) とか出る。ChatGPTに聞いて // @phpcs:ignore と…

Laravel+Inertia.js＋Reactの構成で作ってくれたScaffoldをそのまま使おうとしたけど、どうも import { useForm } from '@inertiajs/react'; の useFormで作った const { get, post, patch, delete } = useForm({ name: user.name, email: user.email }); の…

タイトルだけだとわけわからんね。 課題 管理画面と一般画面を分けたくて、別のReactにしている。こういう時に管理画面のJavaScriptも見せたくないので、2つのReactを1つのLaravelに同居させるようにしている。 Laravel のInertia.js+Reactって、Devモードだ…

前にも書いた記事LaravelでEthnaのフォームフィルターみたいなやつ - tohokuaikiのチラシの裏 が2024年ではcomposerでインストールできなくなっていた。Laravelのバージョンとかそんな感じ。 で、調べたらGitHub - elegantweb/sanitizer: Sanitization libra…

Inertia.js使ってReactで管理画面の開発してると、「CSRFとかXSSとかどないやねん？」って感じになる。Sanctumを使ったSPA認証ってのがあるみたいだ。 laravel.com 2つ認証にたいするアプローチがあって、 APIトークンを付与してそのトークンのやり取りで認…

Laravelのセットアップ CoreUI管理画面テンプレートのデータをダウンロードしてZIPを展開 必要なライブラリをインストール Laravel側のファイルの書き換え resources/js/coreui のコンポーネントファイルを.tsx拡張子にする レイアウトの resources/js/Layou…

やりたいこと 管理者を作って、管理画面は別レイアウトのダッシュボードにて作業できること。 Reactで開発できる CoreUIを使ってデザインできる ライブラリの選定 管理画面テンプレート／UI MoonShineはReact使うのにエントリポイントを作りにくかったり、レ…

Laravelのインストールまでは終わっているものとして。というか、dockerのbitnami/laravel:latestを使ってDocker composeでこんな感じで作ってる。 認証周り（ユーザー作成とか） laravel.com Laravel公式のスターターキットには、Laravel BreezeとLaravel J…

環境変数の読み込みってどーなんってんのよ？ Laravelで環境変数を使う時、DBの設定とかAPP_NAMEとか、.envに書いたのをconfig経由で使います。 一方、LaravelのViteでコンパイルしたTypeScriptなんかも.envに書いたのを環境変数として使います。 で、「問題…

Laravel11はもうインストールされているものとする。Dockerならbitnami/laravel:11.1.1あたりを持ってくるとすぐできる。 ReactはTypeScriptです。 Tailwindcssの導入 npmでインストール とりあえず、本体と使いそうなライブラリ2つ。（ライブラリはいらんか…

長年PHPと付き合ってきて動作モードが3つあることは知ってたが、なんとなくだったので自分用にまとめてみた。以下のサンプルでのOSはCentOS系。 モジュール版 一番簡単な方法。Apacheのconfで LoadModule php7_module modules/libphp7.so として読み込む方法…

以前Confluenceのプラグインを作ってたのはもう13年も前だったのか…ということで、やり直し。 Atlassianのドキュメント Atlassianのドキュメントは相変わらずあっちゃこっちゃ飛んでいてなかなかにまとまりが無い。とりあえずこのあたりを参考にした。 - Con…

slot…Vue2をやってた時に、なんかわかりにくいなぁ…とずっと思ってました。 で、Reactやってから見てみたら「あ、これComponentのchildrenなんだわ」ってわかってスゲー腑に落ちた。 ただ、Vueの場合はそのchildrenの要素に名前を付けられるのが便利といえば…

右下のこの部分を確かめよう。 ホンマ、設定変えろとかレジストリいじれとか再起動しろとかあったけどこの部分だけで助かったわ。

Reactでページ送りを実装するときに、とりあえず https://www.npmjs.com/ で「react paginate」とかで検索したりgoogle:react paginateでググったりすると、react-paginateってのが出てくるんですよ。 www.npmjs.com これについて解説しているQiitaの記事も…

前提 Script Loaderとしてこのパッケージ使っています。 www.npmjs.com この現象に困っちゃって、このパッケージ使ってるかな？とか思って生でローディングする方法にしようかと思ってしまった。直ってよかった。 症状 google.maps.marker.AdvancedMarkerEle…

ま、いろいろとやってこんな感じ。 対象となるSpreadSheetのデータ 都道府県別の小学校数の推移 年 北海道 青森県 岩手県 宮城県 1975年 1820 545 610 458 1976年 1898 542 602 456 1977年 1881 531 598 460 1978年 1866 531 591 462 1979年 1854 531 579 46…

ん～、もうメールほとんど使ってないしなぁという気もありつつ、ふとPostfix見たらTLSの設定が自動的に？導入されてたので、よしじゃあってんで重い腰を上げたメモ。 環境 $ cat /etc/debian_version 11.9 $ dpkg -l|grep postfix ii postfix 3.5.24-0+deb11…

もうね、なんか大変だったので記事にとっておく。 参考にしたのは、Laravelの公式の方じゃなくてInertiajsの方 Server-side setup - Inertia.js Client-side setup - Inertia.js バージョンとか環境周りとか このあたり重要。鳥獣用。OSはWindows11です。 バ…

緯度経度のデータ形式には、2つ壁があって、座標系と表示形式。 座標系 日本測地系と世界測地系がある。３ 日本測地系と世界測地系 | 国土地理院からの引用。 我が国では、改正測量法の施行前は、明治時代に採用したベッセル楕円体を使用していました。明治…

やりたいこと 複数のテキストファイルの中の文字列を別の文字列に一括置換したい。 俺たちは雰囲気でsedを使っている。 sedを20年使ってても（年に2～3回ペースなこともあって）使うのが難しい。何が難しいって、オプションとかフラグとか正規表現とか。その…

もう、なんどもググっているのでタトゥーにしてもいいんだけど、痛いのでここにメモしておく。 秘密鍵とかCSRとか openssl genrsa -out servername.key 2048 openssl genrsa -aes256 -out servername.key 2048 openssl rsa -in servername.key -out serverna…

継ぎ足ししていく予定。 Propsで渡す プロパティと子要素が必須でないなら、?を付けておく。 export const Text = (props:{content?:string, children?:React.ReactNode}) :JSX.Element => { return <div><span>{props.content}</span><p>{props.children}</p></div> } 親コンポーネントでは…

こういうの書かないと忘れてしまう。49歳なので。 基本形（1つのファイルに1つExport） export const Foo = () => { return <div className="foo">Foo</div> } import FooBar from 'components/export' function App(){ return <FooBar/> } export default しているので、受ける側は好きな名前でi</foobar/>…

EditorのキーバインドをEmacsに VSCode使ってて、キーバインドはemacsにしててそこからxyzzy風の味付けにしてkill ringも使えるしほぼほぼ文句なしなんだけど。 github.com ファイラはEmacsのアレ Emacsからシームレスに使えるファイラdiredを使いたくて、vs…

async修飾子とawait演算子の使い方 たぶん、Qiitaなんかでは2500くらい記事がありそうなこのネタ。よくわかってなかったので自分用にまとめておく。 async修飾子とawait演算子 この2つ、よくasync/awaitみたいに紹介されてるけど並列で並べるようなものじゃ…