細かい「今必要なもの」をChrome拡張で作ってもらう AchiのしずかなAI日記

achi
·
公開:2025/9/1

以前にもClaudeにChrome拡張機能を作ってもらったことがある。


今、ちょっとした自由研究をやっている。その調査のひとつに

・ストリートビューで見つけたものがどこにあったのか地図上にマークして分布図を作る

こういう作業がある。

作業の流れは以下の通りだ。

  1. ストリートビューでこの辺にありそうだな~というところを探す

  2. 見つけたら、URLのなかから座標を選択してコピーし……

  3. Googleマイマップに移動して、座標で検索し、そのピンの場所を記録してわかりやすい印をつける

大した手間ではないが、座標のドラッグ・コピーがちょっと面倒。「ここからここまでだな……」というのを、似たような文字列の中から範囲選択するところが面倒。前後にずれたりするとやり直しだし。

◆決まった場所なんだから自動で抽出できるだろう

そういう作業はChrome拡張でできそう。考えてみたら普通に座標のコピーできた気がするけどまあいいや。ボタン作ったほうがわかりやすいということで……


【Achi】

Chromeの拡張機能を作りたいです。

・GoogleMaps、GoogleストリートビューのURLを開いているときにURLに含まれる数字から緯度と経度の座標を取りたい。

例)「https://www.google.co.jp/maps/place/40%C2%B044'13.6%22N+74%C2%B002'29.8%22W/@40.809864,-73.1213276,3a,20.5y,245.52h,64.22t/data=!(後略) の中の、 「40.809864,-73.1213276」の部分

UIの希望例

・右クリックすると通常の右クリックメニューに加え「地図のURLから座標を取得」という項目も出る

・ブラウザにクリック一つで座標のクリップボードへのコピーが終わるようなボタンが表示される

【Claude】

Chrome拡張機能でGoogleマップのURLから座標を抽出する機能を作成しましょう。以下のファイル構成で実装します:

で、作ってくれたファイルをそれぞれエディタにコピペしてファイルを作り、同じフォルダに入れ、拡張機能として読み込ませた。

結果、できたのはこれ。右上に「??座標コピー」という青いボタンがあり、それを押すと座標がコピーされる。

あとは手順3のように、マイマップに移動して検索すればその場所にピンを刺すことができる。

ちょっと使ってみて、これは私が今やりたかったことができていて、作業が(地味だけど)すこしはかどりそうだと思った。

Claudeはこういうボタンを作ったつもりだったみたいだけど、最初に私がShift-JISで保存しちゃったせいか絵文字はなくなって「??」になっている。

あと、単純にデカい。下の私のGoogleアカウントのアイコンが隠れてしまっている。


◆こまかな修正依頼

【Achi】

使ってみて、私がやりたいことはばっちりできました!

作業がはかどりそうです。 ただ、少々の不満点があるので改善できそうならしてほしいです。

・右上に出ている「座標コピー」ボタンの絵文字が表示されないので絵文字を取ったほうがいいかも

・ボタンは大きくて押しやすいが悪目立ちしている。例えば画面のスクショを取るときに邪魔になる

・右上に本来あったボタンが隠れてしまっている。

【以下、改善案】

・ボタンが目立ちすぎないようにしてほしい。

・・半透明にする

・・どうせ使うのは私だけ(公開しない機能)なので、「●」 「◆」などの地味な記号一文字だけのボタンにする ・ボタンの位置を下げる

・・右肩には従来のボタンがあるので、右端の上から200ピクセルぐらい下げた場所にボタンを設置する。

・・ブラウザの端から半円だけ出てるとかでもいいかも

ほかにも「こうすれば邪魔にならない、目立たないのでは」という案があればそれも提案してください。

その修正依頼の結果出来上がったのがこちら。

いい感じに何の邪魔にもならなそうなボタンができていた。

押すだけでコピーは完了。

調査作業がぐんぐんすすみそうである。ぐんぐん。

@achi
静かな場所だと聞いてやってきました。 すきなもののことを中心に書こうと思います。 自己紹介も書きました。 sizu.me/achi/posts/02s4sznishfb Achi Fujimura Blackstrawberry.net管理人。 www.blackstrawberry.net