UI ヒントナビゲーション (UI Hints)

マウスを持たずに、画面上のあらゆるボタン・リンク・入力欄へキーボードだけで瞬時にアクセス

UI ヒントナビゲーションは、画面上の操作可能なUI要素（ボタン、リンク、テキストボックス等）にアルファベットの「ヒントバッジ」をオーバーレイ表示し、2文字のタイピングだけでマウスポインタを正確に移動・クリックできる高速ナビゲーション機能です。

ブラウザの拡張機能（Vimium や Surfingkeys 等）の快適さを、Windows のデスクトップ全体（エディタ、Office、ブラウザ、各種ツール、リモートデスクトップ）へシームレスに拡張します。

---

3つのヒントモード

fjFlow は、操作するアプリケーションや場面に合わせて最適な3つの検出モードを提供しています。

モード	コマンド / ショートカット	検出方式	最適な利用シーン
UIA ヒント (標準)	{HintClickAll} (Space + m) {HintAll} (Space + <m> 長押し / Space + ha)	UI Automation API	一般的なWindowsアプリ、VS Code、Chrome/Edge、Office等
均一グリッドヒント	{HintGrid} (Space + hg)	幾何学的等分割	Canvas描画アプリ、リモートデスクトップ、画像閲覧、ゲーム画面等
CV ビジョンヒント	{HintVision} (Space + hv)	Computer Vision / UIED	UIA非対応の特殊アプリ、Web上の画像ボタン、レガシーツール等

専用フィルタヒント

要素タイプを絞り込んで素早く操作するための専用コマンドも用意されています：

• {HintInput} (Space + hi): 入力欄（テキストボックス・検索バー・エディタエリア）のみを抽出
• {HintButton} (Space + hb): ボタン・チェックボックス・ラジオボタンのみを抽出
• {HintLink} (Space + hl): ハイパーリンクのみを抽出
• {HintSelect} (Space + hs): ドロップダウンリスト・コンボボックスのみを抽出

---

基本的な操作フロー

flowchart LR
    classDef start fill:#0f172a,stroke:#38bdf8,stroke-width:2px,color:#f8fafc;
    classDef step fill:#0c4a6e,stroke:#38bdf8,stroke-width:1.5px,color:#f8fafc;
    classDef decision fill:#1e293b,stroke:#818cf8,stroke-width:2px,color:#f8fafc;
    classDef success fill:#064e3b,stroke:#34d399,stroke-width:2px,color:#f8fafc;

    A["Press Shortcut<br/>(e.g., Space + m)"]:::start --> B["Display Badges<br/>(aa - zz on screen)"]:::step
    B --> C["Type 2 Letters<br/>(e.g., 'ab')"]:::step
    C --> D{"Mode Check"}:::decision
    D -- "HintClickAll" --> E["Instant Left Click!<br/>(Ripple Animation)"]:::success
    D -- "HintAll / Grid / Vision" --> F["Move Cursor +<br/>Show Action Guide"]:::step
    F --> G["Press Action Key<br/>(j / k / Space etc.)"]:::step

1. ヒントの起動

• Space + m: 画面上の全UI要素にヒントを表示し、2文字決定で即座に左クリックします（最速モード）。
• Space + <m>（長押し）または Space + ha: 画面上の全UI要素にヒントを表示し、決定後にポインタ移動＋操作ガイドを表示します。

2. ヒントの決定

• 目的のボタンやリンクの上に表示されている2文字のアルファベット（例: ab）をそのままタイピングします。
• 1文字入力すると、該当する候補以外が自動的にフィルタリング（半透明化）され、目的の要素がハイライトされます。
• 間違えた場合は Backspace または Space + f（Delete）で1文字消去、Esc または Space + x でいつでもキャンセルできます。

---

ポインタ移動後のアクション操作ガイド

{HintAll}、{HintGrid}、{HintVision} でヒントを決定した直後、マウスポインタの周囲に直感的な操作ガイドリングが表示されます。

