雑記
21 件
作りながら書く雑記。技術の話も、サッカーも音楽も趣味も詰めこんでいく。
AI に画像で案を出させて、口で選ぶ：ポートフォリオのデザイン決め
ポートフォリオのデザインを、AI に HTML と CSS でモックを作らせ、画像で比べて口で選ぶ形で決めた。構成 3 案から 1 つ、それを 3 方向に詰め、自己主張を落とす 3 段階。ヘッダーは 9 往復した。「イメージに近い案」と「デザインが良い案」が割れたときに要素に分解して組み直した話と、応援するクラブの旗の色だけ借りる線引き。
デプロイで記事が全部消える事故を、安全装置で止める
記事をデプロイのたびに DB へ反映する仕組みでは、content が空のまま反映されると全記事が非公開になる。半分以上を非公開にするなら止める安全装置を入れたら、記事が 1 本のときに誤作動した。なくす案と比べて残し、記事が少ない間の閾値を変えた話。
記事を Git で管理して、デプロイのたびに DB に upsert する
ブログの記事はリポジトリの content/ を正本にして、デプロイのたびにマイグレーション用の Lambda が DB に upsert する。content を API の zip に入れない理由、Lambda Layer 案と S3 アセット案の比較、消した記事を DELETE せず非公開にする理由を書く。
devlog #1：AI と壁打ちしながら設計を決める
ポートフォリオサイトの設計は、AI（Claude Code）に判断材料を集めさせて、決めるのは自分。決定メモの型と、3 件まとめて決めた話、AI の説明を公式ドキュメントで裏を取った話。
個人開発での Dependabot の運用
個人のリポジトリで Dependabot の PR をどう捌いているか。グループ化と major の除外、週末にまとめて処理する流れ、lockfile の競合の直し方、まとめてマージすると Deploy が取り消される話、Maven wrapper の更新で mvnw.cmd が CRLF で入った話。
hook で状態を知らせ、`!restart` で会話を引き継ぐ
Slack からは見えない Claude Code 側の出来事を、hook を通して Slack に知らせる仕組みを作った。別セッションの hook が混ざる、--continue が別の会話を開く、--resume で落ちて戻れなくなるなど、再起動まわりで踏んだ問題と対処を書く。
2 つの AI モデルで相互にレビューし、Issue で回す
claude-slack-channel のコードを 2 つの AI モデルにレビューさせ、指摘を Epic・Task・調査の 3 階層の Issue に積んで回した。優先度の付け方、調査 Issue で裏を取ってから直す流れ、AI の指摘を鵜呑みにしないための型を書く。
形だけのテストから、信頼できるテストへ
初日に AI が書いた 159 のテストには、何も確かめていないものが混ざっていた。smoke テストの削除、Slack の偽物の共通化、既知の挙動を固定するテスト、統合テスト、実時間待ちの置き換え、CI での時間切れまで、テストの質を上げていった順に書く。
Windows のコンソールを外から操作する
Slack からターミナルの画面を読み、選択肢を選び、/exit を打ち込むために PowerShell スクリプトを書いた。別のコンソールで画面が読めない、複数キーが届かない、文字化けで文言が一致しないなど、泥臭い問題を順に解いた記録。
Slack に安全にテキストを流す Tips
Claude の返信やコマンドの中身を Slack に投稿するときに踏んだ落とし穴と、その対処を短くまとめた。分割送信でサロゲートペアを切らない、リンクの展開を止める、mrkdwn をメンションの形に限る、ログのトークンを伏せるなど。
実行許可を Slack のボタンで返す：迷ったら deny に倒す設計
Claude Code の実行許可の確認を Slack に中継し、ボタンで答えられるようにした。答えが無いときに allow に倒れる経路を潰す話、ID の検証、見えない文字の可視化、「今後も許可」で作るルールの絞り方を書く。
なぜ作ったか：Slack の DM から手元の Claude Code を動かす
手元の PC で動いている Claude Code のセッションに、Slack から話しかけるための MCP channel サーバーを作った。最初の実装からチャンネル対応、ホームタブ、複数セッションまでの 4 日間と、自分の困りごとから生まれた経緯を書く。
CloudFront 1 つで静的サイトと API を同居させた時の落とし穴
S3 の静的サイトと API Gateway の API を 1 つの CloudFront の下に置いた。errorResponses が /api/* にも効く、OAC に LIST を足して 404 にする、execute-api への直接アクセスを塞ぐ、ロググループがロールバックで消える、の 4 つの落とし穴をスライドにまとめた。
GitHub Actions から OIDC で AWS にデプロイする
長期のアクセスキーを置かずに、GitHub Actions から OIDC で AWS のロールを引き受けてデプロイする。信頼ポリシーの sub を不変の形式に合わせた話、id-token: write をデプロイのジョブだけに絞ってテストで検査する話、GitHub Free の private リポジトリでは Environments が使えない話。
Spring Boot を Lambda の SnapStart で動かし、Aurora DSQL につなぐ
Spring Boot の API を AWS Lambda（Java 21、SnapStart）で動かし、Aurora DSQL に IAM 認証でつないだ。ハンドラと zip の作り方、SnapStart のフック、初回デプロイで踏んだ GRANT と tomcat-embed-el の失敗、DSQL の癖（CREATE INDEX ASYNC、DESC 不可、1 トランザクション 3,000 行）をまとめる。
OpenAPI で backend と frontend の型をそろえる
Spring Boot の API と Next.js の静的サイトで、手書きの型が API とずれてビルドが止まった。仕様を openapi.json に書き出してコードとのずれをテストで検出し、frontend の型はそこから生成するようにした話。記事が 0 件でも静的 export を通す小技も。
ユーザースクリプトを軽くする：他人のページに相乗りする作法
Mastodon の投稿欄を拡張するユーザースクリプトの v3.0.2 では、動作を変えずに無駄な処理を減らした。関係する状態が変わらなければ DOM を触らない、MutationObserver の走査を 1 フレーム 1 回にまとめる。他人のページに相乗りするスクリプトが守るべきことを書く。
既存の UI になじむ拡張：見た目とアクセシビリティの両立
Mastodon の投稿欄に足したボタン列は、本家のボタンのクラスを借りてテーマの色に追従させ、選択中だけ名前を出してほかはアイコンとツールチップにした。キーボードでも使えるよう radiogroup として組んだ話と、CSP でスタイルが効かなかった話。
小さな OSS のライセンス表記
250 行ほどのユーザースクリプトでも、他人の成果物を含むならライセンス表記は要る。本体の MIT と、アイコンに使った Material Symbols の Apache License 2.0 を、THIRD_PARTY_NOTICES.md と LICENSES/ に分けて明記した話。
本家の制約を UI で再現する：公開範囲と引用範囲の組み合わせ
Mastodon の投稿欄では、公開範囲と引用範囲の組み合わせに制約がある。ワンクリックで切り替えるボタン列を作るにあたり、本家が何を禁じているかをソースから読み解き、再現できないものは「選ばせない」で安全側に倒した。
React の内部から Redux ストアを拾って、Mastodon の Web UI を拡張する
Mastodon の投稿欄に公開範囲の切り替えボタンを足すユーザースクリプトを書いた。DOM をクリックで真似るのではなく、React の内部から Redux ストアを取り出し、本家と同じアクションを dispatch する方式にした。状態がずれない代わりに、本家の更新で壊れうるというトレードオフの話。