# プレビュー表示の使い方

annsViewには、テキストファイルやCSV/TSV、HTML/PDF等を整形表示する
「プレビュー表示」機能が2種類あります。

| | プレビュー表示(Markdown) | プレビュー表示(WebView2) |
|---|---|---|
| 切替キー | **Ctrl+M** | **Ctrl+N** |
| 実体 | Windows標準のRichEditコントロール | Microsoft Edge WebView2 |
| 追加ランタイム | 不要 | 必要(Edge WebView2 Runtime。通常は既にインストール済み) |
| 対応形式 | Markdown簡易表示のみ | Markdown(フル機能)/CSV・TSV(表形式)/HTML/PDF/画像等 |
| 表・リンク(クリック) | 非対応 | 対応 |
| 対象モード | annsViewテキストモードのみ | annsViewテキストモード・画像モードの両方 |

軽量・依存なしの簡易プレビューが「プレビュー表示(Markdown)」、
表現力重視の本格プレビューが「プレビュー表示(WebView2)」という
使い分けです。両方とも同時にはONにならず、片方をONにするともう片方は
自動的にOFFになります。

---

# プレビュー表示(Markdown)

annsViewテキストモードで、テキストファイルの内容を簡易的なMarkdownとして
整形表示する機能です。

## 使い方

- **Ctrl+M** で、通常のテキスト表示 ⇔ プレビュー表示 を切り替えます。
- メニューからは [編集] の「プレビュー表示(Markdown)」からも切り替えられます。
- グラフィック(画像)モードや、16進(HEX)表示中はこの機能は使えません。

### プレビュー表示中に使えるキー操作

通常のテキスト表示と同じ操作性のまま使えます。

| キー | 動作 |
|---|---|
| Home | ファイルの先頭に移動 |
| End | ファイルの最後に移動 |
| Page Up | 半ページ前へ戻る |
| Page Down | 半ページ次へ進む |
| Ctrl+Page Up | 1ページ分前へ戻る |
| Ctrl+Page Down | 1ページ分次へ進む |
| Ctrl+C | コピー |
| Shift+C | 追加コピー(クリップボードの末尾に選択範囲を追加) |
| Ctrl+L | 1行選択(現在行) |
| Ctrl+A | 全て選択 |
| Q | 閉じる |

右クリックメニューからも「コピー」「追加コピー」「1行選択」「全て選択」を実行できます。

## annsFM.iniでの見た目の設定方法

annsFM.iniの`[annsView]`セクション(`annsViewNoWrap`等が既にあるセクション)に、
以下のキーを**手動で追記**すると反映されます。annsFM.ini側にキーが無い間は
下表の既定値がそのまま使われるだけなので、書かなくても動作します(未設定でも
不具合ではありません)。設定はannsFM起動時に読み込まれます。

| キー | 内容 | 既定値 |
|---|---|---|
| annsViewPreviewFontName | 本文用フォント名 | Meiryo UI |
| annsViewPreviewCodeFontName | コード用(等幅)フォント名 | MS Gothic |
| annsViewPreviewColorText | 本文文字色(16進RRGGBB) | ffffff (白) |
| annsViewPreviewColorBack | 背景色 | 000000 (黒) |
| annsViewPreviewColorQuote | 引用(`>`)の文字色 | 969696 (グレー) |
| annsViewPreviewColorCodeBack | インラインコード/コードブロックの背景色 | 242A2A (#2A2A24) |
| annsViewPreviewFontSize | 本文フォントサイズ(半ポイント単位。22=11pt) | 22 |
| annsViewPreviewFontSizeH1 | 見出し`#`のフォントサイズ(半ポイント単位。40=20pt) | 40 |
| annsViewPreviewFontSizeH2 | 見出し`##`のフォントサイズ | 36 |
| annsViewPreviewFontSizeH3 | 見出し`###`のフォントサイズ | 32 |
| annsViewPreviewFontSizeH4 | 見出し`####`以降のフォントサイズ | 28 |
| annsViewPreviewHrWidth | 水平線(`---`)の罫線文字(―)の繰り返し数 | 30 |

設定例:
```ini
[annsView]
annsViewNoWrap=0
annsViewShowTabMark=1
annsViewPreviewFontName=UDEV Gothic JPDOC Yen
annsViewPreviewCodeFontName=UDEV Gothic JPDOC Yen
annsViewPreviewColorCodeBack=242A2A
annsViewPreviewFontSizeH1=44
```

色の指定はannsFM.iniの他の色設定と同じ書式(6桁16進数)です。単純な白・黒・
グレーのようにR=G=Bの場合は通常のRRGGBB表記と同じに見えますが、フォントの
色を細かく調整したい場合はご注意ください。

## 表示できる記法

### 見出し
```markdown
# 大見出し
## 中見出し
### 小見出し
```
`#`の数に応じて4段階までフォントサイズが変わります(4個以上は最小サイズにまとめられます)。

### 引用
```markdown
> 引用文
```
インデントされ、グレー系の色で表示されます。

### 太字・斜体
```markdown
**太字**
__太字__
*斜体*
_斜体_
```

### 箇条書き・番号リスト(ネスト対応)
半角スペース**2個ごとに1階層**として、ネスト(入れ子)構造を表現します。
```markdown
- リスト
  - リスト
    - リスト
```
```markdown
1. 番号リスト
1. 番号リスト
  1. 番号リスト
```
番号は各階層ごとに自動連番されます(ソース上に書いた数字そのものは使いません。
これはMarkdown標準の挙動と同じです)。

### 水平線
```markdown
---
```
`---` / `***` / `___` のいずれか3文字以上の並びを水平線として表示します。

### インラインコード
```markdown
`インラインコード`
```
コード用フォント(等幅)+専用の背景色で表示されます。

### コードブロック
<pre>
```
コードブロック
```
</pre>
` ``` `で囲んだ範囲は、言語指定( ` ```cpp ` など)の有無に関わらず、そのまま
等幅フォント+専用の背景色で表示されます。PlantUML/Mermaid/TeXなどの記法も、
図として解釈されることはなく、コードブロックとしてそのままテキスト表示されます。