キー	アクション	説明
j または f	左クリック	通常のクリックを実行
<j> (長押し)	ダブルクリック	ファイルや単語のダブルクリック選択
k	右クリック	コンテキストメニューの表示
<k> (長押し)	右ダブルクリック	特殊操作用
Space	拡大鏡グリッド起動	カーソル周辺を4倍拡大して超精密クリック
m	ヒント再スキャン	ガイドを閉じてヒントを再表示
Esc / その他のキー	ガイド解除	ポインタ位置を維持したままガイドを閉じる

クリック時の波紋アニメーション (Ripple)

クリックアクション（j や k）を実行した瞬間、操作ガイドが即座に消去され、クリック位置に鮮やかな波紋アニメーション（左クリック: 青 / 右クリック: 赤）が広がります。意図した位置が確実にクリックされたことを視覚的にフィードバックします。

---

Precision Aiming with Magnifier Zoom Grid (Zoom Grid)

For crowded small links, tiny checkboxes, or specific text characters where standard hints may overlap, the Magnifier Zoom Grid provides pin-point accuracy without touching the mouse.

1. Press Space while the action guide ring is displayed.
2. A 4.0x Magnifier Window pops up in an optimal position on screen (automatically dodging the cursor).
3. Inside the magnifier, an 8×8 Grid with 64 characters (AaBbCc...Zz, 1–0, <, >) is superimposed over the captured 72×72 px area.
4. Simply type the single character corresponding to your exact target cell. Uppercase letters can be entered using Shift or CapsLock, and < / > symbols correspond to , and ..
5. The cursor moves directly to that sub-pixel target cell, and pressing j executes a pin-point left click with ripple feedback.

---

Keyboard-Driven Drag & Drop (Drag / QuickDrag)

Perform drag-and-drop operations—such as moving files or dragging sliders—entirely from the keyboard without touching your mouse.

High-Speed Quick Drag (Space + md)

The fastest way to drag between two UI elements with persistent hints.

1. Press Space + md.
2. All clickable UI elements display hint badges, and an OSD header appears displaying “Setting Drag Start Point”.
3. Type the 2-letter hint (e.g., ba) of the start element.
4. A red dot marker (●) marks the start point, and the OSD switches to “Setting Drag End Point”. The hint badges remain visible on screen.
5. Type the 2-letter hint (e.g., dd) of the destination element.
6. A red diamond marker (◆) marks the destination, and a red dashed arrow points from start to end. The OSD switches to “Press Space to Execute Drag”.
7. Press the Space key. The OSD and markers clear, and the mouse pointer smoothly drags from start to end and releases with a completion ripple effect.

Versatile Drag with Any Hint Mode (Space + ms)

Combine drag operations with targeted filters (e.g., button hints or link hints).

1. Press Space + ms.
2. The OSD displays “Setting Drag Start Point”.
3. Activate any hint mode (e.g., Space + hb for buttons or Space + m) and select the start element.
4. A red dot (●) marks the start, and the OSD switches to “Setting Drag End Point”.
5. Activate any hint mode again to select the destination element.
6. A red diamond (◆) and directional arrow are displayed.
7. Press Space to execute the drag.

[!TIP] Safe Cancellation Anytime: Press Esc or Space + x at any step during drag setup to immediately cancel without side effects.

---

クリック履歴ジャンプ (Mouse History)

• コマンド: {MouseHistory} (Space + mh)
• UIヒント経由でクリックした座標や、通常の重要クリック座標は自動的に履歴スタックに記録されます。
• Space + mh を押すと、過去のクリック位置にバッジ（🅰〜🆉）が一覧表示され、1文字打鍵するだけで過去の操作ポイントへ瞬時に戻って再操作できます。

---

設定とカスタマイズ

fjFlow 設定画面の 「UIヒント / マウス設定」 タブより、以下の調整が可能です：

• ヒントタイムアウト時間: ヒント表示後に何秒間無打鍵で自動キャンセルするか（デフォルト: 3.0秒）。
• ヒントバッジの配色: 通常要素、入力欄、CV要素ごとの背景色・文字色・透明度・フォントサイズ。
• CV検出感度: Computer Vision 検出のしきい値調整（1〜20段階）。
• 波紋アニメーションのON/OFF: クリックフィードバックの視覚効果の切り替え。