PoC #09: 雑ドロップダウン撲滅キャンペーン
お役所のフォーム、
なんでこんなに長くて
無駄が多いの
なんでこんなに長くて
無駄が多いの
ドロップダウン！
情報１つに
クリック2回さ
せるな！
情報１つに
クリック2回さ
せるな！
ドロップダウン嫌いな
の、私だけ？
の、私だけ？
いえ、怒りは正当です
GOV.UK Design System
では selectは
『最後の手段』扱いです
では selectは
『最後の手段』扱いです
最後の手段を最初
から使うな！
から使うな！
select の代わりに、
5 個以下ならラジオ、
10 個以上なら
autocomplete
5 個以下ならラジオ、
10 個以上なら
autocomplete
これは、ユーザーへの
罰ゲームです
罰ゲームです
『東京』と2文字。
それで十分です
それで十分です
撲滅キャンペーン
しよう！
しよう！
ただし、撲滅対象は──
雑なドロップダウンです
雑ドロップダウン
撲滅キャンペーン！
撲滅キャンペーン！
……で、これ、
Claude Code
で埋められない？
Claude Code
で埋められない？
Claude Code
は Docker
コンテナの中
は Docker
コンテナの中
ブラウザを直接
クリックできません
クリックできません
Playwright は？
できます。ただ
Chrome を
デバッグモードで起動
する必要があります
Chrome を
デバッグモードで起動
する必要があります
はい、めんどい
もう一つ手があります。
Tampermonkey
という──
Tampermonkey
という──
あー、入れてある
ChatGPT、全文
くれって頼んでも出さない
くれって頼んでも出さない
切れたり要約したり、
セッション切れる
と忘れるし
セッション切れる
と忘れるし
だから前に
Tampermonkey
で書いた。
Markdown一括保存
Tampermonkey
で書いた。
Markdown一括保存
Tampermonkey
スクリプトはこんな形
をしています
スクリプトはこんな形
をしています
私のはこれ。
ChatGPT の
ドメインだけで動く
ChatGPT の
ドメインだけで動く
先頭の
metadata header
で、どのサイトで動く
か・どこに通信するか
を宣言します
metadata header
で、どのサイトで動く
か・どこに通信するか
を宣言します
会話の DOM を
回って、
Markdown に
整形してダウンロード
回って、
Markdown に
整形してダウンロード
ここで、Web の
基本ルールを一つ
基本ルールを一つ
ページ内 JS は、
別オリジンに自由に
通信できません
別オリジンに自由に
通信できません
ないと、悪意ある
ページが好き勝手に
リクエストを送れる
ページが好き勝手に
リクエストを送れる
……だから普通のJS
じゃ、Docker の
Claude Code に
繋げないわけね
じゃ、Docker の
Claude Code に
繋げないわけね
はい、そのままでは
そこで
Tampermonkey
の特権関数、GM_
xmlhttpRequest
Tampermonkey
の特権関数、GM_
xmlhttpRequest
拡張機能の権限で、
の先へリクエスト
を送れます
@connectの先へリクエスト
を送れます
ブラウザの中から、
Docker の Claude Code
に到達できます
Docker の Claude Code
に到達できます
あー、それで
Docker の中の
Claude Code に
つながる訳ね
Docker の中の
Claude Code に
つながる訳ね
ただし、信頼できない
スクリプトに権限を
渡すのは危険です
スクリプトに権限を
渡すのは危険です
包丁と同じね
料理にも、事故にも
@match と@connectは絞ります
便利ね。じゃあ次から
全部これで
全部これで
本来はフォームを直す
のが筋ですが──
のが筋ですが──
お役所が直すわけ
なくない？
なくない？
……応急処置で済ま
せますか
せますか
