こんにちは
ぽいぽいプリンです
複数画像のトリミングツールをAIに作って貰ったメモです
経緯
このブログを運用しているサーバ容量にも限りがあるため
掲載する画像解像度は出来る限り縮めています
横幅は480～600pixelを使うケースが多いです
大きく見せたい場合は800pixelなど
通常の写真は縮小革命で一括で縮めています
一方で、スマホのスクショの場合は
上のステータスバーと下のホームボタンだけ消したいなど
決まった範囲でトリミングしたいケースがあります
縮小してなおかつ
同じ範囲のトリミングを複数画像にかけたい！
手持ちのアプリにそんな機能はなく
検索で出てくるブラウザツールは
上位2つのサイトを見ても解像度の指定まではなかった
もう探すのめんどくさい…
そうだ、見付からないなら作って貰えばいいじゃない
Google AI Studioでのツール作成
Google AI Studioについて
日本語で作りたいものを書くだけで
お望みのツールを作れるブラウザサイトです
他のAIと違い、プログラムを書くだけではなく
ブラウザの上でそのままプログラムを実行できます
自分のPCに何もインストールしなくてOK
なんと便利なことでしょう！
Google AI Studio にアクセスして
Googleアカウントでログインすると無料で利用できます
※無料版は入力データが学習に使われる点は注意
クレカ情報などを登録しなければ
課金の心配はないようです
注意：
作成したツールは自分専用として利用しましょう
APIキーを含んだプログラムをそのままWebに公開すると
第三者にAPIを悪用されるリスクがあります。
もしWebサイトとして広く公開したい場合は
バックエンドサーバー経由でAPIを呼び出すなど
セキュリティ対策を別途講じる必要があります。
実際に作ってみましょう
頭に浮かぶがまま思うがまま
崩れきった日本語でプロンプトを打ち込みます
■入力したプロンプト
画像トリミング・解像度変更アプリを作りたい
#機能
-複数の画像をドラッグ＆ドロップしてアップロードできるフォーム、かつエクスプローラから複数選択も可能
-横幅、縦幅指定のピクセル数、あるいはパーセンテージを入力するテキストボックス。設定はスライダーつき。
プリセットはピクセルの横幅300,480,600,800,1200の5種類。縦幅は横幅はよくある数値を適当に埋めて。
縦横どちらを基準に縮めるか選択するラジオボタンつき。
パーセンテージは15,17,20,25,50の5種類
-アップロードした画像をサムネで表示、選択できるエリアをつけて
-画像をトリミングするエリアを表示。上下左右をクリック＆ドラッグでトリミング可能。
アップロードしたすべての画像に対して同じ範囲でトリミングするか、個別にトリミングするか選択式にして
-縮小結果をまとめてダウンロード可能なボタンをつけて。個別でDLするフォームとzipでまとめてDLする機能つき。
また、画像フォーマットを変換できるオプションも追加して。対応フォーマットはJPEG、PNG、WebPに設定して。
AI君はスーパーエンジニアだから、こんなんでも大丈夫
ここまで約5分
さぁ、行ってらっしゃい！
コードの生成中にスタイリッシュな画面が出てきて
デザインをどれにするか聞かれるので
好きなものを選びます
数分後、できました
プロンプトを打ち込んでいた時間よりは
ちょっと長かったです
画像を投げ入れて、トリミング範囲を指定
続いて2枚目の画像を選択すると
トリミングの枠がそのまま残っています
横幅はちゃんと600pixel
成功だ！
1枚ずつDLするかzipでDLするか選べます
10枚以下であればzipにせずそのままDL派
最終的なプロンプト
プロトタイプを触った結果
・トリミングする画面上で拡大縮小したい
・ドラッグで移動もしたい
という要望が加わりました
以下が最終プロンプトです
画像トリミング・クロッパーコンポーネント実装プロンプト
ユーザーが直感的に画像を切り抜くことができる、インタラクティブで堅牢な画像トリミング（クロッパー）コンポーネントを実装してください。以下の要件と操作仕様を満たすデザインとロジックを実装してください。
1. 基本仕様と出力プリセット
・用途: アップロードされた画像を任意の比率で切り抜き、指定されたサイズで出力するツール。
・サイズプリセット機能: 出力サイズとして、用途に合わせた複数の画質（「480ピクセル」や「600ピクセル」などの縦横ピクセル設定）をプリセットボタンとして提供し、ワンクリックでトリミング後の出力基準サイズを切り替えられるようにします。
2. レイアウトと表示（CSS）の制御
・コンテナの挙動: トリミングを行うプレビューエリアは、背景をダークカラー（深めのグレーやネイビー）とし、枠からはみ出さないよう制御します。
・画像全体の表示保証: 表示コンテナの高さや幅が画像の比率と異なる場合でも、画像自体がコンテナの境界線を超えてはみ出すのを防ぎ、コンテナ内に画像全体が綺麗に収まるように表示します。
・枠外マスク: トリミング枠の外側には、半透明の暗いマスクを重ねて、選択されていない範囲が視覚的にわかりやすくなるようにします。
3. 座標・位置計算のロジック（最優先事項）
・画像基準のパーセンテージ計算: トリミング枠の位置や幅・高さのパーセンテージ（0〜100%）は、プレビュー表示用「コンテナ」のサイズではなく、画面に実際に描画されている「画像自体の表示サイズ」を基準に計算してください。
・比率のズレ防止: 画像の縦横比やサイズがどのようなものであっても、表示されている画像全体の領域を正確に「0〜100%」として認識させ、実際の切り抜き（切り出し用のピクセル計算）において画像の縦幅・横幅すべてをカバーできるようにします。
・限界値の解放: ドラッグによるトリミング枠の変形時に、不必要な数値制限によって枠の高さや幅がコンテナ境界で突っかかる不具合を防ぐため、計算の中間段階では数値を制限せず、最終決定の段階で画像の外側に収まるよう制御します。
4. 競合しない3つの操作機能（インタラクション）
以下の3つのマウス操作が、互いにイベントの伝搬を遮ることなく、独立かつ快適に共存して動作するように設計してください。
マウスホイール操作（ズーム機能）:
・画像表示エリア上でマウスホイールをスクロールした際、画像の拡大および縮小（ズーム）が行えるようにします。
・他のドラッグイベントやトリミング枠の操作に遮られることなく、常にホイール操作による縮尺変更を快適に受け付ける仕組みにします。
背景ドラッグ操作（パン・位置移動機能）:
・トリミング枠以外の背景（画像やダークエリア）をマウスでドラッグした際、拡大された画像を上下左右にスムーズに移動（パン）できるようにします。
トリミング枠ハンドルのドラッグ操作（リサイズ・位置変更機能）:
・トリミング枠の境界線や四隅に配置されたハンドルをドラッグした際、枠そのものの位置の変更や、切り抜きサイズの拡大・縮小（リサイズ）が行えるようにします。
・この操作中は、背景のパン移動や意図しないズームが発生しないよう、制御を切り分けてください。
このプロンプトで再現性があるのかは確認していません
いくらでも作り直してくれるので
適当に参りましょう
ブラウザの右側でGeminiを開いて
「Google AI Studioで作って貰ったけど
この機能が欠けてるねん。プロンプト考えてや」
と指示文を頼んでしまっても良しです
Google製品の思考は
Google製品が分かってくれることでしょう
たぶん
おわりに
今回のツールを作成したのは
以下記事の画像トリミングが面倒になったのが原因でした
Googleアカウントをお持ちの方は
是非遊んでみてください
おわり
コメント