## 表示できない機能

以下は非対応です(簡易プレビューとしての割り切りです。フル機能が必要な場合は
「プレビュー表示(WebView2)」をお使いください)。

- 表組み(`|`区切りのテーブル)
- リンク(`[text](url)`)のクリック対応 — 文字列としてもそのまま整形されず表示されます
- 画像の埋め込み表示
- 打消し線(`~~text~~`)
- PlantUML/Mermaid/TeX記法の図・数式としてのレンダリング(あくまで通常のコードブロックとして表示されるのみ)

---

# プレビュー表示(WebView2)

Microsoft Edge WebView2を使い、annsViewテキストモード・画像モードの両方で、
Markdown(フル機能)・CSV/TSV(専用の表形式)・HTML・PDF・画像などを
整形表示する機能です。

## 使い方

- **Ctrl+N** で、通常の表示 ⇔ プレビュー表示(WebView2) を切り替えます。
- メニューからは [編集] の「プレビュー表示(Markdown)」の下にある
  「プレビュー表示(WebView2)」からも切り替えられます。
- **annsViewテキストモード・画像モードの両方で使えます。**
- Microsoft Edge WebView2 Runtimeがインストールされていない環境では、
  メニュー項目が自動的にグレー表示になり使用できません(通常のWindows
  10/11環境では既にインストール済みのことがほとんどです)。

### 表示内容の振り分け(拡張子による自動判定)

annsViewテキストモードでは、開いているファイルの拡張子によって
以下のように表示方法が自動的に切り替わります。

| 拡張子 | 表示内容 |
|---|---|
| `.md` / `.markdown` / `.mdown` (テキストモード) / 拡張子が無い・その他のテキストファイル | Markdownとして表示(marked.js経由。表・リンク・画像等フル対応) |
| `.csv` / `.tsv` | スプレッドシート風の専用の表として表示(後述) |
| それ以外(`.html` / `.pdf` / `.json` / `.xml` / 画像(アニメーション)等) | WebView2(Chromium)標準の表示にそのまま任せる |

annsView画像モードでは、現在表示中のファイルをそのまま`SetSourceFile()`で
開くため、`.csv`/`.tsv`はテキストモードと同じ専用の表になり、それ以外は
WebView2の既定の表示になります(PDFはWebView2内蔵のPDFビューアで表示されます)。

### プレビュー表示中に使えるキー操作

WebView2の表示内容にフォーカスがあっても、以下のキーは効きます
(WebView2は本来こうした独自ショートカットを外へ伝えない作りですが、
`AcceleratorKeyPressed`イベントを使って明示的に対応させています)。

| キー | 動作 |
|---|---|
| Ctrl+N | プレビュー表示(WebView2)をOFFに戻す |
| Ctrl+M | プレビュー表示(Markdown)に切り替える(annsViewテキストモードのみ) |
| Esc | ビューア全体を閉じる |

上記以外の操作(文字列選択・コピー等)は、WebView2(Chromium)標準の
右クリックメニューやショートカットがそのまま使えます。

### リンク・セキュリティについて

WebView2は「ローカルファイル専用ビューア」として動作するよう制限してあります。

- 本文中のリンク(`file://`以外のスキーム、通常はhttp/https)をクリックすると、
  **WebView2内では開かず、OS既定のブラウザ等が別途開いてそちらで表示されます**。
- annsView自身が表示しているファイル(生成した一時HTMLファイルや、
  表示中のローカルファイル)はそのままWebView2内に表示されます。

### CSV/TSV表示の機能

CSV/TSVは、スプレッドシートのような見た目の専用ビューアで表示されます。

