← 開発情報に戻る

テキスト選択プロンプト

画面上のテキストを選択するだけで、文脈を理解したタスクが自動生成される仕組み

概要

TimeCrowd AIの「テキスト選択プロンプト」は、ユーザーが画面上のテキストを選択(ハイライト)すると、 その選択テキスト・ページURL・DOM要素の位置情報を自動的に収集し、コンテキストリッチなタスクを 生成する機能です。手動でタスク内容を記述する手間を大幅に削減します。

動作フロー

テキスト選択
コンテキスト
自動収集
プロンプト
組み立て
タスク生成
AI提案

収集されるコンテキスト情報

テキスト選択時に以下の情報が自動的に収集され、タスクの説明に埋め込まれます。

情報 内容 用途
選択テキスト ユーザーがハイライトした文字列 タスクの主題・対象の特定
ページURL 選択が行われたページのURL 作業対象の画面を特定
ページタイトル ページの<title>要素 タスク名の自動生成に利用
要素パス 選択テキストのDOMツリー上の位置 UI上のどのセクションかを判定
要素種別 見出し・本文・リンクなどの種別 タスクの優先度・種類の推定
CSSセレクタ 要素を一意に特定するセレクタ 自動テスト・検証での要素特定

プロンプト生成の仕組み

収集されたコンテキスト情報は構造化されたプロンプトテンプレートに注入され、 AIが理解しやすい形式でタスク説明が組み立てられます。

生成されるタスク説明の例
【指示】選択テキストの内容に基づくタスク
【ページ】開発情報 | TimeCrowd AI
https://develop.v1.timecrowd.ai/dev_info
【要素パス】div.container > div.dev-info > h1
【要素種別】見出し
【CSSセレクタ】div:nth-of-type(1) > div:nth-of-type(2) > h1
【選択テキスト】開発情報

この構造化された記述により、AIはタスクの対象・範囲・文脈を正確に理解し、 適切な子タスク分解や実装方針の提案が可能になります。

タスク化ボタン(📋)との連携

各ページ右上に表示される📋ボタンは、ページ単位でのタスク生成を行います。 テキスト選択プロンプトは、これをさらに発展させ、ページ内の特定箇所を ピンポイントで指定してタスク化できる機能です。

使い分け

  • 📋ボタン — ページ全体に関するタスクを作成したい場合
  • テキスト選択 — ページ内の特定の要素・テキストに対するタスクを作成したい場合

技術的な実装ポイント

  • テキスト選択の検出は window.getSelection() APIを利用
  • DOM要素のパスは選択範囲の anchorNode から親要素を辿って構築
  • CSSセレクタは nth-of-type ベースで一意性を確保
  • タスク生成は既存の taskify エンドポイントを拡張して実装
  • 生成されたタスクは通常のタスクと同様に提案生成ジョブ(GenerateTaskProposalsJob)で処理

今後の展望

  • マルチ選択対応 — 複数箇所を選択して1つのタスクにまとめる機能
  • スクリーンショット連携 — 選択範囲のスクリーンショットをタスクに添付
  • コンテキスト拡張 — 選択テキスト周辺のDOM構造もプロンプトに含め、より精度の高い提案を実現
  • ショートカットキー対応 — テキスト選択後にキーボードショートカットでタスク化