概要

Clash HTML Generatorは、純粋なフロントエンド実装のみでClash向けのYAML設定ファイルを生成する単一HTMLファイル群からなるプロジェクトです。中国語・英語のUIを備え、NNR/Gostを利用した多ポート転送（Multi-port forwarding）設計に対応。ユーザーは複数のノードを“ショッピングカート”方式でまとめて組み立てられ、Cloudflare CDN向けに最適化されたIP選別や、DNS漏洩を抑える設定を内蔵している点が特徴です。サーバー側の処理を一切持たず、ブラウザ上で完結するためローカル保存やGitHub Pagesでの公開が容易で、セキュリティ監査やカスタマイズがしやすい構成になっています。

リポジトリの統計情報

• スター数: 3
• フォーク数: 0
• ウォッチャー数: 3
• コミット数: 21
• ファイル数: 4
• メインの言語: HTML

主な特徴

• 完全フロントエンド（単一HTMLファイル）でサーバレスに動作。オンライン/オフライン両対応。
• NNR/Gostの多ポート転送設計をサポートし、複数ポートやリレー構成の設定を生成可能。
• “ショッピングカート”式のノード一括組み立てで、複数ノードをまとめてYAML化してダウンロードできる。
• Cloudflare CDN向けのIP最適化やDNS漏洩対策を内蔵し、即利用可能な設定を出力。

技術的なポイント

このプロジェクトの技術的コアは「ブラウザだけでClash設定（YAML）を作り、ユーザー側で完結させる」ことにあります。単一ファイルのHTMLはHTML＋JavaScript＋CSSを同梱した形で、UIの入力フォーム、ノード解析ロジック、YAMLテンプレート生成、ファイルダウンロード処理を全てクライアント側で実行します。具体的には、以下の技術要素／設計方針が読み取れます。

• YAML生成のためのテンプレート処理：ユーザーが入力したノード情報やルール、プロキシグループ構成をJavaScriptで文字列テンプレート（もしくは簡易テンプレート関数）に埋め込み、Clash互換のYAMLテキストを動的に生成します。単純なテンプレート置換と配列操作で十分実現可能です。
• ファイル出力（ダウンロード）：生成したYAMLをBlobに変換し、HTMLのアンカータグやFile APIを用いてクライアント側で即ダウンロードさせる実装を採用していると推測されます。これによりユーザーはサーバーへデータを送信することなく設定ファイルを取得できます。
• NNR/Gost対応と多ポート設計：NNR（多ポートを中継する設計）やGostを利用する場合、複数のポート／リスン設定やルーティングルールを自動で生成する必要があります。UI上でポート・ノードのマッピングを設定し、生成テンプレートに反映させることで、クライアント単独で複雑な転送構成を表現しています。
• “カート”式バッチ処理：複数ノードの一括追加や編集を可能にする構造は、内部的にノードリスト（配列）を保持し、ユーザー操作で要素の追加・削除・編集を行い、まとめてYAMLへ変換するUXを提供します。これにより大量のノードを効率良く管理できます。
• Cloudflare CDN向けIP最適化：Cloudflare最寄りIPの選出や優先設定は、外部APIを叩かずともユーザー入力や内蔵IP候補リストから最適IPを選ぶか、簡易な接続テスト（fetchベースの疎通確認、速度測定）で優先度を決める設計が考えられます。フロントエンド実装だと、ブラウザの同一生成元制約やCORSに注意しつつ、軽量な選別ロジックを組み込みます。
• DNS漏洩対策：Clash用のYAMLにDNS設定やルールを明示的に追加することで、DNS経由での情報漏洩を抑える方針です。例えば、DNSを特定のプロバイダやローカルリゾルバ（127.0.0.1）に設定したり、ルールでDNSトラフィックをプロキシする記述を生成するなど、設定ファイルレベルでの対策を組み込んでいます。
• デプロイと監査性：単一HTMLはGitHub Pagesでそのまま公開でき、ソースがブラウザで見えるためセキュリティ面での監査が容易です。サーバレス設計は運用コストと攻撃面を小さくしますが、生成ロジックに秘密情報を含めない点は運用上の前提です。
• 多言語対応：READMEに中国語／英語のリンクがある通り、UIや説明文の多言語対応をHTML内に組み込んで切替える設計が採られていると考えられます。静的文字列の切替や言語別テンプレートの読み込みで実装可能です。

注意点としては、純クライアント実装は利便性が高い一方、ブラウザ環境依存（CORS、ネットワーク測定の精度、ローカルファイルの扱い）やユーザーの誤設定によるセキュリティリスク（個人情報や認証情報の取り扱い）を伴います。実運用では生成されたYAMLを必ずレビューし、使用するClashクライアントのバージョンや機能互換を確認することが重要です。

プロジェクトの構成

主要なファイルとディレクトリ：

• LICENSE: file
• README.md: file
• 汤盛碗clash generator.html: file
• 汤盛碗的clash一键配置生成器.html: file

まとめ

純前端で手軽にClash設定を組み立てられる実用的なツール。監査性と配布の容易さが魅力。

リポジトリ情報：

• 名前: clash-html-generator
• 説明: 纯前端、无后端的 yaml文件配置生成器 (HTML单文件)。支持 NNR/Gost 多端口转发设计，支持“购物车”式批量组装，支持 Cloudflare CDN 优选 IP，内置防 DNS 泄露，下载即用。
• スター数: 3
• 言語: HTML
• URL: https://github.com/wangtang2778/clash-html-generator
• オーナー: wangtang2778
• アバター: https://avatars.githubusercontent.com/u/250667869?v=4

READMEの抜粋：

⚡ Clash HTML Generator