- 見出し行・行番号列の固定表示(スクロールしても常に見える)
- 一番上の**列番号行(1,2,3...)をクリックしてソート**(昇順/降順切替。
  数値らしい列は数値として、それ以外は文字列として比較)
- **検索ボックス**によるリアルタイム絞り込み(列名・セルの値に部分一致。
  ヒット件数を表示)
- 数値らしいセルの自動右寄せ
- ツールバーの**「1行目を見出しとして使う」チェックボックス**で、
  1行目を見出し行として固定表示するか、通常のデータ行として扱うかを
  その場で切り替え可能(既定はON)

## 必要な準備

「プレビュー表示(WebView2)」を使うには、以下が必要です(annsFM.exeの配布時に
同梱・案内する想定のものです)。

1. **WebView2Loader.dll** をannsFM.exeと同じフォルダに置いてください
   (無いとannsFMが起動できません)。
2. **Microsoft Edge WebView2 Runtime** が端末にインストールされている必要が
   あります(Windows 10/11では通常既に入っています)。入っていない場合は
   メニューがグレー表示になるだけで、annsFM自体は問題なく起動・動作します。
3. Markdown表示(`.md`ファイル等をCtrl+Nで開く場合)には、**marked.js**という
   ライブラリを使います(同梱v18.0.6)。最新版は以下から入手して
   `<annsFM.exeのあるフォルダ>\web\marked.min.js` として配置してください。
   - 入手元(例): `https://cdn.jsdelivr.net/npm/marked/lib/marked.umd.js`
     (ダウンロードし、ファイル名を`marked.min.js`にリネームして配置)
   - MITライセンスです。ファイル自体は改変せずそのまま使う想定です。
   - CSV/TSV表示や、HTML/PDF/画像等の表示にはmarked.jsは不要です。

## annsFM.iniでの見た目の設定方法

annsFM.iniの`[annsView]`セクションに、以下のキーを追記すると反映されます
(いずれも未設定なら既定値のまま動作します)。

### Markdown表示(annsViewテキストモードでCtrl+Nを押した場合)用

色は「プレビュー表示(Markdown)」の`annsViewPreviewColor*`設定を共通で
流用します。フォント名・サイズは、こちらのWebView2表示専用の設定を使います
(px=ピクセル単位。RTFの半ポイント単位のプレビュー表示(Markdown)とは単位が異なります)。

| キー | 内容 | 既定値 |
|---|---|---|
| annsViewPreviewWebFontName | 本文用フォント名 | Meiryo UI |
| annsViewPreviewWebCodeFontName | コード用(等幅)フォント名 | Consolas |
| annsViewPreviewWebFontSize | 本文フォントサイズ(px) | 15 |
| annsViewPreviewWebFontSizeH1 | 見出し`#`のフォントサイズ(px) | 28 |
| annsViewPreviewWebFontSizeH2 | 見出し`##`のフォントサイズ(px) | 24 |
| annsViewPreviewWebFontSizeH3 | 見出し`###`のフォントサイズ(px) | 20 |
| annsViewPreviewWebFontSizeH4 | 見出し`####`以降のフォントサイズ(px) | 18 |

### CSV/TSV表示用

配色(黒背景+見出し行は黄色+データはシアン)はスプレッドシートらしい
見た目に固定してあり、iniでは変更できません。フォント名のみ変更可能です。

| キー | 内容 | 既定値 |
|---|---|---|
| annsViewPreviewCsvFontName | CSV/TSV表示用フォント名 | Consolas |
| annsViewPreviewCsvFontSize | CSV/TSV表示用フォントサイズ | 13(8～100の範囲) |

設定例(annsFM.ini):
```ini
[annsView]
annsViewPreviewWebFontName=UDEV Gothic JPDOC Yen
annsViewPreviewWebCodeFontName=UDEV Gothic JPDOC Yen
annsViewPreviewWebFontSizeH1=32
annsViewPreviewCsvFontName=UDEV Gothic JPDOC Yen
annsViewPreviewCsvFontSize=16
```

## 表示できる/できない機能

### Markdown(marked.js経由。フル機能対応)

「プレビュー表示(Markdown)」より対応範囲が広く、表組み・リンク(クリック
可能)・画像埋め込み・打消し線・タスクリストなど、一般的なMarkdown記法に
広く対応します。

### 対応できない・していない機能

- **JSON/XMLの整形ビューア**: 通常のEdgeブラウザにはJSON/XMLを綺麗な
  ツリー表示にする機能がありますが、**WebView2埋め込み版のChromiumには
  この機能自体が入っていない**ようで、生テキストがそのまま表示されます
  (WebView2の既知の制限です)。今回はこの点への対応は見送り、現状維持と
  しています。
- PlantUML/Mermaid/TeX記法の図・数式としてのレンダリング(コードブロックの
  中身として、そのままテキスト表示されます)
