chcode (5ch Viewer for Visual Studio Code)

chcode は、Visual Studio Code 内で快適に 5ちゃんねる（5ch.net / 5ch.io）を閲覧できる専用ブラウザ（専ブラ）拡張機能です。

開発作業の合間やコードリーディングの傍らで、VS Code のエディタ画面を上下2分割してシームレスにスレッドを巡回・閲覧できます。

---

✨ 主な機能

1. 2ペイン上下分割レイアウト（専用ブラウザUI）

• 板選択時: エディタ全画面でスレッド一覧を広々と閲覧。
• スレッド選択時: エディタが自動的に**上下2分割（上部 1/3: スレッド一覧 / 下部 2/3: スレッド本文）**に切り替わります。
• 上部でスレッドをクリックするだけで、下部の本文が即座に切り替わります（不要なタブが乱立しません）。

2. お気に入り（板・スレッド）＆閲覧履歴

• ★ お気に入り板: よく見る板をサイドバーの最上部にピン留め。板一覧の「☆」アイコンや右クリックからワンクリックで追加・解除。
• 📌 スレッドブックマーク: スレッド上部ツールバーの「★ 保存」ボタンで気になるスレッドをブックマークし、サイドバーから即座にアクセス。
• 🕒 閲覧履歴: 直近に閲覧したスレッド（最大50件）を自動保存。サイドバーから履歴の確認や一括クリアが可能。

3. 高機能スレッド一覧（上部ペイン）

• リアルタイム絞り込み検索: キーワードを入力するだけでスレッドタイトルをインクリメンタル検索。
• ワンクリックソート:
  • 🔥 勢い順（デフォルト）
  • 💬 レス数順
  • ⏱️ 新着順（作成日時順）
  • 🔢 番号順
• 勢いヒートマップ: 勢い 1000 以上の急上昇スレッドは赤色、勢い 300 以上はオレンジ色で視覚的に強調表示。

4. リッチなスレッド本文ビューワー（下部ペイン）

• 同一IDのレス抽出 & 発言数カウント:
  • IDの横にスレ内での発言回数（例: ID:xxxx(4)）を表示。多投者は色分け（3件以上でオレンジ、5件以上で赤字）。
  • IDをクリックすると、そのIDがスレ内で行った全書き込みをモーダルで一覧抽出。
• 被アンカー（返信ツリー / Backlinks）表示:
  • レスヘッダーに 返信(3): >>12 >>45 >>89 と被参照リンクを表示。
  • 返信アンカーへのマウスホバーでポップアッププレビュー、クリックでジャンプ。返信が集まったレスには「🔥 注目」バッジを表示。
• スレッド差分更新 & 自動リロード（実況対応）:
  • 「🔄 更新」ボタンで新着レスのみをスムーズに末尾追加（スクロール位置を崩しません）。
  • 自動更新モード（5秒、10秒、30秒、1分）を搭載し、なんGやVIPなどの実況板をリアルタイム観戦可能。
  • 新着トースト通知をクリックすれば、最新レスへワンタップスクロール。
• NG機能（NG-ID / NGワード / 連鎖あぼーん）:
  • 各レスの「🚫 NG」ボタンからワンクリックでIDをNG登録。
  • NGワード・NG-IDによる自動フィルタリング。
  • あぼーん表示（「NG指定により非表示 [表示する]」）と透明あぼーん（完全消去）の切替に対応。
  • 連鎖あぼーん（NGレスに返信しているレスもまとめて非表示）に対応。
  • スレッドツールバーの「⚙️ NG設定」から登録内容の一覧確認・解除が可能。
• 安心の画像ぼかし（モザイク）＆ワンクリック解除:
  • 貼られた画像URLはサムネイル化され、初期状態ではぼかし（モザイク）がかかります。
  • サムネイルをクリックすることで、いつでも鮮明な画像表示に切り替えられます（不快・グロ画像対策）。
• VS Code テーマ＆フォント連動:
  • VS Code のエディタテーマ（Dark+, Light+, Monokai, Tokyo Night など）に自動で適応。

---

🚀 使い方

1. 板一覧を開く:

   • VS Code のアクティビティバー（左端）にある chcode アイコン をクリックします。
   • 「★ お気に入り板」「📌 ブックマーク」「🕒 閲覧履歴」「📁 すべての板」から目的の板・スレッドを選択します。

2. スレッドを選ぶ:

   • エディタ上部に開いたスレッド一覧から、読みたいスレッドをクリックします。

3. 上下分割で閲覧する:

   • エディタが上下 2 分割され、下部にスレッドのレス一覧が表示されます。
   • 上部のスレッド一覧をクリックすれば、次々とスレッドを切り替えて読めます。
   • スレッド内の「🔄 更新」や「⏱️ 自動更新」で最新レスをリアルタイム追跡できます。

---

⚙️ 設定項目 (Settings)

VS Code の設定画面（Ctrl+, または Cmd+,）から以下の項目をカスタマイズできます。

設定キー	型	デフォルト値	説明
chcode.fontFamily	string	'M PLUS 1', 'M PLUS 1p', sans-serif	スレッド表示に使用するフォントファミリー
chcode.fontSize	number	15	スレッド表示のフォントサイズ (px)
chcode.blurImages	boolean	true	画像に初期状態でぼかし（モザイク）を適用する
chcode.blurRadius	number	6	画像のぼかし強度 (px)
chcode.ngWords	string[]	[]	非表示またはあぼーん処理するNGワードリスト
chcode.ngIds	string[]	[]	非表示またはあぼーん処理するNG IDリスト
chcode.ngMode	string	'abone'	NGレスの表示方式（abone または transparent）
chcode.chainAbone	boolean	true	連鎖あぼーんの有効/無効
chcode.autoReloadInterval	number	0	スレッド自動更新間隔（秒。0でオフ）

---

🛠️ 開発・ビルド方法

前提条件

• Node.js (v18 以上推奨)
• Visual Studio Code

セットアップ

# 依存パッケージのインストール
npm install

# TypeScriptのコンパイル
npm run compile

# ファイル変更の自動監視コンパイル
npm run watch

デバッグ実行

1. VS Code で本リポジトリのルートフォルダを開きます。
2. F5 キーを押して「Extension Development Host」ウィンドウを起動します。
3. 起動したウィンドウのサイドバーから chcode アイコンを選択して動作確認を行います。

---

📄 ライセンス

MIT License