自分専用ツールを作る（小物編）

作ったのは、スクショの道具です

Chromeの拡張機能として動く、スクリーンショットのツールを作りました。 画面を撮ると、その場でそのまま編集画面が開いて、 赤い枠で囲んだり、矢印を付けたり、①②③の番号を振ったり、 マーカーやテキストを書き込んだりできる。 しかも撮った瞬間にコピーされた状態になっているので、 そのままCtrl+Vでどこにでも貼れます。

まさに、こういう教材サイトで「実際の画面を赤い枠で囲んだスクショ」を作るときに 毎回使う道具です。似た有名ツールはあるんですが、 無料でうまく使えなかったりしたので、じゃあ作っちゃうか、と。前のSTEPで言ったリプレイスの、僕の実物がこれです。

最初に送った、実物のプロンプト

きれいに整えた見本ではなくて、実際に使った1通目をそのまま載せます。

見てのとおり、かしこまったプロンプトではないです。喋りをそのまま打った感じ。 それでも押さえるところは押さえていて、分解するとこの3つです。

• 既存の有名ツールを名指しした。「Gyazoをブラッシュアップして自分のツールにしたい」。 これだけで、向こうは完成形をほぼ正確に想像できます
• 欲しい機能を、使う場面の言葉で並べた。範囲指定、ページ全体、下までスクロールしながら撮る。専門用語は使っていません
• 最後の一文で、まだ作らせなかった。「まだ実装に移らず、必要情報を私にヒアリングをしてください」。 いきなり作らせず、先に質問させる。4項目の穴は、この往復で勝手に埋まっていきます

そのあとは、思うがままに喋っただけ

この1通のあとは、返ってきた質問に答えて、 出てきたものを触って、微妙なズレの修正と機能の追加を思うがままに話しただけです。 それで出来ました。 参考にしたGyazoに無い機能を足して、自分が使わない機能は付けない。そうやって「自分用の、実際に使えるツール」になります。直すときの言い方は、入門のSTEP 3でやった3点セットのままです。

このスクショツールを作った一部始終は、この先の上級編のコースで丸ごと出す予定です。ここでは「この程度の頼み方で、ここまでできる」だけ持って帰ってください。

次のコースへ

作った道具は、「GitHubに作ったものを残す」の流れで預けておいてください。 次は「スライド・資料をAIで作る」です。 道具だけじゃなくて、人に見せる資料もAIで作れるようになります。