画像を扱う
Verdent で画像をアップロードして活用する
Verdent for VS Code は強力なマルチモーダル機能を備えており、画像をアップロードして視覚的な分析、モックアップからのコード生成、スクリーンショットを使ったデバッグなどを利用できます。このガイドでは、開発プロセスで画像理解を活用する実践的なワークフローを紹介します。
Verdent への画像のアップロード
分析や参照のために Verdent と画像を共有したいとします。
クリップボードを使った素早い方法:
- 画像をクリップボードにコピーします（スクリーンショット、ブラウザからのコピーなど）
- Verdent の入力フィールドをクリックします
- Ctrl+V（Windows/Linux）で貼り付けます
重要: macOS では画像を貼り付けるのに Ctrl+V（Cmd+V ではない）を使用します。
画像が会話に表示されます。
パスで画像を参照します:
Analyze this screenshot: /path/to/screenshot.pngVerdent は指定されたパスから画像を読み取ります。
/home/user/screenshots/error.png
/Users/john/Desktop/mockups/design.png./screenshots/error.png
./mockups/design.png../images/diagram.png
../../assets/logo.png一般的な形式: PNG、JPG、JPEG、WebP、GIF
複数の画像を扱います:
- クリップボードから複数の画像を順番に貼り付けます
- または複数のパスを参照します:
Compare these three mockups: design-v1.png, design-v2.png, design-v3.pngすべての画像が会話に表示され、まとめて参照できます。
ヒント:
- 対応形式: PNG、JPG、JPEG、WebP、GIF、BMP
- 画像は会話のコンテキストに残るため、複数ターンの議論が可能です
- アップロードした画像は後続の質問でも参照できます
- 鮮明な画質ほど分析結果が向上します
デザインモックアップからのコード生成
デザインモックアップがあり、Verdent に実装コードを生成させたいとします。
デザインモックアップをアップロードする
モックアップ画像（Figma のエクスポート、デザインツール、手描きのスケッチなど）をコピーするか、ファイルパスで参照します。
コード生成をリクエストする
Generate React components to implement this dashboard designVerdent が視覚的な構造を分析します。
Verdent がコンポーネント構造を作成する
Verdent は視覚要素を識別し、次を生成します:
// DashboardLayout.tsx
import React from 'react';
import { StatCard } from './StatCard';
import { RecentActivity } from './RecentActivity';
import { UserChart } from './UserChart';
export function DashboardLayout() {
return (
<div className="dashboard-container">
<div className="stats-grid">
<StatCard title="Total Users" value="1,234" trend="+12%" />
<StatCard title="Revenue" value="$45.6K" trend="+8%" />
<StatCard title="Active Sessions" value="89" trend="-3%" />
</div>
<div className="charts-section">
<UserChart />
</div>
<div className="activity-section">
<RecentActivity />
</div>
</div>
);
}コンポーネントはモックアップの構造に一致します。
対応する CSS を生成する
Generate Tailwind CSS classes to match the mockup stylingVerdent は視覚デザインに基づいてスタイルを追加します:
<div className="grid grid-cols-3 gap-6 p-6">
<StatCard className="bg-white rounded-lg shadow-md p-4" ... />
</div>細部を調整する
The spacing between stat cards should be larger, and add the blue accent color from the mockupVerdent がデザインにより正確に合わせて調整します。
ヒント:
- 解像度の高いモックアップほど正確なコードが生成されます
- フレームワークを指定します: React、Vue、Angular、素の HTML/CSS
- スタイリング手法を明記します: Tailwind、CSS Modules、Styled Components
- 精度を高めるためカラーコードやデザインシステムの詳細を提供します
- 手描きのスケッチでも素早いプロトタイプには有効です
スクリーンショットによるエラーのデバッグ
エラーメッセージに遭遇し、その内容の理解に手助けが必要だとします。
エラーを表示しているブラウザコンソールのスクリーンショットを貼り付けます:
Here's the error I'm getting in the console. What's causing it?Verdent は次を読み取ります:
- エラーメッセージのテキスト
- スタックトレースの情報
- ファイル名と行番号
- 関連するコンソールの警告
Verdent が診断を提供します:
This is a "Cannot read property 'map' of undefined" error. The 'users' array is undefined when the component first renders. Add a conditional check or default empty array.Verdent が修正方法を提案します。
ターミナルのコンパイルエラーのスクリーンショットを貼り付けます:
My TypeScript build is failing with these errorsVerdent は次を分析します:
- 型エラー
- ファイルパス
- エラーコード
- コンパイルのコンテキスト
Verdent が説明します:
You have a type mismatch in UserProfile.tsx line 42. The 'age' property expects a number but you're passing a string. Cast it with Number(age).アプリケーションログのスタックトレースのスクリーンショットを貼り付けます:
The application crashed with this exceptionVerdent は次を調べます:
- 例外の種類
- スタックトレース
- メソッド名と行番号
- 文脈となるログメッセージ
根本原因を特定し、修正方法を提案します。
ブラウザの DevTools の Network タブのスクリーンショットを貼り付けます:
This API request is failing, here's the network tabVerdent は次を分析します:
- HTTP ステータスコード
- リクエスト/レスポンスのヘッダー
- リクエストのペイロード
- レスポンスのボディ
API の問題を診断します。
ヒント:
- エラーメッセージは省略せず全文を含めます（重要な部分を切り取らない）
- 可能な限りスタックトレースを完全に表示します
- 周辺のコンテキストも含めます（他のコンソールメッセージやネットワークリクエストなど）
- テキストで説明するだけでなく、実際のエラーをスクリーンショットで示します
よくある質問
画像ファイルのサイズ制限は？
最大ファイルサイズ: 5MB（超過した場合は自動圧縮されます。圧縮後も 5MB を超える場合はエラーになります）
最大解像度: 2000×2000 ピクセル
対応形式: PNG、JPG、JPEG、GIF、BMP、WebP
ベストプラクティス: 最適なパフォーマンスと正確な分析のため、3MB 未満で 2000×2000 までの解像度の画像を使用してください。
Verdent は 1 回の会話で複数の画像を分析できますか？
はい。複数の画像を順番に貼り付けたり、1 つのプロンプトで複数のファイルパスを参照したりできます。Verdent はすべての画像にわたってコンテキストを保持し、比較や分析を行います。例: 「これら 3 つのモックアップを比較して、違いを指摘してください。」
Verdent は私の画像を外部サーバーにアップロードしますか？
クリップボードで貼り付けた画像やファイルパスで参照した画像は、会話セッション内で処理されます。画像は永続的に保存されず、新しい会話を開始すると消去されます。ファイルパスでの参照は、アップロードせずにローカルで画像を読み取ります。
Verdent はモックアップから本番運用可能なコードを生成できますか？
Verdent はモックアップの視覚構造、レイアウト、スタイルを実装する機能的なスターターコードを生成します。通常は、ビジネスロジック、データ連携、アクセシビリティ機能、エラー処理、本番向けの最適化を追加して調整する必要があります。
Verdent がデザインモックアップを誤って解釈した場合は？
修正のフィードバックを繰り返し与えてください。「ヘッダーはグレーではなく青にしてください」や「これらのカードは 4 列ではなく 3 列のグリッドにしてください」のように伝えます。Verdent はあなたの修正に基づいて実装を調整します。複数回の調整を行うのは通常のことです。