HTML Speed Viewer は、VS Code で HTML/Markdown を瞬時にプレビュー 、選択ブロックを相互ハイライトします。HTMLテンプレートなど内部にHTMLエンコードされたphpファイルもHTMLプレビューします。
MCPに対応したVoicePreview（音声読み上げ機能）も搭載。テキストの音声再生はもちろん。Cursor / GitHub Copilot / Claude CLIと組み合わせることで、エージェントのチャットから完了通知、要点、次のアクションを聞くことができます、開発時の流れを中断することなく作業に没頭できますまた、開発時の認知負荷低減にも役立ちます。
軽量＆シンプル
Webサーバー不要。VSCode内で完結するため、セットアップ無しで直ぐプレビュー開始
多彩な形式に対応
HTML、PHP（中のHTML部分を抽出して表示）、Markdownなど、さまざまな拡張子をサポート
.html, .htm, .php, .xhtml, .shtml, .xht, .ehtml, .md, などに対応
リアルタイムプレビュー エディタでファイルを編集すると、プレビューが即座に更新されます
要素の双方向同期（クロスハイライト）：
リンク無効化・グリッド表示
サイドメニューやコマンドパレットから簡単に「リンクを無効化」や「グリッド表示」を切り替え
複数プレビュー機能追加（ Plus ) 複数のプレビューを立ち上げる事が可能です。
音声再生：英語/日本語（ Plus )
MCP 対応- Cursor / GitHub Copilot / Codex CLI / Claude CLI などのエージェントから音声再生を制御（ Plus )
サポートされているファイルを開き、コマンドを実行すると、VS Code でライブプレビューが表示されます。コードとプレビューのクロスハイライト、リンクの有効化/無効化、レイアウトチェック用の****グリッドオーバーレイなどの機能も利用できます。**マルチプレビュー (Plus) では、**複数のプレビューウィンドウを開いて同時に比較できます。
| Extension | Behavior |
|---|---|
.html, .htm, .xhtml, .shtml, .xht, .ehtml |
クロスハイライト対応。 |
.php |
PHPブロックはプレビュー前に削除され、静的HTML(サーバー実行なし) として扱われます |
.md, .markdown |
クロスハイライトは無効です。 |
AIエージェントからの完了サマリー、ダイジェスト、次のアクション、またはテキストを読み上げます。長時間の作業における視覚的な負担を軽減し、AIアシスタンスを活用したコーディングの生産性を向上させます。MCPサポートにより、プロンプトを組み合わせたり、AIエージェントと連携したりすることで、より快適な開発エクスペリエンスを実現できます。
コマンドパレット（Ctrl+Shift+P または Cmd+Shift+P） で以下のコマンドを入力
HTML Speed Viewerのコマンドは基本機能と設定・操作機能の2つのカテゴリーに分かれています
| コマンド | 概要 |
|---|---|
| HTML Speed Viewer | プレビューを開きます |
| HTML Speed Viewer: Open Settings | 設定画面を開きます |
| HTML Speed Viewer: Open Another Viewer | 複数のプレビューを開きます |
| Voice Preview | VoicePreview(音声再生) パネルを開きます |
| コマンド | 概要 |
|---|---|
| HTML Speed Viewer: Toggle Grid | グリッド(要素枠)表示のON/OFFを切り替え |
| HTML Speed Viewer: Disable Links | プレビュー内のリンクを無効にします |
| HTML Speed Viewer: Enable Links | プレビュー内のリンクを有効にします |
本ページでは、MCP（Model Context Protocol）を使ってAIエージェントと連携し、HTML Speed ViewerのVoice Previewを操作して音声再生する方法を説明します。MCPサーバーを有効化すると、エージェントがhtml-speed-viewerのvoice_preview_sayを呼び出し、日本語/英語のテキストを即時に再生できます。
設定手順と具体例は以下を参照してください。
この動画の例では、AI エージェントのシステムプロンプトを改良し、タスク完了時に毎回、作業内容の要約を自動で音声再生するように設定しています。 音声入力機能と組み合わせることで、よりインタラクティブで直感的な開発体験を実現できます。
"html-speed-viewer": {
"command": "npx",
"args": [
"-y",
"html-speed-viewer-mcp@latest"
]
}
~/.codex/config.tomlに以下を追記してMCPを登録する
以下を追加[mcp_servers.html-speed-viewer]
command = "npx"
args = ["-y", "html-speed-viewer-mcp@latest"]
~/.codex/AGENTS.md等にに記述してくださいvoice_preview_say(text, language?): 音声生成開始（即時OKを返す）
voice_preview_clear(): 現在のジョブとUIをクリア
voice_preview_status(): 状態取得（JSON文字列）
注意
## 音声再生MCP
html-speed-viewer_voice_preview_say
- 説明: テキストを音声でプレビュー再生するTTSツール。
- 必須引数:
- text (string): 読み上げる文章
- language (enum): "japanese" | "english"
## ツール利用ルール
1) ユーザーが「読み上げる/音声で再生/TTS/プレビュー/音声にして/しゃべって/Say/Pronounce/Read aloud」等を求めたら、`html-speed-viewer`の`voice_preview_say`を選ぶ。
2) ユーザーが言語を明示したら、その言語を `language` に設定（"日本語"→"japanese"、"英語"→"english"）。
3) 言語が明示されていない場合はテキストから推定（ひらがな/カタカナ/漢字→"japanese"、英単語中心→"english"）。不明な場合は**1回だけ**確認。
4) エラーが返った場合は、**エラー内容のみ**を実行結果として返す（解説はしない）。
## 例
ユーザー: 「『準備できたら始めます』を日本語で再生して」
→ 呼び出し:
tool: `html-speed-viewer`の`voice_preview_say`
args: {"text":"準備できたら始めます","language":"japanese"}
ユーザー: "Say 'Good morning' in English."
→ 呼び出し:
tool: `html-speed-viewer`の`voice_preview_say`
args: {"text":"Good morning","language":"english"}
ユーザー: 「これを読んで: こんにちは！」
→ 言語推定= japanese
→ 呼び出し:
tool: `html-speed-viewer`の`voice_preview_say`
args: {"text":"こんにちは！","language":"japanese"}
チャットの中で、そのまま「再生してください」という趣旨の依頼をします。
先ほどのタスク概要を音声で教えて
[ ここにいつもどおり指示をする ]
最後に、実行概要を音声で再生してください
いつもHTML Speed Viewerをご利用いただき、誠にありがとうございます。 より良い拡張機能とするため、皆様からのフィードバックを心よりお待ちしております。 ご意見・ご感想、バグや改善点などございましたら、お気軽にお知らせください。
ご利用いただきありがとうございます！