作ったのは、スクショの道具です
Chromeの拡張機能として動く、スクリーンショットのツールを作りました。名前はキリトルくん。画面を撮ると、その場でそのまま編集画面が開いて、赤い枠で囲んだり、矢印を付けたり、①②③の番号を振ったり、マーカーやテキストを書き込んだりできる。しかも撮った瞬間にコピーされた状態になっているので、そのままCtrl+Vでどこにでも貼れます。
まさに、こういう教材サイトで「実際の画面を赤い枠で囲んだスクショ」を作るときに毎回使う道具です。似た有名ツールはあるんですが、無料でうまく使えなかったりしたので、じゃあ作っちゃうか、と。STEP 1で言ったリプレイスの、僕の実物がこれです。
最初に送った、実物のプロンプト
きれいに整えた見本ではなくて、実際に使った1通目をそのまま載せます。
自作ツールで画面のスクリーンショットを撮ってくれるようなツールを作りたいです。Googleの拡張機能として使えるように作りたいです。 考えている内容としては、既存のGyazoと呼ばれる有名なものがあるんですけど、これがうまく無料で使えなかったりするので、自分で作っちゃうかといった感じを想定しているんですけど、Gyazoをブラッシュアップして自分のツールにしたい。 機能としては、Windowsの標準機能として、Win＋Shift＋Sキーで使えるような範囲指定のスクリーンショットができるのはもちろん、その開いているページ全体のスクリーンショット、あとページをバーッと下に行くような感じでスクショを撮ってほしいです。それらをすべて対応できるようなスクリーンショットの仕方や、スタンプ・書き込み機能が搭載されたツールを作りたいです。 まずは設計からお願いしたいので、まだ実装に移らず、必要情報を私にヒアリングをしてください。
補足 僕が実際に送った文面そのままで、読んで温度感をつかむための物です。自分の道具を頼む時は、STEP 3 の貼るだけのプロンプトを使ってください。
見てのとおり、かしこまったプロンプトではないです。喋りをそのまま打った感じ。それでも押さえるところは押さえていて、分解するとこの3つです。
- 既存の有名ツールを名指しした。「Gyazoをブラッシュアップして自分のツールにしたい」。これだけで、向こうは完成形をほぼ正確に想像できます
- 欲しい機能を、使う場面の言葉で並べた。範囲指定、ページ全体、下までスクロールしながら撮る。専門用語は使っていません
- 最後の一文で、まだ作らせなかった。「まだ実装に移らず、必要情報を私にヒアリングをしてください」。いきなり作らせず、先に質問させる。4項目の穴は、この往復で勝手に埋まっていきます
そのあとは、思うがままに喋っただけ
この1通のあとは、返ってきた質問に答えて、出てきたものを触って、微妙なズレの修正と機能の追加を思うがままに話しただけです。それで出来ました。参考にしたGyazoに無い機能を足して、自分が使わない機能は付けない。そうやって「自分用の、実際に使えるツール」になります。
この道具、そのまま配ります
せっかくなので、キリトルくんをそのまま置いておきます。上で書いた機能はひととおり入っていて、撮った画像は自分のパソコンの中だけに保存されて、外へは送りません。自分で作る前に、まず触ってみて「この程度の頼み方で、ここまでできるのか」を手で確かめてほしいです。
パソコンで押してください。Chromeの拡張機能なので、スマホでは使えません。
入れ方は、Chromeの拡張機能の画面を開いて、開発者向けの切り替えを入れて、フォルダを読み込ませる、という流れなんですけど、ここは文章で追うより、AIに聞きながら進めるほうがずっと早いです。ZIPをダウンロードして、下のプロンプトを投げるだけで、使えるところまで行けます。
- 上のボタンでダウンロードして、ZIPを開き、中の「kiritoru-kun」フォルダを取り出す
- ChatGPT か Claude を開いて、下のプロンプトを貼って送る
- 言われたとおりに進める。分からない画面が出たら、スクショを撮って貼る
ダウンロードした「kiritoru-kun」というフォルダの中身は、Chromeの拡張機能です。Chromeで使えるようにしたいので、入れ方を教えてください。 パソコンに詳しくないので、1つずつ順番にお願いします。一度に全部説明せず、1つ終わるごとに私の画面がどうなっているかを確認してから、次へ進んでください。
入れ終わったので、取り出したフォルダはもう要らないと思って消した。
Chromeは、入れたあともそのフォルダを読みに行っています。消したり場所を動かしたりすると、キリトルくんが動かなくなります。ダウンロードフォルダに置きっぱなしにせず、消さない場所に移してから入れるのが安心です。
次のコースへ
惜しい既製品を見つけたら、それはもう題材です。機能は4項目、見た目は見本、直しは「どこが・いまどうで・本当はどうしたいか」。この型で、自分専用の道具は何個でも増やせます。
最初は「合うツールが無いから我慢する」だったのが、いまは自分のパソコンで、自分の作った道具が動いているはずです。次は「ASTER 創世記」。いま読んでいるこのサイトそのものを、同じやり方でどう作ったのか、全部の工程を見せます。