Claude Code の Chrome 操作プラグインはCSRFトークンがあるページを保存できない
内容はぶっちゃけタイトルの通りです。 Claude Code の Chrome 操作プラグインでハマったのもメモっておきます。
やりたかったこと
「既存の画面をスタイル込みで単独のＨＴＭＬファイルとして保存する」です。 目的としてはそれをちょっといじって画面のモックを作りたいかったです。
ハマった点
Claude Code の Chrome 操作プラグインがあるのでそれを使ってHTML保存してよーと頼んだらエラー… え？HTML保存するだけでは…？と思ったら
どうやらCSRFトークンがある画面はセキュリティ的な観点から保存NGとのこと。
これは機能として備わっているためどうしようもないそうで…
一時的にコードをいじってトークン外してもらうパターンも考えたんですが複数画面あり毎回それやるのもな…と思い却下しました。
Playwright MCPで代替
Claude Code の Chrome 操作プラグインは自分が使っている Chrome を操作してくれるので認証もそのままで便利ということで重宝していたのですがこんな罠があるとは…ということで Playwright MCP を導入しました。
Playwright MCP では上記のような制限はなくさらっと保存してくれました。 Claude のプラグインよりちょっと操作が早かった気がします。
できた
これでHTMLが保存できるようになったので、最終的にほしいHTMLファイルを作成した後にスキルを作ってもらい、並列実行して改善してもらってやっとモックのHTMLができました…！
時間配分が以下みたいな感じなのはAIコーディングっぽいなと思いました()
- HTML保存：60％
- スキル作成：30％ ※初回のこういうHTMLが欲しいと試行錯誤する時間含む
- スキル改善：5%
- モック作成：5%
ちなみにこの文章はすべて手書きです。
Claude Code のスキルの育て方メモ
気づいたら3年ほど更新してなかったんですね。生きてますしまだエンジニアしています。
AIコーディングが主流になってから書くことがないなーと思っていたのですが Claude Code を触るようになってから Tips レベルならけっこうあるなと思うようになりました。
直近だとスキル（Skills）の改善をするのに以下をやったらというのをやったら10分くらいで精度がめっちゃ上がって驚いたのでまとめたいなと思ったり。
- スキルを使って同じ作業を並列で複数エージェントにやらす
- 試行錯誤した点をフィードバックさせてスキルを改善する
そもそもスキル自体は使いながら育てていくものというのは身をもって知っていたのですが 内容によっては並列で作業させてフィードバックループを高速で回すということもできる ということを知れたのがよかったです。
ただそこにたどり着くまでが長くて結局3時間くらいかかってしまったんですけどね… スキルできてたら5分くらいで全部終わったのでスキルって大事だなと思いました。
【Laravel】whereIn メソッドで生成されるIN句の中にサブクエリを書く
問題
以下のように複数のIDを指定して一括で更新したい場面がありました。
$divIds = Div::where('hoge_flg', true)->select('id')->get();
User::whereIn('div_id', $ids)->update(['hoge_flg' => true]);
ただ、上記のように書くと2回クエリが発行されるのであまり良くないなと思いました。
- Div モデルの ID を取得する
- User モデルのフラグを更新する
そこで以下のような SQL が生成されるような Eloquent がないか調べてみました。
update user_table set hoge_flg = true where id in ( select id from div_table where hoge_flg = true );
結論
whereIn メソッドの第2引数にクエリオブジェクトを渡せます…！
User::whereIn('div_id', Div::where('hoge_flg', true)->select('id'))->update(['hoge_flg' => true]);
ドキュメントにも思っきり書いてますね…
ドキュメント… やはりドキュメントはすべてを解決する…！
whereInRaw メソッドとか無い？とか謎の発想で検索してしまったので備忘録として書きました。
Laravel Sail 環境で Sail をインストールする前だとイメージのビルドができない
Sail インストール前だと Docker イメージのビルドがこける
これは開発環境の初期構築時のみに発生する問題です。
Laravel Sail 環境で Sail 本体がインストール前、つまり composer install 実行前だと以下のようなエラーが出て Docker イメージのビルドが失敗してしまいました。
=> ERROR [ 7/14] RUN groupadd --force -g sail 0.3s ------ > [ 7/14] RUN groupadd --force -g sail: #0 0.301 groupadd: invalid group ID 'sail' ------ failed to solve: executor failed running [/bin/sh -c groupadd --force -g $WWWGROUP sail]: exit code: 3
じゃあ先に composer install すれば良いのでは？
となるのですが、この場合ローカルで実行することになります。（コンテナが立ち上がってないので当たり前ですね）
すると、該当するバージョンの PHP をローカルにインストールする必要が発生します。
そもそも、そんな風にバージョンを気にしなくて良くするのがコンテナなのでは…？と思ったりしたので調べてみると割とすぐに対応できました。
対処：環境変数をセットしよう
エラーを見てみると$WWWGROUPという環境変数がセットされていないため groupadd コマンドが失敗してしまっているようです。
じゃあセットしましょう。ということで以下のコマンドで事前に実行しておけば問題なく通りました。
export WWWGROUP=${WWWGROUP:-$(id -g)}
あとはいつも通りコンテナを立ち上げてから中に入りcomposer installを実行することで Sail をインストールすることができました！
コマンドの出どころ
vendor/laravel/sail/bin/sail内に同じコマンドがあります。
sail コマンド実行時にセットしているのと同じ値を環境変数にセットしています。
yum で MySQL を最新ではない任意のマイナーバージョンへアップデートする
目的
アップデート作業時の最新は 5.7.41 だったのですが、これを 5.7.40 にしたいです。
$ mysql --version mysql Ver 14.14 Distrib 5.7.36, for Linux (x86_64) using EditLine wrapper
アップデートできる MySQL のバージョン確認
まず yum でアップデートできる最新バージョンの確認をしました。
$ yum search all --showduplicates mysql-community-server 読み込んだプラグイン:fastestmirror, presto, priorities Loading mirror speeds from cached hostfile * epel: d2lzkl7pfhq30w.cloudfront.net 649 packages excluded due to repository priority protections ======================================================= 一致: mysql-community-server ======================================================= mysql-community-server-5.7.9-1.el6.x86_64 : A very fast and reliable SQL database server mysql-community-server-5.7.10-1.el6.x86_64 : A very fast and reliable SQL database server <中略> mysql-community-server-5.7.39-1.el6.x86_64 : A very fast and reliable SQL database server mysql-community-server-5.7.40-1.el6.x86_64 : A very fast and reliable SQL database server mysql-community-server-5.7.41-1.el6.x86_64 : A very fast and reliable SQL database server
末尾に以下のようにあるので 5.7.41 が最新のようです。
数日前に更新されたばかりでした。ぐぬぬ…
mysql-community-server-5.7.41-1.el6.x86_64 : A very fast and reliable SQL database server
おそらくこのままバージョン指定をしないでアップデートするとこのバージョンがインストールされそうです。
そこで、ほしいバージョンの rpm をダウンロードして、それを使ってアップデートします。
ほしいバージョンをダウンロード
MySQL :: Download MySQL Community Server (Archived Versions)
上記のリンク先で以下を指定すると、対応したパッケージのダウンロードリンクが表示されます。
- 目当ての MySQL バージョン
- OS 種類
- OS のバージョン
ちなみに OS のバージョンやビット数は以下のコマンドで確認しました。
$ cat /etc/redhat-release CentOS release 6.10 (Final) $ arch x86_64
以下の「RPM Bundle」の「Download」からダウンロードします。
ローカルに落としてからサーバへアップしてもよかったのですが直接ダウンロードしたほうが早そうだったので curl コマンドでダウンロードしました。
curl -OL <ダウンロードのリンク>
※ wget コマンドでもいけますが入ってなかった
インストール
現在インストールされているバージョンの確認です。
あれ、なんかバージョン揃ってない…？
$ sudo yum list installed | grep "^mysql" mysql-community-client.x86_64 5.7.36-1.el6 @mysql57-community mysql-community-common.x86_64 5.7.36-1.el6 @mysql57-community mysql-community-libs.x86_64 5.7.36-1.el6 @mysql57-community mysql-community-libs-compat.x86_64 5.6.43-2.el6 @mysql56-community mysql-community-server.x86_64 5.7.36-1.el6 @mysql57-community
さきほど落としてきたファイルを指定してインストールします。
$ sudo yum localinstall mysql-community-server-5.7.40-1.el6.x86_64.rpm \ % mysql-community-client-5.7.40-1.el6.x86_64.rpm \ % mysql-community-common-5.7.40-1.el6.x86_64.rpm \ % mysql-community-devel-5.7.40-1.el6.x86_64.rpm \ % mysql-community-libs-5.7.40-1.el6.x86_64.rpm \ % mysql-community-libs-compat-5.7.40-1.el6.x86_64.rpm
インストール後のバージョン確認
$ sudo yum list installed | grep "^mysql" mysql-community-client.x86_64 5.7.40-1.el6 @/mysql-community-client-5.7.40-1.el6.x86_64 mysql-community-common.x86_64 5.7.40-1.el6 @/mysql-community-common-5.7.40-1.el6.x86_64 mysql-community-devel.x86_64 5.7.40-1.el6 @/mysql-community-devel-5.7.40-1.el6.x86_64 mysql-community-libs.x86_64 5.7.40-1.el6 @/mysql-community-libs-5.7.40-1.el6.x86_64 mysql-community-libs-compat.x86_64 5.7.40-1.el6 @/mysql-community-libs-compat-5.7.40-1.el6.x86_64 mysql-community-server.x86_64 5.7.40-1.el6 @/mysql-community-server-5.7.40-1.el6.x86_64
念の為 MySQL の再起動と upgrade コマンドを流しておきます。
$ sudo service mysqld restart $ sudo mysql_upgrade
アプリケーション側で動作確認して無事終了！
【MySQL】数字を含む文字列の数字だけでソートする SQL
MySQL で数字を含む文字列の数字部分だけでソートする SQL を書いたのでメモです。
やりたいこと
log_1, log_2 のような文字列 ＋ 数字の値を持つカラムで数字順にソートしたい場面がありました。
末尾の数字が1桁のみであればそのままソートできたと思いますが、log_10 など2桁の値もあり変換の必要がありました。
※数値が2桁の場合は log_1, log_10, log_2 のような順番になってしまうため
数字部分のみ抜き出す
下記2点を行えばカラムが数値になりソートができます。
- REPLACE関数で数字部分のみを抜き出し
- CAST関数で抜き出された数字を整数型に変換
SELECT CAST( str_name like 'log_%' THEN REPLACE(str_name, 'log_', '') -- 条件に一致する文字列を数値のみに置換する AS SIGNED -- 整数に変換 ) AS log_no FROM log_table WHERE ... -- 形式の異なるデータを除外する条件 OREDER BY log_no;
感想
変換してソートできるようにするというのは割と使う場面が多い書き方かなと思いました。
そういえばCASE文で条件ごとにランク付けしてソートするような SQL を書いたのでうっすらでも覚えているうちに記事にしておきたいです。
GitLab CI でアクセストークンを使いリポジトリをクローンする
GitLab CI でアクセストークンを使いリポジトリをクローンするように変更したので手順のメモです。 元は SSH を使っており鍵の設定が煩雑そうでしたが、アクセストークンの発行・設定は10分くらいでできると思います。
アクセストークンを発行する
メニューの「設定 > アクセストークン」からトークンを発行します。
クローンするだけなら「read_repository」の権限さえあれば大丈夫そうですが別の作業も行っているので「write_repository」も有効にしています。
トークンを発行すると画面上部にトークンが表示されるのでメモしておきます。
なお、トークンを発行すると同じ画面の下部に以下のように表示されます。
発行済のトークンの管理ができるようです。
アクセストークンを CI/CD の変数に設定する
トークンを設定ファイルに直書きするわけにはいかないので環境変数を設定するようなイメージです。
メニューの「設定 > CI/CD」の「変数」にトークンの変数を追加します。
ここで設定した変数は .gitlab-ci.yml の中で変数として使えます。
今回は変数GITLAB_ACCESS_TOKENにトークンを設定しました。※変数名はもちろん任意です
アクセストークンを使うように変更する
以下のように書けばアクセストークンを使ってリポジトリをクローンしてくれます。
git clone https://oauth2:$GITLAB_ACCESS_TOKEN@git.hoge.jp/fuga/repo.git working-copy
$GITLAB_ACCESS_TOKENは前の手順で設定した変数を参照しています。
