AIエージェント活用事例
Views —

AIエージェント活用事例

今日の新着

44すべて 189件

全189件中 1〜20件

販促・制作実装例

スマートフォンでも写真とトリミング領域を別々に動かせるように修正する

写真トリミングツールでタッチ操作が誤認識される問題をClaude Codeで修正し、拡大ボタンや背景色選択も調整したと報告されています。

Claude Code

使い方

  1. 写真を動かすかトリミング枠を動かすかを選択するボタンを追加したとされています。一本指での移動と二本指での拡大操作も分けて実装したそうです。
  2. モバイルでトリミング枠がタッチイベントを奪う問題を確認し、選択したモードに応じてタッチイベントの対象を切り替えたと報告されています。
  3. 拡大ボタンを押し続けると連続して拡大されるように修正し、写真の端の色が均一な場合はその色を背景色のデフォルトとして使用するようにしたそうです。

結果

公開プルリクエストに修正の過程やClaude Codeセッションが記録されているとされています。結果はソーシャル画像トリミングツールに反映されたと報告されています。

補足

制作者の変更記録を確認しましたが、実際のスマートフォン操作を独立して再現したわけではありません。

出典

GitHub 原文 ↗

プロンプト例 · Claude Code

目標：スマートフォンでも写真とトリミング領域を別々に動かせるように修正してください。

入力・環境：[写真トリミングツールのリポジトリ]、[テスト画像]、[出力比率]、[対応するスマートフォンブラウザ]。

参考原文：https://github.com/simonw/tools/commit/152fd93b7a6fdd3447ec55798e54dbef1630b911

公開された修正事例を参考に、モバイル写真トリミングツールの操作性を改善してください。写真の移動とトリミング領域の移動を明示的に選択できるようにし、一本指での移動と二本指での拡大操作が競合しないように実装してください。拡大ボタンを長押しした時や最初に押した時に倍率が急に変わらないかも確認してください。背景色の自動選択は、利用者が選んだ色を上書きしないようにしてください。修正したコードと再現手順を残してください。

原文にないアカウント連携方法や成果は推測せず、必要な設定や実行手順を先に案内してください。既存データを保護する作業用コピーから始め、アクセスできない項目は確認が必要と明記してください。

検証：トリミング領域が画面の大部分を占める写真で両方の移動モードを試してください。拡大・縮小後にダウンロードした画像の構図や比率がプレビューと一致するかも確認してください。

成果物とともに使用した入力、実行記録、確認した結果を整理してください。失敗した部分や未実行の部分は、完了した作業と区別してください。