どのゲームも虚無期間。いい機会なので、普段手動でやっていたブログ用の画像切り抜きを行うプログラムを作成。 流行に乗って＆自身の勉強も兼ねて、GoogleのAIコーディングツール Antigravity を使ってみました。
具体的な作業流れをまとめていきます
やりたかったこと
ちょくちょくキャプチャした画像の一部だけを切り抜いてブログ用画像にしているのですが、手動なのが結構手間でした。
たとえばこういう編成の部分ですね
▲もととなった画面全体画像
▲ここだけ切り抜きたい
毎回手動なのでシーンによってビミョーに大きさが違ったりしており、結構気になってたんですよね。単純に手間ですし。
いい機会だし自作するか！ついでにAntigravity試してみるか！という流れです
Antigravity
めっちゃカンタンに説明すると、Googleが開発したAIコーディング特化ツール です。
一応自分でコード編集も可能ですが、基本はAI任せという思想。
ご存じの方ならClaudeCodeやCursorなどとだいたい同一です。
作業開始
解説はおいといて早速はじめてみましょう！
0)セットアップ
公式サイトからダウンロードしてインストール、Googleアカウントでログインするだけです
ここからどうやるかは人やプロジェクト規模によるでしょう。今回は趣味コードの小規模なのでテキトーに
そこまでAgenticCodingに詳しいわけでもない。勉強も兼ねているので
ただし残念なのがなぜか Geminiの最新モデルを使えなかったこと。 なぜかエラーになってしまう。しょうがないので Claude Sonnet にしました。試してみたかったんですがねぇ…
1)土台構築
とはいえいきなりアプリを作らせ始めるのではなく、最初に『自分のルール』を AI に教え込む下ごしらえをします。これをしておくと、AIが勝手に変なライブラリを入れたり、コード規約を無視したりするのを防げます。
AIをよりスムーズに、そして的確に動かすためには大事です。
Pythonでツールを作成することを考えています。
標準的なGEMINI.mdとレビュー・コミット用のskillsを設定してください。
他に必要なものや、不明な点や迷った点があればこちらに確認してください
となげてAIと色々相談したあと土台構築完了。ガチでやるなら全然足りませんが、今回ぐらいなら大丈夫でしょう
skills:AIに実際に行わせたい作業
GEMINI.md:AIに与える包括的な指示書
2)仕様検討
そして仕様検討です。spec.md というファイルに仕様を書いていきます
- 画像をドラッグアンドドロップで開ける
- ユーザーが領域を選択、指定範囲にある特徴物を抽出する
- 抽出物を保存、PNGは圧縮させる
こうかいたあと、
spec.mdにアプリケーションの仕様を考えました。
足りてない点や仕様に問題があれば提示してください
と書いてAIと何往復かキャッチボール。
保存に関する画像フォーマット、出力画像サイズ、抽出する矩形領域の具体的な定義などなど…
これが100行ぐらいになりました（笑）
3)設計！
仕様書の作成が終わったら、こう指示をだします。いきなりコードはかかせません。
spec.mdに従い具体的なフォルダ構造とクラスの設計を行ってください。
また必要なライブラリを調査し、URLとともに提示してください。
こちらで利用可否を判断します。
不明な点や設計・仕様に欠陥が見つかったら都度こちらに確認してください。
これも何度かキャッチボールしてよさげな構造になりました。そこで
今回の設計を docs/ にまとめてください
と書いてドキュメント化しておきます。
設計を文書化しておくのは、自分のためだけじゃなく『AIの記憶をリセットするため』にも有効です。会話が長くなってAIが混乱し始めたときや、あとでイチからやり直す場合、この設計書を読み込ませればよりコチラの意図を掴みやすくなりスムーズに進みます。
4)実装！
ここまで終わったらいよいよこう書きます
これらの仕様に従い実装を開始してください
残念ながら一発で動かずエラー発生。エラー理由を伝えつつ修正させます。5分ほどAIが長考しましたが、エラーテキストをコピペするだけでやってくれるのが素晴らしい。
その後一応動作。ちょっと思ったものと違いましたが、ここでキリがいいと判断しこうなげます
ここまでの変更をコミットしてください
と出してコミットさせます。
コミット＝バックアップとでも思ってください。なにかAIが変な実装しても大丈夫なように、戻せるようにしておきます。
5)微調整
上手く動かなかった部分を伝え細かい部分を修正させます。ついでに機能も盛ります（笑）
XXX な機能を追加してください。実装後、spec.mdとdocs/に反映させてください
という風に。まぁここは気の済むまでやる内容ですね
6)完成！
そんなわけで出来たツールがこちら！
画像をDrag&Dropして、「抽出」ボタンを押すといい具合に領域を抽出してくれます。
そこから何個かクリックしてキャプチャにいれたいものを選択します。できたものがコチラ
欲しい領域だけキレイに切り抜けました！
さらに機能てんこ盛りにさせて、保存前のプレビュー機能や複数画像一括抽出機能、画像サイズ選択機能もつき！
またブログ用に画像圧縮機能も実装。pngquantで圧縮しようとしたのですが、webpを提案されたのでwebpにしました
たまに自分の予想を超える提案をしてくれるのがまた面白いですね
本当に便利な世の中だ…
ちなみにフォルダ構造はこうなりました。実際にコードとして動く部分以外のほうが多いです
おわりに
そんなわけでAIツールで作ってみました。実装時間は３時間ほどで、１行もコードを書いていません。
いやー、意外と便利で今後はコレで画像を切り抜くことになりそう。
といってもまだ実践投入はしていないので、実際に使ってみて気になった点は都度改修させていくことでしょう。
これからはAIに書かせる時代なんだなぁとしみじみと実感です。
他者に公開したりするようなツールとなるともっと必要な事項が多くこんな簡単には行きませんが、個人で使いたい簡単なカスタムツールぐらいなら意外と短時間でいけるのでぜひトライしてみてください！
それでは
