Cueを学ぶ · タスクベースのチュートリアル
音声によるバグ報告をコーディングAgent向けブリーフに変換する
問題を目撃したその場で説明しましょう。Cueで視覚的な症状を捉え、原因を推測することなく、コーディングAgentが再現して修正を確認できる十分なコンテキストを提供します。
執筆: Cue製品チーム (English) · 更新日: 。製品ソースのレビューに基づいて作成されています。演習および出力内容は実例であり、記録されたCueの実行結果ではありません。インストールされているバージョンの表示に従って操作してください。
コーディングAgentに役立つ音声バグ報告を渡すにはどうすればよいですか?
該当するアプリを表示した状態で、Cueを使って問題を説明します。その説明を再現手順、期待される動作と実際の動作、既知の条件、受け入れ確認項目へと落とし込みます。ブリーフを確認した上で、適切なリポジトリ内の設定済みClaude CodeまたはCodexタスクに明示的に引き渡します。
必要なもの: 具体的な症状と初期状態。設定済みのコーディングツールは、後のハンドオフ時にのみ必要です。 結果: 推測された根本原因やすでに検証済みの修正ではなく、再現可能な報告と範囲が限定されたタスク。
実際に観察できるものを捉える
「レイアウトが崩れている」という表現では、次の担当者が状況をゼロから再現しなければならなくなります。実用的な音声報告には、ページ、操作、視覚的な結果、そして発生条件が含まれます。Cueを使えば、該当するアプリを開いたまま説明を始めることができます。役立つ出力とは、コードに関する不確かな当て推量ではなく、再現可能なブリーフです。
- 該当するページやアプリの状態を表示したままにしてください。判明している場合は、URLや画面名、アプリのバージョン、オペレーティングシステム、ブラウザを書き留めます。不明な詳細情報は、過去の報告から勝手に流用せず、不明として記録してください。
- 話した言葉をIssueの下書きに直接入力したい場合は、そのテキストフィールドにフォーカスを合わせて Cue Dictationを使用します。構造化されたレポートが必要な場合は、Cue Agentを使用して該当画面を明示的に指定するか、短い説明を入力してください。
- 初期状態を含め、手順を順序立てて記録します。「一度だけ発生した」のか「3回再現した」のかを区別してください。実際に比較検証を行った場合は、問題なく動作したケースも記録します。
- レポートの下書きを依頼します。対象プロジェクト、証拠、スコープが明確になるまでは、リポジトリへの編集を許可しないでください。
表示されている画面のコンテキストには、非表示のブラウザログ、ソースコード、すべてのタブが含まれるわけではありません。スクリーンショットが役立つ場合は、実際の状態をキャプチャし、個人情報を削除した上で意図的に添付してください。タスク内で視認できるようになるまで、添付ファイルが存在すると主張してはなりません。このチュートリアルには、実際の製品スクリーンショットや記録されたテスト実行は含まれていません。
実践:原因を推測せずにプレビューの歪みを説明する
この架空のレポートは使い捨てのサンプルウェブサイトに関するものであり、現在のCueウェブサイトについての記述ではありません。サイズや再現回数は演習用のデータであり、本サンプルのためにブラウザで実際に計測されたものではありません。
ソース B-01: サンプルサイトの動画プレビューページにおいて、提供された画像サイズは1600×900ピクセルです。ビューポート幅390ピクセルでプレビューを開くと、画像が縦長に引き伸ばされて表示されます。幅1280ピクセルでは、同じ画像が縦横比を保って表示されます。演習レポートによると、狭い表示幅での挙動は3回の試行で発生しました。ブラウザのバージョン、オペレーティングシステム、影響を受けるコードパスは不明です。要求される修正は見た目のみであり、テキストやダウンロードの挙動は変更してはなりません。
B-01を提供し、Cueに次のように指示します:
B-01を、「概要」「環境」「再現手順」「期待される結果」「実際の結果」「不明点」「受け入れ確認」を含むバグ報告の下書きに変換してください。観察結果と推測される原因は明確に区別してください。CSSセレクタ、ファイルパス、スクリーンショット、根本原因、テスト結果を勝手に作らないでください。390ピクセルと1280ピクセルのケースを含めてください。作業範囲はプレビューのアスペクト比とオーバーフローに限定してください。下書きの作成のみを行い、Issueの起票やコードの編集は行わないでください。
ブリーフの例(記録されたCueの出力結果ではありません):
概要: ビューポート幅390ピクセルで動画プレビューが垂直方向に引き伸ばされて表示される。
環境: サンプルサイト。ブラウザのバージョンおよびオペレーティングシステムは不明。
手順: プレビューページを開き、ビューポート幅を390ピクセルに設定し、提供された1600×900の画像を表示して縦横比を確認する。1280ピクセルでも同様に繰り返す。
期待される結果: 両方の幅において、ページレベルの水平スクロールを発生させることなく、プレビューで画像の16:9の比率が維持されること。
B-01に記載された動作: 報告された3回の試行において390ピクセルで引き伸ばしが発生。1280ピクセルでは比率を維持。
不明点: 該当するコンポーネント、CSSルール、根本原因。
スコープ: プレビューの見た目のみ。テキスト、価格、ダウンロードの挙動は変更しないこと。
受け入れ確認:390ピクセルにおいて、レンダリングされたプレビューが元の16:9の比率を1パーセント以内の誤差で維持し、ページに水平スクロールが発生しないこと。1280ピクセルにおいても両方が維持されること。ダウンロードリンク、価格テキスト、プレビューのキャプションが変更前とバイト単位で一致すること。両方の幅をカバーするブラウザ確認が、修正前には失敗し、修正後にはパスすること。
1600×900のソースは、幅対高さの比率が16:9になります。この計算は有用な検証基準にはなりますが、レンダリングされた寸法の証拠ではありません。修正方法を選択する前に、コーディングAgentに実際の画像とレイアウトを検証するよう指示してください。「おそらくFlexboxの問題」といった推測は、証拠がある場合にのみ仮説の下に含めるべきであり、確認済みの原因として扱ってはなりません。
引き渡す前に手順と受け入れ確認を校正する
音声によるレポートは、内容が間違っていても流暢に読めてしまいます。伝達の過程で最も損なわれやすい部分こそ、コーディングAgentが依存している要素です。具体的には手順の順序、数値、そして実際に見えたことと結論付けたことの違いです。他者のタスクになる前に、下書きを元の事実と突き合わせて読み返してください。これには1分しかかからず、曖昧なレポートの後に発生するやり取りの大半を省くことができます。
再現手順
- 1ステップにつき1アクションとし、実行した順序で記述します。「390ピクセルでプレビューページを開き、画像を確認する」では2つの手順が混ざっており、どちらで失敗したかが隠れてしまいます。これらを分割してください。
- 開始時の状態を明記します。サインイン状態かサインアウト状態か、どのアカウント種別か、どのページか、何がすでに開いていたかなどです。特定の開始地点からしか機能しない再現手順は、再現性があるとは言えません。
- 形容詞ではなく正確な数値を用います。「狭いウィンドウ」ではなく390ピクセル、「大きな画像」ではなく1600 × 900、「通常は」ではなく3回の試行とします。口述された数値は最も失われやすいため、すべての数値を元の情報と照合してください。
- 不明なものは不明のままにします。ブラウザのバージョンが記録されていない場合、前回のレポートからバージョンを流用するのではなく、下書きには不明と記載しなければなりません。根拠なしに出現した事実がないか、下書きを意識して確認してください。
- 他人がそれを実行できる状態にします。そのバグを一度も見たことがないかのように手順を読んでみてください。質問しなければならない点があれば、それは手順の欠落を意味します。
受け入れ確認
- その場にいなかった人でも観察できる内容にします。「プレビューが正しく見える」は確認項目ではありません。「レンダリングされたプレビューが元の16:9の比率を維持し、390ピクセルおよび1280ピクセルでページに水平スクロールが発生しないこと」が適切な確認項目です。
- 報告された不具合の症状と紐付けます。各確認項目は、報告したのと同じ理由で現時点では失敗するはずのものです。現状ですでにパスしている確認項目は、今回の不具合について何も証明しません。
- 少なくとも1つの負の確認項目(変更してはならない点)を含めます。ダウンロードリンク、価格のテキスト、キャプションなど、維持すべき項目を指定してください。小規模な修正においてスコープの破壊はよくある失敗パターンですが、確認を依頼しない限り表面化しません。
- 何をもって証拠とするかを指定します。実行されたチェックの実際の出力結果、変更されたファイル、比較したスクリーンショットなどです。修正が機能していると主張する文章は証拠になりませんし、無関係なコンポーネントのテスト合格も証拠にはなりません。
- 緑の結果(合格)を得るために確認基準を緩めてはなりません。確認基準を満たせない場合、それは修正内容に関する重要な情報であり、要件を書き直す理由にはなりません。
違いを具体的にするため、同じB-01手順の2つのバージョンを示します。不十分な例:「ウィンドウを小さくしたところ、プレビューが引き伸ばされて見えた。おそらくflexboxの問題だろう。」これではビューポート、操作、原因の推測が混ざってしまい、Agentには再現すべき欠陥ではなく検証すべき仮説が与えられてしまいます。確認済みの例:「ビューポートを390ピクセルに設定する。プレビューページを開く。提供された1600 × 900の画像を表示する。観察結果:画像が元の16:9比率よりも縦長になっている。3回繰り返して確認。原因は不明。」後者のバージョンは再現や反証が可能ですが、前者は不可能です。
レポートを口述記録した場合は、発話した記憶に頼るのではなく、挿入されたテキスト自体を読んでください。数字の入れ替わりや「not」の欠落があっても、文章としては流暢に成立してしまうためです。識別子やバージョン番号は、意図した内容ではなく元の資料と一文字ずつ照合してください。
ブリーフをClaude CodeまたはCodexに明示的に引き渡す
最もシンプルな手順は、レビュー済みのテキストを引き渡すことです。目的のリポジトリで設定済みのClaude CodeまたはCodexタスクを開き、レポートを貼り付けるか、プロンプト欄に短い補足を音声入力します。これは別ツールへの音声入力であり、ネイティブな統合や会話履歴の共有を証明するものではありません。
| 経路 | 実際の操作 | 確立されること | 確立されないこと |
|---|---|---|---|
| 相手のツールの専用入力欄に直接ディクテーションする | Claude CodeまたはCodexのプロンプト入力欄にフォーカスを合わせ、CueのDictationコントロールを使用し、送信前に入力されたテキストを読み返します。 | 発話がそのツールの入力に届いたこと。短い追加指示には最速の経路です。 | テキストがレビュー済みであること。音声は未校正のまま入力されるため、識別子や数値にとっては最も危険な状態です。 |
| 確認済みの指示書を貼り付ける | Cueで下書きを作成し、前述の通り校正した上でコピーし、対象のClaude CodeまたはCodexタスクに貼り付けます。 | 受信側のタスクに、自身が承認した正確なテキストが渡されたこと。この演習で使用する経路です。 | Cueとそのツール間のいかなる接続。これはユーザーが手動で行った転送にすぎません。 |
| Cue内で設定された外部Agent | Cue内で設定済みの外部Agentを選択し、まずその設定、サインイン状態、権限を確認します。 | ユーザー自身の設定とそのプロバイダーのアカウントが実際に許可している事項のみ。 | Claude、Codex、Geminiが一覧に表示されていることは、接続、認可、利用可能なモデル、あるいは実行の完了を証明するものではありません。請求と可用性は一覧の表示ではなく、設定された経路に準じます。 |
この演習では上記の手動テキストハンドオフを使用しており、外部Agentコネクタの設定を必要としたり実演したりするものではありません。CueのAgentセレクタから外部Agentを使用する場合は、まずそのコネクタのセットアップ、サインイン、権限を確認してください。Cue独自のAgent用モデルの選択と、Claude CodeやCodexのランタイムの選択は異なります。利用可否や課金は設定されたルートに依存します。これらのルートが互換性を持つと想定する前に、 Agent、モデル、コンテキストに関するガイド を参照してください。
タスク: 選択したウェブサイトのリポジトリ内で、添付されたB-01レポートを調査してください。
最初に: 現在の変更点を確認し、無関係な作業を保持してください。実際のプレビュー実装箇所を特定します。症状を再現し、依然として不明な点を明記してください。
次に、許可されている場合: 390ピクセルおよび1280ピクセルでの画像比率とオーバーフローに関するブラウザの回帰テストを追加し、観察された不具合で失敗することを確認した上で、関連する最小限の修正を行ってください。
制限事項: テキスト、価格、ダウンロード、本番設定、無関係なコンポーネントを変更しないでください。個別に許可されない限り、コミット、Issueの送信、デプロイを行わないでください。
返却内容: 範囲を限定したdiff、実際に実行されたコマンド、その結果、および残っている不確実な点。
別のAgentには、前回のタスクの履歴、ファイル、アクセス権限が自動的に引き継がれることはありません。ブリーフと、共有が許可されている特定のソースやスクリーンショットを含めてください。リポジトリのファイルは、音声プロンプトによる推測のパスではなく、選択されたプロジェクトから取得する必要があります。認証情報、セッショントークン、無関係な顧客レコードは、再現手順に含めるべきではありません。
Anthropicの Claude Codeのベストプラクティス では、Agentに自身の作業をチェックする方法を与えることが推奨されています。ここでは、「ページを改善して」と指示するよりも、具体的な受け入れ確認項目を提示する方が効果的です。なお、このガイダンスはCueコネクタがインストールされていることや、この演習が実行されたことを証明するものではありません。
説明だけでなく、修正内容を確認する
- 着手前: Agentは正しいプロジェクトで報告された挙動を再現しましたか?再現できなかった場合は、試行した内容を返し、不足している環境情報を要求する必要があります。
- Diffとテスト: 変更されたファイルと実際のテスト出力を検査します。提案されたコマンドは実行されたコマンドではありません。無関係なコンポーネントのテスト成功は、この不具合の回帰テストにはなりません。
- 視覚的な結果: 両方の幅で実際のプレビューを比較します。元の縦横比が維持され、ページレベルの水平スクロールが発生していないことを確認してください。外側のカードだけでなく、画像自体もチェックします。
- スコープ: 無関係な文面、価格、ダウンロードの挙動が変更されていないことを確認します。パッチが共有のレイアウト規則に手を加えている場合は、それを利用している他の箇所も確認してください。
- リリース: ローカルの編集、コミットされたコード、マージされた変更、デプロイされたページを区別してください。許可を得てデプロイした後は、公開ページで同じシナリオを検証します。
この報告文を作る練習での成功とは、レポートが再現可能であり、不明な点について正直に記載されていることを意味します。実際の修正を完了するには、前述のリポジトリとブラウザでの個別のチェックが必要です。この架空のレポートを実際の顧客インシデントとして公開しないでください。
Agentが安全に完了できない場合の対処
Agentがバグを再現できない
正確なページ、ビューポート、ブラウザのバージョン、初期状態、または個人情報を黒塗りした実際のスクリーンショットなど、不足している事実を1つずつ追加します。何をテストしたのかを尋ねてください。合格結果を得るためだけに受け入れ基準を緩めてはなりません。
提案された修正が無関係な動作を変更してしまう
作業を一時停止し、スコープの境界を指示してください。より小さなパッチを作成するか、依存関係の説明を求めます。次の操作を行う前に現在のdiffを確認してください。タスクの停止は「元に戻す(undo)」操作ではありません。
再試行によって一部のアクションが重複して実行される可能性がある
まずリポジトリ、Issueの下書き、またはデプロイの状態を確認してください。未完了の部分のみを継続します。新しいタスクには、すべてを盲目的に繰り返すよう指示するのではなく、確認済みの簡潔なステータス概要を提供する必要があります。
より詳細な背景情報を提供するには、まず 会議メモをソースにリンクされたアクションに変換し、その上でこのバグに関連する決定事項と制約のみを添付してください。画面上にすでにあるテキストからレポートを作成する場合は、下書きを信用する前に、Agentが実際に何を受け取ったかを確認してください。
Cueで試してみる
設定済みのショートカットを使用し、Cue Settingsでアクティブなモードを確認してください。利用可能なアプリのコンテキストとアクションは、権限、バージョン、アカウントによって異なります。機密情報を提供する前に プライバシーポリシー (English) をお読みください。このガイドは、すべての処理がデバイス上にとどまることを保証するものではありません。
コンピューター用Cueを入手する · 現在のプラン (English)
サポートが必要ですか?またはエラーを見つけましたか? Cueサポートに問い合わせる (English) またはメール eli@sophoninc.comでお問い合わせください。お使いのCueのバージョン、プラットフォーム、モード、および機密情報を除いた例を含めてください。パスワード、トークン、または非公開の会議資料は送信しないでください。